:root {
    /* Published by global.js; the default keeps the full-bleed band full-bleed if that has not run yet. */
    --wfv2-scrollbar: 0px;

    /* Regional 2026 token vocabulary; the values are what the app already renders, not the Figma baseline. */
    --bs-body-color: #212529;
    --bs-border-color: #dee2e6;
    --bs-border-radius: 0.375rem;
    /* Buttons do NOT use --bs-btn-border-radius: a global rule below overrides it with !important, so the theme needs a. */
    --brand-btn-radius: 0.625rem;
    /* Cards, panels and the action bar - the 10px surfaces V2 draws by hand. */
    --brand-surface-radius: 10px;
    /* Footer text was pinned white by TextColor.White on the layout, which no theme could reach. */
    --brand-footer-text: #ffffff;

    /* Headings. The rebrand takes these to 34px/800; the colour is the one the hero already uses, which is deliberately. */
    --brand-heading-size: 30px;
    --brand-heading-weight: 400;
    /* A literal, not var(): a var() inside a custom property resolves on the element that declares it. */
    --brand-heading-color: #2F3942;

    /* The OTP screens' smaller headline. */
    --brand-subheading-size: 20px;
    --brand-subheading-weight: 400;

    /* The strong blue a VALUE is drawn in - the offer amount and the SSN row. */
    --brand-value-blue: #1f6fd0;

    /* Body copy inside the authorisation blocks and the terms rows. */
    --brand-text-body: #444444;

    /* Two surfaces with no rebrand value in the mockups - tokenised so they are themeable, but deliberately NOT. */
    --brand-footnote-card-bg: #f0f1f4;
    --brand-progress-step-color: #6c757d;

    /* Form-field hairline. Bootstrap 5.2.3 hardcodes #ced4da on .form-control instead of reading --bs-border-color, so. */
    --brand-input-border: #ced4da;

    /* The offer-recap panel on screens 8 and 14 - Figma calls it "Terms Recap". */
    --brand-recap-bg: #eaf2fc;
    /* Seeded at the panel's own greys, so reverting the theme restores it exactly. */
    --brand-recap-text: #666666;
    --brand-recap-headline-color: #1f6fd0;

    /* V1's heading colours. heading-black is on 50 files at mixed sizes, so ONLY its colour is themed here - putting a. */
    --brand-heading-black-color: black;
    --brand-heading-secondary-color: #6D6D6D;

    /* Screen 7's offer headline. Its own pair rather than the hero's, so that reverting the theme restores today's 26px. */
    --brand-offer-heading-size: 26px;
    --brand-offer-heading-weight: 400;

    /* Body and heading text. The rebrand moves this to #363636. NOT --bs-body-color, which Bootstrap uses far more. */
    --brand-text-primary: #2F3942;

    /* A darker near-black for the offer headline, terms rows and auth link. */
    --brand-text-strong: #222222;

    /* Hairlines, dividers and the progress track. The rebrand moves this to #CDCDCD. */
    --brand-rule-color: #e6e6e6;

    /* The quiet grey behind labels and sub-text. */
    --brand-text-muted: #888888;

    /* The blue a review row's ANSWER is drawn in. The rebrand retires #407BBF and uses the primary. */
    --brand-text-accent: #407BBF;

    /* Header logo. The rebrand ships a new mark at a taller 39px. */
    --brand-logo-height: 35px;

    --bs-orange: #FF5400;
    --bs-orange-rgb: rgb(255, 84, 0);
    --bg-page-color: #f6f8fa;
}

html, body {
    /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
    margin: 0;
    padding: 0;
    width: 100%;
    background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
    min-height: 100vh;
}

/* LOP-1599 - overflow-x lives on BODY ONLY, never on html. The viewport takes its overflow from body only
   while html is `visible`; give html any non-visible overflow (and `hidden` on one axis computes the other to
   `auto`) and html becomes the scroller instead, at which point body's overflow is ignored entirely.
   That is not academic: Blazorise's modal.js locks the page by setting document.body.style.overflow, so with
   overflow-x on html that lock silently did nothing and the page scrolled behind every open modal - drag the
   mouse and the application slid around under the dialog. Clipping still works, because body's overflow-x is
   what propagates to the viewport. */
body {
    overflow-x: hidden;
}

@font-face {
    font-family: font-signature;
    src: url(/fonts/segoesc.ttf);
}

#signature {
    font-family: font-signature !important;
    font-size: 24px;
    color: darkblue;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
    color: red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.bg-success {
    background-color: #28a745 !important;
}

.badge-danger {
    background-color: #E86D86 !important;
}

.btn-outline-primary, .badge-primary,
.border-primary, .btn-outline-primary, .list-group-item-primary, .table-primary, .badge-primary, .bg-primary.rounded-pill {
    background-color: var(--bs-primary) !important;
}

.btn-primary {
    background-color: var(--bs-input-color) !important;
    border: 1px solid var(--bs-input-color) !important;
}

/* LOP-1650: a bare `#0069aa` sat here. CSS read it as the start of a selector, so it swallowed the rule below
   as `#0069aa .btn-primary:hover` - an id that cannot match, and one starting with a digit at that.

   That accident was load-bearing. The rule it hid is itself broken: `--color-primary` is defined NOWHERE in
   this app, so `rgba(var(--color-primary), 0.9)` is invalid at computed-value time and background-color falls
   back to its initial `transparent` - every primary button in the app turned white on hover the moment the
   stray text was removed. Fixed rather than restored: the hover now derives from the SAME brand token the
   base rule uses, so it cannot drift from it or reference a variable that does not exist. */
.btn-primary:hover {
    background-color: var(--bs-input-color) !important;
    border: 1px solid var(--bs-input-color) !important;
    filter: brightness(0.92);
}

/* LOP-644: outlined secondary button paired with a solid .btn-primary (e.g. the
   Call / Edit-My-Loan buttons next to Text / Confirm). Bootstrap's
   .btn-outline-primary can't be used here because the rule above forces it to a
   solid primary background, so this is a dedicated class. Uses the theme's brand
   colour (--bs-input-color) so it matches the solid primary across tenants. */
.btn-outline-secondary-themed {
    background-color: #fff !important;
    border: 1px solid var(--bs-input-color) !important;
    color: var(--bs-input-color) !important;
}

.btn-outline-secondary-themed:hover {
    background-color: var(--bs-input-color) !important;
    color: #fff !important;
}

.text-success {
    color: #28a745 !important;
    background-color: transparent;
}

.text-primary {
    color: var(--bs-input-color) !important;
    background-color: transparent;
}

:root .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--bs-primary) !important;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

.b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.nav-pills .nav-link.active {
    background-color: var(--bg-nav-link-active);
}

.nav-pills .nav-link {
    color: var(--bg-nav-link-font-color) !important;
    font-weight: var(--bg-nav-link-font-weight);
    background-color: var(--bg-nav-link);
    border-right: 1px solid rgba(108, 117, 125,0.25);
    border-top: 1px solid rgba(108, 117, 125,0.25);
    border-bottom: 1px solid rgba(108, 117, 125,0.25);
    border-radius: 0 0;
}

.nav-pills .nav-link .subtext {
    /* LOP-1018: #888 = 3.16-3.54:1 (fails AA); #616161 passes 4.5:1 on white and the #f2f2f2 panels. */
    color: #616161 !important;
}

/* LOP-1018: Blazorise Black50 (#808080, 3.94:1) fails AA for body text; darken to a compliant muted gray. */
.text-black-50 {
    color: #616161 !important;
}

/* LOP-1018: icon-only edit/cancel actions render as real <button> (keyboard + SR accessible), styled naked to keep the icon look. */
.btn-icon-naked {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    line-height: 1;
    color: inherit !important;
    cursor: pointer;
}

/* LOP-1018: brand-primary text (#2a71d4) fails AA (4.5:1) on the light-blue tinted panels it sits on — the offer monthly-payment card (#eef3f9 → 4.26:1) and the phone-page "information is correct" promo-pill (#dee8f5 → 3.84:1). Darken to #1a5fbf (≥4.9:1 on both) — still clearly brand blue. */
.rmc-payment-amount,
.text-primary-aa {
    color: #1a5fbf !important;
}

.nav-pills .nav-link:first-of-type {
    border-left: 1px solid rgba(108, 117, 125,0.25);
}

/* LOP-785: the workflow progress bar is a status indicator, not navigation.
   The .nav-link gets cursor:pointer on :hover (Blazorise/Bootstrap), which makes
   the steps look clickable; force the default arrow in every interaction state so
   users don't expect to navigate between steps. !important beats the framework's
   higher-specificity :hover rule (same approach as the .nav-pills color rule above). */
.step-indicator__segments .nav-link,
.step-indicator__segments .nav-link:hover,
.step-indicator__segments .nav-link:focus,
.step-indicator__segments .nav-link:active {
    cursor: default !important;
}

/* LOP-785: give the header a bottom border styled like the progress bar's
   top/bottom border, so chrome-less pages (AA, soft landing, email verification,
   OTP) that have no progress bar still get a divider under the header. On pages
   that DO show the progress bar, the segment's own top border would double up
   with this one, so pull the progress bar up 1px to collapse them into a single
   line. */
.navbar-fixed-top {
    border-bottom: 1px solid rgba(108, 117, 125, 0.25);
}

.step-indicator__segments {
    margin-top: -1px;
}

/* On tablet/responsive widths the step descriptions wrap to different line
   counts, so the bordered segment pills end up unequal heights. The .nav (flex,
   justified) already stretches each nav-item to the tallest one; make the
   bordered .nav-link fill that height so every segment matches and the borders
   stay aligned. Scoped to #body-tab-desktop (the multi-segment Regional desktop
   bar) so the single-segment mobile bar and other product flows are untouched. */
#body-tab-desktop .nav-link {
    height: 100%;
}

/* The step icon is a fixed 38px circle, but its Bootstrap col-2 collapses to
   ~25px at tablet widths, so the circle overflows and slides under the label
   (measured at 800px). Give the icon a fixed track wide enough for the circle
   and let the label column take the rest; min-width:0 + nowrap keep the label
   wrapping inside its column instead of dropping under the icon. */
#body-tab-desktop .nav-link .row {
    flex-wrap: nowrap;
}

#body-tab-desktop .nav-link .col-2 {
    flex: 0 0 auto;
    width: 46px;
}

#body-tab-desktop .nav-link .col-10 {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
}

/* Keep the "Verify Code" button label on one line at the narrower tablet/mobile
   column widths instead of wrapping to two lines. */
.verify-code-btn {
    white-space: nowrap;
}


