/*
 * 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 {
    /* Blue Scale - Brand Primary */
    --color-blue-50: #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-200: #bedbff;
    --color-blue-300: #8ec5ff;
    --color-blue-400: #51a2ff;
    --color-blue-500: #2b7fff;
    --color-blue-600: #155dfc;
    --color-blue-700: #1447e6;
    --color-blue-800: #193cb8;
    --color-blue-900: #1c398e;
    --color-blue-950: #162456;
    --color-blue-brand: #12498a;
    --color-blue-link: #266abd;

    /* Teal Scale - Brand Secondary/Tertiary */
    --color-teal-50: #f0fcfa;
    --color-teal-100: #e0f7f4;
    --color-teal-200: #c2f0e9;
    --color-teal-300: #99eedb;
    --color-teal-400: #4de4c3;
    --color-teal-500: #00d4a6;
    --color-teal-600: #09a0b2;
    --color-teal-700: #179ac5;
    --color-teal-800: #266fc6;

    /* Green Scale - Success */
    --color-green-50: #f0fdf4;
    --color-green-100: #dcfce7;
    --color-green-200: #b9f8cf;
    --color-green-300: #7bf1a8;
    --color-green-400: #09e477;
    --color-green-500: #00c950;
    --color-green-600: #00a63e;
    --color-green-700: #008236;
    --color-green-800: #016630;
    --color-green-900: #0d542b;
    --color-green-950: #032e15;

    /* Red Scale - Error/Alert */
    --color-red-50: #fef2f2;
    --color-red-100: #ffe2e2;
    --color-red-200: #ffc9c9;
    --color-red-300: #ffa2a2;
    --color-red-400: #ff6467;
    --color-red-500: #fb2c36;
    --color-red-600: #e7000b;
    --color-red-700: #c10007;
    --color-red-800: #9f0712;
    --color-red-900: #82181a;
    --color-red-950: #460809;
    --color-red-legacy: #b00020;

    /* Yellow Scale - Warning */
    --color-yellow-50: #fefce8;
    --color-yellow-100: #fef9c2;
    --color-yellow-200: #fff085;
    --color-yellow-300: #ffdf20;
    --color-yellow-400: #fdc700;
    --color-yellow-500: #f0b100;
    --color-yellow-600: #d08700;
    --color-yellow-700: #a65f00;
    --color-yellow-800: #894b00;
    --color-yellow-900: #733e0a;
    --color-yellow-950: #432004;

    /* Orange Scale - Utility */
    --color-orange-50: #fff7ed;
    --color-orange-100: #ffedd4;
    --color-orange-200: #ffd6a8;
    --color-orange-300: #ffb86a;
    --color-orange-400: #ff8904;
    --color-orange-500: #ff6900;
    --color-orange-600: #f54900;
    --color-orange-700: #ca3500;
    --color-orange-800: #9f2d00;
    --color-orange-900: #7e2a0c;
    --color-orange-950: #441306;

    /* Purple Scale - Utility */
    --color-purple-50: #faf5ff;
    --color-purple-100: #f3e8ff;
    --color-purple-200: #e9d4ff;
    --color-purple-300: #dab2ff;
    --color-purple-400: #c27aff;
    --color-purple-500: #ad46ff;
    --color-purple-600: #9810fa;
    --color-purple-700: #8200db;
    --color-purple-800: #6e11b0;
    --color-purple-900: #59168b;
    --color-purple-950: #3c0366;

    /* Gray Scale - Neutral */
    --color-gray-1: #f1f4f8;
    --color-gray-5: #f9f9fb;
    --color-gray-10: #f2f4f8;
    --color-gray-20: #dfe3eb;
    --color-gray-30: #ced2de;
    --color-gray-40: #acb3c2;
    --color-gray-50: #8e97ae;
    --color-gray-60: #67718e;
    --color-gray-70: #4e556a;
    --color-gray-80: #333947;
    --color-gray-90: #212531;
    --color-gray-100: #181c25;
    --color-gray-slate: #393f45;
    --color-gray-cool: #e5ecf1;
    --color-gray-body: #494949;
    --color-charcoal-brand: #181e24;
    --color-mint-brand: #4de6c0;
    --color-gray-secondary: #b8c8dc;
    --color-blue: #416da1;
    --color-darker: #D0DBE8;
    --color-lightblue: #5280b5;
    --light-color:#f8f8f8;
    --light-color-black:#131313;
    --light-color-grey:#dadada;



    /* Base Colors */
    --color-white: #fff;
    --color-black: #000;

    /* Primary Intent */
    --color-primary-50: var(--color-blue-50);
    --color-primary-100: var(--color-blue-100);
    --color-primary-200: var(--color-blue-200);
    --color-primary-300: var(--color-blue-300);
    --color-primary-500: var(--color-blue-brand);
    --color-primary-600: var(--color-blue-600);
    --color-primary-700: var(--color-blue-700);
    --color-primary-800: var(--color-blue-800);

    /* Secondary Intent */
    --color-secondary-50: var(--color-teal-50);
    --color-secondary-100: var(--color-teal-100);
    --color-secondary-300: var(--color-teal-300);
    --color-secondary-500: var(--color-teal-500);
    --color-secondary-600: var(--color-teal-600);
    --color-secondary-700: var(--color-teal-700);

    /* Alert Intent */
    --color-alert-50: var(--color-red-50);
    --color-alert-100: var(--color-red-100);
    --color-alert-200: var(--color-red-200);
    --color-alert-500: var(--color-red-500);
    --color-alert-600: var(--color-red-600);
    --color-alert-700: var(--color-red-700);

    /* Success Intent */
    --color-success-50: var(--color-green-50);
    --color-success-100: var(--color-green-100);
    --color-success-200: var(--color-green-200);
    --color-success-500: var(--color-green-500);
    --color-success-700: var(--color-green-700);

    /* Warning Intent */
    --color-warning-50: var(--color-yellow-50);
    --color-warning-100: var(--color-yellow-100);
    --color-warning-200: var(--color-yellow-200);
    --color-warning-500: var(--color-yellow-500);
    --color-warning-700: var(--color-yellow-700);

    /* Info Intent */
    --color-info-50: var(--color-blue-50);
    --color-info-100: var(--color-blue-100);
    --color-info-200: var(--color-blue-200);
    --color-info-500: var(--color-blue-500);
    --color-info-600: var(--color-blue-600);

    /* Neutral Intent */
    --color-neutral-5: var(--color-gray-5);
    --color-neutral-10: var(--color-gray-10);
    --color-neutral-20: var(--color-gray-20);
    --color-neutral-30: var(--color-gray-30);
    --color-neutral-40: var(--color-gray-40);
    --color-neutral-50: var(--color-gray-50);
    --color-neutral-60: var(--color-gray-60);
    --color-neutral-70: var(--color-gray-70);
    --color-neutral-80: var(--color-gray-80);
    --color-neutral-90: var(--color-gray-90);
    --color-neutral-100: var(--color-gray-100);

    /* Border Tokens */
    --border-action: var(--color-primary-500);
    --border-action-hover: var(--color-primary-700);
    --border-disabled: var(--color-neutral-40);
    --border-error: var(--color-alert-700);
    --border-focus: var(--color-primary-200);
    --border-primary: var(--color-neutral-10);
    --border-secondary: var(--color-neutral-20);
    --border-tertiary: var(--color-neutral-30);
    --border-success: var(--color-success-700);
    --border-warning: var(--color-warning-700);

    /* Background Tokens (Surface in figma) */
    --bg-page: var(--color-white);
    --bg-primary: var(--color-neutral-30);
    --bg-secondary: var(--color-neutral-10);
    --bg-tertiary: var(--color-neutral-5);
    --bg-action: var(--color-primary-500);
    --bg-action-hover: var(--color-primary-700);
    --bg-action-light: var(--color-primary-200);
    --bg-disabled: var(--color-neutral-40);
    --bg-error: var(--color-alert-100);
    --bg-success: var(--color-success-100);
    --bg-warning: var(--color-warning-100);
    --bg-info: var(--color-info-100);

    /* Text Tokens */
    --text-primary: var(--color-neutral-100);
    --text-secondary: var(--color-neutral-70);
    --text-tertiary: var(--color-neutral-60);
    --text-body: var(--color-gray-body);
    --text-disabled: var(--color-neutral-40);
    --text-link: var(--color-blue-link);
    --text-action: var(--color-primary-500);
    --text-action-hover: var(--color-primary-700);
    --text-on-action: var(--color-white);
    --text-on-disabled: var(--color-neutral-60);
    --text-error: var(--color-alert-700);
    --text-success: var(--color-success-700);
    --text-warning: var(--color-warning-700);

    /* Icon Tokens */
    --icon-primary: var(--color-neutral-100);
    --icon-secondary: var(--color-neutral-70);
    --icon-tertiary: var(--color-neutral-60);
    --icon-action: var(--color-primary-500);
    --icon-action-hover: var(--color-primary-700);
    --icon-disabled: var(--color-neutral-40);
    --icon-on-action: var(--color-white);
    --icon-on-disabled: var(--color-neutral-60);
    --icon-error: var(--color-alert-700);
    --icon-success: var(--color-success-700);
    --icon-warning: var(--color-warning-700);

    /* LEGACY ALIASES - For backward compatibility (to be migrated) */
    --brand-primary: var(--color-primary-500);
    --brand-secondary: var(--color-secondary-500);
    --brand-tertiary: var(--color-teal-600);
    --brand-white: var(--color-white);
    --brand-black: var(--color-black);
    --brand-slate-gray: var(--color-gray-slate);
    --brand-charcoal: var(--color-neutral-100);
    --brand-cool-gray: var(--color-gray-cool);

    /* screen sizes */
    --screen-size-tablet-600: 600px;
    --screen-size-desktop-900: 900px;
    --screen-size-desktop-1200: 1200px;
    --screen-size-desktop-1440: 1440px;
    --screen-size-desktop-1920: 1920px;
    --screen-size-desktop-2560: 2560px;

    /* spacing */
    --size-0: 0rem;
    --size-2: 0.125rem;
    --size-4: 0.25rem;
    --size-6: 0.375rem;
    --size-8: 0.5rem;
    --size-10: 0.625rem;
    --size-12: 0.75rem;
    --size-12-8: 0.8rem;
    --size-14: 0.875rem;
    --size-16: 1rem;
    --size-18: 1.125rem;
    --size-20: 1.25rem;
    --size-22: 1.375rem;
    --size-24: 1.5rem;
    --size-28: 1.75rem;
    --size-29: 1.81rem;
    --size-32: 2rem;
    --size-34: 2.125rem;
    --size-36: 2.25rem;
    --size-40: 2.5rem;
    --size-44: 2.75rem;
    --size-45: 2.81rem;
    --size-48: 3rem;
    --size-52: 3.25rem;
    --size-56: 3.5rem;
    --size-64: 4rem;
    --size-72: 4.5rem;
    --size-80: 5rem;
    --size-107-margin: 6.6875rem;

    /* string */
    --font-name-body: 'Lato';
    --font-name-title: 'Lato';
    --font-weight-black: 900;
    --font-weight-bold: bold;
    --font-weight-light: 300;
    --font-weight-regular: normal;
    --font-weight-semibold: 600;

    /* Gradients */
    --gradient1-eplus:
        linear-gradient(135deg,
            rgb(255 255 255 / 0%) 55.63%,
            rgb(0 212 166 / 20%) 100%),
        var(--color-white);
    --gradient2-eplus: linear-gradient(100deg,
            var(--color-blue-brand) 6.55%,
            var(--color-teal-600) 92.05%);
    --gradient3-eplus: linear-gradient(100deg,
            var(--color-teal-300) 6.55%,
            var(--color-teal-500) 92.05%);

    --gradient4-eplus: linear-gradient(143deg,
            var(--color-white) 76.77%,
            rgba(0, 212, 166, 0.20) 100%),
        var(--color-gray-1);

    /* Overlay Gradients - Default */
    --grad-direction: to top;
    --asset-grad-direction: to top;
    --grad-opacity: rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%;
    --asset-grad-opacity: rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%;
    --grad-enabled: none;
    --asset-grad-enabled: none;

    /* Icon Sizes */
    --icon-size-small: 24px;
    --icon-size-medium: 32px;
    --icon-size-large: 48px;

    /* Inverted borders for transparant background for buttons */
    --card-cutout-radius: 8px;
    --card-cutout-size: 8px;
    --card-cutout-offset-x: 13px;
    --card-cutout-offset-y: 13px;

    /* Mobile */
    --screen-size-min: var(--screen-size-mobile-360);
    --container-size: calc(100% - var(--size-32));
    --corner-radius-cr-1: 0.125rem;
    --corner-radius-cr-2: var(--size-4);
    --corner-radius-cr-3: 0.375rem;
    --corner-radius-cr-4: var(--size-8);
    --corner-radius-cr-5: var(--size-16);
    --corner-radius-cr-6: var(--size-24);
    --bg-section-gap: var(--size-32);
    --jumper-gap: var(--size-40);
    --section-gap: var(--size-48);
    --grid-system-columns: var(--size-4);
    --grid-system-gutter: var(--size-16);
    --grid-system-margin: var(--size-16);
    --h4-line-height: 1.1818;
    --h3-line-height: 1.2083;
    --h2-line-height: 1.2143;
    --h1-line-height: 1.2;
    --scale-h4: var(--size-22);
    --scale-h3: var(--size-24);
    --scale-h2: var(--size-28);
    --scale-h1: var(--size-40);
    --label-line-height: 1.5;
    --paragraph-small-line-height: 1.5;
    --paragraph-line-height: 1.5;
    --paragraph-xtra-large-line-height: 1.2;
    --paragraph-large-line-height: 1.5;
    --display1-line-height-2: 1;
    --scale-label: var(--size-12);
    --scale-paragraph-small: var(--size-14);
    --scale-paragraph: var(--size-16);
    --scale-paragraph-large: var(--size-18);
    --scale-paragraph-xtra-large: var(--size-20);
    --scale-display1: var(--size-64);

    /* nav heights */
    --nav-height: 56px;
    --breadcrumbs-height: 34px;
    --header-height: var(--nav-height);
    --header-bottom-margin: 120px;
    /* Search Results Variables */
    --search-input-width: 712px;
    --search-input-height: 48px;
    --search-header-font-size: 56px;
    --search-header-line-height: 67px;
    --pagination-button-size: 40px;
    --pagination-button-size-mobile: 36px;
    --pagination-arrow-size: 20px;
    --pagination-arrow-size-mobile: 18px;
    --suggestion-highlight-bg: #FFE066;
    --filter-width: 270px;
    --search-results-max-height: 300px;
    --search-results-max-height-mobile: 250px;
    --filter-modal-z-index: 1000;
    --auto-suggest-z-index: 1000;
    --pagination-button-height: 28px;
    --pagination-ellipsis-padding: 8px;
    --pagination-ellipsis-padding-mobile: 4px;
    --pagination-numbers-margin: 16px;
    --pagination-numbers-margin-mobile: 8px;
    --pagination-numbers-gap: 16px;
    --pagination-numbers-gap-mobile: 2px;
    --card-border-radius-bottom: 8px;
    --modal-overlay-bg: rgba(0, 0, 0, 0.5);
    --box-shadow-light: 0 4px 8px rgba(0, 0, 0, 0.1);
    --transition-duration: 0.2s;
    --transition-duration-long: 0.3s;
    --opacity-disabled: 0.4;
    --opacity-hidden: 0;
    --opacity-visible: 1;
    --transform-none: none;
    --transform-rotate-180: rotate(180deg);
    --transform-rotate-minus-90: rotate(-90deg);
    --outline-width: 4px;
    --outline-color-white: var(--color-white);
}

