/* ===========================================================================
   DUI Professional: Hopen layout and Fluent-inspired Radzen Standard layer

   Radzen.Blazor supplies the complete free Standard component theme. This file
   owns only DUI Professional's Hopen design tokens, application shell, and a
   small set of stable component adjustments. It intentionally does not copy a
   Radzen theme bundle.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Hopen Corporation design system. */
    --hopen-navy: #1c3a6d;
    --hopen-navy-hover: #264b86;
    --hopen-navy-deep: #14294d;
    --hopen-blue: #2874b8;
    --hopen-blue-hover: #1f5e96;
    --hopen-ink: #1f2430;
    --hopen-muted: #5a616b;
    --hopen-line: #e2e5ea;
    --hopen-background: #f3f4f6;
    --hopen-surface: #ffffff;
    --hopen-header-link: #cdd9f0;
    --hopen-pill-line: #d6e2f5;
    --hopen-wrap-max: 1080px;
    --hopen-gutter: 24px;
    --hopen-card-radius: 12px;
    --hopen-control-radius: 8px;
    --hopen-shadow-rest: 0 1px 2px rgba(20, 41, 77, 0.05),
        0 6px 22px rgba(28, 58, 109, 0.07);
    --hopen-shadow-hover: 0 2px 5px rgba(20, 41, 77, 0.08),
        0 12px 26px rgba(20, 41, 77, 0.09);

    /* Map Radzen Standard's stable tokens to the Hopen palette. */
    --rz-primary: var(--hopen-blue);
    --rz-primary-light: #4d8fc9;
    --rz-primary-lighter: rgba(40, 116, 184, 0.14);
    --rz-primary-dark: var(--hopen-blue-hover);
    --rz-primary-darker: #17466f;
    --rz-on-primary: #ffffff;
    --rz-on-primary-light: #ffffff;
    --rz-on-primary-lighter: #173a5a;

    --rz-secondary: var(--hopen-muted);
    --rz-secondary-light: #767d87;
    --rz-secondary-lighter: rgba(90, 97, 107, 0.13);
    --rz-secondary-dark: #454b54;
    --rz-secondary-darker: #343941;
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-light: #ffffff;
    --rz-on-secondary-lighter: var(--hopen-ink);

    --rz-success: #1c6b3b;
    --rz-success-light: #28834b;
    --rz-success-lighter: #e6f2ea;
    --rz-success-dark: #15562e;
    --rz-success-darker: #104323;
    --rz-on-success: #ffffff;
    --rz-on-success-lighter: #174f2b;

    --rz-info: var(--hopen-blue);
    --rz-info-light: #4d8fc9;
    --rz-info-lighter: #eef3fb;
    --rz-info-dark: var(--hopen-blue-hover);
    --rz-info-darker: #17466f;
    --rz-on-info: #ffffff;
    --rz-on-info-lighter: #173a5a;

    --rz-warning: #8d5400;
    --rz-warning-light: #a76300;
    --rz-warning-lighter: #fff6e0;
    --rz-warning-dark: #6d4100;
    --rz-warning-darker: #523100;
    --rz-on-warning: #ffffff;
    --rz-on-warning-lighter: #5f3a00;

    --rz-danger: #c50f1f;
    --rz-danger-light: #d13438;
    --rz-danger-lighter: #fbeded;
    --rz-danger-dark: #a80000;
    --rz-danger-darker: #750b1c;
    --rz-on-danger: #ffffff;
    --rz-on-danger-lighter: #750b1c;

    --rz-text-font-family: "Segoe UI Variable Text", "Segoe UI", system-ui,
        -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --rz-body-background-color: var(--hopen-surface);
    --rz-text-color: var(--hopen-ink);
    --rz-text-secondary-color: var(--hopen-muted);
    --rz-border-color: var(--hopen-line);
    --rz-link-color: var(--hopen-blue);
    --rz-link-hover-color: var(--hopen-blue-hover);

    --rz-border-radius: 4px;
    --rz-button-border-radius: var(--hopen-control-radius);
    --rz-input-border-radius: var(--hopen-control-radius);
    --rz-card-border-radius: var(--hopen-card-radius);
    --rz-panel-border-radius: var(--hopen-card-radius);
    --rz-dialog-border-radius: var(--hopen-card-radius);
    --rz-menu-border-radius: var(--hopen-control-radius);
    --rz-menu-item-border-radius: 6px;
    --rz-tooltip-border-radius: 6px;

    --rz-card-background-color: var(--hopen-surface);
    --rz-card-border: 1px solid var(--hopen-line);
    --rz-card-shadow: var(--hopen-shadow-rest);
    --rz-panel-background-color: var(--hopen-surface);
    --rz-panel-shadow: none;
    --rz-dialog-background-color: var(--hopen-surface);
    --rz-dialog-title-background-color: var(--hopen-surface);
    --rz-dialog-title-color: var(--hopen-navy-deep);
    --rz-dialog-title-border: 1px solid var(--hopen-line);
    --rz-dialog-shadow: 0 18px 46px rgba(20, 41, 77, 0.22);

    --rz-input-background-color: var(--hopen-surface);
    --rz-input-value-color: var(--hopen-ink);
    --rz-input-placeholder-color: #6b7280;
    --rz-input-border: 1px solid #c8cdd4;
    --rz-input-border-block-end: 1px solid #c8cdd4;
    --rz-input-hover-border: 1px solid #9fb7cf;
    --rz-input-hover-border-block-end: 1px solid #9fb7cf;
    --rz-input-focus-border: 1px solid var(--hopen-blue);
    --rz-input-focus-border-block-end: 1px solid var(--hopen-blue);
    --rz-input-focus-shadow: 0 0 0 3px rgba(40, 116, 184, 0.14);
    --rz-form-field-focus-shadow: var(--rz-input-focus-shadow);
    --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow);

    --rz-grid-background-color: var(--hopen-surface);
    --rz-grid-border: 1px solid var(--hopen-line);
    --rz-grid-border-radius: var(--hopen-card-radius);
    --rz-grid-header-background-color: #f7f9fc;
    --rz-grid-header-color: var(--hopen-navy-deep);
    --rz-grid-header-cell-border: 1px solid var(--hopen-line);
    --rz-grid-header-cell-border-bottom: 1px solid var(--hopen-line);
    --rz-grid-cell-border: 1px solid var(--hopen-line);
    --rz-grid-bottom-cell-border: 1px solid var(--hopen-line);
    --rz-grid-right-cell-border: 1px solid var(--hopen-line);
    --rz-grid-hover-background-color: #f4f8ff;
    --rz-grid-hover-color: var(--hopen-ink);
    --rz-grid-selected-background-color: #eef3fb;
    --rz-grid-selected-color: var(--hopen-ink);

    --rz-tabs-border: 1px solid var(--hopen-line);
    --rz-tabs-border-radius: var(--hopen-card-radius);
    --rz-tabs-background-color: var(--hopen-surface);
    --rz-tabs-tab-color: var(--hopen-muted);
    --rz-tabs-tab-hover-background-color: var(--hopen-background);
    --rz-tabs-tab-hover-color: var(--hopen-ink);
    --rz-tabs-tab-selected-background-color: transparent;
    --rz-tabs-tab-selected-color: var(--hopen-blue-hover);

    --rz-tooltip-background-color: var(--hopen-navy-deep);
    --rz-tooltip-color: #ffffff;
    --rz-tooltip-shadow: var(--hopen-shadow-hover);
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--hopen-surface);
    color: var(--hopen-ink);
    font-family: var(--rz-text-font-family);
    -webkit-font-smoothing: antialiased;
}