/*:root body {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
    --bs-body-text-align: start;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: .75rem 0;
    background-color: ghostwhite;
}*/
.legal-holder {
    overflow: hidden;
    background-color: #f7f8f9;
    border: 1px solid #d8d8d8;
    padding: 15px 13px 10px;
    border-radius: 2px;
    margin: 0 0 70px 0;
}

@media only screen and (max-width: 600px) {
    .legal-holder {
        padding: 30px 33px 25px;
    }
}

.legal-holder .heading-area {
    overflow: hidden;
    margin: 0 0 24px;
    color: #595959;
    line-height: 16px;
    font-size: 13px;
    font-style: italic;
}

.legal-holder .heading-area p {
    margin: 0 0 5px;
}

.legal-holder .heading-area h2 {
    color: #006a9b;
    margin: 0 0 2px;
    font-size: 32px;
    font-weight: 600;
    font-style: normal;
}

.legal-holder .legal-scrollable-block {
    padding: 10px 0;
    margin: 0 0 31px;
    color: #595959;
    background: #fff;
    border: 1px solid #c9c9c9;
    font-size: 16px;
    font-weight: 300;
}

.legal-holder h3 {
    margin: 0 0 10px;
    line-height: 19px;
    font-size: 16px;
    font-weight: 300;
}

.legal-holder .legal-text {
    padding: 10px 20px;
}

@media only screen and (max-width: 600px) {
    .legal-holder .legal-text {
        padding: 20px 6px 6px 20px;
    }
}

.legal-holder .legal-text .section-title, .legal-holder .legal-text .section-title-caps {
    font-weight: bold;
    padding-right: .5em;
}

.legal-holder .legal-text .document-field {
    font-weight: bold;
    border-bottom: 2px solid;
    padding: 10px;
}

.legal-holder .legal-text .section-title-caps {
    text-transform: uppercase;
}

.legal-holder .legal-text h2 {
    padding: 10px 0px;
    font-size: 22px;
}

.legal-holder .legal-text ol[type="a"] {
    counter-reset: list;
}

.legal-holder .legal-text ol[type="a"] > li {
    list-style: none;
    position: relative;
}

.legal-holder .legal-text ol[type="a"] > li:before {
    counter-increment: list;
    content: counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}

.legal-holder .legal-text ol[type="a"].list-alpha-period > li:before {
    content: counter(list, lower-alpha) ". ";
}

.legal-holder .legal-text ol[type="a"].list-upper-alpha > li:before {
    content: counter(list, upper-alpha) ") ";
}

.legal-holder .text-callout {
    margin-top: 20px;
    font-size: 15px;
    font-style: italic;
    font-weight: 600;
}

.legal-holder .text-callout.important {
    color: #fc491c;
}

.left-border-primary {
    border-left: thick solid #0069AA;
}

.bottom-border-primary {
    border-bottom: thick solid orange !important;
}

:root .heading-black {
    color: var(--brand-heading-black-color) !important;
}

:root .heading-secondary {
    color: var(--brand-heading-secondary-color) !important;
}

.element-no-border-on-focus:focus
{
    outline: none;
}

.layout-background {
    background-color: var(--bg-header-color) !important;
}

.layout-background-SubHeader {
    background-color: var(--bg-sub-header-color) !important;
}

/* One flat band; no footer in the 2026 file carries a curve. */
.layout-background-footer {
    background-color: var(--bg-footer-color) !important;
    color: var(--brand-footer-text);
}

/* Links are the same content as the text around them, not a separate palette. */
.layout-background-footer a,
.layout-background-footer .nav-link {
    color: var(--brand-footer-text);
}

.product-legal-footer {
    line-height: 1.35;
}

/* Everything below is V2's footer only, hung off .wfv2-footer (the product, not the theme). */
.product-legal-footer.wfv2-footer {
    line-height: 1.4;
}

/* The export gives each statement its own line with 7px between, and a blank line before the copyright. */
.wfv2-footer .product-legal-footer__inner p {
    margin-bottom: 7px !important;
}

.wfv2-footer .product-legal-footer__inner p a {
    color: inherit;
    text-decoration: underline;
}

.wfv2-footer .product-legal-footer__inner p:last-of-type {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
}

/* 30px inset at BOTH breakpoints - 1380 of 1440 desktop, 333 of 393 mobile - against Padding.Is4's 24. */
.wfv2-footer .product-legal-footer__inner {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/* Footer paragraphs and links are 10/400, with no underline at rest. */
.wfv2-footer .product-legal-footer__inner {
    font-size: 10px;
}

.wfv2-footer .product-legal-footer__links a {
    text-decoration: none;
}

.wfv2-footer .product-legal-footer__links a:hover,
.wfv2-footer .product-legal-footer__links a:focus-visible {
    text-decoration: underline;
}

/* V2 only: the Privacy Choices link carries a 16px icon that makes its line box taller than its siblings', which knocked its text off their line. */
.wfv2-footer .product-legal-footer__links {
    align-items: baseline;
}

.product-legal-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin-top: 0.95rem;
}

/* LOP-1530 — the CCPA/CPRA opt-out icon that follows the "Your Privacy Choices" label.
   32x16 to match how Regional render it on regionalfinance.com (their footer serves CCPA.svg at that
   size), rather than the asset's natural 24x12 — the ask was for our footer to match their site exactly.
   Fixed pixels, not font-relative: a prescribed compliance mark should not scale with surrounding type.
   Deliberately NO background chip: their footer is the same dark navy (rgb(16, 43, 81)) and they show
   the icon plainly on it, so the blue half reading quietly against the background is their presentation,
   not a defect to correct. Nudged up because the glyph's optical centre sits above the text baseline. */
.privacy-choices-icon {
    width: 32px;
    height: 16px;
    margin-left: 0.35rem;
    vertical-align: -0.15em;
}

@media only screen and (max-width: 961px) {
    .card {
        width: 100% !important;
    }
}
@media only screen and (max-width: 1280px) {
    .card {
        width: 100% !important;
    }
}

.customButton-link {
    display: inline-block;
    color: white;
    background-color: var(--bs-input-color);
    text-decoration: none; /* Remove underline */
    border: 1px solid;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
    padding-y: 0.25rem;
    padding-x: 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

.customButton-link:hover {
    background-color: #005E9D; /* Darker blue on hover */
    color: white;
}

.button-as-link:focus {
    outline: 2px solid #005E9D;
}

.input-elements-border {
    border: 1px solid #03416b;
}

.form-check-input:checked {
    background-color: var(--bs-input-color);
    border-color: var(--bs-input-color);
}

.form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 4px #678fc7;
}

/* LOP-735 — compact checkbox disclosures (Regional): tighter line-height,
   left-aligned label, and the checkbox pulled in close to the text. Bootstrap's
   default 1.5em gutter is too wide for the small checkbox, leaving a big gap; we
   narrow it while keeping the float model so the checkbox stays vertically
   centered on the first line of text (via its default margin-top). */
/* LOP-735 — tighter line spacing for Regional checkbox disclosures (no Blazorise line-height attribute; reached via :has() since the Check class lands on the input). */
.form-check:has(> .regional-check) .form-check-label,
.form-check:has(> .regional-check) .form-check-label * {
    line-height: 1.25;
}

/* LOP-735/LOP-860 — lay the compact Regional disclosure checkbox + label out as a flex row. Bootstrap's float model drops the label below the box whenever the label is block/inline-block (e.g. the SSA consent label wraps its text in a d-flex Text), putting the text under the checkbox instead of beside it. Flex with align-items:flex-start keeps the box on the first text line, label beside it. */
.form-check:has(> .regional-check) {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding-left: 0;
}

.form-check > .form-check-input.regional-check {
    float: none;
    margin-left: 0;
}

.form-check:has(> .regional-check) > .form-check-label {
    flex: 1;
}

/* Enlarge the compact Regional disclosure checkbox at all widths — Blazorise Check has no responsive Size. flex:0 0 auto keeps the box square as a flex item (no shrink against the label). */
.form-check > .form-check-input.form-check-input-sm.regional-check {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.30rem;
}

/* Below lg, trim Bootstrap's 1rem inline-radio gap so Yes/No fit on one line in the narrow card column — the trailing margin after the last radio was tipping it onto a second line. */
@media (max-width: 991.98px) {
    .inline-radios-tight .form-check-inline {
        margin-right: 0.5rem;
    }
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px #678fc7;
}

/* Themeable button radius; :not(.rounded-pill) keeps deliberate pills. */
.btn:not(.rounded-pill) {
    border-radius: var(--brand-btn-radius) !important;
}

.icon-circle-filled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* circle size */
    height: 30px;
    border-radius: 50%; /* makes it circular */
    background-color: var(--icon-filled-circle-color); /* light blue background */
}

.icon-circle-filled i {
    color: var(--icon-filled-icon-color); /* icon color */
}

.icon-circle-filled-tabs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; /* circle size */
    height: 38px;
    border-radius: 50%; /* makes it circular */
    border: 1px solid var(--icon-outline-circle-color);
}

.icon-circle-filled-tabs i {
    color: var(--icon-filled-icon-tabs-color); /* icon color */
}

.icon-circle-filled-disbursement {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px; /* circle size */
    height: 35px;
    border-radius: 50%; /* makes it circular */
    background-color: var(--icon-filled-circle-color); /* light blue background */
}

.icon-circle-filled-disbursement i {
    color: var(--icon-filled-icon-color); /* icon color */
}

.icon-outline-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; /* circle size */
    height: 38px;
    border-radius: 50%; /* makes it circular */
    border: 1px solid var(--icon-outline-circle-color);
}

.icon-outline-circle i {
    color: var(--icon-outline-icon-color); /* icon color */
}

.icon-outline-circle-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px; /* circle size */
    height: 45px;
    border-radius: 50%; /* makes it circular */
    border: 1px solid var(--icon-outline-circle-color);
}

.icon-outline-circle-mobile i {
    color: var(--icon-outline-icon-color); /* icon color */
}

.black-theme {
    --bs-primary: black;
    --bs-input-color: black;
    --bg-header-color: white;
    --bg-sub-header-color: #393939;
    --bg-footer-color: #393939;
    --bg-special-color: black;
    --icon-filled-icon-color: black;
    --icon-outline-icon-color: black;
    --icon-filled-circle-color: #EBEBEB;
    --icon-outline-circle-color: #EBEBEB;
    --icon-filled-icon-tabs-color: black;
    --icon-filled-circle-tabs-color: black;
    --bg-nav-link: #F8F9FA;
    --bg-nav-link-font-color: black;
    --bg-nav-link-active: #EBEBEB;
    --bg-nav-link-font-weight: bold;
}