/* Tablet vertical */
@media (width >=600px) {
    :root {
        --bg-section-gap: var(--size-56);
        --section-gap: var(--size-40);
        --jumper-gap: var(--size-48);
        --screen-size-min: var(--screen-size-tablet-600);
        --container-size: calc(100% - var(--size-64));
        --grid-system-columns: var(--size-8);
        --grid-system-gutter: var(--size-16);
        --grid-system-margin: var(--size-32);
        --h4-line-height: 1.2083;
        --h3-line-height: 1.2143;
        --h2-line-height: 1.1944;
        --h1-line-height: 1.2045;
        --scale-h4: var(--size-24);
        --scale-h3: var(--size-28);
        --scale-h2: var(--size-36);
        --scale-h1: var(--size-44);
        --paragraph-xtra-large-line-height: 1.1818;
        --display1-line-height-2: 1;
        --scale-paragraph-xtra-large: var(--size-22);
        --scale-display1: var(--size-72);
    }
}

/* Exception for template side nav split */
@media (width >= 768px) {
    :root {
        --template-column-gap: 2.625rem;
    }
}

/* Desktop */
@media (width >=900px) {
    :root {
        --bg-section-gap: var(--size-72);
        --section-gap: var(--size-48);
        --jumper-gap: var(--size-56);
        --h4-line-height: 1.2143;
        --h3-line-height: 1.1875;
        --h2-line-height: 1.2;
        --h1-line-height: 1.1964;
        --scale-h4: var(--size-28);
        --scale-h3: var(--size-32);
        --scale-h2: var(--size-40);
        --scale-h1: var(--size-56);
        --paragraph-xtra-large-line-height: 1.2083;
        --display1-line-height-2: 1;
        --scale-paragraph-xtra-large: var(--size-24);
        --scale-display1: var(--size-80);
        --screen-size-min: var(--screen-size-desktop-900);
        --container-size: calc(100% - 144px);
        --grid-system-columns: var(--size-12);
        --grid-system-gutter: var(--size-24);
        --grid-system-margin: var(--size-64);
    }
}

