/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
        *, :before, :after, ::backdrop {
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-space-y-reverse: 0;
            --tw-border-style: solid;
            --tw-leading: initial;
            --tw-font-weight: initial;
            --tw-tracking: initial;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-outline-style: solid;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial
        }
    }
}

@layer theme {
    :root, :host {
        --font-sans: "Noto Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-black: #000;
        --color-white: #fff;
        --spacing: .25rem;
        --container-2xl: 42rem;
        --container-6xl: 72rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1 / .75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25 / .875);
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --tracking-normal: 0em;
        --tracking-wide: .025em;
        --radius-sm: 4px;
        --radius-md: 6px;
        --radius-lg: 8px;
        --radius-xl: .75rem;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono);
        --color-brand-primary: #002661;
        --color-brand-secondary: #007aff;
        --color-secondary-palette-mutual-fund-gold: #ffb731;
        --color-secondary-palette-teal-debt: #30b0c7;
        --color-secondary-palette-sunset-bond: #f86f34;
        --color-secondary-palette-fiscal-flame: #f93d3d;
        --color-secondary-palette-divident-pink: #f053c8;
        --color-secondary-palette-portfolio-plum: #c490f9;
        --color-content-primary: #3a3c4d;
        --color-content-secondary: #4b4b4b;
        --color-content-tertiary: #5e5e5e;
        --color-content-select: #a6a6a6;
        --color-content-action: #007aff;
        --color-content-white: #fff;
        --color-background-primary: #fff;
        --color-background-light-grey: #f5f5f5;
        --color-background-dark-grey: #d9d9d9;
        --color-background-accent-blue: #3d9bff;
        --color-background-light-blue: #ebf5ff;
        --color-background-card: #f4f4f4;
        --color-border-opaque: #c6c6c8;
        --color-border-transparent: #0000001f;
        --color-border-selected: #007aff66;
        --color-border-line: #e2e2e2;
        --color-semantic-negative: #fc0c08;
        --color-semantic-negative-light: #fff0ee;
        --color-semantic-warning: #f6bc2f;
        --color-semantic-warning-light: #fdf2dc;
        --color-semantic-positive: #11914d;
        --color-semantic-positive-light: #eaf6ed;
        --radius-full: 9999px;
        --shadow-card: 1px 1px 4px 1px #0000000a, -1px -1px 4px 0 #0000000a;
        --shadow-elevated: 2px 5px 12px #0227621a, 10px 19px 21px #02276217, 22px 42px 29px #0227620d;
        --font-display: "Noto Sans Display", "Noto Sans", ui-sans-serif, system-ui, sans-serif;
        --text-web-h1: 52px;
        --text-web-h1--line-height: 56px;
        --text-web-h1--letter-spacing: -.25px;
        --text-web-h1--font-weight: 500;
        --text-web-h2: 32px;
        --text-web-h2--line-height: 36px;
        --text-web-h2--letter-spacing: -1px;
        --text-web-h2--font-weight: 500;
        --text-web-h3: 28px;
        --text-web-h3--line-height: 36px;
        --text-web-h3--letter-spacing: -1px;
        --text-web-h3--font-weight: 500;
        --text-web-h4: 24px;
        --text-web-h4--line-height: 36px;
        --text-web-h4--letter-spacing: -1px;
        --text-web-h4--font-weight: 500;
        --text-web-section: 24px;
        --text-web-section--line-height: 32px;
        --text-web-section--letter-spacing: 3px;
        --text-web-section--font-weight: 600;
        --text-web-label: 18px;
        --text-web-label--line-height: 20px;
        --text-web-label--letter-spacing: .6px;
        --text-web-label--font-weight: 700;
        --text-web-content-title: 18px;
        --text-web-content-title--line-height: 1.4;
        --text-web-content-title--font-weight: 500;
        --text-web-subheading: 16px;
        --text-web-subheading--line-height: 24px;
        --text-web-subheading--letter-spacing: -.15px;
        --text-web-subheading--font-weight: 400;
        --text-web-body: 14px;
        --text-web-body--line-height: 24px;
        --text-web-body--letter-spacing: -.15px;
        --text-web-body--font-weight: 400;
        --text-web-body-strong: 14px;
        --text-web-body-strong--line-height: 20px;
        --text-web-body-strong--font-weight: 600;
        --text-web-microcopy: 12px;
        --text-web-microcopy--line-height: 20px;
        --text-web-microcopy--font-weight: 400;
        --text-app-h1: 24px;
        --text-app-h1--line-height: 42px;
        --text-app-h1--letter-spacing: .38px;
        --text-app-h1--font-weight: 600;
        --text-app-h2: 20px;
        --text-app-h2--line-height: 1.4;
        --text-app-h2--letter-spacing: .38px;
        --text-app-h2--font-weight: 600;
        --text-app-breadcrumb: 14px;
        --text-app-breadcrumb--line-height: 20px;
        --text-app-breadcrumb--font-weight: 400;
        --text-app-body: 14px;
        --text-app-body--line-height: 20px;
        --text-app-body--font-weight: 400;
        --text-table-content: 14px;
        --text-table-content--line-height: 24px;
        --text-table-content--letter-spacing: -.15px;
        --text-table-content--font-weight: 400;
        --text-table-title: 14px;
        --text-table-title--line-height: 17px;
        --text-table-title--letter-spacing: -.25px;
        --text-table-title--font-weight: 500
    }
}

@layer base {
    *, :after, :before, ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html, :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings,normal);
        font-variation-settings: var(--default-font-variation-settings,normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
        font-weight: inherit
    }

    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

    b, strong {
        font-weight: bolder
    }

    code, kbd, samp, pre {
        font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings,normal);
        font-variation-settings: var(--default-mono-font-variation-settings,normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

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

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol, ul, menu {
        list-style: none
    }

    img, svg, video, canvas, audio, iframe, embed, object {
        vertical-align: middle;
        display: block
    }

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

    button, input, select, optgroup, textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple],[size])) optgroup {
        font-weight: bolder
    }

        :where(select:is([multiple],[size])) optgroup option {
            padding-inline-start: 20px
        }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button, input:where([type=button],[type=reset],[type=submit]) {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }

    body {
        background-color: var(--color-bg-white);
        color: var(--color-content-primary);
        font-family: var(--font-sans);
        -webkit-font-smoothing: antialiased
    }
}