.light-blue-theme {
    --bs-primary: #4EC9EE;
    --bs-input-color: #4EC9EE;
    --bg-header-color: #4EC9EE;
    --bg-sub-header-color: #5A6771;
    --bg-footer-color: #4EC9EE;
    --bg-special-color: #4EC9EE;
    --icon-filled-icon-color: #33B5E5;
    --icon-outline-icon-color: #33B5E5;
    --icon-filled-circle-color: #E6F7FF;
    --icon-outline-circle-color: #E6F7FF;
    --icon-filled-icon-tabs-color: white;
    --icon-filled-circle-tabs-color: #4EC9EE;
    --bg-nav-link: #F8F9FA;
    --bg-nav-link-font-color: #4EC9EE;
    --bg-nav-link-active: #4EC9EE;
    --bg-nav-link-font-weight: bold;
}

.blue-theme {
    --bs-primary: #2A71D4;
    --bs-input-color: #2A71D4;
    --bg-header-color: white;
    --bg-sub-header-color: #5A6771;
    --bg-footer-color: #102B5D;
    --bg-special-color: #2A71D4;
    --bg-page-color: #ffffff;
    --icon-filled-icon-color: #2A71D4;
    --icon-outline-icon-color: black;
    --icon-filled-circle-color: #F2F2F2;
    --icon-outline-circle-color: #2A71D4;
    --icon-filled-icon-tabs-color: black;
    --icon-filled-circle-tabs-color: white;
    --bg-nav-link: white;
    --bg-nav-link-font-color: black;
    --bg-nav-link-active: #F2F2F2;
    --bg-nav-link-font-weight: normal;
}

/* Regional's 2026 rebrand. A NEW class, not an edit to .blue-theme, which other products still use. */
/* The page headline on V1 screens, matched by id because heading-black is used on small headings too. */
.regional-2026-theme #mainHeader:not([class*="wfv2-"]) {
    font-size: var(--brand-heading-size);
    font-weight: var(--brand-heading-weight) !important;
    color: var(--brand-heading-color) !important;
}

/* The brand font, scoped to the theme so no other product moves. */
.regional-2026-theme,
.regional-2026-theme .btn,
.regional-2026-theme .form-control,
.regional-2026-theme .form-select,
.regional-2026-theme input,
.regional-2026-theme button {
    font-family: var(--brand-font-family);
}

.regional-2026-theme {
    /* The live site's family, with the same fallbacks Bootstrap would have used if the webfont never loads. */
    --brand-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-family: var(--brand-font-family);

    /* Carried over unchanged - the brand colours themselves do not move in this rebrand. */
    --bs-primary: #2A71D4;
    --bs-input-color: #2A71D4;
    --bg-header-color: white;
    --bg-sub-header-color: #5A6771;
    --bg-special-color: #2A71D4;
    --bg-page-color: #ffffff;
    --icon-filled-icon-color: #2A71D4;
    --icon-outline-icon-color: black;
    --icon-filled-circle-color: #F2F2F2;
    --icon-outline-circle-color: #2A71D4;
    --icon-filled-icon-tabs-color: black;
    --icon-filled-circle-tabs-color: white;
    --bg-nav-link: white;
    --bg-nav-link-font-color: black;
    --bg-nav-link-active: #F2F2F2;
    --bg-nav-link-font-weight: normal;

    /* A flat light band: no curve, no navy. */
    --bg-footer-color: #DEDEDE;
    /* Dark text, because the band is light grey rather than navy. */
    --brand-footer-text: #363636;

    /* Pill buttons, and softer corners on cards, panels and inputs. */
    --brand-btn-radius: 999px;
    --brand-surface-radius: 16px;
    --bs-border-radius: 16px;

    /* Headings get larger and much heavier. */
    --brand-heading-size: 34px;
    --brand-heading-weight: 800;
    --brand-heading-color: #363636;
    --brand-subheading-weight: 700;
    --brand-value-blue: var(--bs-primary);
    --brand-text-body: #595959;
    --brand-input-border: #CDCDCD;
    --brand-recap-bg: #D9F3FC;
    --brand-recap-text: #595959;
    --brand-recap-headline-color: var(--bs-primary);
    --brand-heading-black-color: #363636;
    --brand-heading-secondary-color: #595959;
    --brand-offer-heading-size: 34px;
    --brand-offer-heading-weight: 800;

    /* The neutral ramp lifts: body text darker, the quiet grey stronger, hairlines more present. */
    --brand-text-primary: #363636;
    --brand-text-strong: #363636;
    --brand-text-muted: #595959;
    --brand-rule-color: #CDCDCD;
    --bs-border-color: #CDCDCD;

    /* #407BBF is retired outright - a review row's answer is drawn in the primary blue. */
    --brand-text-accent: var(--bs-primary);

    /* The new mark is taller than the one it replaces (151x39 against 101x26). */
    --brand-logo-height: 39px;
}

.orange-theme {
    --bs-primary: #EF6A00;
    --bs-input-color: #00397a;
    --bg-header-color: #2D3943;
    --bg-sub-header-color: #5A6771;
    --bg-footer-color: #2D3943;
    --bg-special-color: #005E9D;
    --icon-filled-icon-color: #005E9D;
    --icon-outline-icon-color: #005E9D;
    --icon-filled-circle-color: #EBEBEB;
    --icon-outline-circle-color: #F2F2F2;
    --icon-filled-icon-tabs-color: #FFFFFF;
    --icon-filled-circle-tabs-color: #005E9D;
    --bg-nav-link: #F8F9FA;
    --bg-nav-link-font-color: #00397a;
    --bg-nav-link-active: #EBEBEB;
    --bg-nav-link-font-weight: bold;
}

@media (max-width: 768px) {
    .img-cc-loan-disbursement {
        width: 35% !important;
    }
}

/* Desktop: override to be smaller than Is25 */
@media (min-width: 769px) {
    .img-cc-loan-disbursement {
        width: 18% !important;
    }
}

.logo-img {
    max-height: var(--brand-logo-height);
    width: auto;
}

.mastercardlogo-img {
    max-height: 25px;
    width: auto;
}

.visacardlogo-img {
    max-height: 15px;
    width: auto;
}

.page-background {
    background-color: var(--bg-page-color);
}

/* Chrome / Edge / Safari */
.form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary);
}

/* Firefox */
.form-range::-moz-range-thumb {
    background-color: var(--bs-primary);
}

/* IE (legacy) */
.form-range::-ms-thumb {
    background-color: var(--bs-primary);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--bs-primary) 40%, transparent);
}

.form-range::-webkit-slider-thumb:active {
    background-color: color-mix(in srgb, var(--bs-primary) 80%, white);
}

/* LOP-645: OTP split input — 6 individual digit boxes side by side */
.otp-input-container {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.otp-digit {
    width: 3rem;
    height: 3.5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    border-radius: 0.625rem;
    padding: 0;
}

.otp-digit:focus {
    outline: none;
    box-shadow: 0 0 0 4px #678fc7;
}

.spinner-page {
    overflow: hidden;
    padding: 1.5rem;
}

.spinner-card {
    max-width: 560px;
    width: 90%;
}

@media (min-width: 768px) {
    .spinner-page {
        padding: 2.5rem;
    }
}

/* LOP-1368 screen 1 - the institution logo box on a "Search and choose your bank" result row.

   Global rather than a YodleeLinkSearchView.razor.css, because CSS isolation is not wired up in Apply.Web:
   _Layout.cshtml never loads the *.styles.css bundle, so a .razor.css file here is silently dead. Same reason
   AdverseActionsView keeps its overrides inline.

   The box is always drawn at a fixed size so the bank names stay aligned whether or not a logo turns up, and
   "flex: 0 0 auto" is what stops a long institution name squeezing it away. */
.yodlee-provider-logo {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .5rem;
    overflow: hidden;
    border-radius: .25rem;
    background-color: #e9ecef;
}

.yodlee-provider-logo-initial {
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    color: #495057;
}

/* Opaque and covering the whole box, so a logo that DOES load hides the initial underneath rather than sitting
   on top of a visible letter. When the img hides itself on error, the initial is simply revealed again. */
.yodlee-provider-logo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #fff;
}

/* LOP-1599 — the merged bank-linking progress steps. Two states only, per the design: done is a filled circle
   with a tick, everything else is a ring with a spinning arc. There is no "pending" style, so a step whose work
   has not started still spins — deliberate, and why nothing here keys off which step is "active". */