/* Desktop large */
@media (width >=1200px) {
    :root {
        --container-size: 1152px;
        --screen-size-min: var(--screen-size-desktop-1200);
        --grid-system-margin: var(--size-107-margin);
        /* 107px */
    }
}

/* Desktop extra large */
@media (width >=1440px) {
    :root {
        --container-size: 1320px;
    }
}

/* fallback fonts */
@font-face {
    font-family: Lato-fallback;
    size-adjust: 99.529%;
    src: local('Arial');
}

*,
*::before,
*::after {
    box-sizing: border-box;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
}

html {
    scroll-behavior: smooth;
}

body {
    display: none;
    margin: 0;
    background-color: var(--bg-page);
    color: var(--text-body);
    font-family: var(--font-name-body);
    font-size: var(--scale-paragraph);
    line-height: var(--paragraph-line-height);
}

body.appear {
    display: block;
}

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

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

h1,
h2,
h3,
h4 {
    font-family: var(--font-name-title, Lato);
    font-style: normal;
    font-weight: 600;
    margin-bottom: var(--size-12);
    margin-top: var(--jumper-gap);
    color: var(--brand-slate-gray, #393f45);
}

h1,
h2 {
    text-align: left;
}

h1 {
    font-size: var(--scale-h1, 56px);
    line-height: var(--h1-line-height, 1.1964);
}

h2 {
    font-size: var(--scale-h2, 40px);
    line-height: var(--h2-line-height, 1.2);
}

h3 {
    font-size: var(--scale-h3, 32px);
    line-height: var(--h3-line-height, 1.1875);
}

h4 {
    font-size: var(--scale-h4, 28px);
    line-height: var(--h4-line-height, 1.2143);
}

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

p {
    font-family: var(--font-name-body, Lato);
    font-size: var(--scale-paragraph, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--paragraph-line-height, 1.5);
}

code,
pre {
    font-size: var(--scale-paragraph-small);
}

pre {
    padding: var(--size-16);
    border-radius: var(--corner-radius-cr-4);
    background-color: var(--bg-primary);
    overflow-x: auto;
    white-space: pre;
}

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

sub,
sup {
    font-size: 0.5em !important;
    line-height: 0;
}

sup {
    vertical-align: super;
}

sub {
    vertical-align: sub;
}

/* Base link styles */
a:any-link {
    color: var(--text-link);
    text-decoration: none;
    word-break: break-word;
}

a:hover {
    /* color: var(--text-link); */
    text-decoration: underline;
}

/* Base button styles */
a.button:any-link,
button {
    box-sizing: border-box;
    display: inline-block;
    max-width: 100%;
    margin: var(--size-12) 0;
    border: 2px solid transparent;
    border-radius: var(--corner-radius-cr-6);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-name-body);
    font-size: var(--size-16);
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    background-color: var(--color-secondary-500);
    color: var(--color-charcoal-brand);
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.2s ease;
}

