/*
 * 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.
 */

/* license comment */

/* fonts fall back */

/* fallback font for museo-sans (normal - 400) */
@font-face {
    font-family: "museo-sans-normal-400-fallback";
    size-adjust: 103.96%;
    src: local("Arial");
}

/* fallback font for roboto (normal - 400) */
@font-face {
    font-family: "roboto-normal-400-fallback";
    size-adjust: 99.539%;
    src: local("Arial");
}

:root {
    /* tokens:start — auto-generated, do not edit */

    /* typography */
    --typography-family-primary:
        "museo-sans", "museo-sans-normal-400-fallback", sans-serif;
    --typography-family-secondary:
        "inter-18pt", "roboto-normal-400-fallback", sans-serif;
    --typography-weight-100: 100;
    --typography-weight-300: 300;
    --typography-weight-400: 400;
    --typography-weight-500: 500;
    --typography-weight-600: 600;
    --typography-weight-700: 700;
    --typography-weight-900: 900;
    --typography-weight-400-italic: 400;
    --typography-weight-700-italic: 700;
    --typography-size-12: 12px;
    --typography-size-14: 14px;
    --typography-size-16: 16px;
    --typography-size-18: 18px;
    --typography-size-20: 20px;
    --typography-size-22: 22px;
    --typography-size-24: 24px;
    --typography-size-28: 28px;
    --typography-size-32: 32px;
    --typography-size-36: 36px;
    --typography-size-40: 40px;
    --typography-size-44: 44px;
    --typography-size-48: 48px;
    --typography-size-56: 56px;
    --typography-size-64: 64px;
    --typography-size-68: 68px;
    --typography-size-72: 72px;
    --typography-line-height-12: 12px;
    --typography-line-height-14: 14px;
    --typography-line-height-16: 16px;
    --typography-line-height-18: 18px;
    --typography-line-height-20: 20px;
    --typography-line-height-22: 22px;
    --typography-line-height-24: 24px;
    --typography-line-height-26: 26px;
    --typography-line-height-28: 28px;
    --typography-line-height-32: 32px;
    --typography-line-height-36: 36px;
    --typography-line-height-40: 40px;
    --typography-line-height-48: 48px;
    --typography-line-height-56: 56px;
    --typography-line-height-60: 60px;
    --typography-line-height-64: 64px;
    --typography-line-height-72: 72px;
    --typography-letter-spacing-0: 0;
    --typography-letter-spacing-1: 1;
    --typography-letter-spacing-2: 2;
    --typography-letter-spacing-3: 3;
    --typography-letter-spacing-4: 4;
    --typography-letter-spacing-5: 5;
    --typography-letter-spacing-6: 6;
    --typography-letter-spacing-7: 7;
    --typography-letter-spacing-minus-3: -3;
    --typography-letter-spacing-minus-2: -2;
    --typography-letter-spacing-minus-1: -1;
    --typography-paragraph-spacing-6: 6px;
    --typography-paragraph-spacing-8: 8px;
    --typography-paragraph-spacing-10: 10px;
    --typography-paragraph-spacing-12: 12px;
    --typography-paragraph-spacing-14: 14px;
    --typography-paragraph-spacing-16: 16px;
    --typography-paragraph-spacing-18: 18px;
    --typography-paragraph-spacing-20: 20px;
    --typography-paragraph-spacing-22: 22px;
    --typography-paragraph-spacing-24: 24px;
    --typography-list-spacing-4: 4px;
    --typography-list-spacing-6: 6px;
    --typography-list-spacing-8: 8px;
    --typography-list-spacing-10: 10px;
    --typography-list-spacing-12: 12px;
    --typography-list-spacing-14: 14px;
    --typography-list-spacing-16: 16px;
    --typography-list-spacing-18: 18px;
    --typography-list-spacing-20: 20px;
    --typography-list-spacing-22: 22px;
    --typography-list-spacing-24: 24px;

    /* color */
    --color-brand-primary-base-50: #f2f4f8;
    --color-brand-primary-base-100: #e5e9f2;
    --color-brand-primary-base-150: #bfc8de;
    --color-brand-primary-base-200: #99a7ca;
    --color-brand-primary-base-300: #7387b6;
    --color-brand-primary-base-400: #4d66a2;
    --color-brand-primary-base-450: #26458e;
    --color-brand-primary-base-500: #00247a;
    --color-brand-primary-base-600: #001f68;
    --color-brand-primary-base-650: #001955;
    --color-brand-primary-base-700: #001443;
    --color-brand-primary-base-800: #000e31;
    --color-brand-primary-base-900: #00091f;
    --color-brand-primary-accent-100: #e5ebf1;
    --color-brand-primary-accent-300: #738fb5;
    --color-brand-primary-accent-500: #003478;
    --color-brand-primary-accent-700: #001d42;
    --color-brand-secondary-base-50: #fffef2;
    --color-brand-secondary-base-100: #fffce5;
    --color-brand-secondary-base-150: #fff9bf;
    --color-brand-secondary-base-200: #fff599;
    --color-brand-secondary-base-300: #fff173;
    --color-brand-secondary-base-400: #ffee4d;
    --color-brand-secondary-base-450: #ffea26;
    --color-brand-secondary-base-500: #ffe600;
    --color-brand-secondary-base-600: #d9c400;
    --color-brand-secondary-base-650: #b2a100;
    --color-brand-secondary-base-700: #8c7f00;
    --color-brand-secondary-base-800: #665c00;
    --color-brand-secondary-base-900: #403a00;
    --color-brand-secondary-accent-50: #f5f2e7;
    --color-brand-secondary-accent-100: #efead7;
    --color-brand-secondary-accent-300: #fdd281;
    --color-brand-secondary-accent-500: #fbad1a;
    --color-brand-secondary-accent-700: #8a5f0e;
    --color-neutral-100: #d9e3e8;
    --color-neutral-200: #b4b9c1;
    --color-neutral-300: #7d8f99;
    --color-neutral-400: #697482;
    --color-neutral-500: #455770;
    --color-neutral-600: #36414f;
    --color-neutral-700: #29313b;
    --color-neutral-800: #1b2028;
    --color-neutral-900: #0e1014;
    --color-neutral-white: #fff;
    --color-neutral-black: #000;
    --color-status-success-100: #dbede5;
    --color-status-success-300: #a0cfb9;
    --color-status-success-500: #128750;
    --color-status-success-700: #0a4a2c;
    --color-status-danger-100: #f9dfd9;
    --color-status-danger-300: #efa999;
    --color-status-danger-500: #d82900;
    --color-status-danger-700: #771700;
    --color-status-warning-100: #ffefd9;
    --color-status-warning-300: #ffd399;
    --color-status-warning-500: #ff9200;
    --color-status-warning-700: #8c5000;
    --color-status-info-100: #dae8f5;
    --color-status-info-300: #9cc1e4;
    --color-status-info-500: #0864bc;
    --color-status-info-700: #043767;
    --color-member-teal: #74bfb8;
    --color-member-blue: #1d96cd;
    --color-member-bronze: #b06c32;
    --color-member-silver: #7e8990;
    --color-member-gold: #897755;
    --color-member-gold50: #b9983c;
    --color-shades-black-100: rgb(0 0 0 / 10%);
    --color-shades-black-200: rgb(0 0 0 / 20%);
    --color-shades-black-300: rgb(0 0 0 / 30%);
    --color-shades-black-400: rgb(0 0 0 / 40%);
    --color-shades-black-500: rgb(0 0 0 / 50%);
    --color-shades-black-600: rgb(0 0 0 / 60%);
    --color-shades-black-700: rgb(0 0 0 / 70%);
    --color-shades-black-800: rgb(0 0 0 / 80%);
    --color-shades-black-900: rgb(0 0 0 / 90%);
    --color-shades-white-0: rgb(255 255 255 / 0%);
    --color-shades-white-100: rgb(255 255 255 / 10%);
    --color-shades-white-200: rgb(255 255 255 / 20%);
    --color-shades-white-300: rgb(255 255 255 / 30%);
    --color-shades-white-400: rgb(255 255 255 / 40%);
    --color-shades-white-500: rgb(255 255 255 / 50%);
    --color-shades-white-600: rgb(255 255 255 / 60%);
    --color-shades-white-700: rgb(255 255 255 / 70%);
    --color-shades-white-800: rgb(255 255 255 / 80%);
    --color-shades-white-900: rgb(255 255 255 / 90%);

    /* spacing */
    --spacing-0: 0px;
    --spacing-2: 2px;
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-28: 28px;
    --spacing-30: 30px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-60: 60px;
    --spacing-64: 64px;
    --spacing-72: 72px;
    --spacing-80: 80px;
    --spacing-96: 96px;
    --spacing-100: 100px;
    --spacing-120: 120px;
    --spacing-128: 128px;
    --spacing-140: 140px;

    /* size */
    --size-12: 12px;
    --size-16: 16px;
    --size-20: 20px;
    --size-24: 24px;
    --size-32: 32px;
    --size-40: 40px;
    --size-48: 48px;
    --size-56: 56px;
    --size-64: 64px;

    /* radius */
    --radius-0: 0px;
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-20: 20px;
    --radius-24: 24px;
    --radius-48: 48px;
    --radius-full: 9999px;

    /* border */
    --border-0: 0px;
    --border-1: 1px;
    --border-2: 2px;
    --border-4: 4px;

    /* stroke */
    --stroke-1: 1px;
    --stroke-2: 2px;
    --stroke-3: 3px;
    --stroke-4: 4px;
    --stroke-1-5: 1.5px;

    /* elevation */
    --elevation-0: 0;
    --elevation-1: 1;
    --elevation-2: 2;
    --elevation-3: 3;
    --elevation-4: 4;

    /* opacity */
    --opacity-0: 0;
    --opacity-16: 0.16;
    --opacity-38: 0.38;
    --opacity-56: 0.56;
    --opacity-72: 0.72;

    /* motion */
    --motion-duration-0: 0ms;
    --motion-duration-100: 100ms;
    --motion-duration-200: 200ms;
    --motion-duration-300: 300ms;
    --motion-duration-500: 500ms;
    --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --motion-easing-accelereate: cubic-bezier(0.4, 0, 1, 1);
    --motion-easing-emphasised: cubic-bezier(0.05, 0.7, 0.1, 1);

    /* screen */
    --screen-xs-mobile-320: 320;
    --screen-sm-mobile-600: 600;
    --screen-md-tablet-1024: 1024;
    --screen-lg-desktop-1440: 1440;
    --screen-xl-desktop-1920: 1920;

    /* spacing */
    --semantic-spacing-interactive-focus: var(--spacing-4);
    --semantic-spacing-interactive-button-horizontal-none: var(--spacing-0);
    --semantic-spacing-interactive-button-horizontal-default: var(--spacing-40);
    --semantic-spacing-interactive-button-horizontal-small: var(--spacing-20);
    --semantic-spacing-interactive-button-horizontal-extra-small: var(
        --spacing-16
    );
    --semantic-spacing-interactive-button-vertical-none: var(--spacing-0);
    --semantic-spacing-interactive-button-vertical-medium: var(--spacing-28);
    --semantic-spacing-interactive-button-vertical-default: var(--spacing-20);
    --semantic-spacing-interactive-button-vertical-small: var(--spacing-12);
    --semantic-spacing-interactive-button-vertical-extra-small: var(
        --spacing-8
    );

    /* size */
    --semantic-size-dialog-md: 544px;

    /* typography */
    --semantic-typography-heading-display-1-font-family: var(
        --typography-family-primary
    );
    --semantic-typography-heading-display-1-font-weight: var(
        --typography-weight-100
    );
    --semantic-typography-heading-display-2-font-family: var(
        --typography-family-primary
    );
    --semantic-typography-heading-display-2-font-weight: var(
        --typography-weight-300
    );
    --semantic-typography-heading-h1-font-family: var(
        --typography-family-primary
    );
    --semantic-typography-heading-h1-font-weight: var(--typography-weight-500);
    --semantic-typography-heading-h2-font-family: var(
        --typography-family-primary
    );
    --semantic-typography-heading-h2-font-weight: var(--typography-weight-500);
    --semantic-typography-heading-h3-font-family: var(
        --typography-family-primary
    );
    --semantic-typography-heading-h3-font-weight: var(--typography-weight-600);
    --semantic-typography-heading-h4-font-family: var(
        --typography-family-primary
    );
    --semantic-typography-heading-h4-font-weight: var(--typography-weight-500);
    --semantic-typography-heading-h5-font-family: var(
        --typography-family-primary
    );
    --semantic-typography-heading-h5-font-weight: var(--typography-weight-500);
    --semantic-typography-heading-h6-font-family: var(
        --typography-family-primary
    );
    --semantic-typography-heading-h6-font-weight: var(--typography-weight-500);
    --semantic-typography-body-block-quote-font-family: var(
        --typography-family-primary
    );
    --semantic-typography-body-block-quote-font-weight: var(
        --typography-weight-500
    );
    --semantic-typography-body-lg-font-family: var(
        --typography-family-secondary
    );
    --semantic-typography-body-lg-font-weight: var(--typography-weight-400);
    --semantic-typography-body-lg-heavy-font-family: var(
        --typography-family-secondary
    );
    --semantic-typography-body-lg-heavy-font-weight: var(
        --typography-weight-700
    );
    --semantic-typography-body-md-font-family: var(
        --typography-family-secondary
    );
    --semantic-typography-body-md-font-weight: var(--typography-weight-400);
    --semantic-typography-body-md-heavy-font-family: var(
        --typography-family-secondary
    );
    --semantic-typography-body-md-heavy-font-weight: var(
        --typography-weight-700
    );
    --semantic-typography-body-sm-font-family: var(
        --typography-family-secondary
    );
    --semantic-typography-body-sm-font-weight: var(--typography-weight-400);
    --semantic-typography-body-sm-heavy-font-family: var(
        --typography-family-secondary
    );
    --semantic-typography-body-sm-heavy-font-weight: var(
        --typography-weight-700
    );
    --semantic-typography-body-xs-font-family: var(
        --typography-family-secondary
    );
    --semantic-typography-body-xs-font-weight: var(--typography-weight-400);
    --semantic-typography-body-xs-heavy-font-family: var(
        --typography-family-secondary
    );
    --semantic-typography-body-xs-heavy-font-weight: var(
        --typography-weight-700
    );
    --semantic-typography-body-citation-font-family: var(
        --typography-family-secondary
    );
    --semantic-typography-body-citation-font-weight: var(
        --typography-weight-400
    );
    --semantic-typography-body-attribution-font-family: var(
        --typography-family-secondary
    );
    --semantic-typography-body-attribution-font-weight: var(
        --typography-weight-400
    );
    --semantic-typography-body-caption-font-family: var(
        --typography-family-secondary
    );
    --semantic-typography-body-caption-font-weight: var(
        --typography-weight-400
    );
    --semantic-typography-action-primary-lg-font-family: var(
        --typography-family-primary
    );
    --semantic-typography-action-primary-lg-font-weight: var(
        --typography-weight-600
    );
    --semantic-typography-action-primary-sm-font-family: var(
        --typography-family-primary
    );
    --semantic-typography-action-primary-sm-font-weight: var(
        --typography-weight-500
    );
    --semantic-typography-action-inline-lg-font-family: var(
        --typography-family-primary
    );
    --semantic-typography-action-inline-lg-font-weight: var(
        --typography-weight-300
    );
    --semantic-typography-action-inline-sm-font-family: var(
        --typography-family-primary
    );
    --semantic-typography-action-inline-sm-font-weight: var(
        --typography-weight-300
    );
    --semantic-typography-action-inline-xs-font-family: var(
        --typography-family-primary
    );
    --semantic-typography-action-inline-xs-font-weight: var(
        --typography-weight-500
    );
    --semantic-typography-action-nav-breadcrumbs-font-family: var(
        --typography-family-secondary
    );
    --semantic-typography-action-nav-breadcrumbs-font-weight: var(
        --typography-weight-500
    );
    --semantic-typography-action-nav-menu-font-family: var(
        --typography-family-primary
    );
    --semantic-typography-action-nav-menu-font-weight: var(
        --typography-weight-400
    );
    --semantic-typography-action-nav-tabs-default-font-family: var(
        --typography-family-secondary
    );
    --semantic-typography-action-nav-tabs-default-font-weight: var(
        --typography-weight-300
    );
    --semantic-typography-action-nav-tabs-active-font-family: var(
        --typography-family-secondary
    );
    --semantic-typography-action-nav-tabs-active-font-weight: var(
        --typography-weight-500
    );
    --semantic-typography-badge-lg-font-family: var(
        --typography-family-primary
    );
    --semantic-typography-badge-lg-font-weight: var(--typography-weight-300);
    --semantic-typography-badge-md-font-family: var(
        --typography-family-primary
    );
    --semantic-typography-badge-md-font-weight: var(--typography-weight-500);
    --semantic-typography-tag-lg-font-family: var(--typography-family-primary);
    --semantic-typography-tag-lg-font-weight: var(--typography-weight-500);
    --semantic-typography-tag-md-font-family: var(--typography-family-primary);
    --semantic-typography-tag-md-font-weight: var(--typography-weight-500);

    /* color */
    --semantic-color-text-read-only-brand: var(
        --color-brand-primary-accent-500
    );
    --semantic-color-text-read-only-primary: var(--color-neutral-900);
    --semantic-color-text-read-only-secondary: var(--color-neutral-700);
    --semantic-color-text-read-only-tertiary: var(--color-neutral-500);
    --semantic-color-text-read-only-disabled: var(--color-neutral-700);
    --semantic-color-text-read-only-inverse: var(--color-neutral-white);
    --semantic-color-text-on-action-default-default: var(
        --color-brand-primary-base-500
    );
    --semantic-color-text-on-action-default-hover: var(
        --color-brand-primary-base-600
    );
    --semantic-color-text-on-action-default-pressed: var(
        --color-brand-primary-base-650
    );
    --semantic-color-text-on-action-default-focus: var(
        --color-brand-primary-base-650
    );
    --semantic-color-text-on-action-default-inactive: var(--color-neutral-500);
    --semantic-color-text-on-action-default-disabled: var(--color-neutral-400);
    --semantic-color-text-on-action-inverse-default: var(--color-neutral-white);
    --semantic-color-text-on-action-inverse-hover: var(
        --color-shades-white-900
    );
    --semantic-color-text-on-action-inverse-pressed: var(
        --color-shades-white-700
    );
    --semantic-color-text-on-action-inverse-focus: var(
        --color-shades-white-700
    );
    --semantic-color-text-on-action-inverse-inactive: var(
        --color-shades-white-600
    );
    --semantic-color-text-on-action-inverse-disabled: var(
        --color-shades-white-400
    );
    --semantic-color-surface-page: var(--color-neutral-white);
    --semantic-color-surface-default: var(--color-neutral-white);
    --semantic-color-surface-subtle: var(--color-brand-secondary-accent-50);
    --semantic-color-surface-raised: var(--color-brand-secondary-accent-100);
    --semantic-color-surface-overlay: var(--color-neutral-white);
    --semantic-color-surface-scrim: var(--color-shades-black-700);
    --semantic-color-surface-inverse: var(--color-brand-primary-base-500);
    --semantic-color-border-line-default: var(--color-neutral-200);
    --semantic-color-border-line-subtle: var(--color-neutral-100);
    --semantic-color-border-line-strong: var(--color-neutral-300);
    --semantic-color-border-line-inverse: var(--color-neutral-200);
    --semantic-color-border-line-focus: var(--color-brand-secondary-accent-100);
    --semantic-color-border-action-default: var(--color-brand-primary-base-500);
    --semantic-color-border-action-hover: var(--color-brand-primary-base-600);
    --semantic-color-border-action-pressed: var(--color-brand-primary-base-650);
    --semantic-color-border-action-focus: var(--color-brand-primary-base-650);
    --semantic-color-border-action-disabled: var(--color-neutral-300);
    --semantic-color-border-action-inverse: var(--color-neutral-white);
    --semantic-color-border-action-inverse-default: var(
        --color-brand-primary-base-50
    );
    --semantic-color-border-action-inverse-hover: var(--color-shades-white-700);
    --semantic-color-border-action-inverse-pressed: var(
        --color-shades-white-500
    );
    --semantic-color-border-action-inverse-focus: var(--color-shades-white-200);
    --semantic-color-border-action-inverse-disabled: var(
        --color-shades-white-200
    );
    --semantic-color-action-primary-default: var(
        --color-brand-secondary-base-500
    );
    --semantic-color-action-primary-hover: var(
        --color-brand-secondary-base-400
    );
    --semantic-color-action-primary-active: var(
        --color-brand-secondary-base-600
    );
    --semantic-color-action-primary-disabled: var(--color-neutral-100);
    --semantic-color-action-accent-default: var(--color-brand-primary-base-500);
    --semantic-color-action-accent-hover: var(--color-brand-primary-base-450);
    --semantic-color-action-accent-active: var(--color-brand-primary-base-600);
    --semantic-color-action-accent-disabled: var(--color-neutral-100);
    --semantic-color-action-secondary-default: var(--color-neutral-white);
    --semantic-color-action-secondary-hover: var(--color-neutral-white);
    --semantic-color-action-secondary-active: var(--color-neutral-white);
    --semantic-color-action-secondary-disabled: var(--color-neutral-100);
    --semantic-color-action-tertiary-default: var(--color-neutral-100);
    --semantic-color-action-tertiary-hover: var(--color-neutral-200);
    --semantic-color-action-tertiary-active: var(--color-neutral-500);
    --semantic-color-action-tertiary-disabled: var(--color-neutral-100);
    --semantic-color-action-inverse-default: var(--color-neutral-white);
    --semantic-color-action-inverse-transparent: var(--color-shades-white-0);
    --semantic-color-action-inverse-hover: var(--color-shades-white-800);
    --semantic-color-action-inverse-active: var(--color-shades-white-700);
    --semantic-color-action-inverse-disabled: var(--color-shades-white-100);
    --semantic-color-icon-primary: var(--color-brand-primary-base-500);
    --semantic-color-icon-secondary: var(--color-brand-secondary-base-500);
    --semantic-color-icon-tertiary: var(--color-neutral-300);
    --semantic-color-icon-disabled: var(--color-neutral-200);
    --semantic-color-icon-inverse: var(--color-neutral-white);
    --semantic-color-icon-on-action-default-default: var(
        --color-brand-primary-base-500
    );
    --semantic-color-icon-on-action-default-hover: var(
        --color-brand-primary-base-600
    );
    --semantic-color-icon-on-action-default-pressed: var(
        --color-brand-primary-base-650
    );
    --semantic-color-icon-on-action-default-focus: var(
        --color-brand-primary-base-650
    );
    --semantic-color-icon-on-action-default-inactive: var(--color-neutral-500);
    --semantic-color-icon-on-action-default-disabled: var(--color-neutral-400);
    --semantic-color-icon-on-action-inverse-default: var(--color-neutral-white);
    --semantic-color-icon-on-action-inverse-hover: var(
        --color-shades-white-900
    );
    --semantic-color-icon-on-action-inverse-pressed: var(
        --color-shades-white-700
    );
    --semantic-color-icon-on-action-inverse-focus: var(
        --color-shades-white-700
    );
    --semantic-color-icon-on-action-inverse-inactive: var(
        --color-shades-white-600
    );
    --semantic-color-icon-on-action-inverse-disabled: var(
        --color-shades-white-400
    );
    --semantic-color-feedback-success-default: var(--color-status-success-500);
    --semantic-color-feedback-success-border: var(--color-status-success-300);
    --semantic-color-feedback-success-subtle: var(--color-status-success-100);
    --semantic-color-feedback-success-emphasis: var(--color-status-success-700);
    --semantic-color-feedback-error-default: var(--color-status-danger-500);
    --semantic-color-feedback-error-border: var(--color-status-danger-300);
    --semantic-color-feedback-error-subtle: var(--color-status-danger-100);
    --semantic-color-feedback-error-emphasis: var(--color-status-danger-700);
    --semantic-color-feedback-warning-default: var(--color-status-warning-500);
    --semantic-color-feedback-warning-border: var(--color-status-warning-300);
    --semantic-color-feedback-warning-subtle: var(--color-status-warning-100);
    --semantic-color-feedback-warning-emphasis: var(--color-status-warning-700);
    --semantic-color-feedback-info-default: var(--color-status-info-500);
    --semantic-color-feedback-info-border: var(--color-status-info-300);
    --semantic-color-feedback-info-subtle: var(--color-status-info-100);
    --semantic-color-feedback-info-emphasis: var(--color-status-info-700);
    --semantic-color-focus-default-ring: var(--color-neutral-black);
    --semantic-color-focus-default-background: var(--color-neutral-black);
    --semantic-color-focus-default-text: var(--color-neutral-black);
    --semantic-color-focus-inverse-ring: var(--color-neutral-white);
    --semantic-color-focus-inverse-background: var(--color-neutral-white);
    --semantic-color-focus-inverse-text: var(--color-neutral-white);
    --semantic-color-membership-badge-access: var(--color-member-teal);
    --semantic-color-membership-badge-blue: var(--color-member-blue);
    --semantic-color-membership-badge-bronze: var(--color-member-bronze);
    --semantic-color-membership-badge-silver: var(--color-member-silver);
    --semantic-color-membership-badge-gold: var(--color-member-gold);
    --semantic-color-membership-badge-gold50: var(--color-member-gold50);

    /* icon */
    --semantic-icon-size-xs: 12;
    --semantic-icon-size-sm: 16;
    --semantic-icon-size-m: 24;
    --semantic-icon-size-lg: 48;
    --semantic-icon-stroke-thin: 1;
    --semantic-icon-stroke-regular: 1.5;
    --semantic-icon-stroke-strong: 2;

    /* radius */
    --semantic-radius-none: var(--radius-0);
    --semantic-radius-xs: var(--radius-4);
    --semantic-radius-sm: var(--radius-8);
    --semantic-radius-md: var(--radius-24);
    --semantic-radius-lg: var(--radius-48);
    --semantic-radius-full: var(--radius-full);

    /* border */
    --semantic-border-1: var(--border-1);
    --semantic-border-2: var(--border-2);
    --semantic-border-4: var(--border-4);

    /* elevation */
    --semantic-elevation-none: var(--elevation-0);
    --semantic-elevation-sm: var(--elevation-1);
    --semantic-elevation-md: var(--elevation-2);
    --semantic-elevation-lg: var(--elevation-3);
    --semantic-elevation-overlay: var(--elevation-4);

    /* opacity */
    --semantic-opacity-disabled: var(--opacity-0);
    --semantic-opacity-hover: var(--opacity-16);
    --semantic-opacity-overlay: var(--opacity-56);
    --semantic-opacity-scrim: var(--opacity-72);

    /* motion */
    --semantic-motion-duration-fast: var(--motion-duration-0);
    --semantic-motion-duration-medium: var(--motion-duration-200);
    --semantic-motion-duration-slow: var(--motion-duration-500);
    --semantic-motion-easing-standard: 0;
    --semantic-motion-easing-emphasised: 0;
    --semantic-motion-easing-decelerate: 0;

    /* semantic */
    --semantic-typography-heading-display-1-font-size: 40px;
    --semantic-typography-heading-display-1-line-height: 44px;
    --semantic-typography-heading-display-1-letter-spacing: -2;
    --semantic-typography-heading-display-2-font-size: 28px;
    --semantic-typography-heading-display-2-line-height: 36px;
    --semantic-typography-heading-display-2-letter-spacing: -3;
    --semantic-typography-heading-h1-font-size: 40px;
    --semantic-typography-heading-h1-line-height: 44px;
    --semantic-typography-heading-h1-letter-spacing: -2;
    --semantic-typography-heading-h2-font-size: 28px;
    --semantic-typography-heading-h2-line-height: 36px;
    --semantic-typography-heading-h2-letter-spacing: -2;
    --semantic-typography-heading-h3-font-size: 20px;
    --semantic-typography-heading-h3-line-height: 24px;
    --semantic-typography-heading-h3-letter-spacing: -1;
    --semantic-typography-heading-h4-font-size: 16px;
    --semantic-typography-heading-h4-line-height: 22px;
    --semantic-typography-heading-h4-letter-spacing: 0;
    --semantic-typography-heading-h5-font-size: 16px;
    --semantic-typography-heading-h5-line-height: 20px;
    --semantic-typography-heading-h5-letter-spacing: 0;
    --semantic-typography-heading-h6-font-size: 14px;
    --semantic-typography-heading-h6-line-height: 18px;
    --semantic-typography-heading-h6-letter-spacing: 5;
    --semantic-typography-body-block-quote-font-size: 28px;
    --semantic-typography-body-block-quote-line-height: 36px;
    --semantic-typography-body-block-quote-letter-spacing: -2;
    --semantic-typography-body-lg-font-size: 18px;
    --semantic-typography-body-lg-line-height: 28px;
    --semantic-typography-body-lg-letter-spacing: -1;
    --semantic-typography-body-lg-paragraph-spacing: 20px;
    --semantic-typography-body-lg-list-spacing: 8px;
    --semantic-typography-body-lg-heavy-font-size: 18px;
    --semantic-typography-body-lg-heavy-line-height: 28px;
    --semantic-typography-body-lg-heavy-letter-spacing: -1;
    --semantic-typography-body-lg-heavy-paragraph-spacing: 20px;
    --semantic-typography-body-lg-heavy-list-spacing: 8px;
    --semantic-typography-body-md-font-size: 18px;
    --semantic-typography-body-md-line-height: 28px;
    --semantic-typography-body-md-letter-spacing: -1;
    --semantic-typography-body-md-paragraph-spacing: 18px;
    --semantic-typography-body-md-list-spacing: 8px;
    --semantic-typography-body-md-heavy-font-size: 18px;
    --semantic-typography-body-md-heavy-line-height: 28px;
    --semantic-typography-body-md-heavy-letter-spacing: -1;
    --semantic-typography-body-md-heavy-paragraph-spacing: 18px;
    --semantic-typography-body-md-heavy-list-spacing: 8px;
    --semantic-typography-body-sm-font-size: 16px;
    --semantic-typography-body-sm-line-height: 24px;
    --semantic-typography-body-sm-letter-spacing: 0;
    --semantic-typography-body-sm-paragraph-spacing: 16px;
    --semantic-typography-body-sm-list-spacing: 6px;
    --semantic-typography-body-sm-heavy-font-size: 16px;
    --semantic-typography-body-sm-heavy-line-height: 24px;
    --semantic-typography-body-sm-heavy-letter-spacing: 0;
    --semantic-typography-body-sm-heavy-paragraph-spacing: 16px;
    --semantic-typography-body-sm-heavy-list-spacing: 6px;
    --semantic-typography-body-xs-font-size: 14px;
    --semantic-typography-body-xs-line-height: 20px;
    --semantic-typography-body-xs-letter-spacing: 0;
    --semantic-typography-body-xs-paragraph-spacing: 14px;
    --semantic-typography-body-xs-list-spacing: 4px;
    --semantic-typography-body-xs-heavy-font-size: 14px;
    --semantic-typography-body-xs-heavy-line-height: 20px;
    --semantic-typography-body-xs-heavy-letter-spacing: 0;
    --semantic-typography-body-xs-heavy-paragraph-spacing: 14px;
    --semantic-typography-body-xs-heavy-list-spacing: 4px;
    --semantic-typography-body-citation-font-size: 12px;
    --semantic-typography-body-citation-line-height: 16px;
    --semantic-typography-body-citation-letter-spacing: 0;
    --semantic-typography-body-citation-paragraph-spacing: 6px;
    --semantic-typography-body-citation-list-spacing: 4px;
    --semantic-typography-body-attribution-font-size: 18px;
    --semantic-typography-body-attribution-line-height: 28px;
    --semantic-typography-body-attribution-letter-spacing: -1;
    --semantic-typography-body-attribution-paragraph-spacing: 18px;
    --semantic-typography-body-attribution-list-spacing: 8px;
    --semantic-typography-body-caption-font-size: 14px;
    --semantic-typography-body-caption-line-height: 20px;
    --semantic-typography-body-caption-letter-spacing: 0;
    --semantic-typography-body-caption-paragraph-spacing: 14px;
    --semantic-typography-body-caption-list-spacing: 4px;
    --semantic-typography-action-primary-lg-font-size: 18px;
    --semantic-typography-action-primary-lg-line-height: 26px;
    --semantic-typography-action-primary-lg-letter-spacing: 0;
    --semantic-typography-action-primary-sm-font-size: 16px;
    --semantic-typography-action-primary-sm-line-height: 24px;
    --semantic-typography-action-primary-sm-letter-spacing: -1;
    --semantic-typography-action-inline-lg-font-size: 18px;
    --semantic-typography-action-inline-lg-line-height: 26px;
    --semantic-typography-action-inline-lg-letter-spacing: 0;
    --semantic-typography-action-inline-sm-font-size: 16px;
    --semantic-typography-action-inline-sm-line-height: 24px;
    --semantic-typography-action-inline-sm-letter-spacing: 0;
    --semantic-typography-action-inline-xs-font-size: 14px;
    --semantic-typography-action-inline-xs-line-height: 22px;
    --semantic-typography-action-inline-xs-letter-spacing: 0;
    --semantic-typography-action-nav-menu-font-size: 16px;
    --semantic-typography-action-nav-menu-line-height: 24px;
    --semantic-typography-action-nav-menu-letter-spacing: 0;
    --semantic-typography-action-nav-breadcrumbs-font-size: 16px;
    --semantic-typography-action-nav-breadcrumbs-line-height: 22px;
    --semantic-typography-action-nav-breadcrumbs-letter-spacing: -1;
    --semantic-typography-action-nav-tabs-default-font-size: 16px;
    --semantic-typography-action-nav-tabs-default-line-height: 24px;
    --semantic-typography-action-nav-tabs-default-letter-spacing: -1;
    --semantic-typography-action-nav-tabs-active-font-size: 16px;
    --semantic-typography-action-nav-tabs-active-line-height: 24px;
    --semantic-typography-action-nav-tabs-active-letter-spacing: -1;
    --semantic-typography-badge-lg-font-size: 14px;
    --semantic-typography-badge-lg-line-height: 22px;
    --semantic-typography-badge-lg-letter-spacing: 2;
    --semantic-typography-badge-md-font-size: 12px;
    --semantic-typography-badge-md-line-height: 20px;
    --semantic-typography-badge-md-letter-spacing: 2;
    --semantic-typography-tag-lg-font-size: 16px;
    --semantic-typography-tag-lg-line-height: 18px;
    --semantic-typography-tag-lg-letter-spacing: 0;
    --semantic-typography-tag-md-font-size: 14px;
    --semantic-typography-tag-md-line-height: 16px;
    --semantic-typography-tag-md-letter-spacing: 0;
    --semantic-typography-tag-sm-font-size: 14px;
    --semantic-typography-tag-sm-line-height: 14px;
    --semantic-typography-tag-sm-letter-spacing: 0;
    --semantic-typography-fluid-h1: 0;
    --semantic-spacing-screen-page-width: 320px;
    --semantic-spacing-screen-page-margin-default: 24px;
    --semantic-spacing-screen-page-margin-tight: 24px;
    --semantic-spacing-screen-page-margin-compact: 24px;
    --semantic-spacing-screen-column-margin: 24px;
    --semantic-spacing-screen-column-gutter: 16px;
    --semantic-spacing-section-relaxed: 60px;
    --semantic-spacing-section-comfortable: 40px;
    --semantic-spacing-section-compact: 20px;
    --semantic-spacing-section-tight: 16px;
    --semantic-spacing-section-none: 0px;
    --semantic-spacing-component-relaxed: 24px;
    --semantic-spacing-component-comfortable: 16px;
    --semantic-spacing-component-compact: 16px;
    --semantic-spacing-component-tight: 8px;
    --semantic-spacing-content-xl: 32px;
    --semantic-spacing-content-lg: 24px;
    --semantic-spacing-content-md: 16px;
    --semantic-spacing-content-sm: 16px;
    --semantic-spacing-content-xs: 8px;
    --semantic-spacing-content-xxs: 4px;

    /* tokens:end */

    /* Forms Figma library: heading weights differ from the site library (600 vs 500) */
    --semantic-typography-form-heading-h2-font-weight: var(--typography-weight-600);
    --semantic-typography-form-heading-h6-font-weight: var(--typography-weight-600);

    /* Legacy variables - mapped to semantic tokens */
    --nav-height: 68px;
}