.bank-link-step-icon {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Theme primary rather than the frame's literal #2f6fdd, so the tick, the spinner arc and the success badge
   are all the SAME blue on a product whose brand colour is not Figma's. Three hardcoded blues that agree only
   in the mockup is how a screen ends up subtly tri-coloured on a real tenant. */
.bank-link-step-icon--done {
    background-color: var(--bs-primary);
}

/* LOP-1689 - the arc now matches BL-1_spinners: a BLUE arc of about three quarters with a gap, on white.
   It was the inverse - a pale ring with only the top quarter in primary - so the moving part was a small tip
   travelling round a flat ring, which reads as static at 1.5rem and was reported as a stuck spinner from a live
   drive (with reduced-motion OFF, so that rule was never the cause).
   Blazorise's SpinKit, which every other spinner in the app uses, was tried first and is wrong here: it is a
   fading-dot circle and matches neither this frame nor the tick it alternates with. The frame wins. */
.bank-link-step-icon--busy {
    background-color: #fff;
    border: 2px solid var(--bs-primary);
    /* The GAP, not the arc. Transparent rather than a pale blue so it reads the same on any brand colour - the
       tick beside it is var(--bs-primary) too, and a hardcoded partner for it would drift on a real tenant. */
    border-top-color: transparent;
    animation: bank-link-step-spin 0.9s linear infinite;
}

@keyframes bank-link-step-spin {
    to { transform: rotate(360deg); }
}

/* LOP-1689 - there is deliberately NO prefers-reduced-motion rule here any more.
   It was the only one in the entire application, so this screen alone froze its spinners when the operating
   system asked for reduced motion while every other spinner in the product kept turning. That inconsistency is
   worse than either answer applied uniformly: an applicant who has never seen a still spinner anywhere else
   reads this one as a hung screen, on the step whose whole job is to say "still working".
   Removed on Naresh's call, 2026-08-15, after it was raised on two separate live drives. Whether the PRODUCT
   should honour reduced motion is a real question and a good one - but it is an application-wide decision, and
   answering it in one component is how the inconsistency got here in the first place. */

/* LOP-1599 - the sheet the owned bank-link screens sit in. Below the mobile breakpoint only the TOP corners
   round, so it reads as a sheet slid up under the dimmed application header, as the Figma frames show; above
   it, Bootstrap's ordinary centred dialog, because a full-bleed sheet on a wide window looks like a fault.

   Everything Blazorise can express is expressed in the markup - Row/Column, Button, CloseButton,
   Flex/Margin/TextAlignment. What is left here is what it has no equivalent for: sheet geometry and
   third-party logo sizing. Nothing here locks body scroll; Blazorise's modal.js sets that inline. */
@media (max-width: 575.98px) {
    .bank-link-modal .modal-dialog {
        margin: 0;
        max-width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        /* Held off the top so the lender's header stays visible above the sheet - what makes this read as a
           step INSIDE their application rather than a page that replaced it. */
        top: 4.5rem;
        /* MIN-HEIGHT FIRST - it is the whole bug. .modal-dialog-centered sets min-height: calc(100% - 16px)
           = 836px at 852 tall, and a min-height BEATS a height, so every height set here was ignored and the
           sheet ended 56px below the viewport with the pinned footer. Measured: min-height:0 gives 780px and
           a footer at 772-852. dvh, not vh or %, because the containing block is the fixed .modal and both of
           those resolve to the LAYOUT viewport, which on a phone sits behind the browser toolbar; vh first as
           the no-dvh fallback. */
        min-height: 0;
        height: calc(100vh - 4.5rem);
        height: calc(100dvh - 4.5rem);
    }

    /* Keeps the vendor mark clear of a home indicator / gesture bar on phones that report one. */
    .bank-link-modal .modal-footer {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }

    .bank-link-modal .modal-content {
        border: none;
        border-radius: 20px 20px 0 0;
    }
}

/* LOP-1739 - pairs with the .bank-link-rosette width fix below, and is NOT cosmetic.
   OUTSIDE the mobile media query on purpose: the overflow it suppresses happens at every width.

   ModalContent is Scrollable, so bootstrap sets `overflow-y: auto` on .modal-body. Per the overflow spec an
   explicit non-visible value on one axis computes the OTHER axis from `visible` to `auto`, so .modal-body was
   already horizontally scrollable in principle. It never showed, because the rosette used to overflow only on
   the LEFT - and left overflow in LTR is not reachable by scrolling. Centring it makes the bleed symmetric,
   which moves 12px of it to the RIGHT, where it IS scrollable: a sideways-draggable sheet on mobile and a
   scrollbar strip on classic-scrollbar Windows, appearing on the landing state and vanishing the moment the
   applicant types and the rosette unmounts.

   The visual bleed does not depend on this: .modal-dialog-scrollable .modal-content already clips at the
   sheet edge, which is what preserves the "chips continue past the sheet" read. This only stops the sheet
   becoming a scroll container sideways. overflow-y is untouched, so vertical scrolling is unaffected. */
.bank-link-modal .modal-body {
    overflow-x: hidden;
}

/* Blazorise's Button sizes to its text; a tile has to be a consistent box whatever the logo's shape. */
.bank-link-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.25rem;
}

/* Contained, not stretched: these are third-party marks of wildly differing aspect ratios, and distorting a
   bank's logo is both ugly and a trademark problem. */
.bank-link-tile-logo {
    max-width: 100%;
    max-height: 2.75rem;
    object-fit: contain;
}

/* LOP-1650 - the vendor attribution's own grey, measured off the frames (#acacac). Lighter than
   text-black-50 so the line sits behind the screen's content rather than reading as body copy. */
.bank-link-attribution-text {
    color: #acacac;
}

.bank-link-attribution-logo {
    height: 22px;
    opacity: 0.75;
}

/* LOP-1599 - the connecting screen's lender/bank pair. Contained for the same trademark reason as the tiles. */
.bank-link-brand-logo {
    max-width: 7rem;
    max-height: 2.25rem;
    object-fit: contain;
}

/* LOP-1599 - the connecting header's two rings and the dashed connector between them (screens/3-connecting.png).
   Blazorise carries the flex, background and colour; what is left is fixed diameters and the dashes, none of
   which it can express - its Width/Height are percentages, and it has no border-style helper. */
/* Every size below is MEASURED off Figma node 176:741 rendered at 2x, divided back to the 393px frame - not
   estimated by eye. Ring 78px, chip 77.5px, lock 22px, dash gap 21px, chip gaps 11px across and 13px down. */
.bank-link-brand-ring {
    width: 4.875rem;
    height: 4.875rem;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    flex: 0 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* The lender's own ring is outlined in the brand colour in the mockup; the institution's stays neutral. It is
   the only element in the rosette drawn at full strength, which is what makes it the anchor of the group. */
.bank-link-brand-ring--lender {
    border-color: var(--bs-primary);
}

/* Contained INSIDE the ring, not merely sized: a wide wordmark at 7rem spilled over a 4.5rem circle. The
   percentages are of the ring, so the mark scales with it and can never cross the border again. Height is
   capped tighter than width for the same reason as the rosette chips - a square mark would otherwise fill the
   circle edge to edge while a wide one floats in the middle of it. */
.bank-link-brand-logo {
    max-width: 70%;
    max-height: 46%;
    object-fit: contain;
}

/* 13px between rows in the frame - the chips sit CLEAR of each other, not overlapping. An earlier version
   pulled them together with negative margins on the theory that the rosette was one dense cluster; measuring
   the frame says otherwise, and overlapping circles read as a layout fault rather than as a group. */
.bank-link-rosette-row {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}

.bank-link-brand-connector {
    width: 1.3rem;
    border-top: 2px dashed var(--bs-border-color);
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

/* Deliberately LARGER than the frame's 22px (which is 0.28 of a ring). At that size the lock reads as a dot
   at 393px rather than as a padlock, and it is carrying the security message the whole chain exists for.
   Naresh's call on review; still well under half a ring, so it stays a connector rather than a third party. */
.bank-link-brand-lock {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color);
    background-color: #fff;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

/* The landing rosette. White chips of ONE size, so a set of third-party marks with wildly different aspect
   ratios still reads as a deliberate arrangement rather than as assorted debris.

   Sized to MATCH the rings, not to be smaller than them - in the mockup the chips and the rings are the same
   diameter, and the rosette reads as one cluster the chain sits inside. Chips at two-thirds the ring size made
   the whole group look like an accident. */
.bank-link-rosette-logo {
    width: 4.85rem;
    height: 4.85rem;
    margin: 0 0.35rem;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
    opacity: 0.4;
    flex: 0 0 auto;
}

/* max-HEIGHT is the tight bound, and deliberately tighter than max-width. These marks divide into wide
   wordmarks (Bank of America, Fifth Third) and square blocks (TD), and a single percentage cap lets the square
   ones fill their chip and shout while the wide ones shrink to nothing. Capping height evens out the visual
   weight so no one bank dominates a decorative cluster. */
/* Equal caps, because these are now Yodlee's SQUARE favicons rather than wordmarks. The lopsided caps this
   replaces (86% wide, 56% tall) existed to stop wide marks and square marks fighting - a problem the favicon
   removes at source. A provider with no favicon still falls back to its logo and simply sits smaller. */
.bank-link-rosette-logo img {
    max-width: 62%;
    max-height: 62%;
    object-fit: contain;
}

/* The two marks on the CENTRE line sit half outside the sheet in the frame. The negative margins are
   symmetric, so pushing both outwards leaves the chain centred between them; the rosette clips them. */
.bank-link-rosette-edge-start {
    margin-left: -2.75rem;
}

.bank-link-rosette-edge-end {
    margin-right: -2.75rem;
}

/* Cancels the modal body's own padding so the row spans the full sheet, then clips whatever hangs past it -
   which is what makes the edge marks read as continuing beyond the sheet rather than as cropped circles.

   LOP-1739 - THE WIDTH PAIR IS LOAD-BEARING. Do not drop it and leave the margins.

   This is a direct child of a Bootstrap .row, whose `> *` rule sets `width: 100%` AND `max-width: 100%`.
   Once the width is DEFINITE, a negative margin-left shifts the box left, while a negative margin-right
   cannot pull it back - it only adds trailing overflow. So the rosette rendered exactly 1rem left of the
   heading, the body copy and the search box, while the two margins in this very block still read as
   symmetric. Measured on the real sheet: rosette centre 234 against everything else at 250; it is 250 now,
   and 0.0px off the heading at 1400px, at 576px and on a Pixel 7.

   `max-width: none` is required, not belt-and-braces: without it Bootstrap's cap silently clamps the wider
   box straight back to 100% and the offset returns unchanged, which is exactly how this looks fixed while
   measuring identical to the bug.

   See the .bank-link-modal .modal-body rule above: widening this box moves 12px of bleed to the right, where
   it becomes scrollable, and that rule is what suppresses it. The two ship together. */
.bank-link-rosette {
    width: calc(100% + 2rem);
    max-width: none;
    margin-left: -1rem;
    margin-right: -1rem;
    overflow: hidden;
}

/* Search results carry the name under the mark, so the mark itself is smaller than a landing tile's. */
.bank-link-result {
    flex-direction: column;
    gap: 0.35rem;
    min-height: 4.75rem;
}

.bank-link-result-logo {
    max-width: 60%;
    max-height: 2rem;
    object-fit: contain;
}

/* LOP-1599 - the institution mark, measured off Figma node 123:2304 at 2x: circle 97px, badge 26px sitting ON
   the circle's edge. NO border - the frame gives it a soft drop shadow instead, which is what lifts it off the
   white sheet. Blazorise carries the flex, background and Border.RoundedCircle on the badge.
   LOP-1650 generalised the name from -success-: the error-states frames draw the SAME mark and change only the
   badge, so the geometry is shared and one screen cannot drift from the others. */
.bank-link-mark {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
}

.bank-link-mark-logo {
    max-width: 72%;
    max-height: 42%;
    object-fit: contain;
}

/* LOP-1689 - holds the success screen's disclosure space while GetDisbursementAccountQuery is still in flight.
   The block is withheld until the lookup settles (deliberately - see the note in YodleeLinkSuccessView.razor),
   and without a reserve the heading and the buttons painted first and were then shoved down when it arrived.
   Sized to the NAMED-account form, which is four lines and the common case, so that case does not move at all;
   the shorter fallback leaves a little whitespace instead, which is the right way round - an unused gap costs
   the applicant nothing and a jump under their cursor costs them the button they were about to press. */
/* Holds the space while the disbursement lookup settles. */
.success-disclosure-reserve {
    min-height: 2.75rem;
}

/* Inset rather than pinned to the bounding box's corner: a circle's edge at 45 degrees sits about 29% of the
   radius inside the square, so bottom:0/right:0 would float the badge off in the corner gap. */
.bank-link-mark-badge {
    position: absolute;
    right: 0.3rem;
    bottom: 0.3rem;
    width: 1.625rem;
    height: 1.625rem;
}

/* LOP-1650 - the caution badge's "?" is TEXT, not an icon, so it needs the line-height reset to sit on the
   badge's optical centre; the terminal badge's cross is an inline svg and needs nothing. */
.bank-link-mark-badge-glyph {
    font-size: 0.95rem;
    line-height: 1;
}

/* The badge fills, measured off the error frames rather than taken from the Bootstrap palette: the caution
   badge is a warm orange, and Blazorise's Background.Warning renders the theme's amber, which is a different
   colour. Sampling the exported frames and reading the node's fill through the Figma API both give #ff8f4f. */
.bank-link-mark-badge--caution {
    background-color: #ff8f4f;
}

.bank-link-mark-badge--terminal {
    background-color: #c0261b;
}

/* LOP-1650 - the remedy heading. The error frames set it a step below the flow's own headings: two lines at
   this width rather than three, which is what keeps the panel and both CTAs above the fold at 393px. */
.bank-link-remedy-title {
    font-size: 1.75rem;
    line-height: 1.2;
}

/* The supplementary lines' panel. Blazorise's Background.Light is a neutral grey; the frames tint it with the
   brand instead, so it reads as belonging to this flow rather than as a disabled block. Brand-derived rather
   than a literal, so a tenant whose primary is not Regional's blue gets its own tint. */
.bank-link-remedy-panel {
    background-color: rgba(var(--bs-primary-rgb), 0.10);
}

/* mt-2 spaces these lines on the PAGE presentation; in the pill it skews the padding (24px top vs 16px) and
   adds 8px between lines, where the frame draws one block at a uniform pitch. !important is required, not
   defensive: Bootstrap emits .mt-2 as "margin-top:.5rem!important", which no specificity beats. */
.bank-link-remedy-panel > * {
    margin-top: 0 !important;
}

/* LOP-1597 - the soft-landing page's content block, measured off the Figma frames
   (VAbhMXLyCWa7xZeYkWxXRp, page "Soft Landing") rather than eyeballed from the exports. The frames set
   it as one vertical auto-layout: 32px between the message and the CTA, 32px above and below, 20px in
   from each edge, centred. Bootstrap's spacer scale has no 2rem step - it goes 1.5rem then straight to
   3rem - so the gaps live here rather than in Blazorise's Margin/Padding, which is the only reason this
   block exists at all. */
.soft-landing-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 1.25rem;
    text-align: center;
}

/* Headline and body are one group inside that layout, at their own tighter 16px pitch - the frames
   separate "what happened" from "what to do about it" by a step less than they separate the message
   from the button. */
.soft-landing-message {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 30px/37.5. Regular weight, not bold: every frame carries the emphasis in the size and the near-black,
   and the same line set bold reads as an alarm rather than a landing. Colour is the frames' #303a43,
   which is a warmer near-black than .heading-black's pure black - taken from the node fills, not sampled
   off an export. */
.soft-landing-headline {
    font-size: 1.875rem;
    line-height: 1.25;
    /* Stated explicitly rather than inherited. ErrorPage sets its headline in a <div>, which inherits the
       body's 400 - but FrozenCredit's is a Blazorise <Heading>, i.e. an <h2>, and Bootstrap gives h1-h6
       font-weight 500. Without this the two surfaces render the same class at different weights. */
    font-weight: 400;
    color: #303a43;
}

/* 26px/32.5 - same 1.25 ratio, so only the size is restated. One designed headline uses it; see
   ErrorPage.LongHeadlineThreshold for why the boundary is where it is. */
.soft-landing-headline-long {
    font-size: 1.625rem;
}

/* 16px/24 in the frames' #5b6872. Deliberately NOT .text-muted: Bootstrap's muted is a lighter grey that
   drops this text under 4.5:1 on white, and the body carries the phone number the applicant is being
   asked to call. */
.soft-landing-body {
    font-size: 1rem;
    line-height: 1.5;
    color: #5b6872;
}

/* Markup-bearing copy - the frozen-credit keys, which have no frame and are not soft landings - keeps
   the pre-LOP-1597 rendering. Only the centring is undone: those messages are a bulleted list with
   links, and a centred list is worse than an unrestyled one. */
.soft-landing-rich {
    text-align: start;
}

/* ── WF-B1 · RM Workflow V2 design tokens ──────────────────────────────────────────────────────
   Read from Figma (file VAbhMXLyCWa7xZeYkWxXRp, page "RM - WF - Known Customers") on 2026-08-24
   rather than judged by eye, so a size here is the designed size and not an approximation of one.

   These exist as CSS because Blazorise's scale cannot express them: its TextSize stops at Small
   (14px) and ExtraSmall (12px), while the design uses 30 / 18 / 15 / 13 / 11 / 10px. Anything the
   framework CAN express stays an attribute — this block is only the gaps.

   Scoped with a wfv2- prefix and used only by Pages/Components/RegionalV2/*. V1 is untouched.

   ⚠️ An earlier cut of these screens referenced wfv2-* class names that were never defined
   anywhere, so cards rendered borderless and the stepper had no bar. If a name is added here,
   it must be defined here. */

:root .wfv2-hero {
    font-size: var(--brand-heading-size);
    font-weight: var(--brand-heading-weight);
    color: var(--brand-heading-color) !important;   /* dark slate, NOT black — heading-black overshoots the design */
    line-height: 1.2;
}

:root .wfv2-subtext {
    font-size: 14px;
    font-weight: 400;
    color: var(--brand-text-muted) !important;
}

/* A summary row's editor stays in the DOM so its Autocomplete keeps the value seeded into it; only its
   visibility changes. display:none also takes it out of the tab order and the accessibility tree.
   !important because the Bootstrap display utilities on the same element carry it too. */
:root .wfv2-row-editor-hidden {
    display: none !important;
}

/* The small grey caption above a value, on both the review cards and the form fields. */
:root .wfv2-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--brand-text-muted) !important;
}