a.button:hover,
button:hover {
    background-color: var(--color-teal-300);
    color: var(--color-blue-brand);
    box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
}

a.button:focus,
button:focus {
    outline: 2px solid #12498A;
    outline-offset: -2px;
    color: var(--color-blue-brand);
    background-color: #99EEDB;
    transition: none;
}

a.button:active,
button:active {
    transform: translateY(0);
}

/* Disabled state */
button:disabled,
button:disabled:hover,
a.button.disabled,
a.button.disabled:hover {
    background-color: var(--bg-disabled);
    color: #88A4C5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.6;
}

/* When a text is both bold and italic */
a.button.text-link {
    color: #266ABD;
    font-style: normal;
    font-weight: normal;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    line-height: 1.5;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
}

a.button.text-link:hover {
    text-decoration-color: #00D4A6;
    background-color: transparent;
    box-shadow: none;
    color: #266ABD;
}

a.button.text-link:focus {
    outline: 2px solid var(--color-blue-brand);
    outline-offset: 2px;
    background-color: transparent;
    color: #266ABD;
    transition: none;
}

a.button.text-link.disabled,
a.button.text-link:disabled {
    color: var(--text-disabled);
    text-decoration-color: var(--text-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Author mode: Style link as text link when wrapped in strong > em inside button-container */
p.button-container[data-richtext-component] > strong > a.button.primary:has(> em) {
    color: #266ABD;
    font-style: normal;
    font-weight: normal;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    line-height: 1.5;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

p.button-container[data-richtext-component] > strong > a.button.primary:has(> em):hover {
    text-decoration-color: #00D4A6;
    background-color: transparent;
    box-shadow: none;
    color: #266ABD;
}

p.button-container[data-richtext-component] > strong > a.button.primary > em {
    font-style: normal;
}

main .default-content-wrapper picture img {
    border-radius: var(--corner-radius-cr-2);
}

.callout .button-container a {
    margin: 0;
}

.callout .button-container a,
main .default-content-wrapper .button-container .button:not(.primary):not(.secondary) {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  background: none;
  color: var(--color-blue-link);
  padding: var(--size-8) 0 0 0;
  font-weight: var(--font-weight-semibold);
  gap: var(--size-4);
  border: none;
  text-decoration: none;
}

.callout .button-container ::after,
main .default-content-wrapper .button-container .button:not(.primary):not(.secondary)::after {
  content: "";
  width: 24px;
  height: 24px;
  background: url("./../icons/arrow-blue.svg") no-repeat center / contain;
  flex-shrink: 0;
}

.callout .button-container a::before,
main .default-content-wrapper .button-container .button:not(.primary):not(.secondary)::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: var(--size-2);
  width: calc(100% - 24px);
  background: #00D4A6;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.callout .button-container a:hover,
main .default-content-wrapper .button-container .button:not(.primary):not(.secondary):hover {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

main .default-content-wrapper .button-container .button:not(.primary):not(.secondary):focus {
  border-radius: 0;
  box-shadow: none;
}

.callout .button-container a:hover::before,
main .default-content-wrapper .button-container .button:not(.primary):not(.secondary):hover::before {
  transform: scaleX(1);
}

/* DARK background → White button */
main .section[data-text-color="section-text-light"] .default-content-wrapper .button-container a.button:not(.primary):not(.secondary) {
  color: var(--color-white);
}

main .section[data-text-color="section-text-light"] .default-content-wrapper .button-container a.button:not(.primary):not(.secondary)::after {
  filter: brightness(0) invert(1);
}


/* Even on dark mode default and primary color should be same (exclude columns block) */
main .section[data-text-color='section-text-light'] a.button:not(.columns-wrapper *),
main .section[data-text-color='section-text-light'] button:not(.columns-wrapper *) {
  background-color: var(--color-secondary-500);
  color: var(--color-charcoal-brand);
}

/* hover */
main .section[data-text-color='section-text-light'] a.button:hover:not(.columns-wrapper *),
main .section[data-text-color='section-text-light'] button:hover:not(.columns-wrapper *) {
  background-color: var(--color-teal-300);
  color: var(--color-blue-brand);
}

/* Secondary button - outlined style */
a.button.secondary,
button.secondary {
    background-color: var(--color-teal-50);
    border: 2px solid var(--color-secondary-500);
    color: var(--color-blue-brand);
}

a.button.secondary:hover,
button.secondary:hover {
  border-radius: var(--corner-radius-cr-6);
  border: 2px solid var(--color-secondary-300);
  background: var(--color-white);
}

a.button.secondary:focus,
button.secondary:focus {
    outline: 2px solid #12498A;
    outline-offset: -2px;
    background: var(--color-teal-50);
    transition: none;
}

a.button.secondary.disabled,
button.secondary:disabled {
    border-color: var(--border-disabled);
    color: #88A4C5;
    background-color: transparent;
}

/* Secondary dark - filled dark background */
main .section[data-text-color='section-text-light'] a.button.secondary,
main .section[data-text-color='section-text-light'] button.secondary {
    background-color: transparent;
    color: var(--color-gray-cool);
    border-color: var(--color-teal-500);
}

main .section[data-text-color='section-text-light'] a.button.secondary:hover,
main .section[data-text-color='section-text-light'] button.secondary:hover {
  border: 2px solid var(--color-teal-300);
  background: var(--color-charcoal-brand);
}

main .section[data-text-color='section-text-light'] a.button.secondary:focus,
main .section[data-text-color='section-text-light'] button.secondary:focus {
    outline: 2px solid var(--color-teal-300);
    outline-offset: -2px;
    color: var(--color-teal-300);
    background: var(--color-charcoal-brand);
    transition: none;
}

/* Tertiary button - outlined neutral */
a.button.tertiary,
button.tertiary {
    background-color: transparent;
    border: 2px solid var(--border-secondary);
    color: var(--text-primary);
}

a.button.tertiary:hover,
button.tertiary:hover {
    background-color: var(--bg-secondary);
    border-color: var(--border-tertiary);
    box-shadow: none;
}

/* Small button size */
a.button.small,
button.small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Large button size */
a.button.large,
button.large {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* ============================================
   SECTION-LEVEL BUTTON STYLE VARIATIONS
   Applied via data-button-style attribute on section
   Only targets a.button to avoid affecting button elements in blocks
   All variations include: default, hover, focus, disabled states
   ============================================ */

/* Secondary Outline - Applied at section level */
main .section[data-button-style='btn-secondary-outline'] a.button {
    background-color: var(--color-teal-50);
    border: 2px solid var(--color-secondary-500);
    color: var(--color-blue-brand);
}

main .section[data-button-style='btn-secondary-outline'] a.button:hover {
    border-radius: var(--corner-radius-cr-6);
    border: 2px solid var(--color-secondary-300);
    background: var(--color-white);
    box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
}

main .section[data-button-style='btn-secondary-outline'] a.button:focus {
    outline: 2px solid var(--color-blue-brand);
    outline-offset: -2px;
    background: var(--color-teal-50);
    transition: none;
}

main .section[data-button-style='btn-secondary-outline'] a.button.disabled,
main .section[data-button-style='btn-secondary-outline'] a.button:disabled {
    border-color: var(--border-disabled);
    color: #88A4C5;
    background-color: transparent;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.6;
}

/* Secondary Filled (Dark) - Dark charcoal background with white text */
main .section[data-button-style='btn-secondary-filled'] a.button {
    border-radius: 24px;
    border: 2px solid #00D4A6;
    background: transparent;
    color: #E5ECF1;
}

main .section[data-button-style='btn-secondary-filled'] a.button:hover {
    border-radius: 24px;
    border: 2px solid #99EEDB;
    background: #181E24;
    box-shadow: 0 4px 8px rgb(0 0 0 / 15%);
    color: #FFF;
}

main .section[data-button-style='btn-secondary-filled'] a.button:focus {
    outline: 2px solid var(--color-blue-brand);
    outline-offset: 2px;
    background-color: var(--color-charcoal-brand);
    border-color: var(--color-charcoal-brand);
    color: var(--color-white);
    transition: none;
}

main .section[data-button-style='btn-secondary-filled'] a.button.disabled,
main .section[data-button-style='btn-secondary-filled'] a.button:disabled {
    background-color: var(--color-gray-50);
    border-color: var(--color-gray-50);
    color: var(--color-gray-30);
    cursor: not-allowed;
    box-shadow: none;
}

/* Text Link - Simple underlined text */
main .section[data-button-style='btn-text-link'] a.button {
    color: #266ABD;
    font-style: normal;
    font-weight: normal;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    line-height: 1.5;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
}

main .section[data-button-style='btn-text-link'] a.button:hover {
    text-decoration-color: var(--color-secondary-500);
    background-color: transparent;
    box-shadow: none;
    color: #266ABD;
}

main .section[data-button-style='btn-text-link'] a.button:focus {
    outline: 2px solid var(--color-blue-brand);
    outline-offset: 2px;
    background-color: transparent;
    color: #266ABD;
    transition: none;
}

main .section[data-button-style='btn-text-link'] a.button.disabled,
main .section[data-button-style='btn-text-link'] a.button:disabled {
    color: var(--text-disabled);
    text-decoration-color: var(--text-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Link Button - Text with arrow icon and animated underline on hover */
main .section[data-button-style='btn-link-button'] a.button {
    display: inline-flex;
    align-items: center;
    gap: var(--size-8);
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    color: var(--text-link);
    font-weight: 400;
    text-decoration: none;
    box-shadow: none;
    position: relative;
}

main .section[data-button-style='btn-link-button'] a.button::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: var(--size-18);
    height: var(--size-18);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    background-color: var(--text-link);
}

main .section[data-button-style='btn-link-button'] a.button::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: var(--size-2);
    width: calc(100% - var(--size-18) - var(--size-8));
    background: var(--color-mint-brand);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

main .section[data-button-style='btn-link-button'] a.button:hover {
    background-color: transparent;
    color: var(--text-link);
    box-shadow: none;
}

main .section[data-button-style='btn-link-button'] a.button:hover::before {
    transform: scaleX(1);
}

main .section[data-button-style='btn-link-button'] a.button:focus {
    outline: 2px solid var(--color-blue-brand);
    outline-offset: 4px;
    background-color: transparent;
    color: var(--text-link);
    transition: none;
}

main .section[data-button-style='btn-link-button'] a.button.disabled,
main .section[data-button-style='btn-link-button'] a.button:disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

main .section[data-button-style='btn-link-button'] a.button.disabled::after,
main .section[data-button-style='btn-link-button'] a.button:disabled::after {
    background-color: var(--text-disabled);
}

main .section[data-button-style='btn-link-button'] a.button.disabled::before,
main .section[data-button-style='btn-link-button'] a.button:disabled::before {
    display: none;
}

/* Link Button Dark - For use on dark backgrounds */
main .section[data-button-style='btn-link-button-dark'] a.button {
    display: inline-flex;
    align-items: center;
    gap: var(--size-8);
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    color: var(--color-white);
    font-weight: 400;
    text-decoration: none;
    box-shadow: none;
    position: relative;
}

main .section[data-button-style='btn-link-button-dark'] a.button::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: var(--size-18);
    height: var(--size-18);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    background-color: var(--color-white);
}

main .section[data-button-style='btn-link-button-dark'] a.button::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: var(--size-2);
    width: calc(100% - var(--size-18) - var(--size-8));
    background: var(--color-mint-brand);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

main .section[data-button-style='btn-link-button-dark'] a.button:hover {
    background-color: transparent;
    color: var(--color-white);
    box-shadow: none;
}

main .section[data-button-style='btn-link-button-dark'] a.button:hover::before {
    transform: scaleX(1);
}

main .section[data-button-style='btn-link-button-dark'] a.button:focus {
    outline: 2px solid var(--color-mint-brand);
    outline-offset: 4px;
    background-color: transparent;
    color: var(--color-white);
    transition: none;
}

main .section[data-button-style='btn-link-button-dark'] a.button.disabled,
main .section[data-button-style='btn-link-button-dark'] a.button:disabled {
    color: var(--color-gray-50);
    cursor: not-allowed;
    opacity: 0.6;
}

main .section[data-button-style='btn-link-button-dark'] a.button.disabled::after,
main .section[data-button-style='btn-link-button-dark'] a.button:disabled::after {
    background-color: var(--color-gray-50);
}

main .section[data-button-style='btn-link-button-dark'] a.button.disabled::before,
main .section[data-button-style='btn-link-button-dark'] a.button:disabled::before {
    display: none;
}

/* ============================================
   END SECTION-LEVEL BUTTON STYLE VARIATIONS
   ============================================ */

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

.icon {
    display: inline-block;
    height: var(--icon-size-small);
    width: var(--icon-size-small);
    color: var(--icon-primary);
}

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

/* Icon States */
.icon:hover {
    color: var(--icon-action-hover);
}

.icon:focus {
    color: var(--icon-action);
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.icon.disabled {
    color: var(--icon-disabled);
    cursor: not-allowed;
}

.icon.active {
    color: var(--icon-action);
}

main {
    margin-top: var(--header-bottom-margin);
}

main:has(.section.hero-container),
main:has(.section.article-hero-container) {
    margin-top: 0;
}

body:has(.alert-banner-wrapper:not(.edit-mode)) main {
    margin-top: calc(var(--header-bottom-margin) + 106px);
}

body:has(.alert-banner-wrapper:not(.edit-mode)) main:has(.section.hero-container),
body:has(.alert-banner-wrapper:not(.edit-mode)) main:has(.section.article-hero-container) {
    margin-top: 106px;
}

@media (width >= 600px) {
    body:has(.alert-banner-wrapper:not(.edit-mode)) main {
        margin-top: calc(var(--header-bottom-margin) + 96px);
    }

    body:has(.alert-banner-wrapper:not(.edit-mode)) main:has(.section.hero-container),
    body:has(.alert-banner-wrapper:not(.edit-mode)) main:has(.section.article-hero-container) {
        margin-top: 96px;
    }
}

/* Desktop (900px+): alert banner is 66px */
@media (width >= 900px) {
    body:has(.alert-banner-wrapper:not(.edit-mode)) main {
        margin-top: calc(var(--header-bottom-margin) + 66px);
    }

    body:has(.alert-banner-wrapper:not(.edit-mode)) main:has(.section.hero-container),
    body:has(.alert-banner-wrapper:not(.edit-mode)) main:has(.section.article-hero-container) {
        margin-top: 66px;
    }
}

/* sections */
main > .section:not(.hero-container, .tabs-container) {
    padding: var(--bg-section-gap) 0;
}

main > .section:not(.hero-container):last-child {
    padding: var(--bg-section-gap) 0;
}

main > .section.text-media-container:last-child {
    padding: var(--bg-section-gap) 0;
}

main > .section > div {
    max-width: var(--container-size);
    margin-inline: auto;
    padding-inline: 0;
}

main > .section.section-full-width > div {
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 0;
}

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

main > .section.section-no-padding {
    padding: 0;
}

main > .section.section-no-bottom-padding {
    padding-bottom: 0;
}

main > .section.section-no-top-padding {
    padding-top: 0;
}
/* Section with Background Color */
main .section[data-background-style='section-bg-color'][data-background-color="section-bg-charcoal"] {
    background-color: var(--color-charcoal-brand);
}

main .section[data-background-style='section-bg-color'][data-background-color="section-bg-white"] {
    background-color: var(--bg-page);
}

main .section[data-background-style='section-bg-color'][data-background-color="section-bg-blue"] {
    background-color: var(--color-blue-brand);
}

main .section[data-background-style='section-bg-color'][data-background-color="section-bg-gray"] {
    background-color: var(--color-gray-1);
}

/* Section with Background Image */
main .section[data-background-style='section-bg-img'][data-background-image] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    background-color: var(--color-white);
}

main .section[data-gradient-opacity='section-bg-gradient-20'] {
  --grad-opacity: rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%;
}

main .section[data-asset-gradient-opacity='asset-bg-gradient-20'] {
  --asset-grad-opacity: rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%;
}

main .section[data-gradient-opacity='section-bg-gradient-40'] {
  --grad-opacity: rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%;
}

main .section[data-asset-gradient-opacity='asset-bg-gradient-40'] {
  --asset-grad-opacity: rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%;
}

main .section[data-gradient-opacity='section-bg-gradient-60'] {
  --grad-opacity: rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%;
}

main .section[data-asset-gradient-opacity='asset-bg-gradient-60'] {
  --asset-grad-opacity: rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%;
}

main .section[data-gradient-opacity='section-bg-gradient-80'] {
  --grad-opacity: rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%;
}

main .section[data-asset-gradient-opacity='asset-bg-gradient-80'] {
  --asset-grad-opacity: rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%;
}

main .section[data-gradient-opacity='section-bg-gradient-100'] {
  --grad-opacity: rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%;
}

main .section[data-asset-gradient-opacity='asset-bg-gradient-100'] {
  --asset-grad-opacity: rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%;
}

main .section[data-gradient-direction='section-bg-gradient-top-bottom'] {
  --grad-direction: to bottom;
}

main .section[data-asset-gradient-direction='asset-bg-gradient-top-bottom'] {
  --asset-grad-direction: to bottom;
}

main .section[data-gradient-direction='section-bg-gradient-bottom-top'] {
  --grad-direction: to top;
}

main .section[data-asset-gradient-direction='asset-bg-gradient-bottom-top'] {
  --asset-grad-direction: to top;
}

main .section[data-gradient-direction='section-bg-gradient-left-right'] {
  --grad-direction: to right;
}

main .section[data-asset-gradient-direction='asset-bg-gradient-left-right'] {
  --asset-grad-direction: to right;
}

main .section[data-gradient-direction='section-bg-gradient-right-left'] {
  --grad-direction: to left;
}

main .section[data-asset-gradient-direction='asset-bg-gradient-right-left'] {
  --asset-grad-direction: to left;
}

main .section[data-gradient='true'] {
  --grad-enabled: linear-gradient(var(--grad-direction), var(--grad-opacity));
  position: relative;
}

main .section[data-asset-gradient='true'] {
  --asset-grad-enabled: linear-gradient(var(--asset-grad-direction), var(--asset-grad-opacity));
  position: relative;
}

main .section[data-gradient='true']::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-enabled);
  z-index: 0;
}

main .section[data-asset-gradient='true'] .carousel.hero .carousel-slide-asset::before,
main .section[data-asset-gradient='true'] .carousel.fading .carousel-slide-asset picture::after,
main .section[data-asset-gradient='true'] .teaser:not(.media-left-aligned):not(.media-right-aligned) .teaser-picture::after,
main .section[data-asset-gradient='true'] .hero.teaser-text-left-aligned .hero-teaser-content::before,
main .section[data-asset-gradient='true'] .hero.teaser-text-right-aligned .hero-teaser-content::before,
main .section[data-asset-gradient='true'] .accordion-media-container picture::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--asset-grad-enabled);
  z-index: 1;
  pointer-events: none;
}

main .section.carousel-container[data-gradient='true']:has(.breadcrumbs-wrapper)::before {
    bottom: var(--size-45);
}


main .section[data-asset-gradient='true'] .accordion-media-container .accordion-image-wrapper::before {
  border-radius: var(--corner-radius-cr-2);
}

main .section[data-background-style='section-bg-img'][data-background-image] > *,
main .section[data-gradient] > *,
main .section[data-asset-gradient] > * {
  position: relative;
  z-index: 2;
}

/* Section with White Text */
main .section[data-text-color='section-text-light'] *,
main .section[data-text-color='section-text-light'] h1,
main .section[data-text-color='section-text-light'] h2,
main .section[data-text-color='section-text-light'] h3,
main .section[data-text-color='section-text-light'] h4,
main .section[data-text-color='section-text-light'] h5,
main .section[data-text-color='section-text-light'] h6,
main .section[data-text-color='section-text-light'] p {
    color: var(--color-white);
}

/* video styles */
.video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  display: inline-block;
  overflow: hidden;
  background: transparent;
}