/* responsive:start — auto-generated, do not edit */

@media (width >= 600px) {
    :root {
        /* semantic */
        --semantic-typography-body-citation-paragraph-spacing: 8px;
        --semantic-spacing-screen-page-width: 600px;
    }
}

@media (width >= 1024px) {
    :root {
        /* semantic */
        --semantic-typography-heading-display-1-font-size: 64px;
        --semantic-typography-heading-display-1-line-height: 68px;
        --semantic-typography-heading-display-2-font-size: 32px;
        --semantic-typography-heading-display-2-line-height: 40px;
        --semantic-typography-heading-h1-font-size: 56px;
        --semantic-typography-heading-h1-line-height: 60px;
        --semantic-typography-heading-h2-font-size: 32px;
        --semantic-typography-heading-h2-line-height: 40px;
        --semantic-typography-heading-h3-font-size: 22px;
        --semantic-typography-heading-h3-line-height: 28px;
        --semantic-typography-heading-h4-font-size: 18px;
        --semantic-typography-heading-h4-line-height: 24px;
        --semantic-typography-body-block-quote-font-size: 32px;
        --semantic-typography-body-block-quote-line-height: 40px;
        --semantic-typography-body-lg-font-size: 22px;
        --semantic-typography-body-lg-line-height: 32px;
        --semantic-typography-body-lg-heavy-font-size: 22px;
        --semantic-typography-body-lg-heavy-line-height: 32px;
        --semantic-typography-action-nav-breadcrumbs-font-size: 14px;
        --semantic-typography-tag-sm-font-size: 12px;
        --semantic-spacing-screen-page-width: 1024px;
        --semantic-spacing-screen-page-margin-default: 32px;
        --semantic-spacing-screen-page-margin-tight: 32px;
        --semantic-spacing-screen-page-margin-compact: 32px;
        --semantic-spacing-screen-column-margin: 32px;
        --semantic-spacing-screen-column-gutter: 24px;
        --semantic-spacing-section-relaxed: 120px;
        --semantic-spacing-section-comfortable: 80px;
        --semantic-spacing-section-compact: 60px;
        --semantic-spacing-section-tight: 40px;
        --semantic-spacing-component-relaxed: 32px;
        --semantic-spacing-component-comfortable: 24px;
        --semantic-spacing-content-xl: 64px;
        --semantic-spacing-content-lg: 32px;
        --semantic-spacing-content-md: 24px;
        --nav-height: 124px;
    }
}