/* The answer itself on a review row: larger than the label and in the brand blue. */
:root .wfv2-value {
    font-size: 18px;
    font-weight: 400;
    color: var(--brand-text-accent) !important;
}

/* Date of birth is deliberately smaller than its siblings — the spaced MM / DD / YYYY form is wide. */
:root .wfv2-value-dob {
    font-size: 15px;
}

/* The two icon lines under screen 2's hero. 13px sits between Blazorise's Small and ExtraSmall,
   which is why the first cut had to choose between a wrapped line and text that was too small. */
:root .wfv2-benefit {
    font-size: 13px;
    font-weight: 400;
    color: var(--brand-text-primary) !important;
}

/* "Confirm your phone number to get started." — a bold lead-in, not a section heading. */
:root .wfv2-leadin {
    /* 16/700 with a 22px line in every frame that carries it - screen 2, screen 2's mobile and the Return page. */
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    color: var(--brand-text-primary) !important;
}

/* The OTP screen's question, notably lighter than a hero at 20px/400. */
:root .wfv2-otp-heading {
    font-size: var(--brand-subheading-size);
    font-weight: var(--brand-subheading-weight);
    color: var(--brand-text-primary) !important;
}

/* Consent sentences run smaller than body copy; the document links inside stay black and bold. */
:root .wfv2-consent {
    font-size: 11px;
    font-weight: 400;
    color: var(--brand-text-muted) !important;
}

/* The USA PATRIOT Act notice and the numbered footnotes. 10px is smaller than anything Blazorise
   offers (ExtraSmall is 12px), which is why these read as larger than the export next to it. */
:root .wfv2-footnote {
    font-size: 10px;
    font-weight: 500;
    color: var(--brand-text-muted) !important;
}

/* WF-B1 screen 7 ("7 · Pre-Approval Offer") and the offer-terms block it shares with screens 8 and 14.
   Prefixed with :root for the same reason as the tokens above - Blazorise ships its own .h2 / small-text
   rules with equal specificity, and an unprefixed override loses on source order. Every class below is
   referenced by SoftPullOfferV2View / OfferTermsCard; a token used in markup but never defined here
   renders as nothing at all, silently, which is how the first DetailSummaryCard cut shipped borderless. */
:root .wfv2-offer-headline {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

/* Explanatory copy under a heading, and the autopay row's description. */
:root .wfv2-note {
    font-size: 13px;
    font-weight: 400;
    color: var(--brand-text-muted) !important;
}

/* The pre-qualification and licensing small print. Deliberately the smallest token on the screen. */
:root .wfv2-disclosure {
    /* 10px, the same as the footer paragraphs beneath it - both are 10/400 in the frames, and the band is an extension. */
    font-size: 10px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--brand-text-muted) !important;
}

/* The payment + Continue bar. FIXED, not sticky: body carries overflow-x: hidden (line 24), which makes
   body a scroll container, so position:sticky resolves against a scrollport that is not the viewport and
   simply never sticks - the same app-wide overflow trap that killed the Blazorise modal scroll lock.
   Fixed needs the companion spacer below, or the bar sits on top of the disclosure text. */
:root .wfv2-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    padding: 12px 16px;
    border-top: 1px solid #e0e0e0;
    /* 10,10,0,0 in the export - the bar lifts off the page rather than butting into it. */
    border-radius: var(--brand-surface-radius) var(--brand-surface-radius) 0 0;
    z-index: 1030;
}

/* Marks a screen that carries an action bar. Deliberately reserves NOTHING here: the two breakpoint blocks
   below own the spacing, and a reserve on the content column would open a band between the last footnote
   and the footer - the footer is a SIBLING of @Body, so it is the footer that has to clear the fixed bar. */
:root .wfv2-has-action-bar {
    padding-bottom: 0;
}

/* The monthly payment, in brand blue like every other figure on the screen. */
:root .wfv2-payment {
    font-size: 18px;
    font-weight: 600;
    color: var(--brand-value-blue) !important;
}

/* WF-B1 screen 14: the two authorization headings. Smaller and heavier than a section heading - they
   title a legal document rather than a step, and the design sets them apart from the body copy. */
:root .wfv2-auth-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

/* WF-B1 screen 7 footnotes. The numbers are REFERENCES - the headline says "$15,000" with a superscript 1
   and the APR row a superscript 2 - so the markers have to stay visible and the indent has to be tight
   enough not to look like body copy. Bootstrap's reboot zeroes list padding, hence the explicit inset. */
/* Markers are "(1)" and the wrapped lines run flush left, so the marker is generated content. */
:root ol.wfv2-disclosure {
    list-style: none;
    counter-reset: wfv2-note;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

:root ol.wfv2-disclosure > li::before {
    counter-increment: wfv2-note;
    content: "(" counter(wfv2-note) ") ";
}

:root ol.wfv2-disclosure > li {
    margin-bottom: 8px;
}

/* The band's padding provides the space below the last note. */
:root ol.wfv2-disclosure > li:last-child {
    margin-bottom: 0;
}

/* WF-B1 offer-terms card (screens 7 / 8 / 14). Single-line rows: label left in sentence case, value right
   in bold dark. Deliberately NOT the wfv2-label / wfv2-value pair - those are screen 4's stacked pattern
   (uppercase caption above a blue value) and reusing them here produced a card matching nothing. */
/* 14px, read from the export: every row label on screen 7 and the Autopay label are the same size. Was 15px. */
:root .wfv2-terms-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--brand-text-strong) !important;
}