.video-wrapper .video-controls {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 4px;
    gap: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.hero-wrapper .teaser-video,
.teaser-picture:has(.video-controls) picture,
.text-media-content:has(.video-controls) .text-media-video,
.dynamic-card:has(.card-link)::before,
.carousel.feature-cards .carousel-slide:has(.button-container) .carousel-slide-asset picture,
.carousel.feature-cards .carousel-slide:has(.button-container) .carousel-slide-asset video,
.carousel.feature-cards .carousel-slide:has(.button-container) .carousel-slide-asset .video-wrapper,
.cards.profile-cards .card-item:has(.card-cta)::before,
.search-results__content__cards__card::before {
    --r: var(--card-cutout-radius, 8px);
    --s: var(--card-cutout-size, 8px);
    --_m: / calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000 72%);
    --_g: conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)), #0000 25%, #000 0);
    --_d: calc(var(--s) + var(--r));
    --mask: calc(100% - var(--_d) - var(--x)) 100% var(--_m),
        100% calc(100% - var(--_d) - var(--y)) var(--_m),
        radial-gradient(var(--s) at 100% 100%, #0000 99%, #000 calc(100% + 1px))
        calc(-1 * var(--r) - var(--x)) calc(-1 * var(--r) - var(--y)),
        var(--_g) calc(-1 * var(--_d) - var(--x)) 0,
        var(--_g) 0 calc(-1 * var(--_d) - var(--y));
}