@media (width >= 1440px) {
    :root {
        /* semantic */
        --semantic-spacing-screen-page-width: 1440px;
        --semantic-spacing-screen-page-margin-default: 160px;
        --semantic-spacing-screen-page-margin-tight: 256px;
        --semantic-spacing-screen-page-margin-compact: 352px;
        --semantic-spacing-screen-column-margin: 64px;
        --semantic-spacing-screen-column-gutter: 32px;
    }
}

@media (width >= 1920px) {
    :root {
        /* semantic */
        --semantic-spacing-screen-page-width: 1920px;
        --semantic-spacing-screen-page-margin-default: 400px;
        --semantic-spacing-screen-page-margin-tight: 496px;
        --semantic-spacing-screen-page-margin-compact: 592px;
    }
}

/* responsive:end */

/* fallback fonts */
@font-face {
    font-family: roboto-condensed-fallback;
    size-adjust: 88.82%;
    src: local("Arial");
}

@font-face {
    font-family: roboto-fallback;
    size-adjust: 99.529%;
    src: local("Arial");
}

body {
    display: none;
    margin: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--semantic-typography-body-md-font-family);
    font-size: var(--semantic-typography-body-md-font-size);
    line-height: var(--semantic-typography-body-md-line-height);
}

body.appear {
    display: block;
}