:root .wfv2-terms-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-text-strong) !important;
}

:root .wfv2-terms-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* The chevron sits WITH the value, not pinned to the card edge - it reads as "this value opens". */
:root .wfv2-terms-chevron {
    font-size: 18px;
    line-height: 1;
    color: var(--brand-text-muted) !important;
}

/* The autopay incentive line, and its details link. */
:root .wfv2-terms-note {
    font-size: 13px;
    font-weight: 400;
    color: var(--brand-recap-text) !important;
}

/* The Autopay explainer is 10px in the export - the same size as the footnotes, NOT the 13px note used
   elsewhere. Its own class so screen 16's notes keep 13px. */
:root .wfv2-autopay-note {
    font-size: 10px;
    font-weight: 400;
    color: var(--brand-recap-text) !important;
}

/* Screen 7 headline: the sentence is dark and only the AMOUNT is blue - it is the number the applicant is
   being told, and colouring the whole line loses that emphasis. Centred, per the design. */
/* Screen 7's headline follows the hero scale. */
:root .wfv2-offer-headline {
    font-size: var(--brand-offer-heading-size);
    font-weight: var(--brand-offer-heading-weight);
    line-height: 1.25;
    text-align: center;
    color: var(--brand-text-strong) !important;
}

:root .wfv2-offer-amount {
    color: var(--brand-value-blue) !important;
    font-weight: 700;
}

/* The instruction under it: first sentence bold, the caveat regular, both centred. */
:root .wfv2-offer-sub {
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
    color: var(--brand-text-strong) !important;
}

/* WF-B1 offer recap (screens 8 and 14). A PALE BLUE panel, not Background.Light - the design uses colour
   to mark this as the thing already agreed, and the grey Blazorise default read as a disabled block. */
:root .wfv2-recap-card {
    background-color: var(--brand-recap-bg) !important;
    border: 0 !important;
}

:root .wfv2-recap-caption {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--brand-recap-text) !important;
}

/* The offer itself - the largest, bluest thing on the panel. */
:root .wfv2-recap-headline {
    font-size: 22px;
    font-weight: 700;
    color: var(--brand-recap-headline-color) !important;
}

:root .wfv2-recap-terms {
    font-size: 15px;
    font-weight: 400;
    color: var(--brand-text-body) !important;
}

/* Bootstrap writes #ced4da into .form-control, so the token alone never reaches it. */
.regional-2026-theme .form-control:not(.is-invalid):not(.is-valid):not(:focus),
.regional-2026-theme .form-select:not(.is-invalid):not(.is-valid):not(:focus) {
    border-color: var(--brand-input-border);
}

/* The approval-expiry chip: a pill with a 10% tint of the accent blue. */
/* WF-B1 screen 15 approval expiry: a tinted band, standalone above the columns on desktop and the top strip of the. */
.regional-2026-theme .wfv2-expiry-band {
    background-color: rgba(217, 243, 252, 0.5);
    border-radius: 16px;
    padding: 10px 20px;
    font-size: 10px;
    font-weight: 400;
    color: var(--brand-text-strong) !important;
}

.regional-2026-theme .wfv2-expiry-band--card-top {
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

.regional-2026-theme .wfv2-summary-title {
    font-size: 18px;
    font-weight: 400;
    color: var(--brand-text-strong) !important;
}

@media (min-width: 768px) {
    .regional-2026-theme .wfv2-expiry-band {
        font-size: 14px;
        padding: 16px 20px;
    }

    /* Continue is a fixed 385px centred here, not the full-width bar mobile uses. */
    .regional-2026-theme .wfv2-approval-continue {
        width: 385px !important;
    }
}

:root .wfv2-recap-expiry {
    font-size: 13px;
    font-weight: 400;
    color: var(--brand-recap-text) !important;
}

/* WF-B1 screen 14 authorizations. The disclosures are PLAIN TEXT under a bold heading - the design does
   not card them, and boxing them made the screen read as a stack of unrelated panels. */
:root .wfv2-auth-body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--brand-text-body) !important;
}

/* "Read Disclosure" - bold and underlined, as drawn. */
:root .wfv2-auth-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-text-strong) !important;
    text-decoration: underline;
}

/* The bank-connecting heading, under a wider gap from the logos. */
/* The wfv2- prefix is load-bearing: the #mainHeader rule excludes it. */
:root .wfv2-connecting-title {
    font-size: 24px;
    font-weight: 700;
    margin-top: 40px;
}

/* LOP-1968 screen 17's account promo: the same cyan-to-yellow gradient the eligibility strip uses, at the card. */
.regional-2026-theme .wfv2-onboard-promo-card {
    background-image: linear-gradient(to bottom left, #caf7fe, #f4f7d4);
    border-radius: var(--brand-surface-radius);
    padding: 20px 24px;
}

@media (min-width: 768px) {
    /* 350px centred in the frame, not the full panel width. */
    .regional-2026-theme .wfv2-onboard-promo-btn {
        width: 350px !important;
    }
}

/* LOP-1968 screen 16: Regional's frame has no panel behind the signing iframe - the page carries it. */
/* ...but the DOCUMENT keeps a panel of its own: the frame draws a rounded, lightly bordered box around the signing. */
/* ==== LOP-1968 screen 15, measured off 1581:316 ==== */

/* The amount is the one blue run in an otherwise dark heading. */
.regional-2026-theme .wfv2-hero-amount {
    color: var(--bs-primary);
}

/* The eligibility strip spans the account card's top edge in the frame's green, not a blue pill inset by the card's. */
.regional-2026-theme .wfv2-account-strip {
    /* Three stacked fills in the frame - white, green at 15%, and an opaque linear gradient over both, so the gradient. */
    background-image: linear-gradient(to bottom left, #caf7fe, #f4f7d4);
    border-radius: var(--brand-surface-radius) var(--brand-surface-radius) 0 0;
    padding: 8px 16px;
    font-size: 10px;
    font-weight: 400;
    color: var(--brand-heading-color) !important;
}

/* White with a blue rule and blue label. */
.regional-2026-theme .wfv2-edit-loan {
    background-color: #fff !important;
    border: 1px solid var(--bs-primary) !important;
    color: var(--bs-primary) !important;
    font-weight: 600;
}

.regional-2026-theme .wfv2-edit-loan:hover,
.regional-2026-theme .wfv2-edit-loan:focus {
    background-color: #f0f6ff !important;
    color: var(--bs-primary) !important;
}

/* 14/600 in link blue with the download mark; NOT the heavy dark .wfv2-auth-link. */
.regional-2026-theme .wfv2-disclosure-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-primary) !important;
    text-decoration: none;
}

.regional-2026-theme .wfv2-disclosure-link:hover,
.regional-2026-theme .wfv2-disclosure-link:focus {
    text-decoration: underline;
}

/* The outline lock in screen 9's button, sitting on the label's baseline. */
.regional-2026-theme .wfv2-btn-lock {
    margin-right: 0.5rem;
    vertical-align: -2px;
}

/* The percent mark ahead of "Autopay Discount" - an 18px vector in the frame, sitting on the title's own baseline. */
.regional-2026-theme .wfv2-percent-mark {
    margin-right: 0.4rem;
    font-size: 15px;
}

/* The fee's explainer mark sits with the label, muted so it reads as an affordance and not a value. */
.regional-2026-theme .wfv2-row-info {
    margin-left: 0.35rem;
    color: var(--brand-text-muted);
}

/* A plain text link, as screen 9 draws its FAQ link: regular weight in link blue, not the heavy dark .wfv2-auth-link. */
:root .wfv2-inline-link {
    font-size: 14px;
    font-weight: 400;
    color: var(--bs-primary) !important;
    text-decoration: underline;
}