.hero-wrapper .teaser-video,
.teaser-picture:has(.video-controls) picture,
.text-media-content:has(.video-controls) .text-media-video {
    display: block;
    width: 100%;
    --x: 70px;
    --y: 29px;
    border-radius: var(--r);
    mask: var(--mask);
    mask-repeat: no-repeat;
     -webkit-mask: var(--mask);
    -webkit-mask-repeat: no-repeat;
}

.hero-wrapper .teaser-video {
    height: 100%;
}

.teaser:not(.media-left-aligned, .media-right-aligned, .media-portrait)
.teaser-picture.fade-in.is-visible {
    display: block;
    width: 100%;
    height: 100%;
    --x: 150px;
    --y: 29px;
    border-radius: var(--r);
    mask: calc(100% - var(--_d) - var(--x)) 100% var(--_m),
        100% calc(100% - var(--_d) - var(--y)) var(--_m),
        radial-gradient(var(--s) at 100% 100%, #0000 99%, #000 calc(100% + 1px))
        calc(-1 * var(--r) - var(--x)) calc(-1 * var(--r) - var(--y)),
        var(--_g) calc(-1 * var(--_d) - var(--x)) 0,
        var(--_g) 0 calc(-1 * var(--_d) - var(--y));
    mask-repeat: no-repeat;
     -webkit-mask: var(--mask);
    -webkit-mask-repeat: no-repeat;
}

/* Shared corner-cut mask for feature/profile/search card surfaces */
.dynamic-card:has(.card-link)::before,
.carousel.feature-cards .carousel-slide .carousel-slide-asset picture,
.carousel.feature-cards .carousel-slide .carousel-slide-asset video,
.carousel.feature-cards .carousel-slide .carousel-slide-asset .video-wrapper,
.cards.profile-cards .card-item:has(.card-cta)::before,
.search-results__content__cards__card::before {
    --x: var(--card-cutout-offset-x, 13px);
    --y: var(--card-cutout-offset-y, 13px);
    mask: var(--mask);
    mask-repeat: no-repeat;
    -webkit-mask: var(--mask);
    -webkit-mask-repeat: no-repeat;
}

.video-wrapper .video-playback-btn, .video-wrapper .video-sound-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--corner-radius-cr-2);
    padding: var(--size-4);
    margin: 0;
}