@media (scripting: none) {
    body:has(.faq-accordion) {
        display: block;
    }
}

header {
    height: var(--nav-height);
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--semantic-color-surface-default);
}

/* Simple-header: mobile = two rows (64px row1 + 40px title), desktop = single row 70px */
header:has(.simple-header) {
    height: 122px;
}

@media (width >= 1025px) {
    header:has(.simple-header) {
        height: 70px;
    }
}

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

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

/* These blocks rebuild their DOM from authored field rows, so the raw rows would otherwise
   paint at a completely different height and shift the page when decoration replaces them.
   Must live here (render-blocking) — the block's own CSS arrives too late to prevent it. */
main .product-group:not([data-block-status="loaded"]),
main .product-group-list:not([data-block-status="loaded"]) {
    display: none;
}

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

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

pre {
    padding: 16px;
    border-radius: 8px;
    background-color: var(--light-color);
    overflow-x: auto;
    white-space: pre;
}

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

/* links */
a:any-link {
    color: var(--semantic-color-text-on-action-default-default);
    text-decoration: underline;
    overflow-wrap: break-word;
}

a:hover {
    color: var(--semantic-color-text-on-action-default-hover);
    text-decoration: underline;
}

/* ============================================================
 * BUTTONS (reusable button component styles)
 * All selectors are scoped to .button to avoid polluting global styles.
 *
 * Token fallbacks: styles/variables.css and styles/semantic.css may not be
 * present on all branches. Every var() below includes a raw-value fallback so
 * the button renders correctly even without those files.
 *
 * Architecture: variant colours are defined as CSS custom properties on the
 * .button block element and consumed once in the button element rules.
 * This prevents descending-specificity issues while keeping selectors DRY.
 * ============================================================ */

