.dp-ui-container {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(
        var(--dp-ui-container-max)
        + var(--dp-ui-page-padding-desktop)
        + var(--dp-ui-page-padding-desktop)
    );
    margin-inline: auto;
    padding-inline: var(--dp-ui-page-padding-desktop);
}

.dp-ui-button,
.dp-ui-button:visited,
.dp-ui-button--primary,
.dp-ui-button--primary:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dp-ui-space-2);
    box-sizing: border-box;
    min-height: 48px;
    padding: var(--dp-ui-space-3) var(--dp-ui-space-5);
    border-width: var(--dp-ui-border-thin);
    border-style: solid;
    border-color: var(--dp-ui-color-brand-primary);
    border-radius: var(--dp-ui-radius-control);
    appearance: none;
    background-color: var(--dp-ui-color-brand-primary);
    color: var(--dp-ui-color-text-on-dark);
    font-family: var(--dp-ui-font-family);
    font-size: var(--dp-ui-font-label-size);
    font-weight: var(--dp-ui-font-label-weight);
    line-height: var(--dp-ui-font-label-line-height);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--dp-ui-motion-fast) var(--dp-ui-easing-standard),
        border-color var(--dp-ui-motion-fast) var(--dp-ui-easing-standard),
        color var(--dp-ui-motion-fast) var(--dp-ui-easing-standard),
        box-shadow var(--dp-ui-motion-fast) var(--dp-ui-easing-standard);
}

.dp-ui-button--compact {
    min-height: 40px;
    padding: var(--dp-ui-space-2) var(--dp-ui-space-4);
}

.dp-ui-button:hover,
.dp-ui-button--primary:hover {
    border-color: var(--dp-ui-color-brand-primary-hover);
    background-color: var(--dp-ui-color-brand-primary-hover);
    color: var(--dp-ui-color-text-on-dark);
}

.dp-ui-button--secondary,
.dp-ui-button--secondary:visited {
    border-color: var(--dp-ui-color-outline);
    background-color: var(--dp-ui-color-surface-card);
    color: var(--dp-ui-color-brand-primary);
}

.dp-ui-button--secondary:hover {
    border-color: var(--dp-ui-color-brand-primary);
    background-color: var(--dp-ui-color-surface-subtle);
    color: var(--dp-ui-color-brand-primary-hover);
}

.dp-ui-button--ghost,
.dp-ui-button--ghost:visited {
    border-color: transparent;
    background-color: transparent;
    color: var(--dp-ui-color-brand-primary);
}

.dp-ui-button--ghost:hover {
    background-color: var(--dp-ui-color-surface-subtle);
    color: var(--dp-ui-color-brand-primary-hover);
}

.dp-ui-focus-ring:focus-visible,
.dp-ui-button:focus-visible {
    outline: 3px solid var(--dp-ui-color-brand-primary);
    outline-offset: 3px;
}

.dp-ui-focus-ring.dp-ui-focus-ring--inverse:focus-visible {
    outline-color: var(--dp-ui-color-accent-gold);
}

.dp-ui-button:active {
    box-shadow: inset 0 0 0 var(--dp-ui-border-thin) currentColor;
}

.dp-ui-button:disabled,
.dp-ui-button[aria-disabled="true"] {
    border-color: var(--dp-ui-color-outline-subtle);
    background-color: var(--dp-ui-color-surface-subtle);
    color: var(--dp-ui-color-text-muted);
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}

.dp-ui-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 100%;
    min-height: 32px;
    padding: var(--dp-ui-space-1) var(--dp-ui-space-3);
    border: var(--dp-ui-border-thin) solid var(--dp-ui-color-outline-subtle);
    border-radius: var(--dp-ui-radius-pill);
    background-color: var(--dp-ui-color-surface-subtle);
    color: var(--dp-ui-color-text-muted);
    font-family: var(--dp-ui-font-family);
    font-size: var(--dp-ui-font-label-size);
    font-weight: var(--dp-ui-font-label-weight);
    line-height: var(--dp-ui-font-label-line-height);
    overflow-wrap: anywhere;
    text-align: center;
}

.dp-ui-badge--brand {
    border-color: var(--dp-ui-color-brand-primary);
    background-color: var(--dp-ui-color-surface-card);
    color: var(--dp-ui-color-brand-primary);
}