.video-wrapper .video-playback-btn:hover, .video-wrapper .video-sound-btn:hover {
    background-color: var(--color-teal-300);
    cursor: pointer;
}

.video-wrapper .video-playback-btn::after,
.video-wrapper .video-sound-btn::after,
.video-wrapper .video-playback-btn.playing::after,
.video-wrapper .video-sound-btn.muted::after {
    content: "";
    display: block;
    width: var(--size-24);
    height: var(--size-24);
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--color-blue-brand);
}

.video-wrapper .video-playback-btn::after {
    mask-image: url(./../icons/play_icon.svg);
}

.video-wrapper .video-playback-btn.playing::after {
    mask-image: url(./../icons/pause_icon.svg);
}

.video-wrapper .video-sound-btn::after {
    mask-image: url(./../icons/mute_icon.svg);
}

.video-wrapper .video-sound-btn.muted::after {
    mask-image: url(./../icons/sound_icon.svg);
}

/* video modal styles */
.video-modal-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: rgb(19 19 19 / 75%);
}

.video-modal.is-open {
  display: flex;
}

.video-modal-dialog {
  position: relative;
  width: calc(100vw - var(--size-48));
  max-width: var(--screen-size-desktop-900);
  max-height: calc(100dvh - (2 * var(--header-height)));
  padding: 0;
  border: 1px solid var(--dark-color);
  border-radius: var(--corner-radius-cr-5);
  background: var(--color-white);
  overflow: hidden;
}