/* ── 1. Design-token palette (fallback raw values) ────────── */
.button {
    /* Spacing – default size */
    --racq-btn-ph: var(
        --semantic-spacing-interactive-button-horizontal-default,
        40px
    );
    --racq-btn-pv: var(
        --semantic-spacing-interactive-button-vertical-default,
        20px
    );

    /* Typography */
    --racq-btn-font-size: var(--typography-size-18, 18px);
    --racq-btn-font-family: var(
        --typography-family-primary,
        "Museo Sans",
        sans-serif
    );
    --racq-btn-font-weight: var(--typography-weight-700, 700);
    --racq-btn-line-height: var(--typography-line-height-24, 24px);
    --racq-btn-letter-spacing: calc(
        var(--typography-letter-spacing-1, 1) * 0.01em
    );
    --racq-btn-focus-ring: var(--semantic-color-focus-default-ring, #000);
    --racq-btn-focus-offset: 2px;

    /* Shape + motion */
    --racq-btn-radius: var(--radius-full, 9999px);
    --racq-btn-duration: var(--motion-duration-200, 200ms);
    --racq-btn-easing: var(
        --motion-easing-standard,
        cubic-bezier(0.2, 0, 0, 1)
    );

    /* Icon + group */
    --racq-btn-icon-size: var(--size-16, 16px);
    --racq-btn-icon-gap: var(--spacing-16, 16px);
    --racq-btn-group-gap: var(--spacing-8, 8px);

    /* Current-variant slots (overridden per-variant below)
   * Default = primary (yellow bg, inverse text, no border). */
    --racq-btn-bg: var(--semantic-color-action-primary-default, #ffe600);
    --racq-btn-bg-hover: var(--semantic-color-action-primary-hover, #ffee4d);
    --racq-btn-bg-active: var(--semantic-color-action-primary-active, #d9c400);
    --racq-btn-color: var(
        --semantic-color-text-on-action-default-default,
        #00247a
    );
    --racq-btn-color-hover: var(
        --semantic-color-text-on-action-default-hover,
        #001f68
    );
    --racq-btn-color-active: var(
        --semantic-color-text-on-action-default-pressed,
        #001955
    );
    --racq-btn-bg-disabled: var(
        --semantic-color-action-primary-disabled,
        #d9e3e8
    );
    --racq-btn-color-disabled: var(
        --semantic-color-text-on-action-default-disabled,
        #b4b9c1
    );
    --racq-btn-border-color: transparent;
    --racq-btn-border-color-hover: transparent;
    --racq-btn-border-color-active: transparent;
    --racq-btn-border-color-disabled: transparent;
}

/* ── 2. Size modifiers ────────────────────────────────────── */
.button.small {
    --racq-btn-ph: var(
        --semantic-spacing-interactive-button-horizontal-small,
        20px
    );
    --racq-btn-pv: var(
        --semantic-spacing-interactive-button-vertical-small,
        12px
    );
    --racq-btn-font-size: var(--semantic-typography-action-primary-sm-font-size, 14px);
    --racq-btn-line-height: var(--typography-line-height-20, 20px);
    --racq-btn-icon-size: var(--size-16, 16px);
}

@media (width >= 1024px) {
    .button.small {
        --racq-btn-font-size: var(--semantic-typography-action-primary-sm-font-size, 16px);
        --racq-btn-line-height: var(--typography-line-height-24, 24px);
    }
}

.button.small.membership,
.button.small.membership-primary,
.button.small.membership-secondary {
    --racq-btn-icon-size: var(--size-16, 16px);
}

/* Default-size buttons use the large action type style (18px) on desktop */
@media (width >= 1024px) {
    .button:not(.small) {
        --racq-btn-font-size: var(
            --semantic-typography-action-primary-lg-font-size,
            18px
        );
        --racq-btn-line-height: var(
            --semantic-typography-action-primary-lg-line-height,
            26px
        );
    }
}

/* ── 3. Button / anchor element (consumes variant vars) ────── */
.button a,
.button button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--racq-btn-icon-gap);
    padding: var(--racq-btn-pv) var(--racq-btn-ph);
    border-radius: var(--racq-btn-radius);
    border: 2px solid var(--racq-btn-border-color);
    background-color: var(--racq-btn-bg);
    color: var(--racq-btn-color);
    font-family: var(--racq-btn-font-family);
    font-size: var(--racq-btn-font-size);
    font-weight: var(--racq-btn-font-weight);
    letter-spacing: var(--racq-btn-letter-spacing);
    line-height: var(--racq-btn-line-height);
    text-decoration: none;
    cursor: pointer;
    white-space: normal;
    text-align: center;
    overflow-wrap: break-word;
    width: 100%;
    box-sizing: border-box;
    transition:
        background-color var(--racq-btn-duration) var(--racq-btn-easing),
        border-color var(--racq-btn-duration) var(--racq-btn-easing),
        color var(--racq-btn-duration) var(--racq-btn-easing);
}

@media (width >= 600px) {
    .button a,
    .button button {
        max-width: max-content;
        width: auto;
        white-space: nowrap;
    }
}

/* Base pseudo-selector states */
.button a:hover,
.button button:hover {
    background-color: var(--racq-btn-bg-hover);
    color: var(--racq-btn-color-hover);
    border-color: var(--racq-btn-border-color-hover);
}

.button a:active,
.button button:active {
    background-color: var(--racq-btn-bg-active);
    color: var(--racq-btn-color-active);
    border-color: var(--racq-btn-border-color-active);
}

.button.tertiary a,
.button.tertiary button {
    border: none;
}

/* Focus ring – WCAG 2.1 AA (3:1 contrast ratio) */
.button a:focus-visible,
.button button:focus-visible {
    outline: 3px solid var(--racq-btn-focus-ring);
    outline-offset: var(--racq-btn-focus-offset);
}

/* Native disabled <button> */
.button button:disabled {
    background-color: var(--racq-btn-bg-disabled);
    color: var(--racq-btn-color-disabled);
    border-color: var(--racq-btn-border-color-disabled);
    cursor: not-allowed;
    opacity: 1;
    pointer-events: none;
}

/* Disabled via block class (covers <a> elements) */
.button.disabled a,
.button.disabled button {
    background-color: var(--racq-btn-bg-disabled);
    color: var(--racq-btn-color-disabled);
    border-color: var(--racq-btn-border-color-disabled);
    cursor: not-allowed;
    opacity: 1;
    pointer-events: none;
}

.inverse .button a:focus-visible,
.inverse .button button:focus-visible {
    outline-color: var(--semantic-color-focus-inverse-ring, #fff);
}

/* ── 4. Variant token profiles ────────────────────────────── */
.button.primary {
    --racq-btn-bg: var(--semantic-color-action-primary-default, #ffe600);
    --racq-btn-bg-hover: var(--semantic-color-action-primary-hover, #ffee4d);
    --racq-btn-bg-active: var(--semantic-color-action-primary-active, #d9c400);
    --racq-btn-color: var(
        --semantic-color-text-on-action-default-default,
        #00247a
    );
    --racq-btn-color-hover: var(
        --semantic-color-text-on-action-default-hover,
        #001f68
    );
    --racq-btn-color-active: var(
        --semantic-color-text-on-action-default-pressed,
        #001955
    );
    --racq-btn-bg-disabled: var(
        --semantic-color-action-primary-disabled,
        #d9e3e8
    );
    --racq-btn-color-disabled: var(
        --semantic-color-text-on-action-default-disabled,
        #7d8f99
    );
    --racq-btn-border-color: transparent;
    --racq-btn-border-color-hover: transparent;
    --racq-btn-border-color-active: transparent;
    --racq-btn-border-color-disabled: transparent;
}

.button.accent,
.button.membership-primary {
    --racq-btn-bg: var(--semantic-color-action-accent-default, #00247a);
    --racq-btn-bg-hover: var(--semantic-color-action-accent-hover, #26458e);
    --racq-btn-bg-active: var(--semantic-color-action-accent-active, #001f68);
    --racq-btn-color: var(
        --semantic-color-text-on-action-inverse-default,
        #fff
    );
    --racq-btn-color-hover: var(
        --semantic-color-text-on-action-inverse-hover,
        rgb(255 255 255 / 90%)
    );
    --racq-btn-color-active: var(
        --semantic-color-text-on-action-inverse-pressed,
        rgb(255 255 255 / 70%)
    );
    --racq-btn-bg-disabled: var(
        --semantic-color-action-accent-disabled,
        #d9e3e8
    );
    --racq-btn-color-disabled: var(
        --semantic-color-text-on-action-default-disabled,
        #7d8f99
    );
    --racq-btn-border-color: transparent;
    --racq-btn-border-color-hover: transparent;
    --racq-btn-border-color-active: transparent;
    --racq-btn-border-color-disabled: transparent;
}

.button.secondary,
.button.membership-secondary,
.button.membership {
    --racq-btn-bg: transparent;
    --racq-btn-bg-hover: transparent;
    --racq-btn-bg-active: transparent;
    --racq-btn-color: var(
        --semantic-color-text-on-action-default-default,
        #00247a
    );
    --racq-btn-color-hover: var(
        --semantic-color-text-on-action-default-hover,
        #001f68
    );
    --racq-btn-color-active: var(
        --semantic-color-text-on-action-default-pressed,
        #001955
    );
    --racq-btn-bg-disabled: var(
        --semantic-color-action-secondary-disabled,
        #d9e3e8
    );
    --racq-btn-color-disabled: var(
        --semantic-color-text-on-action-default-disabled,
        #7d8f99
    );
    --racq-btn-border-color: var(
        --semantic-color-border-action-default,
        #00247a
    );
    --racq-btn-border-color-hover: var(
        --semantic-color-border-action-hover,
        #001f68
    );
    --racq-btn-border-color-active: var(
        --semantic-color-border-action-pressed,
        #001955
    );
    --racq-btn-border-color-disabled: var(
        --semantic-color-border-action-disabled,
        #7d8f99
    );
}

.button.tertiary {
    --racq-btn-bg: #fafafa;
    --racq-btn-bg-hover: var(--semantic-color-action-tertiary-hover, #b4b9c1);
    --racq-btn-bg-active: unset;
    --racq-btn-color: var(
        --semantic-color-text-on-action-default-default,
        #00247a
    );
    --racq-btn-color-hover: var(
        --semantic-color-text-on-action-default-hover,
        #001f68
    );
    --racq-btn-color-active: var(
        --semantic-color-text-on-action-default-pressed,
        #001955
    );
    --racq-btn-bg-disabled: var(
        --semantic-color-action-tertiary-disabled,
        #d9e3e8
    );
    --racq-btn-color-disabled: var(
        --semantic-color-text-on-action-default-disabled,
        #7d8f99
    );
    --racq-btn-border-color: transparent;
    --racq-btn-border-color-hover: transparent;
    --racq-btn-border-color-active: transparent;
    --racq-btn-border-color-disabled: transparent;
}

/* Link variant — borderless text/action link (navy label + optional trailing icon).
   No pill chrome (transparent background/border, no padding). For "Read more →"-style CTAs. */
.button.link {
    --racq-btn-bg: transparent;
    --racq-btn-bg-hover: transparent;
    --racq-btn-bg-active: transparent;
    --racq-btn-bg-disabled: transparent;
    --racq-btn-ph: 0;
    --racq-btn-pv: 0;
    --racq-btn-font-weight: var(--typography-weight-500, 500);
    --racq-btn-color: var(
        --semantic-color-text-on-action-default-default,
        #00247a
    );
    --racq-btn-color-hover: var(
        --semantic-color-text-on-action-default-hover,
        #001f68
    );
    --racq-btn-color-active: var(
        --semantic-color-text-on-action-default-pressed,
        #001955
    );
    --racq-btn-color-disabled: var(
        --semantic-color-text-on-action-default-disabled,
        #7d8f99
    );
    --racq-btn-border-color: transparent;
    --racq-btn-border-color-hover: transparent;
    --racq-btn-border-color-active: transparent;
    --racq-btn-border-color-disabled: transparent;
}

/* ── 5. Inverse section overrides ─────────────────────────── */
.inverse .button.primary,
.inverse .button.membership-primary {
    --racq-btn-bg: var(--semantic-color-action-inverse-default, #fff);
    --racq-btn-bg-hover: var(
        --semantic-color-action-inverse-hover,
        rgb(255 255 255 / 80%)
    );
    --racq-btn-bg-active: var(
        --semantic-color-action-inverse-active,
        rgb(255 255 255 / 70%)
    );
    --racq-btn-color: var(
        --semantic-color-text-on-action-default-default,
        #00247a
    );
    --racq-btn-color-hover: var(
        --semantic-color-text-on-action-default-hover,
        #001f68
    );
    --racq-btn-color-active: var(
        --semantic-color-text-on-action-default-pressed,
        #001955
    );
    --racq-btn-bg-disabled: var(
        --semantic-color-action-inverse-disabled,
        rgb(255 255 255 / 10%)
    );
    --racq-btn-color-disabled: var(
        --semantic-color-text-on-action-inverse-disabled,
        rgb(255 255 255 / 40%)
    );
    --racq-btn-border-color: var(
        --semantic-color-border-action-inverse-default,
        #e5eaf5
    );
    --racq-btn-border-color-hover: var(
        --semantic-color-border-action-inverse-hover,
        rgb(255 255 255 / 70%)
    );
    --racq-btn-border-color-active: var(
        --semantic-color-border-action-inverse-pressed,
        rgb(255 255 255 / 50%)
    );
    --racq-btn-border-color-disabled: var(
        --semantic-color-border-action-inverse-disabled,
        rgb(255 255 255 / 20%)
    );
}

.inverse .button.accent,
.inverse .button.secondary,
.inverse .button.tertiary {
    --racq-btn-bg: var(
        --semantic-color-action-inverse-transparent,
        transparent
    );
    --racq-btn-bg-hover: var(
        --semantic-color-action-inverse-hover,
        rgb(255 255 255 / 80%)
    );
    --racq-btn-bg-active: var(
        --semantic-color-action-inverse-active,
        rgb(255 255 255 / 70%)
    );
    --racq-btn-color: var(
        --semantic-color-text-on-action-inverse-default,
        #fff
    );
    --racq-btn-color-hover: var(
        --semantic-color-text-on-action-inverse-hover,
        rgb(255 255 255 / 90%)
    );
    --racq-btn-color-active: var(
        --semantic-color-text-on-action-inverse-pressed,
        rgb(255 255 255 / 70%)
    );
    --racq-btn-bg-disabled: var(
        --semantic-color-action-inverse-disabled,
        rgb(255 255 255 / 10%)
    );
    --racq-btn-color-disabled: var(
        --semantic-color-text-on-action-inverse-disabled,
        rgb(255 255 255 / 40%)
    );
    --racq-btn-border-color: var(
        --semantic-color-border-action-inverse-default,
        #e5eaf5
    );
    --racq-btn-border-color-hover: var(
        --semantic-color-border-action-inverse-hover,
        rgb(255 255 255 / 70%)
    );
    --racq-btn-border-color-active: var(
        --semantic-color-border-action-inverse-pressed,
        rgb(255 255 255 / 50%)
    );
    --racq-btn-border-color-disabled: var(
        --semantic-color-border-action-inverse-disabled,
        rgb(255 255 255 / 20%)
    );
}

.inverse .button.tertiary {
    --racq-btn-color: var(--semantic-color-icon-on-action-inverse-default, #fff);
}

.inverse .button.membership-secondary,
.inverse .button.membership {
    --racq-btn-bg: var(--semantic-color-action-accent-default, #00247a);
    --racq-btn-bg-hover: var(--semantic-color-action-accent-hover, #26458e);
    --racq-btn-bg-active: var(--semantic-color-action-accent-active, #001f68);
    --racq-btn-color: var(
        --semantic-color-text-on-action-inverse-default,
        #fff
    );
    --racq-btn-color-hover: var(
        --semantic-color-text-on-action-inverse-hover,
        rgb(255 255 255 / 90%)
    );
    --racq-btn-color-active: var(
        --semantic-color-text-on-action-inverse-pressed,
        rgb(255 255 255 / 70%)
    );
    --racq-btn-bg-disabled: var(
        --semantic-color-action-inverse-disabled,
        rgb(255 255 255 / 10%)
    );
    --racq-btn-color-disabled: var(
        --semantic-color-text-on-action-inverse-disabled,
        rgb(255 255 255 / 40%)
    );
    --racq-btn-border-color: var(
        --semantic-color-border-action-inverse-default,
        #e5eaf5
    );
    --racq-btn-border-color-hover: var(
        --semantic-color-border-action-inverse-hover,
        rgb(255 255 255 / 70%)
    );
    --racq-btn-border-color-active: var(
        --semantic-color-border-action-inverse-pressed,
        rgb(255 255 255 / 50%)
    );
    --racq-btn-border-color-disabled: var(
        --semantic-color-border-action-inverse-disabled,
        rgb(255 255 255 / 20%)
    );
}

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

.icon {
    display: inline-block;
    width: var(--racq-btn-icon-size, 16px);
    height: var(--racq-btn-icon-size, 16px);
}

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

/* ── 6. Icon sizing ───────────────────────────────────────── */
.button .icon img,
.button .button-icon img {
    display: block;
    width: var(--racq-btn-icon-size);
    height: var(--racq-btn-icon-size);
}

.button .button-icon-mask {
    display: block;
    width: var(--racq-btn-icon-size);
    height: var(--racq-btn-icon-size);
    background-color: currentcolor;
}

/* ── 7. Multiple button layout (container-level) ──────────── */

/* Single .button-wrapper stays display:block so margin:auto from
   main > .section > div correctly centres it within the content column.
   Multiple adjacent button blocks: the section becomes a flex row and its
   horizontal padding replicates the centred content column so the button
   group stays within the same 1120px gutter as all other blocks. */
@media (width > 1024px) {
    /* Custom-columns layout: decorateColumnsSections groups blocks into
       .flex > .column, so adjacent button-wrappers become siblings inside
       .column. Make .column a flex row when that happens. */
    .column:has(> .button-wrapper + .button-wrapper) {
        flex-flow: row wrap;
        gap: var(--semantic-spacing-component-compact, 16px);
        align-items: flex-start;
    }

    .column:has(> .button-wrapper + .button-wrapper) > .button-wrapper {
        flex: 0 0 auto;
        max-width: none;
        margin: 0;
    }

    /* Standalone multi-button sections: .button-wrapper divs are direct children
       of .section (decorateColumnsSections moves them into .column later, so
       the > combinator ensures we only match the non-column case). */
    main > .section:has(> .button-wrapper + .button-wrapper) {
        display: flex;
        flex-wrap: wrap;
        gap: var(--semantic-spacing-component-compact, 16px);
        padding-left: max(
            var(--semantic-spacing-screen-page-margin-default, 24px),
            calc((100% - 960px) / 2)
        );
        padding-right: max(
            var(--semantic-spacing-screen-page-margin-default, 24px),
            calc((100% - 960px) / 2)
        );
    }

    main > .section:has(> .button-wrapper + .button-wrapper) > .button-wrapper {
        max-width: none;
        margin: 0;
        padding: 0;
    }
}

@media (width > 1200px) {
    main > .section:has(> .button-wrapper + .button-wrapper) {
        padding-left: calc((100% - 1120px) / 2);
        padding-right: calc((100% - 1120px) / 2);
    }
}

#membership-cta-modal {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    align-items: center;
}

@media (width < 1024px) {
    #membership-cta-modal {
        align-items: stretch;
    }

    #membership-cta-modal > .button-wrapper,
    #membership-cta-modal .button,
    #membership-cta-modal .button a,
    #membership-cta-modal .button button {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }
}

main > .section > div {
    max-width: 960px;
    margin: auto;
    padding: 0 var(--semantic-spacing-screen-page-margin-default);
}

/* Offset anchor jumps so a linked-to section clears the sticky header. */
main > .section[id] {
    scroll-margin-top: var(--nav-height);
}

/* gap between stacked blocks/default-content wrappers within the same section,
   scaled to the section's authored top-spacing value */
main > .section > div + div {
    margin-top: var(--semantic-spacing-content-lg);
}

/* ── Bordered ─────────────────────────────────────────────────────────────── */

.section[data-bordered="true"] > div,
.custom-columns-section[data-bordered="true"] > div {
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--color-border-line-subtle, #D9E3E8);
}

main > .section[data-top-spacing="no-spacing"] > div + div {
    margin-top: var(--spacing-0);
}

main > .section[data-top-spacing="tight-spacing"] > div + div {
    margin-top: var(--semantic-spacing-component-tight);
}

main > .section[data-top-spacing="compact-spacing"] > div + div {
    margin-top: var(--semantic-spacing-component-compact);
}

main > .section[data-top-spacing="comfortable-spacing"] > div + div {
    margin-top: var(--semantic-spacing-content-lg);
}

main > .section[data-top-spacing="relaxed-spacing"] > div + div {
    margin-top: var(--semantic-spacing-component-relaxed);
}

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

.modal .section[data-bordered="true"] > div,
.modal .custom-columns-section[data-bordered="true"] > div {
    padding: var(--semantic-spacing-component-comfortable) var(--semantic-spacing-component-relaxed);
}

/* In-text footnote reference marker (see scripts/footnotes.js). */
sup.footnote-ref {
    line-height: 0;
}

@media (width > 1200px) {
    main > .section > div {
        max-width: 1120px;
        padding: 0;
    }
}

/* ── Section Theming ──────────────────────────────────────────────────────── */

/* Legacy section styles - backward compatibility for document-authored sections */
main .section.light,
main .section.inverse {
    background-color: var(--color-brand-primary-base-500);
    margin: 0;
    padding: 40px 0;
}

/* subtle theme (Subtle) - UE data attribute and doc-authoring class */
main > .section[data-theme="subtle"],
main .section.subtle {
    background-color: var(--semantic-color-surface-subtle);
    margin: var(--spacing-0);
    padding: var(--semantic-spacing-section-tight) var(--spacing-0);
}

/* inverse theme (Inverse) - UE data attribute and doc-authoring class */
main > .section[data-theme="inverse"],
main .section.inverse {
    background-color: var(--semantic-color-surface-inverse);
    color: var(--color-neutral-white);
    margin: 0;
    padding: var(--semantic-spacing-section-tight) 0;
}

/* Responsive vertical padding for section spacing options */

:is(
    main > .section[data-theme="subtle"],
    main > .section[data-theme="inverse"],
    main > .section[data-theme="default"],
    main > .custom-columns-section,
    main .section.subtle,
    main .section.inverse,
    main .section.default
)[data-top-spacing="no-spacing"] {
    padding-top: var(--spacing-0);
}

:is(
    main > .section[data-theme="subtle"],
    main > .section[data-theme="inverse"],
    main > .section[data-theme="default"],
    main > .custom-columns-section,
    main .section.subtle,
    main .section.inverse,
    main .section.default
)[data-top-spacing="tight-spacing"] {
    padding-top: var(--semantic-spacing-section-tight);
}

:is(
    main > .section[data-theme="subtle"],
    main > .section[data-theme="inverse"],
    main > .section[data-theme="default"],
    main > .custom-columns-section,
    main .section.subtle,
    main .section.inverse,
    main .section.default
)[data-top-spacing="compact-spacing"] {
    padding-top: var(--semantic-spacing-section-compact);
}

:is(
    main > .section[data-theme="subtle"],
    main > .section[data-theme="inverse"],
    main > .section[data-theme="default"],
    main > .custom-columns-section,
    main .section.subtle,
    main .section.inverse,
    main .section.default
)[data-top-spacing="comfortable-spacing"] {
    padding-top: var(--semantic-spacing-section-comfortable);
}

:is(
    main > .section[data-theme="subtle"],
    main > .section[data-theme="inverse"],
    main > .section[data-theme="default"],
    main > .custom-columns-section,
    main .section.subtle,
    main .section.inverse,
    main .section.default
)[data-top-spacing="relaxed-spacing"] {
    padding-top: var(--semantic-spacing-section-relaxed);
}

:is(
    main > .section[data-theme="subtle"],
    main > .section[data-theme="inverse"],
    main > .section[data-theme="default"],
    main > .custom-columns-section,
    main .section.subtle,
    main .section.inverse,
    main .section.default
)[data-bottom-spacing="no-spacing"] {
    padding-bottom: var(--spacing-0);
}

:is(
    main > .section[data-theme="subtle"],
    main > .section[data-theme="inverse"],
    main > .section[data-theme="default"],
    main > .custom-columns-section,
    main .section.subtle,
    main .section.inverse,
    main .section.default
)[data-bottom-spacing="tight-spacing"] {
    padding-bottom: var(--semantic-spacing-section-tight);
}

:is(
    main > .section[data-theme="subtle"],
    main > .section[data-theme="inverse"],
    main > .section[data-theme="default"],
    main > .custom-columns-section,
    main .section.subtle,
    main .section.inverse,
    main .section.default
)[data-bottom-spacing="compact-spacing"] {
    padding-bottom: var(--semantic-spacing-section-compact);
}

:is(
    main > .section[data-theme="subtle"],
    main > .section[data-theme="inverse"],
    main > .section[data-theme="default"],
    main > .custom-columns-section,
    main .section.subtle,
    main .section.inverse,
    main .section.default
)[data-bottom-spacing="comfortable-spacing"] {
    padding-bottom: var(--semantic-spacing-section-comfortable);
}

:is(
    main > .section[data-theme="subtle"],
    main > .section[data-theme="inverse"],
    main > .section[data-theme="default"],
    main > .custom-columns-section,
    main .section.subtle,
    main .section.inverse,
    main .section.default
)[data-bottom-spacing="relaxed-spacing"] {
    padding-bottom: var(--semantic-spacing-section-relaxed);
}

/* ── Vertical Alignment ───────────────────────────────────────────────────── */

/* Applies to multi-column flex layouts (added by decorateColumnsSections) */
main > .section[data-layout="center-align"] > div.flex {
    align-items: center;
}

/* ── Rounded Corner ───────────────────────────────────────────────────────── */

/* Mobile (< 768px): border-radius only, no SVG */
main > .section[data-rounded-corner="true"],
main > .custom-columns-section[data-rounded-corner="true"] {
    position: relative;
    border-radius: var(--radius-0) var(--radius-0) var(--radius-48);
}

/* Desktop (>= 1024px): SVG corner per theme, no border-radius */
@media (width >= 1024px) {
    main > .section[data-rounded-corner="true"],
    main > .custom-columns-section[data-rounded-corner="true"] {
        border-radius: var(--radius-0);
    }

    main > .section[data-rounded-corner="true"]::after,
    main > .custom-columns-section[data-rounded-corner="true"]::after {
        content: "";
        position: absolute;
        bottom: -1px;
        right: 0;
        width: 224px;
        height: 102px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom right;
        pointer-events: none;
    }

    main > .section[data-rounded-corner="true"]:not([data-theme])::after,
    main > .section[data-rounded-corner="true"][data-theme="default"]::after,
    main
        > .custom-columns-section[data-rounded-corner="true"]:not(
            [data-theme]
        )::after,
    main
        > .custom-columns-section[data-rounded-corner="true"][data-theme="default"]::after {
        background-image: url("/icons/corner-white.svg");
    }

    main > .section[data-rounded-corner="true"][data-theme="subtle"]::after,
    main
        > .custom-columns-section[data-rounded-corner="true"][data-theme="subtle"]::after {
        background-image: url("/icons/corner-sand.svg");
    }

    main > .section[data-rounded-corner="true"][data-theme="inverse"]::after,
    main
        > .custom-columns-section[data-rounded-corner="true"][data-theme="inverse"]::after {
        background-image: url("/icons/corner-navy.svg");
    }
}


/* Global Headings etc */

/* ==========================================
   Base Styles (Mobile First / Default)
   ========================================== */

h1,
.h1 {
    font-family: var(
        --typography-family-primary,
        -apple-system,
        blinkmacsystemfont,
        "Segoe UI",
        roboto,
        helvetica,
        arial,
        sans-serif
    );
    font-weight: var(--typography-weight-700);
    letter-spacing: calc(
        var(--semantic-typography-heading-h1-letter-spacing) / 100
    );
    font-size: var(--semantic-typography-heading-h1-font-size);
    line-height: var(--semantic-typography-heading-h1-line-height);
    color: var(--color-brand-primary-accent-500);
    margin: var(--spacing-0);
    padding-top: var(--spacing-0);
    padding-bottom: var(--spacing-24);
}

h2,
.h2 {
    font-family: var(
        --typography-family-primary,
        -apple-system,
        blinkmacsystemfont,
        "Segoe UI",
        roboto,
        helvetica,
        arial,
        sans-serif
    );
    font-weight: var(--typography-weight-700);
    letter-spacing: calc(
        var(--semantic-typography-heading-h2-letter-spacing) / 100
    );
    font-size: var(--semantic-typography-heading-h2-font-size);
    line-height: var(--semantic-typography-heading-h2-line-height);
    color: var(--color-neutral-900);
    margin: var(--spacing-0);
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-16);
}

h3,
.h3 {
    font-family: var(
        --typography-family-primary,
        -apple-system,
        blinkmacsystemfont,
        "Segoe UI",
        roboto,
        helvetica,
        arial,
        sans-serif
    );
    font-weight: var(--typography-weight-700);
    letter-spacing: calc(
        var(--semantic-typography-heading-h3-letter-spacing) / 100
    );
    font-size: var(--semantic-typography-heading-h3-font-size);
    line-height: var(--semantic-typography-heading-h3-line-height);
    color: var(--color-neutral-900);
    margin: var(--spacing-0);
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-16);
}

h4,
.h4 {
    font-family: var(
        --typography-family-primary,
        -apple-system,
        blinkmacsystemfont,
        "Segoe UI",
        roboto,
        helvetica,
        arial,
        sans-serif
    );
    font-weight: var(--typography-weight-700);
    letter-spacing: calc(
        var(--semantic-typography-heading-h4-letter-spacing) / 100
    );
    font-size: var(--semantic-typography-heading-h4-font-size);
    line-height: var(--semantic-typography-heading-h4-line-height);
    color: var(--color-neutral-900);
    margin: var(--spacing-0);
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-16);
}

h5,
.h5 {
    font-family: var(
        --typography-family-primary,
        -apple-system,
        blinkmacsystemfont,
        "Segoe UI",
        roboto,
        helvetica,
        arial,
        sans-serif
    );
    font-weight: var(--typography-weight-700);
    letter-spacing: calc(
        var(--semantic-typography-heading-h5-letter-spacing) / 100
    );
    font-size: var(--semantic-typography-heading-h5-font-size);
    line-height: var(--semantic-typography-heading-h5-line-height);
    color: var(--color-neutral-900);
    margin: var(--spacing-0);
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-8);
}

h6,
.h6 {
    font-family: var(
        --typography-family-primary,
        -apple-system,
        blinkmacsystemfont,
        "Segoe UI",
        roboto,
        helvetica,
        arial,
        sans-serif
    );
    font-weight: var(--typography-weight-700);
    letter-spacing: calc(
        var(--semantic-typography-heading-h6-letter-spacing) / 100
    );
    font-size: var(--semantic-typography-heading-h6-font-size);
    line-height: var(--semantic-typography-heading-h6-line-height);
    color: var(--color-neutral-900);
    margin: var(--spacing-0);
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-8);
}

/* inverse theme heading overrides — must follow base h1–h6 rules (no-descending-specificity) */
main > .section[data-theme="inverse"] h1,
main > .section[data-theme="inverse"] h2,
main > .section[data-theme="inverse"] h3,
main > .section[data-theme="inverse"] h4,
main > .section[data-theme="inverse"] h5,
main > .section[data-theme="inverse"] h6,
main > .section[data-theme="inverse"] p,
main > .section[data-theme="inverse"] ul,
main .section.inverse h1,
main .section.inverse h2,
main .section.inverse h3,
main .section.inverse h4,
main .section.inverse h5,
main .section.inverse h6,
main .section.inverse ul,
main .section.inverse p {
    color: var(--color-neutral-white);
}

/* ==========================================
   Breakpoint M (min-width: 1024px)
   ========================================== */

/* Note: We cannot use css variables in media queries definitions hence why we need to hardcode this value */
@media (width >= 1024px) {
    h1,
    .h1 {
        font-size: var(--semantic-typography-heading-h1-font-size);
        line-height: var(--semantic-typography-heading-h1-line-height);
        padding-bottom: var(--spacing-32);
    }

    h2,
    .h2 {
        font-size: var(--semantic-typography-heading-h2-font-size);
        line-height: var(--semantic-typography-heading-h2-line-height);
        padding: var(--spacing-8) var(--spacing-0) var(--spacing-24);
    }

    h3,
    .h3 {
        font-size: var(--semantic-typography-heading-h3-font-size);
        line-height: var(--semantic-typography-heading-h3-line-height);
        padding: var(--spacing-8) var(--spacing-0) var(--spacing-16);
    }

    h4,
    .h4 {
        font-size: var(--semantic-typography-heading-h4-font-size);
        line-height: var(--semantic-typography-heading-h4-line-height);
        padding: var(--spacing-8) var(--spacing-0) var(--spacing-16);
    }

    h5,
    .h5 {
        font-size: var(--semantic-typography-heading-h5-font-size);
        line-height: var(--semantic-typography-heading-h5-line-height);
        padding: var(--spacing-4) var(--spacing-0) var(--spacing-8);
    }

    h6,
    .h6 {
        font-size: var(--semantic-typography-heading-h6-font-size);
        line-height: var(--semantic-typography-heading-h6-line-height);
        padding: var(--spacing-4) var(--spacing-0) var(--spacing-8);
    }
}

/* --- Tags block -------------------------------------------------------------
 * Design tokens sourced from Figma node 769:10600 (RACQ Master Tokens)
 * All selectors scoped to .tags to avoid bleed into other blocks.
 *
 * ORDERING NOTE: selectors are arranged in ascending specificity order so that
 * no lower-specificity selector ever follows a higher-specificity selector that
 * targets the same element (stylelint no-descending-specificity).
 * Base (.tags) and theme-context (.inverse .tags) rules are therefore
 * interleaved rather than grouped by context.
 * --------------------------------------------------------------------------- */

/* -- Specificity (0,1,0) ----------------------------------------------------- */

.tags {
    container-type: inline-size;
}

/* -- Specificity (0,2,0) ----------------------------------------------------- */

/* Support both .tags block and .profile-card-tags (to avoid auto-decoration) */
.tags .tags-list,
.profile-card-tags .tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
    list-style: none;
    margin: 0;
    padding: var(--spacing-16) 0;
}

/* Chip shared visual (applied to the <li>) */
.tags .tag-chip,
.profile-card-tags .tag-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    height: 2.25rem;
    padding: 0.5rem;
    border: var(--border-1) solid var(--color-brand-primary-base-500);
    border-radius: var(--radius-4);
    color: var(--color-brand-primary-base-500);
    font-family: var(
        --typography-family-primary,
        -apple-system,
        blinkmacsystemfont,
        "Segoe UI",
        roboto,
        helvetica,
        arial,
        sans-serif
    );
    font-size: var(--typography-size-16);
    font-weight: var(--typography-weight-700);
    line-height: 1;
    letter-spacing: 0;
    cursor: default;
    margin: 0;
    box-sizing: border-box;
    transition:
        background-color 0.1s ease,
        border-color 0.1s ease,
        color 0.1s ease,
        transform 0.08s ease;
}

.tags .tag-chip-interactive,
.profile-card-tags .tag-chip-interactive {
    cursor: pointer;
}

.tags .tag-chip-non-interactive,
.profile-card-tags .tag-chip-non-interactive {
    border: none;
    box-shadow: 0 4px 24px rgb(0 0 0 / 12%);
    color: var(--color-brand-primary-accent-500);
}

/* Interactive link inherits the chip visual. */
.tags .tag-chip-select,
.profile-card-tags .tag-chip-select {
    appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    padding: var(--spacing-0);
    margin: var(--spacing-0);
    font: inherit;
    color: inherit;
    cursor: inherit;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    overflow: unset;
    text-decoration: none;
}

.tags .tag-chip-display,
.profile-card-tags .tag-chip-display {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
}

.tags .tag-chip-icon,
.profile-card-tags .tag-chip-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: var(--size-16);
    height: var(--size-16);
    overflow: hidden;
}

.tags .tag-chip-label,
.profile-card-tags .tag-chip-label {
    display: block;
    font-weight: 600;
}

/* Dismiss button - circular hit target, restores pointer events */
.tags .tag-chip-dismiss,
.profile-card-tags .tag-chip-dismiss {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
    width: var(--size-20);
    height: var(--size-20);
    border-radius: 50%;
    transition: background-color 0.1s ease;
    pointer-events: auto;
}

.tags .tag-chip-dismiss::before,
.profile-card-tags .tag-chip-dismiss::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background-color: currentcolor;
    mask: url("/icons/dismiss-tag.svg") no-repeat center / contain;
}

.tags .tags-ellipsis,
.profile-card-tags .tags-ellipsis {
    display: inline-flex;
    align-self: center;
    align-items: flex-end;
    justify-content: center;
    font-size: var(--typography-size-20);
    font-weight: var(--typography-weight-500);
    color: var(--color-brand-primary-base-500);
    height: var(--size-12);
    width: var(--size-16);
    padding: 10px var(--spacing-4) var(--spacing-2);
    cursor: pointer;
}

/* -- Specificity (0,2,1) ----------------------------------------------------- */

.tags .tag-chip-icon img,
.tags .tag-chip-icon picture {
    display: block;
    width: var(--size-16);
    height: var(--size-16);
    object-fit: contain;
}

/* -- Specificity (0,3,0) ----------------------------------------------------- */

.tags .tag-chip-interactive:active {
    transform: scale(0.96);
}

/* -- Dismiss animation ------------------------------------------------------- */
@keyframes tags-chip-dismiss {
    0% {
        opacity: 1;
        transform: scale(1);
        max-width: 400px;
        margin: 0;
        padding: var(--spacing-8);
    }

    60% {
        opacity: 0;
        transform: scale(0.7);
    }

    100% {
        opacity: 0;
        transform: scale(0.7);
        max-width: 0;
        margin: 0;
        padding: 0;
    }
}

.tags .tag-chip-interactive.is-dismissed {
    animation: tags-chip-dismiss 0.25s ease-in forwards;
    overflow: hidden;
    pointer-events: none;
}

.tags .tags-ellipsis:hover {
    background: var(--color-neutral-100);
    border-radius: 50%;
}

/* Focus rings (AC7, WCAG 2.1 AA) */
.tags .tag-chip-select:focus-visible,
.tags .tag-chip-dismiss:focus-visible {
    outline: var(--border-2) solid var(--color-brand-primary-base-500);
    outline-offset: var(--spacing-2);
}

/* Hover over the dismiss button itself */
.tags .tag-chip-dismiss:hover {
    background-color: var(--color-neutral-200);
}

/* inverse: chip base - must precede .tags spec-(0,4,0) rules */
.inverse .tags .tag-chip {
    background-color: transparent;
    border-color: var(--color-neutral-white);
    color: var(--color-neutral-white);
}

.inverse .tags .tags-ellipsis {
    color: var(--color-neutral-white);
}

/* -- Specificity (0,4,0) ----------------------------------------------------- */

/* Disabled chip */
.tags .tag-chip:has(.tag-chip-select:disabled) {
    background-color: var(--color-neutral-100);
    border-color: transparent;
    color: var(--color-neutral-400);
    cursor: not-allowed;
}

/* Selected chip - no dismiss button */
.tags .tag-chip.is-selected:not(:has(.tag-chip-dismiss)) {
    background-color: var(--color-brand-primary-base-600);
    border-color: transparent;
    color: var(--color-neutral-white);
}

/* inverse: dismiss hover - must precede base spec-(0,6,0) chip-hover-dismiss */
.inverse .tags .tag-chip-dismiss:hover {
    background-color: var(--color-shades-white-800);
}

/* inverse: focus rings - must precede base spec-(0,6,0) chip-hover-dismiss */
.inverse .tags .tag-chip-select:focus-visible,
.inverse .tags .tag-chip-dismiss:focus-visible {
    outline-color: var(--color-neutral-white);
}

.inverse .tags .tags-ellipsis:hover {
    background: var(--color-shades-white-800);
}

/* -- Specificity (0,5,0) ----------------------------------------------------- */

/* Hover: chips WITHOUT dismiss -> full mid-blue fill */
.tags
    .tag-chip-interactive:not(:has(.tag-chip-dismiss)):hover:not(.is-selected) {
    background-color: var(--color-brand-primary-base-450);
    border-color: transparent;
    color: var(--color-neutral-white);
}

.tags .tag-chip.is-selected:not(:has(.tag-chip-dismiss)) .tag-chip-icon img,
.tags
    .tag-chip-interactive:not(:has(.tag-chip-dismiss)):hover:not(.is-selected)
    .tag-chip-icon
    img {
    filter: brightness(0) invert(1);
}

/* Selected chip WITH dismiss - only the x button gets a grey pill */
.tags .tag-chip.is-selected:has(.tag-chip-dismiss) .tag-chip-dismiss {
    border-radius: var(--radius-full);
    background: var(--color-neutral-200);
}

/* inverse: selected chip - no dismiss */
.inverse .tags .tag-chip.is-selected:not(:has(.tag-chip-dismiss)) {
    background-color: var(--color-shades-white-700);
    border-color: transparent;
    color: var(--color-brand-primary-base-500);
}

/* -- Specificity (0,6,0) ----------------------------------------------------- */

/* Hover over chip (has dismiss, not selected) -> tint dismiss button */
.tags
    .tag-chip-interactive:has(.tag-chip-dismiss):hover:not(.is-selected)
    .tag-chip-dismiss {
    background-color: var(--color-neutral-100);
}

/* inverse: hover - chips WITHOUT dismiss */
.inverse
    .tags
    .tag-chip-interactive:not(:has(.tag-chip-dismiss)):hover:not(.is-selected) {
    background-color: var(--color-neutral-white);
    border-color: var(--color-neutral-white);
    color: var(--color-brand-primary-base-500);
}

.inverse
    .tags
    .tag-chip.is-selected:not(:has(.tag-chip-dismiss))
    .tag-chip-icon
    img,
.inverse
    .tags
    .tag-chip-interactive:not(:has(.tag-chip-dismiss)):hover:not(.is-selected)
    .tag-chip-icon
    img {
    filter: brightness(0) invert(1);
}

/* inverse: hover - chips WITH dismiss */
.inverse
    .tags
    .tag-chip-interactive:has(.tag-chip-dismiss):hover:not(.is-selected) {
    background-color: transparent;
    border-color: var(--color-neutral-white);
}

/* inverse: selected chip WITH dismiss - only x gets tinted */
.inverse .tags .tag-chip.is-selected:has(.tag-chip-dismiss) .tag-chip-dismiss {
    background: var(--color-shades-white-700);
    color: var(--color-brand-primary-base-500);
}

/* inverse: hover over chip WITH dismiss -> tint dismiss button */
.inverse
    .tags
    .tag-chip-interactive:has(.tag-chip-dismiss):hover:not(.is-selected)
    .tag-chip-dismiss {
    background-color: var(--color-shades-white-800);
    color: var(--color-brand-primary-base-500);
}