@layer components {
    .btn {
        height: 40px;
        font-family: var(--font-sans);
        white-space: nowrap;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        border: 1px solid #0000;
        border-radius: 12px;
        justify-content: center;
        align-items: center;
        gap: 4px;
        padding-inline: 16px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        transition: background-color .15s,color .15s,border-color .15s,box-shadow .15s;
        display: inline-flex
    }

        .btn :where(svg) {
            flex: none;
            width: 24px;
            height: 24px
        }

    .btn-icon {
        width: 40px;
        padding-inline: 0
    }

    .btn-primary {
        background-color: var(--color-content-action);
        color: var(--color-content-white)
    }

        .btn-primary:hover, .btn-primary[data-state=hover] {
            background-color: var(--color-brand-primary)
        }

        .btn-primary:active, .btn-primary[data-state=pressed] {
            box-shadow: inset 0 0 0 2px #2859c5
        }

    .btn-secondary {
        border-color: var(--color-content-action);
        color: var(--color-content-action);
        background-color: #0000
    }

        .btn-secondary:hover, .btn-secondary:active, .btn-secondary[data-state=hover], .btn-secondary[data-state=pressed] {
            background-color: var(--color-background-light-blue)
        }

    .btn-outline {
        border: 1.5px solid var(--color-content-primary);
        border-radius: var(--radius-lg);
        height: auto;
        color: var(--color-content-primary);
        background-color: #0000;
        padding: 12px 16px;
        font-size: 20px;
        font-weight: 600
    }

        .btn-outline:hover, .btn-outline[data-state=hover] {
            background-color: var(--color-content-action);
            border-color: var(--color-content-action);
            color: var(--color-content-white)
        }

    .btn-tertiary {
        color: var(--color-brand-primary);
        background-color: #0000
    }

        .btn-tertiary:hover, .btn-tertiary[data-state=hover] {
            color: var(--color-content-action);
            text-underline-offset: 2px;
            text-decoration: underline
        }

    .btn:disabled, .btn.is-disabled, .btn[data-state=disabled] {
        cursor: not-allowed;
        box-shadow: none;
        text-decoration: none
    }

    .btn-primary:disabled, .btn-primary.is-disabled, .btn-primary[data-state=disabled], .btn-secondary:disabled, .btn-secondary.is-disabled, .btn-secondary[data-state=disabled] {
        background-color: #a6a6a633
    }

    @supports (color:color-mix(in lab, red, red)) {
        .btn-primary:disabled, .btn-primary.is-disabled, .btn-primary[data-state=disabled], .btn-secondary:disabled, .btn-secondary.is-disabled, .btn-secondary[data-state=disabled] {
            background-color: color-mix(in srgb, var(--color-content-select) 20%, transparent)
        }
    }

    .btn-primary:disabled, .btn-primary.is-disabled, .btn-primary[data-state=disabled], .btn-secondary:disabled, .btn-secondary.is-disabled, .btn-secondary[data-state=disabled] {
        color: var(--color-content-select);
        border-color: #0000
    }

    .btn-tertiary:disabled, .btn-tertiary.is-disabled, .btn-tertiary[data-state=disabled] {
        color: var(--color-content-select);
        background-color: #0000
    }

    .field {
        flex-direction: column;
        gap: 8px;
        display: flex
    }

    .field-label {
        font-family: var(--font-sans);
        color: var(--color-content-primary);
        font-size: 14px;
        font-weight: 400;
        line-height: 20px
    }

        .field-label .req {
            color: var(--color-semantic-negative);
            margin-left: 4px
        }

    .field-label--with-info {
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        display: flex
    }

        .field-label--with-info .field-label__info {
            color: var(--color-content-primary);
            align-items: center;
            display: inline-flex;
            position: relative
        }

            .field-label--with-info .field-label__info svg {
                width: 16px;
                height: 16px;
                display: block
            }

        .field-label--with-info .field-label__tooltip {
            z-index: 60;
            min-width: 450px;
            color: var(--color-content-white);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-elevated);
            text-align: left;
            white-space: normal;
            pointer-events: none;
            background-color: #000;
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.5;
            display: none;
            position: absolute;
            bottom: calc(100% + 8px);
            right: 0
        }

        .field-label--with-info .field-label__info:hover .field-label__tooltip, .field-label--with-info .field-label__info:focus-within .field-label__tooltip {
            display: block
        }

        .field-label--with-info .field-label__tooltip:after {
            content: "";
            background: #000;
            width: 10px;
            height: 10px;
            position: absolute;
            bottom: -5px;
            right: 0;
            transform: rotate(45deg)
        }

    .input {
        background-color: var(--color-background-primary);
        border: 1px solid var(--color-border-opaque);
        border-radius: var(--radius-lg);
        width: 100%;
        height: 40px;
        font-family: var(--font-sans);
        color: var(--color-content-primary);
        padding-inline: 16px;
        font-size: 14px;
        line-height: 24px;
        transition: border-color .15s,box-shadow .15s;
        display: block
    }

        .input::placeholder {
            color: var(--color-content-select)
        }

        .input:hover, .input[data-state=hover] {
            border-color: var(--color-content-action)
        }

        .input:focus, .input[data-state=focus] {
            border-color: var(--color-content-action);
            outline: none
        }

        .input:disabled, .input[data-state=disabled] {
            background-color: var(--color-background-light-grey);
            color: var(--color-content-select);
            cursor: not-allowed
        }

        .input[id$=_countryCode]:disabled {
            color: var(--color-content-tertiary)
        }

        .field.is-error .input, .input[aria-invalid=true], .input[data-state=error] {
            border-color: var(--color-semantic-negative)
        }

    .field-help {
        font-family: var(--font-sans);
        font-size: var(--text-web-body);
        line-height: var(--text-web-body--line-height);
        letter-spacing: var(--text-web-body--letter-spacing);
        font-weight: var(--text-web-body--font-weight);
        color: var(--color-content-tertiary)
    }

    .field.is-error .field-help {
        color: var(--color-semantic-negative)
    }

    .input-wrap {
        width: 100%;
        position: relative
    }

        .input-wrap .input-icon {
            pointer-events: none;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%)
        }

    .input-icon-left {
        color: var(--color-content-select);
        left: 16px
    }

    .input-icon-right {
        color: var(--color-content-primary);
        right: 16px
    }

    .input.has-icon-left {
        padding-left: 44px
    }

    .input.has-icon-right {
        padding-right: 44px
    }

    .input-wrap .input-info-icon {
        cursor: pointer;
        color: var(--color-content-primary);
        align-items: center;
        display: inline-flex;
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-50%)
    }

        .input-wrap .input-info-icon svg {
            width: 20px;
            height: 20px;
            display: block
        }

        .input-wrap .input-info-icon .field-label__tooltip {
            z-index: 60;
            min-width: 450px;
            color: var(--color-content-white);
            border-radius: var(--radius-md);
            text-align: left;
            white-space: normal;
            pointer-events: none;
            background-color: #000;
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.5;
            display: none;
            position: absolute;
            bottom: calc(100% + 8px);
            right: 0
        }

        .input-wrap .input-info-icon:hover .field-label__tooltip, .input-wrap .input-info-icon:focus-within .field-label__tooltip {
            display: block
        }

        .input-wrap .input-info-icon .field-label__tooltip:after {
            content: "";
            background: #000;
            border-radius: 1px;
            width: 12px;
            height: 12px;
            position: absolute;
            bottom: -4px;
            right: 4px;
            transform: rotate(45deg)
        }

    .custom-select {
        width: 100%;
        position: relative
    }

    .select-trigger {
        background-color: var(--color-background-primary);
        border: 1px solid var(--color-border-opaque);
        border-radius: var(--radius-lg);
        width: 100%;
        height: 40px;
        font-family: var(--font-sans);
        letter-spacing: -.15px;
        color: var(--color-content-primary);
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        text-align: left;
        appearance: none;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 0 16px;
        font-size: 14px;
        line-height: 24px;
        transition: border-color .15s,box-shadow .15s;
        display: flex
    }

        .select-trigger:hover, .field-label:hover ~ .custom-select .select-trigger {
            border-color: var(--color-content-action)
        }

        .select-trigger:focus {
            outline: none
        }

        .select-trigger:focus, .select-trigger[aria-expanded=true] {
            box-shadow: none !important
        }

    .custom-select:focus-within .select-trigger, .custom-select.open .select-trigger {
        border-color: var(--color-content-action);
        box-shadow: 0 0 0 3px var(--color-border-selected)
    }

    .select-value {
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        overflow: hidden
    }

        .select-value.is-placeholder {
            color: var(--color-content-select)
        }

    .chevron-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%233a3c4d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: 20px 20px;
        flex: none;
        width: 20px;
        height: 20px;
        transition: transform .2s;
        display: inline-block
    }

    .select-dropdown {
        z-index: 50;
        background-color: var(--color-background-primary);
        border: 1px solid var(--color-border-opaque);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        max-height: 270px;
        margin-top: 6px;
        padding: 6px 4px;
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        overflow-y: auto
    }

    .custom-select.open .select-dropdown {
        display: block
    }

    .select-dropdown {
        scrollbar-width: thin;
        scrollbar-color: #e4e4e7 transparent
    }

        .select-dropdown::-webkit-scrollbar {
            background: 0 0;
            width: 7px
        }

        .select-dropdown::-webkit-scrollbar-button {
            width: 0;
            height: 0;
            display: none
        }

        .select-dropdown::-webkit-scrollbar-track {
            background: 0 0
        }

        .select-dropdown::-webkit-scrollbar-thumb {
            background: #e4e4e7;
            border-radius: 9999px
        }

    .select-option {
        font-family: var(--font-sans);
        letter-spacing: -.15px;
        color: var(--color-content-primary);
        cursor: pointer;
        border-radius: 4px;
        padding: 8px 16px;
        font-size: 14px;
        line-height: 24px;
        transition: background-color .1s
    }

        .select-option:hover {
            background-color: var(--color-background-light-blue)
        }

        .select-option.is-selected {
            background-color: var(--color-background-light-blue);
            font-weight: 500
        }

        .select-option.is-focused {
            background-color: var(--color-background-light-blue)
        }

    .field.is-error .select-trigger {
        border-color: var(--color-semantic-negative)
    }

    .field.is-error .custom-select.open .select-trigger, .field.is-error .custom-select:focus-within .select-trigger {
        box-shadow: 0 0 0 3px #fc0c084d
    }

    @supports (color:color-mix(in lab, red, red)) {
        .field.is-error .custom-select.open .select-trigger, .field.is-error .custom-select:focus-within .select-trigger {
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-semantic-negative) 30%, transparent)
        }
    }

    .custom-select.is-disabled .select-trigger {
        background-color: var(--color-background-light-grey);
        color: var(--color-content-select);
        cursor: not-allowed;
        border-color: var(--color-border-opaque)
    }

    .custom-select.is-disabled .chevron-icon {
        opacity: .5
    }

    .custom-select--combobox {
        position: relative
    }

        .custom-select--combobox .select-trigger {
            cursor: text;
            color: var(--color-content-primary);
            padding-right: 40px
        }

            .custom-select--combobox .select-trigger::placeholder {
                color: var(--color-content-select)
            }

        .custom-select--combobox > .chevron-icon {
            pointer-events: none;
            position: absolute;
            top: 50%;
            right: 16px;
            transform: translateY(-50%)
        }

    .select-option.is-hidden, .custom-select--searchable:not(.open) .select-dropdown {
        display: none
    }

    .custom-select--searchable.open .select-dropdown {
        flex-direction: column;
        padding: 0;
        display: flex;
        overflow: hidden
    }

    .custom-select--searchable .select-dropdown__search {
        border-bottom: 1px solid var(--color-border-opaque);
        flex: none;
        padding: 4px 8px
    }

        .custom-select--searchable .select-dropdown__search input {
            width: 100%;
            height: 36px;
            font-family: var(--font-sans);
            color: var(--color-content-primary);
            background-color: #0000;
            border: none;
            outline: none;
            padding: 0 12px;
            font-size: 14px;
            line-height: 24px
        }

            .custom-select--searchable .select-dropdown__search input:focus {
                border-color: var(--color-content-action)
            }

    .custom-select--searchable .select-dropdown__options {
        scrollbar-width: thin;
        scrollbar-color: #e4e4e7 transparent;
        flex: auto;
        max-height: 230px;
        padding: 6px 4px;
        overflow-y: auto
    }

        .custom-select--searchable .select-dropdown__options::-webkit-scrollbar {
            background: 0 0;
            width: 7px
        }

        .custom-select--searchable .select-dropdown__options::-webkit-scrollbar-button {
            width: 0;
            height: 0;
            display: none
        }

        .custom-select--searchable .select-dropdown__options::-webkit-scrollbar-track {
            background: 0 0
        }

        .custom-select--searchable .select-dropdown__options::-webkit-scrollbar-thumb {
            background: #e4e4e7;
            border-radius: 9999px
        }

    .custom-select--searchable .select-dropdown__empty {
        font-family: var(--font-sans);
        color: var(--color-content-tertiary);
        text-align: center;
        padding: 12px 16px;
        font-size: 14px;
        line-height: 24px
    }

    .calendar {
        background-color: var(--color-content-white);
        border: 1px solid var(--color-border-transparent);
        border-radius: var(--radius-lg);
        width: 276px;
        font-family: var(--font-sans);
        color: var(--color-content-primary);
        -webkit-user-select: none;
        user-select: none;
        flex-direction: column;
        padding: 8px;
        display: inline-flex
    }

    .cal-header {
        justify-content: space-between;
        align-items: center;
        padding: 8px 10px 6px;
        display: flex
    }

    .cal-month-year {
        color: var(--color-content-primary);
        align-items: center;
        gap: 16px;
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
        display: flex
    }

    .cal-select {
        position: relative
    }

    .cal-select__btn {
        height: 24px;
        color: inherit;
        font: inherit;
        cursor: pointer;
        background: 0 0;
        border: 0;
        border-radius: 4px;
        align-items: center;
        gap: 4px;
        padding: 0 6px;
        transition: background-color .15s;
        display: inline-flex
    }

        .cal-select__btn:hover {
            background-color: var(--color-background-light-blue)
        }

        .cal-select__btn:focus-visible {
            outline: 2px solid var(--color-content-action);
            outline-offset: 1px
        }

    .cal-select__chev {
        width: 12px;
        height: 12px;
        color: var(--color-content-tertiary);
        display: inline-flex
    }

        .cal-select__chev svg {
            fill: none;
            stroke: currentColor;
            stroke-width: 1.75px;
            stroke-linecap: round;
            stroke-linejoin: round;
            width: 12px;
            height: 12px
        }

    .cal-select__menu {
        z-index: 60;
        background-color: var(--color-content-white);
        border: 1px solid var(--color-border-transparent);
        border-radius: var(--radius-md);
        min-width: 52px;
        max-height: 256px;
        box-shadow: var(--shadow-card);
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-direction: column;
        margin-top: 3px;
        padding: 8px 13px;
        display: flex;
        position: absolute;
        left: 50%;
        overflow-y: auto;
        transform: translate(-50%)
    }

        .cal-select__menu::-webkit-scrollbar {
            background: 0 0;
            width: 0;
            height: 0
        }

        .cal-select__menu::-webkit-scrollbar-thumb {
            background: 0 0
        }

        .cal-select__menu[hidden] {
            display: none
        }

        .cal-select__menu.is-scrollable {
            min-width: 52px
        }

    .cal-select__opt {
        height: 28px;
        color: var(--color-content-primary);
        font: inherit;
        cursor: pointer;
        white-space: nowrap;
        background: 0 0;
        border: 0;
        border-radius: 4px;
        justify-content: center;
        align-items: center;
        padding: 0 5px;
        font-size: 12px;
        line-height: 20px;
        display: flex
    }

        .cal-select__opt:hover {
            background-color: var(--color-background-light-blue)
        }

        .cal-select__opt.is-selected {
            background-color: var(--color-background-light-blue);
            padding: 0
        }

        .cal-select__opt.is-disabled, .cal-select__opt:disabled {
            color: var(--color-content-tertiary);
            opacity: .5;
            cursor: not-allowed
        }

            .cal-select__opt.is-disabled:hover, .cal-select__opt:disabled:hover {
                background-color: #0000
            }

    .cal-nav {
        border: 1px solid var(--color-border-transparent);
        border-radius: var(--radius-md);
        width: 24px;
        height: 24px;
        color: var(--color-content-primary);
        cursor: pointer;
        background: 0 0;
        justify-content: center;
        align-items: center;
        padding: 4px;
        transition: background-color .15s,border-color .15s;
        display: inline-flex
    }

        .cal-nav:hover {
            background-color: var(--color-background-light-blue)
        }

        .cal-nav:focus-visible {
            outline: 2px solid var(--color-content-action);
            outline-offset: 1px
        }

        .cal-nav.is-disabled, .cal-nav:disabled {
            color: var(--color-content-tertiary);
            opacity: .4;
            cursor: not-allowed
        }

            .cal-nav.is-disabled:hover, .cal-nav:disabled:hover {
                border-color: var(--color-border-transparent);
                background-color: #0000
            }

        .cal-nav svg {
            fill: none;
            stroke: currentColor;
            stroke-width: 1.75px;
            stroke-linecap: round;
            stroke-linejoin: round;
            width: 16px;
            height: 16px
        }

    .cal-grid {
        flex-direction: column;
        padding: 0 4px 6px;
        display: flex
    }

    .cal-week {
        display: flex
    }

    .cal-dayname {
        width: 36px;
        height: 32px;
        color: var(--color-content-tertiary);
        justify-content: center;
        align-items: center;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        display: inline-flex
    }

    .cal-day {
        width: 36px;
        height: 32px;
        color: var(--color-content-primary);
        border-radius: var(--radius-md);
        cursor: pointer;
        appearance: none;
        background: 0 0;
        border: none;
        justify-content: center;
        align-items: center;
        padding: 6px;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        transition: background-color .15s,color .15s;
        display: inline-flex
    }

        .cal-day:hover, .cal-day[data-state=hover] {
            background-color: var(--color-background-light-blue)
        }

        .cal-day:focus-visible {
            outline: 2px solid var(--color-content-action);
            outline-offset: 1px
        }

        .cal-day.outside {
            color: var(--color-content-select);
            pointer-events: none;
            cursor: default
        }

        .cal-day.selected {
            background-color: var(--color-background-light-blue);
            color: var(--color-content-primary)
        }

            .cal-day.selected:hover {
                background-color: var(--color-background-light-blue)
            }

        .cal-day.today, .cal-day.today:hover {
            color: var(--color-content-primary);
            background-color: #0000
        }

        .cal-day:disabled, .cal-day.is-disabled {
            opacity: .3;
            cursor: not-allowed;
            pointer-events: none
        }

    .date-picker {
        width: 100%;
        position: relative
    }

    .date-picker__input {
        background-color: var(--color-background-primary);
        border: 1px solid var(--color-border-opaque);
        border-radius: var(--radius-lg);
        width: 100%;
        height: 40px;
        font-family: var(--font-sans);
        letter-spacing: -.15px;
        color: var(--color-content-primary);
        appearance: none;
        padding: 0 44px 0 16px;
        font-size: 14px;
        line-height: 24px;
        transition: border-color .15s,box-shadow .15s
    }

        .date-picker__input::placeholder {
            color: var(--color-content-select)
        }

        .date-picker__input:hover {
            border-color: var(--color-content-action)
        }

        .date-picker__input:focus {
            border-color: var(--color-content-action);
            box-shadow: none;
            outline: none
        }

    .date-picker__icon {
        width: 20px;
        height: 20px;
        color: var(--color-content-primary);
        cursor: pointer;
        background: 0 0;
        border: 0;
        border-radius: 4px;
        justify-content: center;
        align-items: center;
        padding: 0;
        display: inline-flex;
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-50%)
    }

        .date-picker__icon svg {
            pointer-events: none;
            width: 20px;
            height: 20px
        }

        .date-picker__icon:hover {
            color: var(--color-content-action)
        }

        .date-picker__icon:focus-visible {
            outline: 2px solid var(--color-content-action);
            outline-offset: 1px
        }

    .date-picker__panel {
        z-index: 50;
        margin-top: 6px;
        display: none;
        position: absolute;
        top: 100%;
        right: 0
    }

    .date-picker.open .date-picker__panel {
        display: block
    }

    .date-picker__panel .calendar {
        box-shadow: var(--shadow-card)
    }

    .date-picker.is-invalid .date-picker__input, .field.is-error .date-picker__input {
        border-color: var(--color-semantic-negative)
    }

    .date-picker.is-disabled .date-picker__input {
        background-color: var(--color-background-light-grey);
        color: var(--color-content-select);
        cursor: not-allowed;
        border-color: var(--color-border-opaque)
    }

    .date-picker.is-disabled .date-picker__icon {
        opacity: .5;
        cursor: not-allowed
    }

    .check-field {
        font-family: var(--font-sans);
        color: var(--color-content-primary);
        cursor: pointer;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        line-height: 20px;
        display: inline-flex
    }

        .check-field:has(:disabled) {
            color: var(--color-content-select);
            cursor: not-allowed
        }

    .checkbox {
        appearance: none;
        border: 1px solid var(--color-border-opaque);
        border-radius: var(--radius-sm);
        background-color: var(--color-background-primary);
        cursor: pointer;
        flex: none;
        width: 16px;
        height: 16px;
        transition: background-color .15s,border-color .15s,box-shadow .15s
    }

        .checkbox:hover {
            border-color: var(--color-content-tertiary)
        }

        .checkbox:focus-visible {
            border-color: var(--color-content-action);
            box-shadow: 0 0 0 3px var(--color-border-selected);
            outline: none
        }

        .checkbox:checked {
            background-color: var(--color-content-action);
            border-color: var(--color-content-action);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: 14px
        }

        .checkbox:disabled {
            background-color: var(--color-background-dark-grey);
            border-color: var(--color-border-opaque);
            cursor: not-allowed
        }

            .checkbox:disabled:checked {
                background-color: var(--color-content-select);
                border-color: var(--color-content-select)
            }

    .radio {
        appearance: none;
        border: 1px solid var(--color-content-select);
        border-radius: var(--radius-full);
        background-color: var(--color-background-primary);
        cursor: pointer;
        flex: none;
        place-content: center;
        width: 16.67px;
        height: 16.67px;
        transition: border-color .15s,box-shadow .15s;
        display: inline-grid
    }

        .radio:before {
            content: "";
            border-radius: var(--radius-full);
            background-color: #0000;
            width: 8.33px;
            height: 8.33px;
            transition: background-color .15s
        }

        .radio:hover {
            border-color: var(--color-content-tertiary)
        }

        .radio:focus-visible {
            box-shadow: 0 0 0 3px var(--color-border-selected);
            outline: none
        }

        .radio:checked {
            border-color: var(--color-content-action)
        }

            .radio:checked:before {
                background-color: var(--color-content-action)
            }

        .radio:disabled {
            border-color: var(--color-border-opaque);
            cursor: not-allowed
        }

            .radio:disabled:checked {
                border-color: var(--color-content-select)
            }

                .radio:disabled:checked:before {
                    background-color: var(--color-content-select)
                }

    .otp-box {
        text-align: center;
        width: 40px;
        height: 40px;
        font-family: var(--font-sans);
        color: var(--color-content-primary);
        background-color: var(--color-background-primary);
        border: 1px solid var(--color-border-opaque);
        border-radius: var(--radius-lg);
        font-size: 14px;
        transition: border-color .15s,box-shadow .15s
    }

        .otp-box:focus {
            border-color: var(--color-content-action);
            box-shadow: none;
            outline: none
        }

        .otp-box.is-error {
            border-color: var(--color-semantic-negative);
            color: var(--color-semantic-negative)
        }

    select.input {
        background-image: none;
        padding-right: 44px
    }

        select.input option {
            font-family: var(--font-sans);
            letter-spacing: -.15px;
            color: var(--color-content-primary);
            background-color: var(--color-background-primary);
            padding: 6px 8px;
            font-size: 14px;
            line-height: 24px
        }

            select.input option:checked, select.input option:focus, select.input option:hover {
                background-color: var(--color-background-light-blue);
                color: var(--color-content-primary)
            }

    .badge {
        border-radius: var(--radius-full);
        height: 24px;
        font-family: var(--font-sans);
        white-space: nowrap;
        align-items: center;
        gap: 6px;
        padding-inline: 10px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        display: inline-flex
    }

    .badge-info {
        background-color: var(--color-content-action);
        color: var(--color-content-white)
    }

    .badge-warning-solid {
        background-color: var(--color-secondary-palette-mutual-fund-gold);
        color: var(--color-content-white)
    }

    .badge-danger {
        background-color: var(--color-semantic-negative);
        color: var(--color-content-white)
    }

    .badge-success-solid {
        background-color: var(--color-semantic-positive);
        color: var(--color-content-white)
    }

    .badge-info-soft {
        background-color: #007aff1a
    }

    @supports (color:color-mix(in lab, red, red)) {
        .badge-info-soft {
            background-color: color-mix(in srgb, var(--color-content-action) 10%, transparent)
        }
    }

    .badge-info-soft {
        color: var(--color-content-action)
    }

    .badge-success-soft {
        background-color: var(--color-semantic-positive-light);
        color: var(--color-semantic-positive)
    }

    .badge-danger-soft {
        background-color: var(--color-semantic-negative-light);
        color: var(--color-semantic-negative)
    }

    .badge-warning-soft {
        background-color: var(--color-semantic-warning-light);
        color: var(--color-semantic-warning)
    }

    .badge-progress-soft {
        background-color: var(--color-semantic-warning-light);
        color: var(--color-secondary-palette-sunset-bond)
    }

    .tabs {
        border-bottom: 1px solid var(--color-border-line);
        display: flex
    }

    .tab {
        font-family: var(--font-sans);
        color: var(--color-content-tertiary);
        white-space: nowrap;
        cursor: pointer;
        background-color: #0000;
        border: 0;
        border-bottom: 3px solid #0000;
        align-items: center;
        gap: 10px;
        margin-bottom: -1px;
        padding: 16px 24px;
        font-size: 14px;
        line-height: 1;
        transition: color .15s,background-color .15s,border-color .15s;
        display: inline-flex
    }

        .tab :where(svg) {
            flex: none;
            width: 24px;
            height: 24px
        }

        .tab:hover {
            color: var(--color-content-primary)
        }

        .tab.is-active {
            background-color: var(--color-background-light-blue);
            color: var(--color-content-primary);
            border-bottom-color: var(--color-content-action)
        }

            .tab.is-active :where(svg) {
                color: var(--color-content-action)
            }

    .pagination {
        font-family: var(--font-sans);
        color: var(--color-content-tertiary);
        align-items: center;
        gap: 16px;
        font-size: 14px;
        line-height: 1;
        display: flex
    }

        .pagination .per-page {
            align-items: center;
            gap: 8px;
            display: flex
        }

            .pagination .per-page select {
                border: 1px solid var(--color-border-opaque);
                border-radius: var(--radius-sm);
                background-color: var(--color-background-primary);
                height: 36px;
                color: var(--color-content-primary);
                cursor: pointer;
                padding-inline: 12px;
                font-family: inherit;
                font-size: 14px
            }

                .pagination .per-page select:focus-visible {
                    border-color: var(--color-content-action);
                    box-shadow: 0 0 0 3px var(--color-border-selected);
                    outline: none
                }

    .pager {
        align-items: center;
        gap: 8px;
        display: flex
    }

    .pager-label {
        color: var(--color-content-tertiary)
    }

    .pager-btn {
        border-radius: var(--radius-sm);
        width: 36px;
        height: 36px;
        color: var(--color-content-select);
        cursor: pointer;
        background-color: #0000;
        border: 0;
        place-content: center;
        transition: color .15s,background-color .15s;
        display: inline-grid
    }

        .pager-btn :where(svg) {
            width: 16px;
            height: 16px
        }

        .pager-btn:hover:not(:disabled) {
            color: var(--color-content-primary);
            background-color: var(--color-background-light-grey)
        }

        .pager-btn:disabled {
            color: var(--color-background-dark-grey);
            cursor: not-allowed
        }

    .card {
        background-color: var(--color-background-primary);
        border: 1px solid var(--color-border-line);
        box-shadow: var(--shadow-card);
        border-radius: 12px
    }

    .card-pad {
        padding: 24px
    }

    .card-header {
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        display: flex
    }

    .card-title {
        font-family: var(--font-sans);
        color: var(--color-content-primary);
        font-size: 20px;
        font-weight: 600;
        line-height: 1.4
    }

    .card-subtitle {
        font-family: var(--font-sans);
        color: var(--color-content-tertiary);
        margin-top: 2px;
        font-size: 14px;
        line-height: 20px
    }

    .card-divider {
        background-color: var(--color-border-line);
        border: 0;
        height: 1px;
        margin: 0
    }

    .stat {
        flex-direction: column;
        gap: 8px;
        display: flex
    }

    .stat-label {
        font-family: var(--font-sans);
        color: var(--color-content-tertiary);
        font-size: 14px;
        line-height: 20px
    }

    .stat-value {
        font-family: var(--font-sans);
        letter-spacing: .38px;
        color: var(--color-content-primary);
        font-size: 20px;
        font-weight: 600;
        line-height: 1.2
    }

    .alert {
        border-radius: var(--radius-lg);
        font-family: var(--font-sans);
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        display: flex
    }

        .alert :where(.alert-icon) {
            flex: none;
            width: 20px;
            height: 20px
        }

        .alert .alert-close {
            color: var(--color-content-tertiary);
            cursor: pointer;
            flex: none;
            margin-left: auto;
            transition: color .15s
        }

            .alert .alert-close:hover {
                color: var(--color-content-primary)
            }

    .alert-success {
        background-color: var(--color-semantic-positive-light);
        color: var(--color-semantic-positive)
    }

    .alert-danger {
        background-color: var(--color-semantic-negative-light);
        color: var(--color-semantic-negative)
    }

    .alert-warning {
        background-color: var(--color-semantic-warning-light);
        color: var(--color-semantic-warning)
    }

    .alert-info {
        background-color: var(--color-background-light-blue);
        color: var(--color-content-action)
    }

    .stepper-wrapper {
        border-radius: var(--radius-lg);
        background: #f5f8fb;
        padding: 32px 24px
    }

    .stepper {
        justify-content: space-between;
        align-items: center;
        gap: 24px;
        max-width: 1007.34px;
        margin-inline: auto;
        display: flex
    }

    .stepper__group {
        align-items: center;
        gap: 18px;
        min-width: 0;
        display: flex
    }

    .stepper__step {
        align-items: center;
        gap: 16px;
        min-width: 0;
        display: flex
    }

    .stepper__circle {
        border: 1px solid var(--color-content-action);
        background: var(--color-background-primary);
        width: 23px;
        height: 23px;
        font-family: var(--font-sans);
        letter-spacing: -.0094em;
        color: var(--color-content-action);
        border-radius: 16px;
        flex: none;
        place-items: center;
        font-size: 16px;
        line-height: 23px;
        transition: background-color .15s,border-color .15s,color .15s;
        display: grid
    }

    .stepper__step--done .stepper__circle {
        background-color: var(--color-content-action);
        border-color: var(--color-content-action);
        color: #fff
    }

    .stepper__step--active .stepper__circle {
        border-color: var(--color-content-action);
        color: var(--color-content-action);
        background-color: #0000
    }

    .stepper__step--todo .stepper__circle {
        border-color: var(--color-brand-primary);
        color: var(--color-brand-primary);
        background-color: #0000
    }

    .stepper__label {
        font-family: var(--font-sans);
        letter-spacing: -.0094em;
        color: var(--color-brand-primary);
        white-space: nowrap;
        font-size: 16px;
        line-height: 24px
    }

    .stepper__step--done .stepper__label, .stepper__step--active .stepper__label {
        color: var(--color-content-action)
    }

    .stepper__line {
        background: #cfd6dc;
        border-radius: 9999px;
        flex: 1;
        height: 3px
    }

    .stepper__line--active {
        background: var(--color-content-action)
    }

    .reg-card {
        background: var(--color-background-primary);
        border-radius: 8px 8px 0 0;
        padding: 32px;
        box-shadow: 1px 1px 4px 1px #00000014,-1px -1px 6.3px #0000001c
    }

    .reg-card__head {
        align-items: center;
        gap: 32px;
        padding: 0;
        display: flex
    }

    .reg-card hr.reg-divider.full-width {
        max-width: none;
        margin-left: -32px;
        margin-right: -32px
    }

    .reg-card__title {
        font-family: var(--font-sans);
        letter-spacing: .0191em;
        color: var(--color-content-action);
        flex: 1;
        font-size: 20px;
        font-weight: 600;
        line-height: 28px
    }

    .reg-section-title {
        font-family: var(--font-sans);
        color: #020817;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.4
    }

    .section-heading {
        border-left: 7px solid var(--color-brand-secondary);
        align-items: center;
        gap: 16px;
        padding: 5.5px 26px 5.5px 16px;
        display: flex
    }

    .section-heading__label {
        font-family: var(--font-sans);
        color: #020817;
        font-size: 18px;
        font-weight: 500;
        line-height: 25px
    }

    .section-heading--with-subtext {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding-top: 2px;
        padding-bottom: 2px
    }

    .section-heading__subtext {
        font-family: var(--font-sans);
        color: var(--color-content-tertiary);
        font-size: 14px;
        font-weight: 400;
        line-height: 20px
    }

    .register-as {
        flex-direction: column;
        gap: 24px;
        display: flex
    }

    .register-as__options {
        align-items: center;
        gap: 12px;
        padding-left: 12px;
        padding-right: 12px;
        display: flex
    }

    .register-as__option {
        cursor: pointer;
        align-items: center;
        display: flex
    }

    .register-as__text {
        font-family: var(--font-sans);
        letter-spacing: -.0107em;
        color: var(--color-content-primary);
        padding-right: 12px;
        font-size: 14px;
        line-height: 24px
    }

    .radio-pill {
        background: var(--color-background-primary);
        cursor: pointer;
        border-radius: 83.33px;
        flex: none;
        place-items: center;
        width: 40px;
        height: 40px;
        display: grid;
        position: relative
    }

        .radio-pill .radio {
            cursor: pointer
        }

    .yes-no {
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        display: flex
    }

    .yes-no__option {
        cursor: pointer;
        align-items: center;
        padding-right: 12px;
        display: inline-flex
    }

    .yes-no__text {
        font-family: var(--font-sans);
        letter-spacing: -.0107em;
        color: var(--color-content-primary);
        font-size: 14px;
        line-height: 24px
    }

    .phone-input {
        grid-template-columns: 124px 124px 1fr;
        align-items: end;
        gap: 12px;
        width: 100%;
        display: grid
    }

        .phone-input .field {
            width: auto
        }

    .resend-otp-btn {
        cursor: pointer
    }

    .otp-row {
        justify-content: center;
        align-items: center;
        gap: 12px;
        display: flex
    }

    .reg-section {
        flex-direction: column;
        gap: 24px;
        display: flex
    }

    .reg-section__body {
        padding: 0 24px
    }

    .reg-section__head {
        padding: 0
    }

    .reg-grid {
        grid-template-columns: repeat(2,minmax(0,484px));
        gap: 24px 48px;
        padding: 0;
        display: grid
    }

    .reg-grid--loose, .reg-grid--tight {
        gap: 24px 48px
    }

    .individual-question {
        flex-direction: column;
        gap: 8px;
        display: flex
    }

    .reg-divider {
        border: 0;
        border-top: 1px solid var(--color-border-line);
        margin: 32px 0
    }

    .reg-step {
        display: block
    }

        .reg-step[hidden] {
            display: none
        }

    .reg-stack-center {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        padding: 48px 24px 32px;
        display: flex
    }

    .reg-actions {
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
        margin-top: 32px;
        display: flex
    }

        .reg-actions .reg-actions-button {
            padding-left: 20px;
            padding-right: 20px
        }

    .reg-card--success {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 32px;
        width: 100%;
        max-width: 1080px;
        min-height: 347px;
        margin-inline: auto;
        padding: 32px;
        display: flex
    }

    .success-icon {
        justify-content: center;
        align-items: center;
        display: flex
    }

    .success-icon__badge {
        background: var(--color-background-light-blue);
        border: 1px solid var(--color-content-action);
        border-radius: 30px;
        place-items: center;
        width: 48px;
        height: 48px;
        display: inline-grid
    }

    .success-icon__check {
        width: 21.6px;
        height: 21.6px;
        color: var(--color-content-action)
    }

    .success-title {
        width: 100%;
        max-width: 1016px;
        font-family: var(--font-sans);
        text-align: center;
        letter-spacing: .382812px;
        color: var(--color-content-action);
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        line-height: 27px
    }

    .success-body {
        width: 100%;
        max-width: 541px;
        font-family: var(--font-sans);
        text-align: center;
        letter-spacing: -.150391px;
        color: var(--color-content-primary);
        margin: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px
    }

    .success-action {
        border-radius: 12px;
        width: 175px;
        height: 40px;
        padding: 10px 16px
    }

    .tracker-detail-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 24px 48px;
        display: grid
    }

    .tracker-detail-item {
        flex-direction: column;
        gap: 4px;
        display: flex
    }

    .tracker-detail-label {
        font-family: var(--font-sans);
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--color-content-tertiary);
        font-size: 12px;
        font-weight: 500;
        line-height: 16px
    }

    .tracker-detail-value {
        font-family: var(--font-sans);
        font-size: var(--text-web-body-strong);
        font-weight: 500;
        line-height: var(--text-web-body-strong--line-height);
        color: var(--color-content-primary)
    }

    .tracker-status-card {
        background: var(--color-background-primary);
        border-radius: 14px;
        box-shadow: 0 1px 4px #00000014,0 4px 16px #0000000f
    }

    .tracker-status-card__header {
        background: var(--color-background-light-blue);
        border-radius: 14px 14px 0 0;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        padding: 16px 32px;
        display: flex
    }

    .tracker-status-card__name {
        font-family: var(--font-sans);
        font-size: var(--text-web-h4);
        font-weight: var(--text-web-h4--font-weight);
        line-height: var(--text-web-h4--line-height);
        letter-spacing: var(--text-web-h4--letter-spacing);
        color: var(--color-content-primary)
    }

    .tracker-status-card__id {
        font-family: var(--font-sans);
        font-size: var(--text-web-subheading);
        font-weight: var(--text-web-subheading--font-weight);
        line-height: var(--text-web-subheading--line-height);
        letter-spacing: var(--text-web-subheading--letter-spacing);
        color: var(--color-content-tertiary)
    }

    .tracker-status-badge {
        font-size: var(--text-web-body-strong);
        font-weight: var(--text-web-body-strong--font-weight);
        line-height: var(--text-web-body-strong--line-height);
        letter-spacing: 0;
        cursor: default;
        border: 1px solid;
        flex: none;
        gap: 8px;
        height: auto;
        padding: 4px 16px;
        position: relative
    }

        .tracker-status-badge.badge-warning-soft {
            color: #b3820b
        }

    .tracker-status-badge__info {
        cursor: default;
        color: currentColor;
        align-items: center;
        display: inline-flex
    }

        .tracker-status-badge__info svg {
            width: 16px;
            height: 16px;
            display: block
        }

        .tracker-status-badge__info .tracker-status-badge__tooltip {
            z-index: 60;
            width: 252px;
            color: var(--color-content-white);
            border-radius: var(--radius-md);
            font-size: var(--text-app-body);
            font-weight: var(--text-app-body--font-weight);
            line-height: var(--text-app-body--line-height);
            letter-spacing: 0;
            text-align: center;
            white-space: pre-line;
            pointer-events: none;
            background-color: #000;
            padding: 8px 12px;
            display: none;
            position: absolute;
            bottom: calc(100% + 16px);
            left: 50%;
            transform: translate(-50%)
        }

        .tracker-status-badge__info:hover .tracker-status-badge__tooltip, .tracker-status-badge__info:focus-within .tracker-status-badge__tooltip, .tracker-status-badge:hover .tracker-status-badge__tooltip, .tracker-status-badge:focus-within .tracker-status-badge__tooltip {
            display: block
        }

        .tracker-status-badge__info .tracker-status-badge__tooltip:after {
            content: "";
            background: #000;
            border-radius: 1px;
            width: 12px;
            height: 12px;
            position: absolute;
            bottom: -4px;
            left: 50%;
            transform: translate(-50%)rotate(45deg)
        }

    .tracker-status-card__body {
        flex-direction: column;
        gap: 12px;
        padding: 32px;
        display: flex
    }

    .tracker-status-row {
        align-items: flex-start;
        gap: 64px;
        padding-block: 4px;
        display: flex
    }

    .tracker-status-label {
        width: 120px;
        font-family: var(--font-sans);
        font-size: var(--text-web-subheading);
        font-weight: 600;
        line-height: var(--text-web-subheading--line-height);
        letter-spacing: var(--text-web-subheading--letter-spacing);
        color: var(--color-content-primary);
        flex: none
    }

    .tracker-status-value {
        font-family: var(--font-sans);
        font-size: var(--text-web-subheading);
        font-weight: var(--text-web-subheading--font-weight);
        line-height: var(--text-web-subheading--line-height);
        letter-spacing: var(--text-web-subheading--letter-spacing);
        color: var(--color-content-primary)
    }

    #statusMessage {
        max-width: 492px
    }

    .tracker-status-actions {
        justify-content: center;
        align-items: center;
        gap: 24px;
        margin-top: 32px;
        display: flex
    }
}