body {
    background-image: none;
}

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

h1,
h2,
h3 {
    color: var(--hopen-navy-deep);
    line-height: 1.14;
}

a {
    color: var(--hopen-blue);
}

a:hover {
    color: var(--hopen-blue-hover);
}

:focus-visible {
    outline: 2px solid var(--hopen-blue);
    outline-offset: 2px;
}

.duipro-eyebrow {
    color: var(--hopen-blue);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.duipro-timing-page,
.duipro-expert-page {
    --duipro-blue: var(--hopen-blue);
    --duipro-navy: var(--hopen-navy);
    --duipro-ink: var(--hopen-ink);
    --duipro-muted: var(--hopen-muted);
    --duipro-line: var(--hopen-line);
}

/* Legacy icon-span compatibility for the handful of older inline glyphs.
   The actual font remains package-owned by the Standard theme. */
.material-icons {
    font-family: var(--rz-icon-font-family) !important;
    font-style: normal;
    font-weight: 400;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Hopen layout primitives ------------------------------------------------ */

.duipro-shell-wrap,
.duipro-content-wrap {
    width: 100%;
    max-width: calc(var(--hopen-wrap-max) + (2 * var(--hopen-gutter)));
    margin-inline: auto !important;
    padding-inline: var(--hopen-gutter) !important;
}

.duipro-app-shell,
.duipro-app-body,
.duipro-main-landmark {
    min-width: 0;
}

.duipro-app-shell,
.duipro-app-body {
    background: var(--hopen-surface);
}

.duipro-main-landmark {
    width: 100%;
}

.duipro-content-wrap {
    padding-block: 2rem 4rem !important;
}

.duipro-content-wrap > [class*="rz-col"] {
    min-width: 0;
}

/* Application header and footer ---------------------------------------- */

.duipro-app-header.rz-header {
    --rz-header-min-height: 4rem;
    --rz-header-background-color: var(--hopen-navy);
    --rz-header-color: #ffffff;
    --rz-menu-background-color: var(--hopen-surface);
    --rz-menu-border: 0;
    --rz-menu-top-item-background-color: transparent;
    --rz-menu-top-item-color: var(--hopen-header-link);
    --rz-menu-top-item-hover-background-color: rgba(255, 255, 255, 0.09);
    --rz-menu-top-item-hover-color: #ffffff;
    --rz-menu-top-item-selected-background-color: rgba(255, 255, 255, 0.12);
    --rz-menu-top-item-selected-color: #ffffff;
    min-height: 4rem;
    border: 0;
    background: var(--hopen-navy);
    color: #ffffff;
    box-shadow: none;
}

.duipro-app-header .duipro-site-header-row,
.duipro-app-header > .duipro-shell-wrap {
    min-height: 4rem;
    padding-block: 0.35rem !important;
}

.duipro-app-header :is(.rz-menu, .rz-profile-menu) {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.duipro-site-actions {
    min-width: 0;
}

.duipro-app-header .duipro-desktop-menu {
    padding-left: 0 !important;
}

@media (min-width: 1081px) {
    .duipro-site-brand-column {
        flex: 0 0 160px !important;
        width: 160px !important;
        max-width: 160px !important;
    }

    .duipro-site-brand-column .rz-image {
        width: 160px !important;
        max-width: 160px !important;
        padding: 0 !important;
    }

    .duipro-site-actions-column {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}

.duipro-app-header :is(a, .rz-navigation-item-link, .rz-menuitem-link) {
    color: var(--hopen-header-link);
}

.duipro-app-header :is(a, .rz-navigation-item-link, .rz-menuitem-link):hover,
.duipro-app-header :is(a, .rz-navigation-item-link, .rz-menuitem-link):focus-visible {
    color: #ffffff;
}

.duipro-app-header :is(a, button, [tabindex]):focus-visible {
    outline-color: #ffffff;
}

.duipro-app-header .rz-navigation-menu {
    border: 1px solid var(--hopen-line);
    border-radius: var(--hopen-control-radius);
    background: var(--hopen-surface);
    box-shadow: var(--hopen-shadow-hover);
}

.duipro-app-header .rz-navigation-menu :is(a, .rz-navigation-item-link, .rz-menuitem-link) {
    color: var(--hopen-ink);
}

.duipro-app-header .rz-navigation-menu :is(a, .rz-navigation-item-link, .rz-menuitem-link):hover,
.duipro-app-header .rz-navigation-menu :is(a, .rz-navigation-item-link, .rz-menuitem-link):focus-visible {
    background: var(--hopen-background);
    color: var(--hopen-blue-hover);
}

.duipro-app-header .rz-navigation-menu :is(a, button, [tabindex]):focus-visible {
    outline-color: var(--hopen-blue);
}

.duipro-app-header .rz-sidebar-toggle {
    border: 0;
    background: transparent;
    color: #ffffff;
    box-shadow: none;
}

.duipro-app-header .rz-sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.09);
}

.duipro-app-header .duipro-desktop-login.rz-button {
    border-color: #ffffff;
    background: #ffffff;
    color: var(--hopen-navy) !important;
}

.duipro-app-header .duipro-desktop-login.rz-button:hover,
.duipro-app-header .duipro-desktop-login.rz-button:focus-visible {
    border-color: #ffffff;
    background: #eef3fb;
    color: var(--hopen-navy-deep) !important;
}

.duipro-site-footer {
    min-height: 200px;
    padding-block: 2rem;
    border-top: 1px solid var(--hopen-line);
    background: var(--hopen-surface);
    color: var(--hopen-muted);
}

.duipro-site-footer .rz-text,
.duipro-site-footer a {
    color: var(--hopen-muted) !important;
}

.duipro-app-sidebar.rz-sidebar {
    --rz-sidebar-background-color: var(--hopen-surface);
    --rz-sidebar-color: var(--hopen-ink);
    --rz-panel-menu-item-background-color: var(--hopen-surface);
    --rz-panel-menu-item-color: var(--hopen-ink);
    --rz-panel-menu-item-hover-background-color: var(--hopen-background);
    --rz-panel-menu-item-hover-color: var(--hopen-blue-hover);
    --rz-panel-menu-item-active-background-color: #eef3fb;
    --rz-panel-menu-item-active-color: var(--hopen-blue-hover);
    border-inline-end: 1px solid var(--hopen-line);
    background: var(--hopen-surface);
    color: var(--hopen-ink);
    box-shadow: 2px 0 10px rgba(20, 41, 77, 0.06);
}

/* Radzen component normalization --------------------------------------- */

.rz-card.rz-variant-filled,
.rz-panel,
.rz-grid,
.rz-dialog {
    border-color: var(--hopen-line);
}

.rz-card.rz-variant-filled {
    border: 1px solid var(--hopen-line);
}

.rz-grid {
    overflow: hidden;
}

.rz-grid-table thead th {
    font-weight: 600;
}

.rz-dropdown-panel,
.rz-multiselect-panel,
.rz-autocomplete-panel,
.rz-context-menu,
.rz-menu:not(.duipro-app-header .rz-menu) {
    border: 1px solid var(--hopen-line);
    border-radius: var(--hopen-control-radius);
    background: var(--hopen-surface);
    box-shadow: var(--hopen-shadow-hover);
}

.rz-textbox,
.rz-dropdown,
.rz-multiselect,
.rz-autocomplete,
.rz-numeric,
.rz-datepicker,
.rz-textarea {
    transition: border-color 120ms ease, box-shadow 120ms ease,
        background-color 120ms ease;
}

.rz-button {
    font-weight: 600;
    transition: background-color 120ms ease, border-color 120ms ease,
        color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.rz-button:not(:disabled):active {
    transform: translateY(1px);
}

.rz-chip,
.rz-badge {
    border-radius: 999px;
}

/* Public Hopen hero ----------------------------------------------------- */

.duipro-home-hero {
    position: relative;
    display: flex;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    padding: 3.75rem 0 3.25rem;
    background: var(--hopen-surface);
    color: var(--hopen-ink);
    text-align: center;
    isolation: auto;
}

.duipro-home-hero-logo {
    display: block;
    width: min(340px, 84%);
    height: auto;
    margin: 0 auto 1.625rem;
}

.duipro-home-hero .duipro-eyebrow {
    margin-bottom: 0.75rem;
    color: var(--hopen-blue);
}

.duipro-home-hero h1 {
    max-width: 820px;
    margin: 0;
    color: var(--hopen-navy);
    font-size: clamp(2.25rem, 5vw, 2.75rem);
    font-weight: 700;
}

.duipro-home-hero h1 span {
    color: var(--hopen-blue);
}

.duipro-home-hero-summary {
    max-width: 660px;
    margin: 1rem auto 0;
    color: var(--hopen-muted);
    font-size: 1.125rem;
    line-height: 1.55;
}

.duipro-home-hero .duipro-hero-counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.6rem;
    margin: 1rem auto 0;
    color: var(--hopen-muted);
    font-size: 0.8125rem;
}

.duipro-home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 2rem;
}

/* Shared public-page surfaces use the same restrained Hopen hierarchy. */
.duipro-seo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0.75rem 2rem;
    min-height: 0;
    margin: 0 0 3rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
    border: 1px solid var(--hopen-line);
    border-radius: var(--hopen-card-radius);
    background: linear-gradient(180deg, #fbfcfe, #eef2f8);
    color: var(--hopen-ink);
    isolation: auto;
}

.duipro-seo-hero-image {
    position: relative;
    inset: auto;
    z-index: auto;
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 260px;
    max-height: 380px;
    border-radius: 10px;
    object-fit: cover;
    transform: none;
    box-shadow: var(--hopen-shadow-rest);
}

.duipro-seo-hero:hover .duipro-seo-hero-image,
.duipro-seo-hero:focus-within .duipro-seo-hero-image {
    filter: none;
    transform: none;
}

.duipro-seo-hero-overlay {
    display: none;
}

.duipro-seo-hero-content {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    min-height: 0;
    width: auto;
    padding: 0;
}

.duipro-seo-eyebrow {
    color: var(--hopen-blue);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.duipro-seo-hero h1 {
    color: var(--hopen-navy-deep);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.08;
}

.duipro-seo-hero-text {
    color: var(--hopen-muted);
    font-size: 1.0625rem;
}

.duipro-seo-hero-caption {
    position: static;
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--hopen-muted);
    opacity: 1;
}

.duipro-enriched-card,
.duipro-enriched-guidance > div,
.duipro-enriched-model-grid > div,
.duipro-answer-block,
.duipro-source-list,
.duipro-pricing-card,
.duipro-home-database-card {
    border: 1px solid var(--hopen-line);
    border-radius: var(--hopen-card-radius);
    background: var(--hopen-surface);
    box-shadow: none;
}

.duipro-enriched-card,
.duipro-answer-block {
    border-left: 1px solid var(--hopen-line);
}

.duipro-home-database-plug {
    border: 1px solid var(--hopen-line);
    border-radius: var(--hopen-card-radius);
    background: var(--hopen-background);
    color: var(--hopen-ink);
    box-shadow: none;
}

.duipro-home-database-plug h2 {
    color: var(--hopen-navy-deep);
}

.duipro-home-database-plug p {
    color: var(--hopen-muted);
}

.duipro-home-database-plug .duipro-eyebrow {
    color: var(--hopen-blue);
}

.duipro-home-database-card {
    padding: 1rem;
    backdrop-filter: none;
}

.duipro-home-database-card div {
    border-left-color: var(--hopen-blue);
    background: var(--hopen-background);
    color: var(--hopen-ink);
}

.duipro-home-database-card span {
    color: var(--hopen-muted);
}

.duipro-enriched-content li {
    border-color: var(--hopen-line);
    border-radius: var(--hopen-control-radius);
    background: var(--hopen-surface);
}

.duipro-pricing-page {
    max-width: var(--hopen-wrap-max);
    padding-inline: 0;
}

.duipro-pricing-hero {
    border: 1px solid var(--hopen-line);
    border-radius: var(--hopen-card-radius);
    background: linear-gradient(180deg, #fbfcfe, #eef2f8);
    color: var(--hopen-ink);
    box-shadow: none;
}

.duipro-pricing-hero h1 {
    color: var(--hopen-navy-deep);
}

.duipro-pricing-hero p {
    color: var(--hopen-muted);
}

.duipro-pricing-hero-card {
    border: 1px solid var(--hopen-pill-line);
    border-radius: var(--hopen-control-radius);
    background: var(--hopen-surface);
    backdrop-filter: none;
}

.duipro-pricing-hero-card span {
    color: var(--hopen-blue);
}

.duipro-pricing-hero-card strong {
    color: var(--hopen-navy-deep);
}

.duipro-pricing-action {
    border-radius: var(--hopen-control-radius);
    background: var(--hopen-blue);
}

.duipro-pricing-action:hover,
.duipro-pricing-action:focus-visible {
    background: var(--hopen-blue-hover);
}

.duipro-pricing-matrix {
    border-color: var(--hopen-line);
    border-radius: var(--hopen-card-radius);
    box-shadow: none;
}

/* Authenticated analysis surfaces retain their information density while
   using the same flat Hopen hierarchy as the public site. */
.rz-card.settings-panel {
    border: 1px solid var(--hopen-line);
    border-radius: var(--hopen-card-radius);
    background: var(--hopen-surface);
    background-image: none;
    box-shadow: none;
}

.settings-panel {
    margin: 0;
}

.settings-panel .rz-text-h3 {
    color: var(--hopen-navy-deep);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.fluent-settings-container,
.fluent-subsection-container,
.sim-absorption-delay-control,
.report-command-bar {
    border-color: var(--hopen-line);
    border-radius: var(--hopen-card-radius);
    background: var(--hopen-surface);
    box-shadow: none;
}

.fluent-settings-container .settings-header {
    border-bottom: 1px solid var(--hopen-line);
    color: var(--hopen-navy-deep);
}

.report-hero,
.simulator-step-hero,
.duipro-profile-hero {
    border: 1px solid var(--hopen-navy);
    border-radius: var(--hopen-card-radius);
    background: var(--hopen-navy);
    box-shadow: none;
}

.report-hero::after,
.simulator-step-hero::after,
.duipro-profile-hero::after {
    display: none;
}

.duipro-cta-band {
    border: 0;
    border-radius: var(--hopen-card-radius);
    background: var(--hopen-navy-deep);
    color: #ffffff;
    box-shadow: none;
}

.duipro-cta-band :is(h2, p) {
    color: #ffffff;
}

.duipro-cta-band .rz-button.rz-primary {
    border-color: #ffffff !important;
    background: #ffffff !important;
    color: var(--hopen-navy-deep) !important;
}

.duipro-cta-band .rz-button.rz-secondary {
    border-color: var(--hopen-header-link) !important;
    background: transparent !important;
    color: #ffffff !important;
}

/* Authentication follows Hopen's two-column checkout layout. */
.duipro-auth-shell,
.duipro-auth-body {
    min-height: 100vh;
    background: var(--hopen-background);
}

.duipro-auth-main,
.duipro-auth-wrap {
    min-height: 100vh;
}

.duipro-auth-wrap {
    width: 100%;
    max-width: calc(960px + (2 * var(--hopen-gutter)));
    margin-inline: auto;
    padding: 2.5rem var(--hopen-gutter);
}

.duipro-auth-card.rz-card {
    border: 1px solid var(--hopen-line);
    border-radius: 16px;
    background: var(--hopen-surface);
    box-shadow: var(--hopen-shadow-rest);
}

.duipro-auth-card > .rz-row > [class*="rz-col"] {
    padding: 2rem !important;
}

.duipro-auth-brand-panel {
    position: relative;
    background: var(--hopen-navy);
    color: #ffffff;
}

@media (max-width: 900px) {
    .duipro-mobile-panel-menu .rz-navigation-item-link.active,
    .duipro-mobile-panel-menu .rz-navigation-item-wrapper-active > .rz-navigation-item-link {
        border-left: 3px solid var(--hopen-blue);
        background: #eef3fb !important;
        color: var(--hopen-blue-hover) !important;
    }

    .duipro-seo-hero {
        grid-template-columns: 1fr;
    }

    .duipro-seo-hero-content,
    .duipro-seo-hero-image,
    .duipro-seo-hero-caption {
        grid-column: 1;
        grid-row: auto;
    }

    .duipro-seo-hero-image {
        min-height: 220px;
    }
}

@media (max-width: 600px) {
    :root {
        --hopen-gutter: 18px;
    }

    .duipro-content-wrap {
        padding-block: 1.5rem 3rem !important;
    }

    .duipro-home-hero {
        padding: 2.5rem 0 2.25rem;
    }

    .duipro-home-hero h1 {
        font-size: 1.875rem;
    }

    .duipro-home-hero-summary {
        font-size: 1rem;
    }

    .duipro-home-hero-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .duipro-home-hero-actions .rz-button {
        width: 100%;
    }

    .duipro-seo-hero {
        padding: 1.25rem;
    }

    .duipro-seo-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .duipro-seo-hero-actions .rz-button {
        width: 100%;
    }

    .duipro-auth-wrap {
        padding-block: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}