.video-modal-container {
  box-sizing: border-box;
  width: 100%;
  max-height: calc(100dvh - (2 * var(--header-height)) - var(--size-48));
  margin-inline: auto;
  margin-top: var(--size-24);
  padding: var(--size-24);
  padding-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--corner-radius-cr-4);
}

.video-modal-container video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: inherit;
}

.video-modal-close {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--size-28);
  height: var(--size-28);
  margin: 0;
  border: none;
  border-radius: 0;
  padding: 0;
  background-color: transparent;
  color: var(--text-color);
  line-height: 0;
}

.video-modal-close::after {
  content: "";
  display: block;
  width: var(--size-12);
  height: var(--size-12);
  mask-image: url(/icons/close.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: currentcolor;
  margin: auto;
}

@media (width >= 600px) {
    .video-modal-dialog {
        width: calc(100vw - var(--size-64));
    }

    .video-modal-container {
        max-height: calc(100dvh - (2 * var(--header-height)) - var(--size-64));
        padding: var(--size-32);
        padding-top: 0;
        margin-top: var(--size-32);
    }

    .video-modal-close {
        width: var(--size-32);
        height: var(--size-32);
    }
}

@media (width >= 900px) {
    .column-right > div:first-child :is(h3, h4) {
        margin-top: 0;
    }
}

@media (width >= 768px) {
    .column-right > div:first-child :is(h3, h4) {
        margin-top: 0;
    }
}