/* Screen 9's frame sets the button to 350px centred; mobile draws it full width across the 393 gutter. */
@media (min-width: 768px) {
    .regional-2026-theme .wfv2-bank-verify {
        width: 350px !important;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
}

/* The masked SSN, blue and letter-spaced, with the reveal toggle sitting inline beside the digits. */
:root .wfv2-ssn-value {
    font-size: 17px;
    letter-spacing: 0.12em;
    color: var(--brand-value-blue) !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* WF-B1 screen 2 footnote panel. NOT Background.Light: bg-light is #f8f9fa, near enough to white that the
   card disappeared against the page - the design shows a clearly grey panel. Bootstrap's utility classes
   carry !important, so this is a class of its own rather than an override that would silently lose. */
:root .wfv2-footnote-card {
    background-color: var(--brand-footnote-card-bg) !important;
}

/* WF-B1 secondary text actions ("Resend Code"). Bootstrap 5 gives .btn-link text-decoration: underline by
   default; the design draws these as plain blue text. Hover keeps the underline as the affordance, which is
   how the rest of the app behaves and what a pointer user expects. */
:root .wfv2-link-plain {
    text-decoration: none !important;
}

:root .wfv2-link-plain:hover,
:root .wfv2-link-plain:focus {
    text-decoration: underline !important;
}

/* WF-B1 screen 7 footnote markers. They are references, so they take the colour of the text around them
   rather than link blue - the "1" after the blue amount stays blue, a marker after dark copy stays dark. */
/* Footnote markers stay small; the frames overstate their size because Figma would not shrink them. */
/* Size only: Bootstrap reboot positions sup, and an absolute cap breaks its proportional raise. */
.regional-2026-theme sup {
    font-size: 0.55em;
}

:root .wfv2-note-ref {
    color: inherit !important;
    text-decoration: none !important;
}

/* Air between the terms card and the notes - they were butted together with no separation. */
/* The action bar is FIXED on phones only. On desktop the page is short enough to show it in flow, and
   pinning it there left a large empty band between the notes and the real footer. Breakpoint matches
   Bootstrap's md. */
@media (max-width: 767.98px) {
    :root .wfv2-action-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
    }

    /* The reserve does NOT belong here. @Body and <footer> are SIBLINGS in BaseLayout, so padding on the
       content column opens a visible band between the last footnote and the footer while the fixed bar
       still overlays the footer. Put it after the footer instead, which is the thing that has to clear. */
    :root .wfv2-has-action-bar {
        padding-bottom: 0;
    }

    body:has(.wfv2-has-action-bar) .product-legal-footer {
        padding-bottom: 140px;
    }
}

/* Desktop: in flow, and no reserved band underneath it. */
@media (min-width: 768px) {
    :root .wfv2-action-bar {
        position: static;
        /* In flow it is a card, not a bar: the fixed styling leaves it open at the sides and bottom. */
        border: 1px solid #e0e0e0;
        border-radius: var(--brand-surface-radius);
    }

    :root .wfv2-has-action-bar {
        padding-bottom: 0;
    }

    /* Screen 7's frame has no panel behind Continue - the button stands alone. */
    :root .wfv2-action-bar--plain {
        border: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Workflow progress indicator (WF-B1). Geometry from the RM Figma: 35px label strip over a 4px bar. */
.wf-progress--bar {
    background: #fff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.wf-progress__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 35px;
    padding: 0 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--brand-text-primary);
}

.wf-progress__counter {
    text-transform: uppercase;
}

.wf-progress__track {
    display: flex;
    gap: 2px;
    height: 4px;
}

.wf-progress__seg {
    flex: 1 1 0;
    background: var(--brand-rule-color);
}

/* Regional-only, as it was before the rebrand tokenised it: --bs-primary differs per theme, so an unscoped token. */
.wf-progress__seg--done {
    background: #2a71d4;
}

/* The new-prospect bar is green, with pending segments at 20% of the same colour. */
.regional-2026-theme .wf-progress__seg {
    background: rgba(23, 178, 106, 0.2);
}

.regional-2026-theme .wf-progress__seg--done {
    background: #17b26a;
}

.regional-2026-theme .wf-progress__counter {
    text-transform: none;
}

.wf-progress--tabs {
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0.75rem 1rem;
    list-style: none;
    background: #fff;
    border-bottom: 1px solid #ddd;
}

.wf-progress__step {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    color: var(--brand-progress-step-color);
}

.wf-progress__step--current {
    color: var(--brand-text-primary);
}

.wf-progress__name {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.wf-progress__desc {
    font-size: 0.6875rem;
    font-weight: 400;
}

/* The desktop content column; only screens 7 and 15 are wider. */
/* LOP-1968: 20px mobile gutter (Figma). Not a Blazorise value - its scale is 4/8/16/24/48. */
@media (max-width: 767.98px) {
    .regional-2026-theme .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* A step that nests a shell inside the workflow host would otherwise gutter twice, at 40px. */
    .regional-2026-theme .container .container {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 768px) {
    .regional-2026-theme .container {
        max-width: 635px;
    }

    /* :has() rather than a flag, because the view renders its Row straight into the step container. */
    .regional-2026-theme .container:has(.wfv2-wide) {
        max-width: 960px;
    }

    /* Screen 15's body is 724px in its frame (1581:316) - between screen 7's 960 and the 635 everything else uses, so it. */
    .regional-2026-theme .container:has(.wfv2-approval-wide) {
        max-width: 724px;
    }

    /* A shell Container inside a step Container adds a second gutter, so the inner one gives its back. */
    .regional-2026-theme .container .container {
        padding-left: 0;
        padding-right: 0;
    }

    /* The views still declare Is6 from the pre-rebrand layout; the column is the content now. */
    .regional-2026-theme .container > .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
    }
}

/* The header's desktop inset. */
@media (min-width: 768px) {
    .regional-2026-theme .navbar-fixed-top > .row > [class*="col-"]:first-child {
        padding-left: 80px !important;
    }

    .regional-2026-theme .navbar-fixed-top > .row > [class*="col-"]:last-child {
        padding-right: 80px !important;
    }
}

/* Screen 2's social-proof block; geometry taken from regionalfinance.com, not the mockup. */
.regional-2026-theme .wfv2-social-proof {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    overflow: hidden;
    padding-top: 2rem;
}

.regional-2026-theme .wfv2-social-proof__images {
    position: relative;
    width: 100%;
    height: 208px;
}

.regional-2026-theme .wfv2-social-proof__img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 177px;
    object-fit: cover;
    border: 4px solid #fff;
    border-radius: 16px;
    box-shadow: 0 3px 18px rgba(0, 0, 0, 0.14);
    /* Every card carries the centring translate; the fan adds its own translate/rotate on top. */
    transform: translate(-50%, -50%);
    /* 700ms. regionalfinance.com's own fan measured ~480ms of movement (2026-09-14), so this is already the slower of. */
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The one the applicant sees first, on top of the pile. */
.regional-2026-theme .wfv2-social-proof__img--center {
    z-index: 2;
}

.regional-2026-theme .wfv2-social-proof.is-fanned .wfv2-social-proof__img--left {
    transform: translate(-50%, -50%) translateX(-110px) rotate(-12deg);
}

.regional-2026-theme .wfv2-social-proof.is-fanned .wfv2-social-proof__img--right {
    transform: translate(-50%, -50%) translateX(110px) rotate(12deg);
}

.regional-2026-theme .wfv2-social-proof__heading {
    text-align: center;
    max-width: 562px;
}

.regional-2026-theme .wfv2-social-proof__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-heading-color);
    margin: 0 0 0.5rem;
}

.regional-2026-theme .wfv2-social-proof__body {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--brand-text-muted);
    margin: 0;
}

/* The laurels flank the score and the logo. */
.regional-2026-theme .wfv2-social-proof__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.regional-2026-theme .wfv2-social-proof__leaf {
    width: 39px;
    height: 59px;
    flex-shrink: 1;
    min-width: 0;
}

.regional-2026-theme .wfv2-social-proof__score {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-heading-color);
    white-space: nowrap;
    flex-shrink: 0;
}

/* "out of 5" is the same size but not bold - the number is the thing being stated. */
.regional-2026-theme .wfv2-social-proof__score-suffix {
    font-weight: 400;
}

.regional-2026-theme .wfv2-social-proof__logo {
    width: 104px;
    height: 26px;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .regional-2026-theme .wfv2-social-proof__img {
        transition: none;
    }
}


/* Only the gap lives here; the row layout comes from Blazorise attributes on the element. */
.regional-2026-theme .wfv2-benefit-row {
    gap: 0.5rem;
}

.regional-2026-theme .wfv2-benefit-tick {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    /* Optical nudge: the glyph's centre sits above the text baseline at this size. */
    margin-top: 0.125rem;
}

/* The accent gradient: one definition for every use in the new canvas. */
.regional-2026-theme {
    --brand-accent-gradient: linear-gradient(to bottom left, #caf7fe, #f4f7d4);
}

/* A full panel in the gradient: 2d's verify-number block, 17a/17b's portal promo. */
.regional-2026-theme .wfv2-gradient-card {
    background: var(--brand-accent-gradient);
    border: 0;
    border-radius: 16px;
}

/* A strip of it across a card's top edge. */
.regional-2026-theme .wfv2-gradient-band {
    background: var(--brand-accent-gradient);
}

/* Form-field labels. Deliberately NOT a change to .wfv2-label, which is the review-row caption. */
.regional-2026-theme .wfv2-field-label {
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    color: var(--brand-heading-color) !important;
}

/* Screen 4's captions are 12/700 UPPER in its frame (1580:396). */
.regional-2026-theme .wfv2-summary-boldcaps .wfv2-label {
    font-weight: 700;
}

/* 2d's desktop frame draws its review rows as bordered fields, so the captions take this treatment. */
@media (min-width: 768px) {
    .regional-2026-theme .wfv2-summary-fieldlabels .wfv2-label {
        font-size: 16px;
        font-weight: 700;
        text-transform: none;
        color: var(--brand-heading-color) !important;
    }
}

/* An action drawn inside a text box: Addons would put a bordered button outside the field. */
.regional-2026-theme .wfv2-input-affix {
    position: relative;
}

.regional-2026-theme .wfv2-input-affix .form-control {
    padding-right: 48px;
}

/* Bare on purpose: .btn's own border, background and padding would redraw the pill this replaces. */
.regional-2026-theme .wfv2-input-affix__btn {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 3;
    padding: 6px;
    border: 0;
    background: none;
    line-height: 1;
    color: var(--bs-primary);
}

.regional-2026-theme .wfv2-input-affix__btn:hover,
.regional-2026-theme .wfv2-input-affix__btn:focus {
    background: none;
    color: var(--bs-primary);
}

/* LOP-1968 screen 7 desktop: the pre-V2 two-column selector on V2 tokens. */
.regional-2026-theme .wfv2-selector-card {
    border: 1px solid var(--brand-input-border);
    background-color: #ffffff;
}

.regional-2026-theme .wfv2-selector-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-heading-color);
}

.regional-2026-theme .wfv2-selector-note {
    font-size: 13px;
    font-weight: 400;
    color: var(--brand-text-muted);
}

/* The chosen figure, at the right of each selector header. */
.regional-2026-theme .wfv2-selector-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--brand-heading-color);
    white-space: nowrap;
}

/* The slider end labels. */
.regional-2026-theme .wfv2-selector-bound {
    font-size: 12px;
    font-weight: 400;
    color: var(--brand-text-muted);
}

/* Tinted payment panel; the darkened blue clears AA on this ground (LOP-1018). */
.regional-2026-theme .wfv2-payment-card {
    background-color: rgba(217, 243, 252, 0.5);
    border: 1px solid #2a71d4 !important;
}

.regional-2026-theme .wfv2-payment-amount {
    font-size: 22px;
    font-weight: 700;
    color: #1a5fbf;
}

/* Desktop runs Continue full width under both columns. */
@media (min-width: 768px) {
    .regional-2026-theme .wfv2-offer-continue {
        width: 100%;
    }
}

/* Footnotes are an extension of the footer, not page content. */
.regional-2026-theme .wfv2-footnote-band {
    /* 30px, matching the footer inset exactly - the frames set both to 30 and the band's own Padding.Is4.OnX (24px) left. */
    padding-left: 30px !important;
    padding-right: 30px !important;
    margin-top: auto;
    /* Padding is an attribute on each band: Padding.Is4.OnX.Is4.FromTop. */
    background-color: var(--bg-footer-color);
    color: var(--brand-footer-text);
    text-align: start;
    /* The band's own strut, so an inline child cannot inherit the body's larger leading. */
    font-size: 10px;
    line-height: 1.2;
}

/* The hosted band breaks out to the viewport edges; 100vw over-runs by the scrollbar width. */
.regional-2026-theme .wfv2-footnote-band--bleed {
    width: calc(100vw - var(--wfv2-scrollbar));
    margin-left: calc(50% - 50vw + var(--wfv2-scrollbar) / 2);
    margin-bottom: -1.5rem;
}

/* The hosted band needs a growing column above it for margin-top:auto to reach the footer. */
.regional-2026-theme .container:has(> .wfv2-footnote-band--bleed) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* .wfv2-footnote pins the muted body colour with !important, which is right on a white page and wrong on the grey. */
.regional-2026-theme .wfv2-footnote-band .wfv2-footnote,
.regional-2026-theme .wfv2-footnote-band .wfv2-disclosure {
    color: var(--brand-footer-text) !important;
}