@layer utilities {
    .visible {
        visibility: visible
    }

    .sr-only {
        clip-path: inset(50%);
        white-space: nowrap;
        border-width: 0;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        position: absolute;
        overflow: hidden
    }

    .absolute {
        position: absolute
    }

    .static {
        position: static
    }

    .top-1\/2 {
        top: 50%
    }

    .right-4 {
        right: calc(var(--spacing) * 4)
    }

    .container {
        width: 100%
    }

    @media (min-width:40rem) {
        .container {
            max-width: 40rem
        }
    }

    @media (min-width:48rem) {
        .container {
            max-width: 48rem
        }
    }

    @media (min-width:64rem) {
        .container {
            max-width: 64rem
        }
    }

    @media (min-width:80rem) {
        .container {
            max-width: 80rem
        }
    }

    @media (min-width:96rem) {
        .container {
            max-width: 96rem
        }
    }

    .mx-auto {
        margin-inline: auto
    }

    .my-6 {
        margin-block: calc(var(--spacing) * 6)
    }

    .my-8 {
        margin-block: calc(var(--spacing) * 8)
    }

    .my-12 {
        margin-block: calc(var(--spacing) * 12)
    }

    .mt-1 {
        margin-top: calc(var(--spacing) * 1)
    }

    .mt-2 {
        margin-top: calc(var(--spacing) * 2)
    }

    .mt-3 {
        margin-top: calc(var(--spacing) * 3)
    }

    .mt-4 {
        margin-top: calc(var(--spacing) * 4)
    }

    .mt-6 {
        margin-top: calc(var(--spacing) * 6)
    }

    .mt-8 {
        margin-top: calc(var(--spacing) * 8)
    }

    .mt-12 {
        margin-top: calc(var(--spacing) * 12)
    }

    .mt-16 {
        margin-top: calc(var(--spacing) * 16)
    }

    .mt-\[29\.5px\] {
        margin-top: 29.5px
    }

    .mt-\[46px\] {
        margin-top: 46px
    }

    .mt-\[51px\] {
        margin-top: 51px
    }

    .mt-\[65px\] {
        margin-top: 65px
    }

    .mt-\[89px\] {
        margin-top: 89px
    }

    .mt-\[110px\] {
        margin-top: 110px
    }

    .mt-auto {
        margin-top: auto
    }

    .mb-3 {
        margin-bottom: calc(var(--spacing) * 3)
    }

    .mb-4 {
        margin-bottom: calc(var(--spacing) * 4)
    }

    .mb-8 {
        margin-bottom: calc(var(--spacing) * 8)
    }

    .mb-\[17px\] {
        margin-bottom: 17px
    }

    .ml-auto {
        margin-left: auto
    }

    .block {
        display: block
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .inline {
        display: inline
    }

    .table {
        display: table
    }

    .h-4 {
        height: calc(var(--spacing) * 4)
    }

    .h-5 {
        height: calc(var(--spacing) * 5)
    }

    .h-6 {
        height: calc(var(--spacing) * 6)
    }

    .h-10 {
        height: calc(var(--spacing) * 10)
    }

    .h-20 {
        height: calc(var(--spacing) * 20)
    }

    .h-24 {
        height: calc(var(--spacing) * 24)
    }

    .h-\[48px\] {
        height: 48px
    }

    .h-px {
        height: 1px
    }

    .min-h-\[507px\] {
        min-height: 507px
    }

    .w-4 {
        width: calc(var(--spacing) * 4)
    }

    .w-5 {
        width: calc(var(--spacing) * 5)
    }

    .w-6 {
        width: calc(var(--spacing) * 6)
    }

    .w-20 {
        width: calc(var(--spacing) * 20)
    }

    .w-44 {
        width: calc(var(--spacing) * 44)
    }

    .w-\[272\] {
        width: 272px
    }

    .w-\[320px\] {
        width: 320px
    }

    .w-auto {
        width: auto
    }

    .w-full {
        width: 100%
    }

    .w-px {
        width: 1px
    }

    .max-w-2xl {
        max-width: var(--container-2xl)
    }

    .max-w-6xl {
        max-width: var(--container-6xl)
    }

    .max-w-\[460px\] {
        max-width: 460px
    }

    .max-w-\[585px\] {
        max-width: 585px
    }

    .max-w-\[967px\] {
        max-width: 967px
    }

    .max-w-\[973px\] {
        max-width: 973px
    }

    .max-w-\[1080px\] {
        max-width: 1080px
    }

    .max-w-\[1280px\] {
        max-width: 1280px
    }

    .min-w-\[542px\] {
        min-width: 542px
    }

    .-translate-y-1\/2 {
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .transform {
        transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
    }

    .grid-cols-1 {
        grid-template-columns: repeat(1,minmax(0,1fr))
    }

    .grid-cols-2 {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .flex-col {
        flex-direction: column
    }

    .flex-wrap {
        flex-wrap: wrap
    }

    .place-items-center {
        place-items: center
    }

    .items-center {
        align-items: center
    }

    .items-start {
        align-items: flex-start
    }

    .justify-between {
        justify-content: space-between
    }

    .justify-items-center {
        justify-items: center
    }

    .gap-2 {
        gap: calc(var(--spacing) * 2)
    }

    .gap-3 {
        gap: calc(var(--spacing) * 3)
    }

    .gap-4 {
        gap: calc(var(--spacing) * 4)
    }

    .gap-4\.5 {
        gap: calc(var(--spacing) * 4.5)
    }

    .gap-6 {
        gap: calc(var(--spacing) * 6)
    }

    .gap-8 {
        gap: calc(var(--spacing) * 8)
    }

    .gap-\[10px\] {
        gap: 10px
    }

    :where(.space-y-1>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-4>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-16>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-\[24px\]>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(24px * var(--tw-space-y-reverse));
        margin-block-end: calc(24px * calc(1 - var(--tw-space-y-reverse)))
    }

    .gap-x-\[44px\] {
        column-gap: 44px
    }

    .gap-x-\[150px\] {
        column-gap: 150px
    }

    .gap-y-\[44px\] {
        row-gap: 44px
    }

    .gap-y-\[99px\] {
        row-gap: 99px
    }

    .self-start {
        align-self: flex-start
    }

    .overflow-hidden {
        overflow: hidden
    }

    .overflow-x-auto {
        overflow-x: auto
    }

    .rounded-\[12px\] {
        border-radius: 12px
    }

    .rounded-full {
        border-radius: var(--radius-full)
    }

    .rounded-lg {
        border-radius: var(--radius-lg)
    }

    .rounded-md {
        border-radius: var(--radius-md)
    }

    .rounded-none {
        border-radius: 0
    }

    .rounded-sm {
        border-radius: var(--radius-sm)
    }

    .rounded-xl {
        border-radius: var(--radius-xl)
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .border-0 {
        border-style: var(--tw-border-style);
        border-width: 0
    }

    .border-4 {
        border-style: var(--tw-border-style);
        border-width: 4px
    }

    .border-t {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px
    }

    .border-b {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px
    }

    .border-border-line {
        border-color: var(--color-border-line)
    }

    .border-border-opaque {
        border-color: var(--color-border-opaque)
    }

    .border-border-selected {
        border-color: var(--color-border-selected)
    }

    .border-border-transparent {
        border-color: var(--color-border-transparent)
    }

    .border-transparent, .border-white\/0 {
        border-color: #0000
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-white\/0 {
            border-color: color-mix(in oklab, var(--color-white) 0%, transparent)
        }
    }

    .bg-background-accent-blue {
        background-color: var(--color-background-accent-blue)
    }

    .bg-background-card {
        background-color: var(--color-background-card)
    }

    .bg-background-dark-grey {
        background-color: var(--color-background-dark-grey)
    }

    .bg-background-light-blue {
        background-color: var(--color-background-light-blue)
    }

    .bg-background-light-grey {
        background-color: var(--color-background-light-grey)
    }

    .bg-background-primary {
        background-color: var(--color-background-primary)
    }

    .bg-brand-primary {
        background-color: var(--color-brand-primary)
    }

    .bg-brand-secondary {
        background-color: var(--color-brand-secondary)
    }

    .bg-content-action {
        background-color: var(--color-content-action)
    }

    .bg-content-primary {
        background-color: var(--color-content-primary)
    }

    .bg-content-secondary {
        background-color: var(--color-content-secondary)
    }

    .bg-content-select {
        background-color: var(--color-content-select)
    }

    .bg-content-tertiary {
        background-color: var(--color-content-tertiary)
    }

    .bg-content-white {
        background-color: var(--color-content-white)
    }

    .bg-secondary-palette-divident-pink {
        background-color: var(--color-secondary-palette-divident-pink)
    }

    .bg-secondary-palette-fiscal-flame {
        background-color: var(--color-secondary-palette-fiscal-flame)
    }

    .bg-secondary-palette-mutual-fund-gold {
        background-color: var(--color-secondary-palette-mutual-fund-gold)
    }

    .bg-secondary-palette-portfolio-plum {
        background-color: var(--color-secondary-palette-portfolio-plum)
    }

    .bg-secondary-palette-sunset-bond {
        background-color: var(--color-secondary-palette-sunset-bond)
    }

    .bg-secondary-palette-teal-debt {
        background-color: var(--color-secondary-palette-teal-debt)
    }

    .bg-semantic-negative {
        background-color: var(--color-semantic-negative)
    }

    .bg-semantic-negative-light {
        background-color: var(--color-semantic-negative-light)
    }

    .bg-semantic-positive {
        background-color: var(--color-semantic-positive)
    }

    .bg-semantic-positive-light {
        background-color: var(--color-semantic-positive-light)
    }

    .bg-semantic-warning {
        background-color: var(--color-semantic-warning)
    }

    .bg-semantic-warning-light {
        background-color: var(--color-semantic-warning-light)
    }

    .bg-white {
        background-color: var(--color-white)
    }

    .bg-white\/20 {
        background-color: #fff3
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/20 {
            background-color: color-mix(in oklab, var(--color-white) 20%, transparent)
        }
    }

    .p-3 {
        padding: calc(var(--spacing) * 3)
    }

    .p-6 {
        padding: calc(var(--spacing) * 6)
    }

    .p-8 {
        padding: calc(var(--spacing) * 8)
    }

    .p-\[84px\] {
        padding: 84px
    }

    .px-0 {
        padding-inline: calc(var(--spacing) * 0)
    }

    .px-1 {
        padding-inline: calc(var(--spacing) * 1)
    }

    .px-6 {
        padding-inline: calc(var(--spacing) * 6)
    }

    .px-8 {
        padding-inline: calc(var(--spacing) * 8)
    }

    .px-\[22px\] {
        padding-inline: 22px
    }

    .px-\[97px\] {
        padding-inline: 97px
    }

    .px-\[100px\] {
        padding-inline: 100px
    }

    .py-2 {
        padding-block: calc(var(--spacing) * 2)
    }

    .py-3 {
        padding-block: calc(var(--spacing) * 3)
    }

    .py-5 {
        padding-block: calc(var(--spacing) * 5)
    }

    .py-6 {
        padding-block: calc(var(--spacing) * 6)
    }

    .py-10 {
        padding-block: calc(var(--spacing) * 10)
    }

    .py-12 {
        padding-block: calc(var(--spacing) * 12)
    }

    .py-\[10\.5px\] {
        padding-block: 10.5px
    }

    .py-\[10px\] {
        padding-block: 10px
    }

    .py-\[52px\] {
        padding-block: 52px
    }

    .pt-6 {
        padding-top: calc(var(--spacing) * 6)
    }

    .pt-20 {
        padding-top: calc(var(--spacing) * 20)
    }

    .pt-\[80px\] {
        padding-top: 80px
    }

    .pt-\[150px\] {
        padding-top: 150px
    }

    .pr-10 {
        padding-right: calc(var(--spacing) * 10)
    }

    .pb-1 {
        padding-bottom: calc(var(--spacing) * 1)
    }

    .pb-6 {
        padding-bottom: calc(var(--spacing) * 6)
    }

    .pb-20 {
        padding-bottom: calc(var(--spacing) * 20)
    }

    .pb-\[100px\] {
        padding-bottom: 100px
    }

    .pb-\[118px\] {
        padding-bottom: 118px
    }

    .pb-\[143px\] {
        padding-bottom: 143px
    }

    .pl-10 {
        padding-left: calc(var(--spacing) * 10)
    }

    .text-center {
        text-align: center
    }

    .text-left {
        text-align: left
    }

    .font-display {
        font-family: var(--font-display)
    }

    .font-sans {
        font-family: var(--font-sans)
    }

    .text-app-h1 {
        font-size: var(--text-app-h1);
        line-height: var(--tw-leading,var(--text-app-h1--line-height));
        letter-spacing: var(--tw-tracking,var(--text-app-h1--letter-spacing));
        font-weight: var(--tw-font-weight,var(--text-app-h1--font-weight))
    }

    .text-app-h2 {
        font-size: var(--text-app-h2);
        line-height: var(--tw-leading,var(--text-app-h2--line-height));
        letter-spacing: var(--tw-tracking,var(--text-app-h2--letter-spacing));
        font-weight: var(--tw-font-weight,var(--text-app-h2--font-weight))
    }

    .text-table-content {
        font-size: var(--text-table-content);
        line-height: var(--tw-leading,var(--text-table-content--line-height));
        letter-spacing: var(--tw-tracking,var(--text-table-content--letter-spacing));
        font-weight: var(--tw-font-weight,var(--text-table-content--font-weight))
    }

    .text-table-title {
        font-size: var(--text-table-title);
        line-height: var(--tw-leading,var(--text-table-title--line-height));
        letter-spacing: var(--tw-tracking,var(--text-table-title--letter-spacing));
        font-weight: var(--tw-font-weight,var(--text-table-title--font-weight))
    }

    .text-web-body {
        font-size: var(--text-web-body);
        line-height: var(--tw-leading,var(--text-web-body--line-height));
        letter-spacing: var(--tw-tracking,var(--text-web-body--letter-spacing));
        font-weight: var(--tw-font-weight,var(--text-web-body--font-weight))
    }

    .text-web-h1 {
        font-size: var(--text-web-h1);
        line-height: var(--tw-leading,var(--text-web-h1--line-height));
        letter-spacing: var(--tw-tracking,var(--text-web-h1--letter-spacing));
        font-weight: var(--tw-font-weight,var(--text-web-h1--font-weight))
    }

    .text-web-h2 {
        font-size: var(--text-web-h2);
        line-height: var(--tw-leading,var(--text-web-h2--line-height));
        letter-spacing: var(--tw-tracking,var(--text-web-h2--letter-spacing));
        font-weight: var(--tw-font-weight,var(--text-web-h2--font-weight))
    }

    .text-web-h3 {
        font-size: var(--text-web-h3);
        line-height: var(--tw-leading,var(--text-web-h3--line-height));
        letter-spacing: var(--tw-tracking,var(--text-web-h3--letter-spacing));
        font-weight: var(--tw-font-weight,var(--text-web-h3--font-weight))
    }

    .text-web-h4 {
        font-size: var(--text-web-h4);
        line-height: var(--tw-leading,var(--text-web-h4--line-height));
        letter-spacing: var(--tw-tracking,var(--text-web-h4--letter-spacing));
        font-weight: var(--tw-font-weight,var(--text-web-h4--font-weight))
    }

    .text-web-label {
        font-size: var(--text-web-label);
        line-height: var(--tw-leading,var(--text-web-label--line-height));
        letter-spacing: var(--tw-tracking,var(--text-web-label--letter-spacing));
        font-weight: var(--tw-font-weight,var(--text-web-label--font-weight))
    }

    .text-web-section {
        font-size: var(--text-web-section);
        line-height: var(--tw-leading,var(--text-web-section--line-height));
        letter-spacing: var(--tw-tracking,var(--text-web-section--letter-spacing));
        font-weight: var(--tw-font-weight,var(--text-web-section--font-weight))
    }

    .text-web-subheading {
        font-size: var(--text-web-subheading);
        line-height: var(--tw-leading,var(--text-web-subheading--line-height));
        letter-spacing: var(--tw-tracking,var(--text-web-subheading--letter-spacing));
        font-weight: var(--tw-font-weight,var(--text-web-subheading--font-weight))
    }

    .text-app-body {
        font-size: var(--text-app-body);
        line-height: var(--tw-leading,var(--text-app-body--line-height));
        font-weight: var(--tw-font-weight,var(--text-app-body--font-weight))
    }

    .text-app-breadcrumb {
        font-size: var(--text-app-breadcrumb);
        line-height: var(--tw-leading,var(--text-app-breadcrumb--line-height));
        font-weight: var(--tw-font-weight,var(--text-app-breadcrumb--font-weight))
    }

    .text-web-body-strong {
        font-size: var(--text-web-body-strong);
        line-height: var(--tw-leading,var(--text-web-body-strong--line-height));
        font-weight: var(--tw-font-weight,var(--text-web-body-strong--font-weight))
    }

    .text-web-content-title {
        font-size: var(--text-web-content-title);
        line-height: var(--tw-leading,var(--text-web-content-title--line-height));
        font-weight: var(--tw-font-weight,var(--text-web-content-title--font-weight))
    }

    .text-web-microcopy {
        font-size: var(--text-web-microcopy);
        line-height: var(--tw-leading,var(--text-web-microcopy--line-height));
        font-weight: var(--tw-font-weight,var(--text-web-microcopy--font-weight))
    }

    .text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height))
    }

    .text-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height))
    }

    .text-\[12px\] {
        font-size: 12px
    }

    .text-\[14\.33px\] {
        font-size: 14.33px
    }

    .text-\[14px\] {
        font-size: 14px
    }

    .text-\[16px\] {
        font-size: 16px
    }

    .text-\[18px\] {
        font-size: 18px
    }

    .text-\[24px\] {
        font-size: 24px
    }

    .text-\[28px\] {
        font-size: 28px
    }

    .text-\[32px\] {
        font-size: 32px
    }

    .text-\[52px\] {
        font-size: 52px
    }

    .leading-4 {
        --tw-leading: calc(var(--spacing) * 4);
        line-height: calc(var(--spacing) * 4)
    }

    .leading-5 {
        --tw-leading: calc(var(--spacing) * 5);
        line-height: calc(var(--spacing) * 5)
    }

    .leading-6 {
        --tw-leading: calc(var(--spacing) * 6);
        line-height: calc(var(--spacing) * 6)
    }

    .leading-8 {
        --tw-leading: calc(var(--spacing) * 8);
        line-height: calc(var(--spacing) * 8)
    }

    .leading-9 {
        --tw-leading: calc(var(--spacing) * 9);
        line-height: calc(var(--spacing) * 9)
    }

    .leading-\[19px\] {
        --tw-leading: 19px;
        line-height: 19px
    }

    .leading-\[20px\] {
        --tw-leading: 20px;
        line-height: 20px
    }

    .leading-\[21px\] {
        --tw-leading: 21px;
        line-height: 21px
    }

    .leading-\[25px\] {
        --tw-leading: 25px;
        line-height: 25px
    }

    .leading-\[36px\] {
        --tw-leading: 36px;
        line-height: 36px
    }

    .leading-\[56px\] {
        --tw-leading: 56px;
        line-height: 56px
    }

    .font-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .font-normal {
        --tw-font-weight: var(--font-weight-normal);
        font-weight: var(--font-weight-normal)
    }

    .font-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .tracking-\[-0\.5px\] {
        --tw-tracking: -.5px;
        letter-spacing: -.5px
    }

    .tracking-\[-0\.15px\] {
        --tw-tracking: -.15px;
        letter-spacing: -.15px
    }

    .tracking-\[-0\.25px\] {
        --tw-tracking: -.25px;
        letter-spacing: -.25px
    }

    .tracking-\[-1px\] {
        --tw-tracking: -1px;
        letter-spacing: -1px
    }

    .tracking-\[0px\] {
        --tw-tracking: 0px;
        letter-spacing: 0
    }

    .tracking-\[1\.79px\] {
        --tw-tracking: 1.79px;
        letter-spacing: 1.79px
    }

    .tracking-\[3px\] {
        --tw-tracking: 3px;
        letter-spacing: 3px
    }

    .tracking-normal {
        --tw-tracking: var(--tracking-normal);
        letter-spacing: var(--tracking-normal)
    }

    .tracking-wide {
        --tw-tracking: var(--tracking-wide);
        letter-spacing: var(--tracking-wide)
    }

    .text-\[\#707070\] {
        color: #707070
    }

    .text-background-accent-blue {
        color: var(--color-background-accent-blue)
    }

    .text-background-light-blue\/90 {
        color: #ebf5ffe6
    }

    @supports (color:color-mix(in lab, red, red)) {
        .text-background-light-blue\/90 {
            color: color-mix(in oklab, var(--color-background-light-blue) 90%, transparent)
        }
    }

    .text-black {
        color: var(--color-black)
    }

    .text-brand-primary {
        color: var(--color-brand-primary)
    }

    .text-content-action {
        color: var(--color-content-action)
    }

    .text-content-primary {
        color: var(--color-content-primary)
    }

    .text-content-secondary {
        color: var(--color-content-secondary)
    }

    .text-content-secondary\/90 {
        color: #4b4b4be6
    }

    @supports (color:color-mix(in lab, red, red)) {
        .text-content-secondary\/90 {
            color: color-mix(in oklab, var(--color-content-secondary) 90%, transparent)
        }
    }

    .text-content-tertiary {
        color: var(--color-content-tertiary)
    }

    .text-content-white {
        color: var(--color-content-white)
    }

    .text-semantic-negative {
        color: var(--color-semantic-negative)
    }

    .text-transparent {
        color: #0000
    }

    .text-white {
        color: var(--color-white)
    }

    .text-white\/50 {
        color: #ffffff80
    }

    @supports (color:color-mix(in lab, red, red)) {
        .text-white\/50 {
            color: color-mix(in oklab, var(--color-white) 50%, transparent)
        }
    }

    .text-white\/80 {
        color: #fffc
    }

    @supports (color:color-mix(in lab, red, red)) {
        .text-white\/80 {
            color: color-mix(in oklab, var(--color-white) 80%, transparent)
        }
    }

    .text-white\/90 {
        color: #ffffffe6
    }

    @supports (color:color-mix(in lab, red, red)) {
        .text-white\/90 {
            color: color-mix(in oklab, var(--color-white) 90%, transparent)
        }
    }

    .normal-case {
        text-transform: none
    }

    .uppercase {
        text-transform: uppercase
    }

    .underline {
        text-decoration-line: underline
    }

    .underline-offset-4 {
        text-underline-offset: 4px
    }

    .underline-offset-\[2px\] {
        text-underline-offset: 2px
    }

    .opacity-90 {
        opacity: .9
    }

    .shadow-card {
        --tw-shadow: 1px 1px 4px 1px var(--tw-shadow-color,#0000000a), -1px -1px 4px 0 var(--tw-shadow-color,#0000000a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-elevated {
        --tw-shadow: 2px 5px 12px var(--tw-shadow-color,#0227621a), 10px 19px 21px var(--tw-shadow-color,#02276217), 22px 42px 29px var(--tw-shadow-color,#0227620d);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-nav {
        --tw-shadow: 1px 1px 4px 1px var(--tw-shadow-color,#00000014), -1px -1px 4px 0 var(--tw-shadow-color,#0000000a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .outline {
        outline-style: var(--tw-outline-style);
        outline-width: 1px
    }

    .blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
    }

    .filter {
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
    }

    .transition {
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    .select-none {
        -webkit-user-select: none;
        user-select: none
    }

    @media (hover:hover) {
        .group-hover\:block:is(:where(.group):hover *) {
            display: block
        }

        .group-hover\:hidden:is(:where(.group):hover *) {
            display: none
        }

        .hover\:bg-brand-primary:hover {
            background-color: var(--color-brand-primary)
        }

        .hover\:text-content-white:hover {
            color: var(--color-content-white)
        }

        .hover\:underline:hover {
            text-decoration-line: underline
        }
    }

    @media not all and (min-width:64rem) {
        .max-lg\:px-6 {
            padding-inline: calc(var(--spacing) * 6)
        }
    }

    @media (min-width:40rem) {
        .sm\:grid-cols-2 {
            grid-template-columns: repeat(2,minmax(0,1fr))
        }

        .sm\:grid-cols-3 {
            grid-template-columns: repeat(3,minmax(0,1fr))
        }
    }

    @media (min-width:48rem) {
        .md\:block {
            display: block
        }

        .md\:grid-cols-2 {
            grid-template-columns: repeat(2,minmax(0,1fr))
        }

        .md\:grid-cols-3 {
            grid-template-columns: repeat(3,minmax(0,1fr))
        }

        .md\:flex-row {
            flex-direction: row
        }

        .md\:items-center {
            align-items: center
        }

        .md\:justify-between {
            justify-content: space-between
        }
    }

    @media (min-width:64rem) {
        .lg\:mx-12 {
            margin-inline: calc(var(--spacing) * 12)
        }

        .lg\:my-0 {
            margin-block: calc(var(--spacing) * 0)
        }

        .lg\:h-auto {
            height: auto
        }

        .lg\:w-\[490px\] {
            width: 490px
        }

        .lg\:w-\[491px\] {
            width: 491px
        }

        .lg\:w-px {
            width: 1px
        }

        .lg\:grid-cols-2 {
            grid-template-columns: repeat(2,minmax(0,1fr))
        }

        .lg\:grid-cols-3 {
            grid-template-columns: repeat(3,minmax(0,1fr))
        }

        .lg\:grid-cols-4 {
            grid-template-columns: repeat(4,minmax(0,1fr))
        }

        .lg\:grid-cols-6 {
            grid-template-columns: repeat(6,minmax(0,1fr))
        }

        .lg\:flex-row {
            flex-direction: row
        }

        .lg\:self-stretch {
            align-self: stretch
        }
    }
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-leading {
    syntax: "*";
    inherits: false
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false
}

@property --tw-tracking {
    syntax: "*";
    inherits: false
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}