.dp-ui-badge--accent {
    border-color: var(--dp-ui-color-accent-gold);
    background-color: var(--dp-ui-color-surface-card);
    color: var(--dp-ui-color-accent-orange);
}

.dp-ui-badge--inverse {
    border-color: var(--dp-ui-color-text-on-dark-muted);
    background-color: var(--dp-ui-color-brand-navy-soft);
    color: var(--dp-ui-color-text-on-dark);
}

.dp-ui-card {
    box-sizing: border-box;
    max-width: 100%;
    padding: var(--dp-ui-space-6);
    border: var(--dp-ui-border-thin) solid var(--dp-ui-color-outline-subtle);
    border-radius: var(--dp-ui-radius-card);
    background-color: var(--dp-ui-color-surface-card);
    color: var(--dp-ui-color-text-primary);
    font-family: var(--dp-ui-font-family);
    box-shadow: var(--dp-ui-shadow-card);
}

.dp-ui-section-heading {
    box-sizing: border-box;
    display: grid;
    max-width: 100%;
    font-family: var(--dp-ui-font-family);
}

.dp-ui-section-heading__eyebrow {
    margin: 0 0 var(--dp-ui-space-3);
    color: var(--dp-ui-color-brand-primary);
    font-family: var(--dp-ui-font-family);
    font-size: var(--dp-ui-font-label-size);
    font-weight: var(--dp-ui-font-label-weight);
    line-height: var(--dp-ui-font-label-line-height);
    overflow-wrap: anywhere;
}

.dp-ui-section-heading__title {
    margin: 0;
    color: var(--dp-ui-color-text-primary);
    font-family: var(--dp-ui-font-family);
    font-size: clamp(
        var(--dp-ui-font-heading-large-size),
        3vw,
        var(--dp-ui-font-section-title-size)
    );
    font-weight: var(--dp-ui-font-section-title-weight);
    line-height: var(--dp-ui-font-section-title-line-height);
    overflow-wrap: anywhere;
}

.dp-ui-section-heading__copy {
    margin: var(--dp-ui-space-5) 0 0;
    color: var(--dp-ui-color-text-muted);
    font-family: var(--dp-ui-font-family);
    font-size: var(--dp-ui-font-body-large-size);
    font-weight: var(--dp-ui-font-body-large-weight);
    line-height: var(--dp-ui-font-body-large-line-height);
    overflow-wrap: anywhere;
}

.dp-ui-section-heading--center {
    text-align: center;
}

.dp-ui-icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 52px;
    height: 52px;
    border-radius: var(--dp-ui-radius-control-large);
    background-color: var(--dp-ui-color-brand-primary-soft);
    color: var(--dp-ui-color-brand-primary);
}

.dp-ui-icon-container > svg {
    display: block;
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
}

.dp-ui-reveal,
.dp-ui-reveal__item {
    box-sizing: border-box;
}

.dp-ui-reveal.is-dp-ui-reveal-prepared .dp-ui-reveal__item {
    opacity: 0;
    transform: translateY(
        var(--dp-ui-reveal-distance, var(--dp-ui-space-5))
    );
    transition:
        opacity var(--dp-ui-motion-reveal) var(--dp-ui-easing-standard),
        transform var(--dp-ui-motion-reveal) var(--dp-ui-easing-standard);
    transition-delay: var(--dp-ui-reveal-delay, 0ms);
}

.dp-ui-reveal.is-dp-ui-reveal-prepared .dp-ui-reveal__item--left {
    transform: translateX(
        calc(-1 * var(--dp-ui-reveal-distance, var(--dp-ui-space-5)))
    );
}

.dp-ui-reveal.is-dp-ui-reveal-prepared .dp-ui-reveal__item--right {
    transform: translateX(
        var(--dp-ui-reveal-distance, var(--dp-ui-space-5))
    );
}

.dp-ui-reveal.is-dp-ui-reveal-visible .dp-ui-reveal__item {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .dp-ui-reveal.is-dp-ui-reveal-prepared .dp-ui-reveal__item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (max-width: 1024px) {
    .dp-ui-container {
        padding-inline: var(--dp-ui-page-padding-tablet);
    }
}

@media (max-width: 640px) {
    .dp-ui-container {
        padding-inline: var(--dp-ui-page-padding-mobile);
    }
}