/* The line under screen 2's phone field. Muted and centred, matching the design's treatment. */
.regional-2026-theme .wfv2-field-helper {
    font-size: 14px;
    font-weight: 400;
    color: var(--brand-text-muted);
}

/* LOP-1968 screen 5 - the consent sits in a grey panel in the new canvas, where it was bare text before. */
.regional-2026-theme .wfv2-consent-panel {
    background-color: #f2f2f2;
    border-radius: 16px;
    padding: 10px 20px;
}

/* The one-click illustration above screen 5's headline. */
.regional-2026-theme .wfv2-one-click-art {
    width: 261px;
    height: 168px;
    max-width: 100%;
    object-fit: contain;
}

/* The eyebrow line: the greeting sits above the headline rather than inside it. */
/* LOP-1968 screen 13: each authorization is a grey card. */
/* Fill and radius only; the 16px inset is Padding.Is3 on each card. */
.regional-2026-theme .wfv2-auth-card {
    background-color: #f2f2f2;
    border-radius: var(--brand-surface-radius);
}

/* Screen 13's SSA consent is quoted inside the grey card on a white panel of its own (1581:212); the credit. */
.regional-2026-theme .wfv2-auth-quote {
    background-color: #fff;
    border: 1px solid var(--brand-input-border);
    border-radius: 8px;
    padding: 12px 16px;
}

/* The disclosure link is a colour-only override in the frame. */
.regional-2026-theme .wfv2-auth-body-link {
    font-size: inherit;
    font-weight: inherit;
    color: var(--bs-primary) !important;
    text-decoration: none;
}

.regional-2026-theme .wfv2-auth-body-link:hover,
.regional-2026-theme .wfv2-auth-body-link:focus-visible {
    text-decoration: underline;
}

/* Sits INSIDE the field, immediately after the digits - x=518 against a value ending at 510 on desktop, and the same relationship on the phone frame. */
.regional-2026-theme .wfv2-ssn-reveal {
    display: inline-flex;
    align-items: center;
    vertical-align: baseline;
    margin-left: 0.5rem;
    padding: 0;
    color: var(--bs-primary);
}

/* The SSN row, tinted rather than white. */
/* A row whose icons live at its right end: the value takes the free space and the cluster is pushed out. */
.regional-2026-theme .wfv2-summary-flat .wfv2-value.wfv2-value-actions,
.regional-2026-theme .wfv2-value.wfv2-value-actions {
    display: flex;
    align-items: center;
}

/* margin-left:auto needs free space, and the text column only grew at >=768px. */
.regional-2026-theme .wfv2-row-text:has(.wfv2-value-actions) {
    flex: 1 1 auto;
    min-width: 0;
}

.regional-2026-theme .wfv2-value-actions .wfv2-row-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

/* The pencil matches the reveal eye beside it rather than the muted chevron it replaces. */
.regional-2026-theme .wfv2-row-edit {
    display: inline-flex;
    align-items: center;
    padding: 0;
    color: var(--bs-primary);
}

.regional-2026-theme .wfv2-ssn-card {
    background-color: var(--brand-recap-bg);
    border-color: transparent;
}

/* The apply bar: amount heavy, term light beside it, rate and payment beneath. */
.regional-2026-theme .wfv2-applybar-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-heading-color);
}

.regional-2026-theme .wfv2-applybar-term {
    font-size: 11px;
    font-weight: 400;
    color: var(--brand-text-muted);
    margin-left: 0.35rem;
}

.regional-2026-theme .wfv2-applybar-terms {
    font-size: 14px;
    font-weight: 500;
    color: var(--brand-heading-color);
}

/* LOP-1968 screen 13, measured off the DESKTOP frame (1581:212). */
.regional-2026-theme .wfv2-instant-strip {
    margin: -12px -16px 12px;
    padding: 10px 16px;
    border-radius: var(--brand-surface-radius) var(--brand-surface-radius) 0 0;
    /* The frame stacks white + green-15% under an OPAQUE accent gradient, so only the gradient shows. */
    background: var(--brand-accent-gradient);
    font-size: 11px;
    font-weight: 400;
    color: var(--brand-heading-color) !important;
}

.regional-2026-theme .wfv2-applybar-collabel {
    font-size: 12px;
    font-weight: 500;
    color: var(--brand-text-muted) !important;
}

.regional-2026-theme .wfv2-applybar-colvalue {
    font-size: 18px;
    font-weight: 500;
    color: var(--brand-heading-color) !important;
}

.regional-2026-theme .wfv2-applybar-note {
    font-size: 13px;
    font-weight: 400;
    color: var(--brand-text-muted) !important;
}

/* LOP-1968 screen 8: the rule between the two actions, as a border so it cannot orphan. */
.regional-2026-theme .wfv2-otp-action-divided {
    border-left: 1px solid var(--brand-input-border);
    /* !important because the global .btn rule sets the pill radius with it; at 999px a lone left border renders as a. */
    border-radius: 0 !important;
    margin-left: 1rem;
    padding-left: 1rem;
}

/* LOP-1968 screen 8: the resend countdown shown during the cooldown. */
.regional-2026-theme .wfv2-resend-wait {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-text-muted);
}

/* LOP-1968 screen 9: the Yodlee attribution. 8px is below Blazorise's smallest token. */
.regional-2026-theme .wfv2-attribution {
    /* 20px to the link above, measured on 1580:659 - it was Margin.Is5 (48px). */
    margin-top: 20px;
    font-size: 8px;
    font-weight: 400;
    color: var(--brand-text-muted);
    text-align: center;
}

.regional-2026-theme .wfv2-attribution-logo {
    height: 18px;
    margin-top: 0.25rem;
}

/* LOP-1968 screen 8: the address run, 24px. Bootstrap's fs-1..4 are responsive, so not an attribute. */
.regional-2026-theme .wfv2-otp-email {
    font-size: 24px;
    color: var(--bs-primary);
}

.regional-2026-theme .wfv2-eyebrow {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: #818aa0;
}

/* Screen 7's action-bar caption. NOT .wfv2-label: that one is screen 4's review-row caption and is uppercase, where. */
.regional-2026-theme .wfv2-actionbar-label {
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    color: var(--brand-heading-color);
}

/* ==== LOP-1968 screen 2/3 corrections, measured off the DESKTOP frames (1580:282, 1580:349) ==== */

/* The phone field is a card, not a disabled input. */
.regional-2026-theme .wfv2-phone-card,
.regional-2026-theme .wfv2-phone-card:disabled {
    background-color: #f2f2f2;
    border: 0;
    border-radius: 16px;
    padding: 16px;
    line-height: 29px;
    min-height: 0;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--brand-heading-color);
    opacity: 1;
}

/* 5. Button type. The design sets 14px/600 on both the filled and the outline button; we were rendering 18px/400. */
.regional-2026-theme .btn {
    font-size: 14px;
    font-weight: 600;
}

/* The social-proof rating scales up on desktop. */
@media (min-width: 768px) {
    .regional-2026-theme .wfv2-social-proof__leaf {
        width: 60px;
        height: 90px;
    }

    .regional-2026-theme .wfv2-social-proof__score {
        font-size: 24px;
    }

    .regional-2026-theme .wfv2-social-proof__logo {
        width: 160px;
        height: 40px;
    }
}

/* 9. The footnotes were carrying Bootstrap's 1.5 leading at weight 500. The design sets 10px/400 on a 12px line. */
:root .wfv2-footnote {
    font-weight: 400;
    line-height: 1.2;
}

/* ==== LOP-1968 screen 3 / the OTP screens, measured off 1580:349 ==== */

/* It was inheriting the subheading size and fitting on one line. */
:root .regional-2026-theme .wfv2-otp-heading {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.2;
}

/* The digits are 51x56 at 32px/400 with a 9px gap, so the six boxes span 351px. */
.regional-2026-theme .otp-digit {
    width: 51px;
    height: 56px;
    font-size: 32px;
    font-weight: 400;
    border-radius: 4px;
}

.regional-2026-theme .otp-input-container {
    gap: 9px;
}

/* On desktop the buttons match the OTP row width rather than filling the column. */
@media (min-width: 768px) {
    .regional-2026-theme .wfv2-otp-actions > .btn {
        display: block;
        width: 351px !important;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Screen 4 desktop has no panel: the rows flatten and the value becomes the field box. */
@media (min-width: 768px) {
    .regional-2026-theme .wfv2-summary-flat {
        border: 0;
        background-color: transparent;
    }

    /* Rows are nested two deep; flatten both levels. Bootstrap's .border-bottom needs !important back. */
    /* !important because the markup sets Padding.Is3.OnX and Bootstrap's px-3 carries it. */
    .regional-2026-theme .wfv2-summary-flat .card-body > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .regional-2026-theme .wfv2-summary-flat .card-body > div > div {
        border-bottom: 0 !important;
        padding-top: 0;
        padding-bottom: 20px;
    }

    /* The text column takes the whole row now the chevron is hidden. */
    .regional-2026-theme .wfv2-summary-flat .wfv2-row-text {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* The value becomes the bordered field box. */
    .regional-2026-theme .wfv2-summary-flat .wfv2-value {
        display: block;
        margin-top: 0.25rem;
        padding: 13px 16px;
        background-color: #fff;
        border: 1px solid #cdcdcd;
        border-radius: 16px;
    }

    /* Desktop edits in place; the editor is already mounted, so this swaps which one shows. */
    .regional-2026-theme .wfv2-summary-inline-edit .wfv2-row-editor-hidden {
        display: block !important;
    }

    .regional-2026-theme .wfv2-summary-inline-edit .wfv2-row-display {
        display: none !important;
    }

    /* No chevron in the desktop frame — the box itself is the affordance, and the row stays clickable. */
    .regional-2026-theme .wfv2-summary-flat .card-body > div svg.fa-angle-right,
    .regional-2026-theme .wfv2-summary-flat .card-body > div .fa-angle-right {
        display: none;
    }
}

/* Field box proportions; Bootstrap's default is too short for the design's radius. */
.regional-2026-theme .form-control:not(.otp-digit),
.regional-2026-theme .form-select {
    padding: 14px 16px;
    min-height: 53px;
}

/* The legal step keeps V1's width: only its wording changes on V2. */
@media (min-width: 768px) {
    .regional-2026-theme .container:has(#myIframe) {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .regional-2026-theme .container:has(#myIframe) {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .regional-2026-theme .container:has(#myIframe) {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .regional-2026-theme .container:has(#myIframe) {
        max-width: 1320px;
    }
}