/* ==========================================================================
   CreditVana portal — design layer
   --------------------------------------------------------------------------
   Loaded last, so it refines the existing vx-* components without touching
   markup. Nothing here hides content; it changes hierarchy, type and surface
   treatment only.

   The problem this addresses: every panel was a white rounded card carrying
   the same border, shadow and eyebrow label, so the most important number on
   the page (the score) read no louder than a caption. This layer introduces
   three things the portal did not have — a type scale, an elevation system,
   and one anchoring surface.
   ========================================================================== */

.vx-portal-shell {
    /* type roles */
    --vx-font-display: "Archivo", "DM Sans", system-ui, sans-serif;

    /* elevation — reserved, not sprayed on every card */
    --vx-e0: none;
    --vx-e1: 0 1px 2px rgba(28, 22, 48, .04);
    --vx-e2: 0 6px 18px -6px rgba(28, 22, 48, .12), 0 2px 5px rgba(28, 22, 48, .05);
    --vx-e3: 0 18px 40px -14px rgba(64, 22, 128, .28);

    --vx-ink: var(--n-950);
    --vx-ink-soft: var(--n-700);
    --vx-hairline: var(--n-200);
}

/* --------------------------------------------------------------------------
   1. Type scale
   Metrics are the reason people open this page, so they get the largest
   step and tabular figures; labels step well down and out of the way.
   -------------------------------------------------------------------------- */

.vx-portal-shell h1,
.vx-portal-shell h2,
.vx-portal-shell h3 {
    font-family: var(--vx-font-display);
    letter-spacing: -.018em;
    color: var(--vx-ink);
}

.vx-main-header h1 { font-size: clamp(1.6rem, 2.4vw, 2.05rem); font-weight: 700; line-height: 1.12; }
.vx-command-hero h2 { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 700; line-height: 1.18; }
.vx-section-headline h2 { font-size: 1.2rem; font-weight: 600; }
.vx-roadmap-block-head h2,
.vx-roadmap-block-head h3 { font-size: 1.1rem; font-weight: 600; }

/* Eyebrows appear a dozen times per screen — they need to be quiet. */
.vx-portal-shell .vx-eyebrow {
    font-family: var(--vx-font-display);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--vx-ink-soft);
    opacity: .85;
}

/* --------------------------------------------------------------------------
   2. Surfaces — hairline by default, shadow only where something truly lifts
   -------------------------------------------------------------------------- */

.vx-portal-shell .vx-card,
.vx-portal-shell .vx-section-card,
.vx-portal-shell .vx-roadmap-block,
.vx-portal-shell .vx-sync-banner,
.vx-portal-shell .vx-notification-quickview {
    border: 1px solid var(--vx-hairline);
    box-shadow: var(--vx-e1);
    border-radius: var(--r-3);
}

.vx-portal-shell .vx-section-card { padding: var(--sp-9) var(--sp-9); }
.vx-portal-shell .vx-card { padding: var(--sp-8) var(--sp-9); }

/* --------------------------------------------------------------------------
   3. The anchor — the command hero carries the brand as a filled surface.
   This is the one loud element; everything else stays quiet around it.
   -------------------------------------------------------------------------- */

.vx-portal-shell .vx-command-hero {
    background: linear-gradient(152deg, var(--brand-950) 0%, var(--brand-900) 52%, var(--brand-800) 100%);
    border: 0;
    border-radius: var(--r-4);
    box-shadow: var(--vx-e3);
    color: #fff;
    padding: var(--sp-10) var(--sp-10);
    position: relative;
    overflow: hidden;
}

/* a faint calibrated grid — echoes the measurement idea, stays almost unseen */
.vx-portal-shell .vx-command-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 46px);
}
.vx-portal-shell .vx-command-hero > * { position: relative; z-index: 1; }

.vx-portal-shell .vx-command-hero h2,
.vx-portal-shell .vx-command-hero strong { color: #fff; }
.vx-portal-shell .vx-command-hero .vx-eyebrow { color: rgba(255,255,255,.72); opacity: 1; }
.vx-portal-shell .vx-command-hero-copy { color: rgba(255,255,255,.74); }
.vx-portal-shell .vx-command-hero small { color: rgba(255,255,255,.75); }

.vx-portal-shell .vx-command-hero-status {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
}

/* the three status blocks inside the hero */
.vx-portal-shell .vx-command-checklist > article {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--r-2);
}
.vx-portal-shell .vx-command-checklist > article > span {
    font-family: var(--vx-font-display);
    font-size: .56rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
}
.vx-portal-shell .vx-command-checklist > article > strong {
    font-family: var(--vx-font-display);
    font-size: 1.02rem;
    font-weight: 600;
}
/* keep the semantic edge readable on a dark ground */
.vx-portal-shell .vx-command-checklist > article.tone-warning  { border-left: 3px solid #f0b429; }
.vx-portal-shell .vx-command-checklist > article.tone-critical { border-left: 3px solid #ff7a94; }
.vx-portal-shell .vx-command-checklist > article.tone-info     { border-left: 3px solid #5eead4; }

.vx-portal-shell .vx-command-reasons > article { color: rgba(255,255,255,.78); }
.vx-portal-shell .vx-command-reason-icon {
    background: rgba(255,255,255,.16);
    color: #d8fff2;
    border: 0;
}

.vx-portal-shell .vx-command-hero-actions .btn-primary {
    background: #fff;
    border-color: #fff;
    color: #3b1178;
    font-weight: 600;
}
.vx-portal-shell .vx-command-hero-actions .btn-primary:hover { background: #f3ecff; border-color: #f3ecff; color: #3b1178; }
/* portal-theme.css sets `color: var(--cv-primary) !important` on
   .portal-shell .btn-outline-dark, which renders violet-on-violet inside the
   hero (measured 1.92:1 — effectively invisible). Override deliberately. */
.portal-shell .vx-command-hero .vx-command-hero-actions .btn-outline-dark,
.portal-shell .vx-command-hero .vx-command-hero-actions .btn-secondary {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.45) !important;
    color: var(--n-0) !important;
}
.portal-shell .vx-command-hero .vx-command-hero-actions .btn-outline-dark:hover,
.portal-shell .vx-command-hero .vx-command-hero-actions .btn-secondary:hover {
    background: rgba(255,255,255,.22) !important;
    border-color: rgba(255,255,255,.7) !important;
    color: var(--n-0) !important;
}

/* --------------------------------------------------------------------------
   4. Metric tiles — the numbers become the loudest thing on the light side
   -------------------------------------------------------------------------- */

.vx-portal-shell .vx-page-hero > article {
    background: #fff;
    border: 1px solid var(--vx-hairline);
    border-radius: var(--r-3);
    box-shadow: var(--vx-e1);
    padding: var(--sp-7) var(--sp-8);
}

.vx-portal-shell .vx-page-hero > article > strong {
    font-family: var(--vx-font-display);
    font-size: clamp(1.7rem, 2.6vw, 2.25rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
    color: var(--vx-ink);
    display: block;
    margin: var(--sp-3) 0 var(--sp-1);
}

.vx-portal-shell .vx-page-hero-head > span:not(.vx-page-hero-icon) {
    font-family: var(--vx-font-display);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--vx-ink-soft);
}

.vx-portal-shell .vx-page-hero > article > small {
    color: var(--vx-ink-soft);
    font-size: .74rem;
    line-height: 1.4;
}

/* the icon chip recedes — it was competing with the number */
.vx-portal-shell .vx-page-hero-icon {
    width: 26px;
    height: 26px;
    border-radius: var(--r-1);
    font-size: .78rem;
    background: var(--brand-50);
    color: var(--vx-primary);
    box-shadow: none;
}

/* tone the metric to its meaning rather than colouring every tile alike */
.vx-portal-shell .vx-page-hero > article.tone-alerts > strong { color: #c2410c; }
.vx-portal-shell .vx-page-hero > article.tone-readiness > strong { color: var(--brand-700); }

/* --------------------------------------------------------------------------
   5. Navigation cards — lift only on the things that are actually clickable
   -------------------------------------------------------------------------- */

.vx-portal-shell .vx-home-nav-card,
.vx-portal-shell .vx-jump-nav a,
.vx-portal-shell .vx-offer-card,
.vx-portal-shell .vx-opportunity-card {
    border: 1px solid var(--vx-hairline);
    border-radius: var(--r-3);
    box-shadow: var(--vx-e1);
    transition: transform .16s cubic-bezier(.22,.9,.3,1),
                box-shadow .16s cubic-bezier(.22,.9,.3,1),
                border-color .16s ease;
}

.vx-portal-shell .vx-home-nav-card:hover,
.vx-portal-shell .vx-jump-nav a:hover,
.vx-portal-shell .vx-offer-card:hover,
.vx-portal-shell .vx-opportunity-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--vx-e2);
    border-color: #cdbcf0;
}

.vx-portal-shell .vx-home-nav-card em {
    font-family: var(--vx-font-display);
    font-style: normal;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--vx-primary);
}

/* --------------------------------------------------------------------------
   6. Sidebar — the active item should be unmistakable
   -------------------------------------------------------------------------- */

.vx-portal-shell .vx-side-rail { border: 1px solid var(--vx-hairline); box-shadow: var(--vx-e1); }

/* Two stylesheets disagreed about the active nav item: portal-theme.css:8046
   forces a light tint with !important, while dashboard-redesign.css:365 sets the
   subtitle to white for a dark treatment that no longer applies — leaving white
   text on a pale violet ground (~1.3:1, illegible). Settle it on the light
   treatment and make every part of the item readable. */
.vx-portal-shell .vx-page-nav a.is-active {
    background: linear-gradient(135deg, var(--brand-50) 0%, var(--brand-100) 100%) !important;
    border-color: var(--brand-250) !important;
    box-shadow: 0 1px 2px rgba(28, 22, 48, .05) !important;
}
.vx-portal-shell .vx-page-nav a.is-active .vx-page-nav-copy strong {
    color: var(--brand-900) !important;
}
.vx-portal-shell .vx-page-nav a.is-active .vx-page-nav-copy small {
    color: #63577f !important;
}
.vx-portal-shell .vx-page-nav a.is-active .vx-page-nav-icon {
    background: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
    color: #fff !important;
}

/* the person's name is the anchor of the rail */
.vx-portal-shell .vx-side-brand-copy h2 {
    font-family: var(--vx-font-display);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--vx-ink);
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   7. Accessibility floor
   -------------------------------------------------------------------------- */

.vx-portal-shell a:focus-visible,
.vx-portal-shell button:focus-visible,
.vx-portal-shell [tabindex]:focus-visible {
    outline: 2px solid var(--vx-primary);
    outline-offset: 2px;
    border-radius: var(--r-1);
}

@media (prefers-reduced-motion: reduce) {
    .vx-portal-shell *,
    .vx-portal-shell *::before,
    .vx-portal-shell *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* --------------------------------------------------------------------------
   8. Density — recover vertical space so more lands above the fold
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .vx-portal-shell .vx-command-deck { gap: var(--sp-7); }
    .vx-portal-shell .vx-content-flow { gap: var(--sp-7); }
    .vx-portal-shell .vx-page-hero { gap: var(--sp-5); }
}

/* ==========================================================================
   Login / register — the auth split
   --------------------------------------------------------------------------
   The two halves previously read as one flat light card, so the brand had no
   moment and the form had no focus. The left becomes the brand surface; the
   right stays plain white and does nothing but take the credentials.
   ========================================================================== */

.portal-auth-body .portal-auth-layout {
    border-radius: var(--r-5);
    overflow: hidden;
    box-shadow: 0 30px 70px -28px rgba(35, 12, 78, .45);
}

/* ---- left: brand surface ---- */
.portal-auth-body .portal-auth-hero {
    background: linear-gradient(158deg, var(--brand-950) 0%, var(--brand-900) 54%, var(--brand-800) 100%);
    position: relative;
    overflow: hidden;
}
.portal-auth-body .portal-auth-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 48px);
}
.portal-auth-body .portal-auth-hero > * { position: relative; z-index: 1; }

.portal-auth-body .auth-lobby-kicker {
    font-family: var(--vx-font-display, Archivo, sans-serif);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
}
.portal-auth-body .auth-lobby-copy h3 {
    font-family: var(--vx-font-display, Archivo, sans-serif);
    font-size: clamp(1.45rem, 2.3vw, 1.95rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.02em;
    color: #fff;
}
.portal-auth-body .auth-lobby-copy p { color: rgba(255,255,255,.75); }

/* the three proof points: even columns, no mid-word wrapping */
.portal-auth-body .auth-lobby-metric-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
}
.portal-auth-body .auth-lobby-metric {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--r-2);
    padding: var(--sp-6) var(--sp-6);
    min-width: 0;
}
.portal-auth-body .auth-lobby-metric strong {
    font-family: var(--vx-font-display, Archivo, sans-serif);
    display: block;
    font-size: .92rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: var(--sp-1);
}
.portal-auth-body .auth-lobby-metric span {
    font-size: .74rem;
    line-height: 1.35;
    color: rgba(255,255,255,.7);
    overflow-wrap: anywhere;
}

.portal-auth-body .portal-auth-hero-media img {
    border-radius: var(--r-3);
    background: #fff;
}

.portal-auth-body .auth-lobby-trust span {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.82);
    font-size: .74rem;
}

/* ---- right: the form ---- */
.portal-auth-body .portal-auth-panel { background: #fff; }

.portal-auth-body .portal-auth-panel h1 {
    font-family: var(--vx-font-display, Archivo, sans-serif);
    font-size: clamp(1.6rem, 2.6vw, 2.05rem);
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--n-950);
}
.portal-auth-body .portal-auth-panel .subtitle { color: var(--n-700); }

.portal-auth-body .auth-login-pill {
    font-family: var(--vx-font-display, Archivo, sans-serif);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: #f2ebff;
    border: 1px solid #d9c8f8;
    color: var(--brand-800);
}

.portal-auth-body .portal-auth-form label {
    font-family: var(--vx-font-display, Archivo, sans-serif);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--n-700);
}

.portal-auth-body .portal-auth-form .form-control {
    border: 1px solid var(--n-300);
    border-radius: var(--r-2);
    padding: var(--sp-6) var(--sp-7);
    font-size: .95rem;
    color: var(--n-950);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.portal-auth-body .portal-auth-form .form-control::placeholder { color: var(--n-500); }
.portal-auth-body .portal-auth-form .form-control:focus {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .16);
    outline: none;
}

.portal-auth-body .portal-auth-form .btn-primary,
.portal-auth-body .auth-login-form .btn-primary {
    background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
    border: 0;
    border-radius: var(--r-2);
    padding: var(--sp-6) var(--sp-8);
    font-family: var(--vx-font-display, Archivo, sans-serif);
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 10px 22px -10px rgba(91, 33, 182, .7);
}
.portal-auth-body .portal-auth-form .btn-primary:hover { filter: brightness(1.07); }

.portal-auth-body a:focus-visible,
.portal-auth-body button:focus-visible,
.portal-auth-body .form-control:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

@media (max-width: 860px) {
    .portal-auth-body .auth-lobby-metric-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Credit score page — the Credit Karma / Sesame reading
   --------------------------------------------------------------------------
   The page already had the right parts (ring gauge, ruler, driver meters,
   bureau comparison) but sized them like ordinary cards. The pattern those
   products use is simple: the score is enormous, the band is stated in words,
   and every factor is a full-width row carrying a rating and an impact weight.
   ========================================================================== */

.vx-portal-shell .vx-score-panel { padding: var(--sp-10) var(--sp-10) var(--sp-9); }

/* ---- the gauge ---- */
.vx-portal-shell .vx-score-ring {
    width: clamp(210px, 24vw, 268px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    flex: none;
}
.vx-portal-shell .vx-score-number {
    font-family: var(--vx-font-display);
    font-size: clamp(3.4rem, 6vw, 4.6rem) !important;
    font-weight: 700 !important;
    line-height: .95 !important;
    letter-spacing: -.045em;
    font-variant-numeric: tabular-nums;
    color: var(--vx-ink) !important;
    width: auto !important;
}
.vx-portal-shell .vx-score-caption {
    font-family: var(--vx-font-display);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--vx-ink-soft);
}
/* the band, said in words — the thing people actually read off the gauge */
.vx-portal-shell .vx-score-band {
    font-family: var(--vx-font-display);
    font-size: .78rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--r-pill);
    display: inline-block;
}
.vx-portal-shell .vx-score-range {
    font-family: var(--vx-font-display);
    font-variant-numeric: tabular-nums;
    color: var(--vx-ink-soft) !important;
    width: auto !important;
}

/* ---- factor rows ----
   The row was a 3-up grid of narrow cards; Credit Karma-style factors read as
   full-width rows, so the meter can actually show a proportion. */
.vx-portal-shell .vx-score-driver-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}
.vx-portal-shell .vx-score-driver-row > article {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name  rating"
        "meter meter"
        "note  note";
    gap: var(--sp-3) var(--sp-8);
    padding: var(--sp-7) 0;
    border-top: 1px solid var(--vx-hairline);
    align-items: baseline;
}
.vx-portal-shell .vx-score-driver-row > article:first-child { border-top: 0; padding-top: var(--sp-2); }

.vx-portal-shell .vx-score-driver-row > article > span {
    grid-area: name;
    font-size: .88rem;
    font-weight: 500;
    color: var(--vx-ink);
    text-transform: none;
    letter-spacing: 0;
}
.vx-portal-shell .vx-score-driver-row > article > strong {
    grid-area: rating;
    font-family: var(--vx-font-display);
    font-size: .72rem !important;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    justify-self: end;
}
.vx-portal-shell .vx-score-driver-row > article > .vx-driver-meter {
    grid-area: meter;
    width: 100% !important;
    height: 7px !important;
    border-radius: var(--r-pill);
    background: var(--n-100) !important;
    overflow: hidden;
}
.vx-portal-shell .vx-score-driver-row > article > .vx-driver-meter > i {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    width: var(--vx-driver-fill, 0%);
}
.vx-portal-shell .vx-score-driver-row > article > small {
    grid-area: note;
    font-size: .76rem;
    color: var(--vx-ink-soft);
}

/* ratings read as ratings, and the meter agrees with the word */
.vx-portal-shell .vx-driver-state.is-good     { color: #0b7a55 !important; }
.vx-portal-shell .vx-driver-state.is-warning  { color: #9a5b06 !important; }
.vx-portal-shell .vx-driver-state.is-critical { color: #b3243f !important; }
.vx-portal-shell .vx-score-driver-row > article:has(.is-good) .vx-driver-meter > i     { background: var(--ok-solid); }
.vx-portal-shell .vx-score-driver-row > article:has(.is-warning) .vx-driver-meter > i  { background: #d97706; }
.vx-portal-shell .vx-score-driver-row > article:has(.is-critical) .vx-driver-meter > i { background: var(--bad-solid); }

/* ---- the stat strip under the gauge ---- */
.vx-portal-shell .vx-kpi-grid > article {
    background: #fff;
    border: 1px solid var(--vx-hairline);
    border-radius: var(--r-3);
    padding: var(--sp-6) var(--sp-7);
}
.vx-portal-shell .vx-kpi-grid > article > span {
    font-family: var(--vx-font-display);
    font-size: .57rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--vx-ink-soft);
}
.vx-portal-shell .vx-kpi-grid > article > strong {
    font-family: var(--vx-font-display);
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--vx-ink);
    margin: var(--sp-2) 0 var(--sp-1);
}
.vx-portal-shell .vx-kpi-grid > article > small { font-size: .74rem; color: var(--vx-ink-soft); }

/* ---- the 300-850 ruler ---- */
.vx-portal-shell .vx-score-ruler-track { border-radius: var(--r-pill); overflow: hidden; }
.vx-portal-shell .vx-score-ruler-ticks small {
    font-family: var(--vx-font-display);
    font-size: .62rem;
    font-variant-numeric: tabular-nums;
    color: var(--vx-ink-soft);
}

/* ---- bureau comparison ---- */
.vx-portal-shell .vx-bureau-compare-card {
    background: #fff;
    border: 1px solid var(--vx-hairline);
    border-radius: var(--r-3);
    padding: var(--sp-7) var(--sp-8);
}
.vx-portal-shell .vx-bureau-compare-score {
    font-family: var(--vx-font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
    color: var(--vx-ink);
}
.vx-portal-shell .vx-bureau-pill-row .vx-bureau-pill-name {
    font-family: var(--vx-font-display);
    font-weight: 600;
}

/* ---- the Experian / Equifax / TransUnion toggle ---- */
.vx-portal-shell .vx-score-view-btn {
    font-family: var(--vx-font-display);
    font-size: .74rem;
    font-weight: 600;
    border-radius: var(--r-2);
}
.vx-portal-shell .vx-score-view-btn.is-active {
    background: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   Contrast corrections found by audit
   -------------------------------------------------------------------------- */

/* The reason chips carried `background: rgba(255,255,255,.56)` from the era when
   this hero was light. Against the new brand surface that reads as pale lilac,
   putting white text at 1.99:1. Invert the chip instead of the text. */
.vx-portal-shell .vx-command-reasons > article {
    background: rgba(17, 6, 40, .30) !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: var(--r-2);
    color: #fff !important;
}
.vx-portal-shell .vx-command-reasons > article span:last-child {
    color: rgba(255, 255, 255, .93) !important;
}

/* "Unlocked" / "Locked" markers on the premium grid sat at 4.27:1. */
.vx-portal-shell .vx-home-premium-grid > article span {
    color: #514a66 !important;
}

/* --------------------------------------------------------------------------
   Side rail brand — the wordmark runs the full width of the rail
   -------------------------------------------------------------------------- */

.vx-portal-shell .vx-side-brand-wrap { display: block; }

.vx-portal-shell .vx-main-brand.is-fullwidth {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: var(--sp-1) 0 0;
    margin: 0 0 var(--sp-7);
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.vx-portal-shell .vx-main-brand.is-fullwidth .vx-main-brand-logo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 143 / 29;
    object-fit: contain;
    object-position: left center;
}

/* the eyebrow now sits under the mark, so give it room to breathe */
.vx-portal-shell .vx-side-brand-copy .vx-eyebrow {
    display: inline-block;
    margin-bottom: var(--sp-3);
}

@media (max-width: 991px) {
    .vx-portal-shell .vx-main-brand.is-fullwidth .vx-main-brand-logo {
        max-width: 190px;
    }
}

/* ==========================================================================
   Legibility pass
   --------------------------------------------------------------------------
   An audit of every text node across the six portal pages surfaced 72 pairs
   below WCAG AA. Nearly all were small text on a tinted pill — Bootstrap's
   `*-subtle` badge combinations (text-info on bg-info-subtle measured 1.68:1)
   and the portal's own status chips. Each tone below is re-paired with a text
   colour that clears 4.5:1 on its own tint.
   ========================================================================== */

/* ---- Bootstrap subtle badges ---- */
.portal-shell .badge.bg-info-subtle,
.portal-shell .text-info,
.portal-auth-body .badge.bg-info-subtle    { color: #04414d !important; }
.portal-shell .badge.bg-success-subtle,
.portal-shell .text-success                { color: var(--ok-fg) !important; }
.portal-shell .badge.bg-warning-subtle,
.portal-shell .text-warning                { color: var(--warn-fg) !important; }
.portal-shell .badge.bg-danger-subtle,
.portal-shell .text-danger                 { color: var(--bad-fg) !important; }
.portal-shell .badge.bg-primary-subtle,
.portal-shell .text-primary                { color: var(--brand-800) !important; }

/* the plan badge still carried Bootstrap's blue tint */
.portal-shell .vx-side-brand-copy .badge.bg-primary-subtle {
    background: #f1e9ff !important;
    border-color: #d5c2f7 !important;
    color: var(--brand-800) !important;
}

/* ---- portal status chips ---- */
.vx-portal-shell .vx-flow-progress span.is-complete {
    background: rgba(14, 159, 110, .14) !important;
    border-color: rgba(14, 159, 110, .32) !important;
    color: var(--ok-fg) !important;
}
.vx-portal-shell .vx-priority-pill            { color: var(--warn-fg) !important; }
.vx-portal-shell .vx-bureau-pill-meta         { color: var(--n-0) !important; }
.vx-portal-shell .vx-live-indicator           { color: var(--ok-fg) !important; }

/* the score band pill, per tone */
.vx-portal-shell .vx-score-band.is-poor,
.vx-portal-shell .vx-score-band[class*="poor"]      { background:#ffe4e6 !important; color:var(--bad-fg) !important; }
.vx-portal-shell .vx-score-band[class*="fair"]      { background:#fdecd3 !important; color:var(--warn-fg) !important; }
.vx-portal-shell .vx-score-band[class*="good"]      { background:var(--ok-bg) !important; color:var(--ok-fg) !important; }
.vx-portal-shell .vx-score-band[class*="excellent"] { background:#e6f6ef !important; color:#085033 !important; }

/* ---- auth ---- */
.portal-auth-body .auth-lobby-kicker { color: rgba(255,255,255,.88) !important; }
.portal-auth-body .portal-auth-panel small,
.portal-auth-body .auth-login-form .text-muted,
.portal-auth-body .portal-auth-panel .text-muted { color: #6b6186 !important; }

/* Bootstrap's muted grey fails on our tinted grounds; darken it portal-wide. */
.portal-shell .text-muted,
.portal-shell small.text-muted { color: var(--n-700) !important; }
.portal-shell .btn-outline-secondary { color: var(--n-800) !important; }

/* Bootstrap's default link/button blue (#0d6efd) still reached the portal from
   the CDN stylesheet — off-brand and, on our tinted grounds, under AA. */
.portal-shell .btn-link,
.portal-shell a.text-primary,
.portal-shell .btn-outline-primary,
.portal-auth-body .btn-link {
    color: var(--brand-700) !important;
}
.portal-shell .btn-outline-primary { border-color: var(--brand-250) !important; }
.portal-shell .btn-outline-primary:hover {
    background: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
    color: #fff !important;
}
.portal-shell .badge.bg-secondary-subtle,
.portal-shell .text-secondary { color: var(--n-800) !important; }

/* remaining tinted status chips */
.vx-portal-shell .vx-plan-pill.is-free   { color: var(--warn-fg) !important; }
.vx-portal-shell .vx-opportunity-tag     { color: var(--warn-fg) !important; }
.vx-portal-shell .vx-opportunity-tag.is-good,
.vx-portal-shell .vx-opportunity-tag.tone-good { color: var(--ok-fg) !important; }

/* Retune Bootstrap's own variables rather than chasing each link selector —
   this is where the leftover #0d6efd was coming from. */
.portal-shell,
.portal-auth-body {
    --bs-link-color: var(--brand-700);
    --bs-link-hover-color: var(--brand-800);
    --bs-link-color-rgb: 109, 40, 217;
    --bs-primary: var(--brand-600);
    --bs-primary-rgb: 124, 58, 237;
}

/* The active bureau pill's gradient ran from deep violet into a light accent,
   so white text measured 4.32:1 at the light end. Keep the whole ramp dark. */
.vx-portal-shell .vx-bureau-pill.is-active {
    background: linear-gradient(130deg, var(--brand-900) 0%, var(--brand-700) 100%) !important;
    border-color: var(--brand-900) !important;
}
.vx-portal-shell .vx-bureau-pill.is-active .vx-bureau-pill-name,
.vx-portal-shell .vx-bureau-pill.is-active .vx-bureau-pill-meta { color: var(--n-0) !important; }

.vx-portal-shell .vx-bureau-context-strip span,
.vx-portal-shell .vx-snapshot-grid span { color: var(--n-700) !important; }

/* ==========================================================================
   Notification Center — Apple Notification Centre reading
   --------------------------------------------------------------------------
   The pattern that system borrows from: one grouped rounded container, hairline
   separators rather than gaps, a coloured glyph in a rounded square, title over
   secondary message, timestamp trailing and quiet, unread carried by a small dot
   instead of a heavy background, and actions that stay out of the way until you
   want them. Rows are links, so a notification opens on its own page.
   ========================================================================== */

.notification-center-page {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--sp-9) var(--sp-8) var(--sp-15);
}

/* ---- masthead ---- */
.notification-center-page .nc-masthead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-8);
    flex-wrap: wrap;
    margin-bottom: var(--sp-8);
}
.notification-center-page .nc-masthead h1 {
    font-family: var(--vx-font-display, Archivo, sans-serif);
    font-size: clamp(1.75rem, 3.4vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--n-950);
    margin: 0;
}
.notification-center-page .nc-masthead p {
    margin: var(--sp-1) 0 0;
    font-size: .88rem;
    color: var(--n-700);
}
.notification-center-page .nc-masthead-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
}
.notification-center-page .nc-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
}
.notification-center-page .nc-sort label {
    font-family: var(--vx-font-display, Archivo, sans-serif);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--n-700);
    margin: 0;
}
.notification-center-page .nc-sort-select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235d5573'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E") no-repeat right 8px center/14px;
    border: 1px solid var(--n-300);
    border-radius: var(--r-2);
    padding: var(--sp-3) var(--sp-10) var(--sp-3) var(--sp-5);
    font-size: .82rem;
    color: var(--n-950);
    cursor: pointer;
}
.notification-center-page .nc-sort-select:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}
.notification-center-page .nc-back,
.notification-center-page .nc-back-link {
    font-size: .9rem;
    font-weight: 600;
    color: var(--brand-700);
    text-decoration: none;
}
.notification-center-page .nc-back:hover,
.notification-center-page .nc-back-link:hover { text-decoration: underline; }

/* ---- push card ---- */
.notification-center-page .nc-push-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-7);
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-3);
    padding: var(--sp-7) var(--sp-8);
    margin-bottom: var(--sp-8);
}
.notification-center-page .nc-push-copy strong {
    display: block;
    font-family: var(--vx-font-display, Archivo, sans-serif);
    font-size: .95rem;
    font-weight: 600;
    color: var(--n-950);
}
.notification-center-page .nc-push-copy span { font-size: .84rem; color: var(--n-700); }
.notification-center-page .nc-push-side { display: flex; align-items: center; gap: var(--sp-4); }
.notification-center-page .nc-status-pill {
    font-family: var(--vx-font-display, Archivo, sans-serif);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: #f2ecff;
    border: 1px solid var(--brand-200);
    color: var(--brand-800);
    border-radius: var(--r-pill);
    padding: var(--sp-2) var(--sp-5);
}
.notification-center-page .nc-push-token {
    flex-basis: 100%;
    font-size: .7rem;
    color: var(--n-600);
    word-break: break-all;
}

/* ---- the grouped list ---- */
.notification-center-page .nc-group {
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-4);
    overflow: hidden;
}
.notification-center-page .nc-row { border-top: 1px solid var(--n-100); }
.notification-center-page .nc-row:first-child { border-top: 0; }
.notification-center-page .nc-row:hover { background: var(--n-25); }

.notification-center-page .nc-row-link {
    display: grid;
    grid-template-columns: 10px 34px 1fr 16px;
    align-items: start;
    gap: var(--sp-6);
    padding: var(--sp-7) var(--sp-8) var(--sp-6);
    text-decoration: none;
    color: inherit;
}
.notification-center-page .nc-row-link:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: -2px;
    border-radius: var(--r-2);
}

/* unread is a dot, not a shouty background */
.notification-center-page .nc-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: transparent;
    margin-top: var(--sp-3);
}
.notification-center-page .nc-row.is-unread .nc-dot { background: var(--brand-600); }

.notification-center-page .nc-icon {
    width: 34px; height: 34px;
    border-radius: var(--r-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: var(--n-100);
    color: var(--brand-700);
}
.notification-center-page .nc-row.level-critical .nc-icon { background: var(--bad-bg); color: var(--bad-fg); }
.notification-center-page .nc-row.level-warning  .nc-icon { background: var(--warn-bg); color: var(--warn-fg); }
.notification-center-page .nc-row.level-success  .nc-icon { background: #e4f5ec; color: var(--ok-fg); }

.notification-center-page .nc-body { min-width: 0; }
.notification-center-page .nc-row-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-6);
}
.notification-center-page .nc-row-top strong {
    font-size: .95rem;
    font-weight: 600;
    color: var(--n-950);
    line-height: 1.32;
}
.notification-center-page .nc-row.is-read .nc-row-top strong { font-weight: 500; }
.notification-center-page .nc-row-top time {
    flex: none;
    font-size: .74rem;
    color: var(--n-600);
    white-space: nowrap;
}
.notification-center-page .nc-message {
    display: block;
    margin-top: var(--sp-1);
    font-size: .86rem;
    line-height: 1.45;
    color: var(--n-700);
}
.notification-center-page .nc-chevron {
    color: #b0a7c4;
    font-size: .8rem;
    margin-top: var(--sp-1);
}

/* actions sit quietly under the row */
.notification-center-page .nc-row-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-7);
    flex-wrap: wrap;
    padding: 0 var(--sp-8) var(--sp-6) var(--sp-14);
}
.notification-center-page .nc-row-actions form { display: inline; }
.notification-center-page .nc-action {
    background: none;
    border: 0;
    padding: 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--brand-700);
    cursor: pointer;
    text-decoration: none;
}
.notification-center-page .nc-action:hover { text-decoration: underline; }
.notification-center-page .nc-action--danger { color: var(--bad-fg); }

/* ---- empty ---- */
.notification-center-page .nc-empty {
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-4);
    padding: var(--sp-13) var(--sp-10);
    text-align: center;
    display: grid;
    justify-items: center;
    gap: var(--sp-3);
}
.notification-center-page .nc-empty i { font-size: 1.9rem; color: #b0a7c4; }
.notification-center-page .nc-empty strong {
    font-family: var(--vx-font-display, Archivo, sans-serif);
    font-size: 1.05rem;
    color: var(--n-950);
}
.notification-center-page .nc-empty span { font-size: .88rem; color: var(--n-700); }

/* ---- buttons ---- */
.notification-center-page .nc-btn {
    font-family: var(--vx-font-display, Archivo, sans-serif);
    font-size: .84rem;
    font-weight: 600;
    background: #fff;
    border: 1px solid var(--n-300);
    color: var(--n-800);
    border-radius: var(--r-2);
    padding: var(--sp-4) var(--sp-7);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.notification-center-page .nc-btn:hover { background: var(--n-50); border-color: var(--brand-250); color: var(--n-800); }
.notification-center-page .nc-btn--primary {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}
.notification-center-page .nc-btn--primary:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.notification-center-page .nc-btn--danger { color: var(--bad-fg); }
.notification-center-page .nc-btn--danger:hover { background: var(--bad-bg); border-color: #f0c2cc; color: var(--bad-fg); }

/* ---- single notification ---- */
.notification-center-page .nc-masthead--detail { margin-bottom: var(--sp-7); }
.notification-center-page .nc-detail {
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-4);
    padding: var(--sp-10) var(--sp-10) var(--sp-9);
}
.notification-center-page .nc-detail-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-7);
    align-items: start;
}
.notification-center-page .nc-icon--lg {
    width: 46px; height: 46px;
    border-radius: var(--r-3);
    font-size: 1.3rem;
}
.notification-center-page .nc-detail-level {
    font-family: var(--vx-font-display, Archivo, sans-serif);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--n-700);
}
.notification-center-page .nc-detail h1 {
    font-family: var(--vx-font-display, Archivo, sans-serif);
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -.024em;
    color: var(--n-950);
    margin: var(--sp-2) 0 var(--sp-2);
    line-height: 1.22;
}
.notification-center-page .nc-detail-meta { font-size: .82rem; color: var(--n-700); margin: 0; }
.notification-center-page .nc-detail-body {
    margin: var(--sp-9) 0 var(--sp-9);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--n-100);
}
.notification-center-page .nc-detail-body p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--n-900);
    margin: 0;
}
.notification-center-page .nc-detail-actions {
    display: flex;
    gap: var(--sp-5);
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 560px) {
    .notification-center-page .nc-row-link { grid-template-columns: 8px 30px 1fr 14px; gap: var(--sp-5); padding: var(--sp-6) var(--sp-6) var(--sp-5); }
    .notification-center-page .nc-row-actions { padding-left: var(--sp-14); }
    .notification-center-page .nc-row-top { flex-direction: column; gap: var(--sp-1); }
    .notification-center-page .nc-masthead { align-items: flex-start; }
}

/* Safety net: if the (largely unimplemented) dark theme is ever active on a
   light surface, headings must not fall to near-white. Measured 1.0:1 before. */
:root[data-theme="dark"] .portal-shell .notification-center-page h1,
:root[data-theme="dark"] .portal-shell .notification-center-page h2,
:root[data-theme="dark"] .portal-shell .nc-group h1,
:root[data-theme="dark"] .portal-shell .nc-detail h1 {
    color: var(--n-950) !important;
}

/* remaining sub-AA text */
.notification-center-page .nc-row-top time,
.notification-center-page .nc-push-token { color: #6b6186 !important; }
.notification-center-page .nc-empty span,
.notification-center-page .nc-detail-meta { color: var(--n-700) !important; }
.portal-auth-body .portal-auth-panel p,
.portal-auth-body .portal-auth-panel small,
.portal-auth-body .portal-auth-panel a:not(.btn) { color: var(--n-700); }
.portal-auth-body .btn-primary { color: var(--n-0) !important; }

/* Register wizard — muted helper text and the Continue button sat just under AA. */
.portal-auth-body .form-text,
.portal-auth-body .auth-signup-footnote { color: var(--n-700) !important; }
.portal-auth-body .btn-next {
    background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-600) 100%) !important;
    border-color: var(--brand-700) !important;
    color: var(--n-0) !important;
}
.portal-auth-body .btn-next:hover {
    background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-700) 100%) !important;
}

/* Bureau page keeps the five most recent alerts; the rest live in the centre. */
.vx-portal-shell .vx-notification-seeall {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
    padding: var(--sp-6) var(--sp-7);
    border: 1px solid var(--vx-hairline);
    border-radius: var(--r-2);
    background: var(--n-25);
    font-family: var(--vx-font-display);
    font-size: .84rem;
    font-weight: 600;
    color: var(--brand-800);
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.vx-portal-shell .vx-notification-seeall:hover {
    background: #f3ecff;
    border-color: var(--brand-250);
    color: var(--brand-900);
}
.vx-portal-shell .vx-notification-seeall span {
    margin-left: auto;
    font-weight: 500;
    color: #63577f;
}
.vx-portal-shell .vx-notification-seeall i { font-size: .78rem; }

/* ==========================================================================
   Dashboard header
   --------------------------------------------------------------------------
   Credit Karma / Sesame put a calm greeting over quiet metadata and keep the
   chrome out of the way. Apple contributes two things here: the large title,
   and a real segmented control for the section row — grey track, white selected
   pill, everything else neutral. Colour leaves the chrome entirely, so the only
   coloured thing in the header is a status dot that means something.
   ========================================================================== */

.vx-portal-shell .vx-main-header {
    background: #fff;
    border: 1px solid var(--vx-hairline);
    border-radius: var(--r-4);
    padding: var(--sp-9) var(--sp-10) var(--sp-8);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-9);
    flex-wrap: wrap;
    box-shadow: var(--vx-e1);
}

.vx-portal-shell .vx-main-brand-copy { min-width: 0; flex: 1 1 380px; }

/* date line — quiet, tracked, sits above the title like iOS */
.vx-portal-shell .vx-main-header .vx-eyebrow {
    display: block;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 var(--sp-3);
    font-size: .64rem;
    letter-spacing: .15em;
    color: var(--n-700);
    opacity: 1;
}

/* iOS large title */
.vx-portal-shell .vx-main-header h1 {
    font-family: var(--vx-font-display);
    font-size: clamp(1.85rem, 3.2vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -.033em;
    line-height: 1.08;
    color: var(--vx-ink);
    margin: 0 0 var(--sp-3);
}

/* metadata as discrete facts, separated by hairline dots */
.vx-portal-shell .vx-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--sp-4);
    margin: 0;
    font-size: .84rem;
    color: var(--n-700);
    line-height: 1.5;
}
.vx-portal-shell .vx-header-meta > span { display: inline-flex; align-items: center; }
.vx-portal-shell .vx-header-meta > span + span::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--n-400);
    margin-right: var(--sp-4);
    flex: none;
}

/* ---- the segmented control ---- */
.vx-portal-shell .vx-flow-progress {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-top: var(--sp-8);
    padding: var(--sp-1);
    background: var(--n-50);
    border: 0;
    border-radius: var(--r-2);
}
.vx-portal-shell .vx-flow-progress span {
    padding: var(--sp-3) var(--sp-7);
    border: 0 !important;
    border-radius: var(--r-2);
    background: transparent !important;
    font-family: var(--vx-font-display);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--n-800) !important;
    white-space: nowrap;
    transition: background .18s cubic-bezier(.22,.9,.3,1), color .18s ease;
}
/* only the current section is lifted — "complete" is not a state a nav row has */
.vx-portal-shell .vx-flow-progress span.is-complete {
    background: transparent !important;
    color: var(--n-800) !important;
}
.vx-portal-shell .vx-flow-progress span.is-current {
    background: var(--n-0) !important;
    color: var(--n-950) !important;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(28, 22, 48, .13), 0 0 0 .5px rgba(28, 22, 48, .05);
}

/* ---- actions: one visual language, colour only where it means something ---- */
.vx-portal-shell .vx-main-header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.vx-portal-shell .vx-main-header-actions .btn-outline-secondary {
    background: #fff;
    border: 1px solid var(--n-300) !important;
    border-radius: var(--r-2);
    padding: var(--sp-4) var(--sp-7);
    font-family: var(--vx-font-display);
    font-size: .8rem;
    font-weight: 600;
    color: var(--n-900) !important;
    margin: 0 !important;
}
.vx-portal-shell .vx-main-header-actions .btn-outline-secondary:hover {
    background: var(--n-50);
    border-color: var(--brand-250) !important;
    color: var(--n-950) !important;
}

.vx-portal-shell .vx-main-header-actions .vx-plan-pill {
    background: var(--n-50) !important;
    border: 1px solid #e2daf3 !important;
    border-radius: var(--r-pill);
    padding: var(--sp-3) var(--sp-6);
    font-family: var(--vx-font-display);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--n-800) !important;
}
.vx-portal-shell .vx-main-header-actions .vx-plan-pill.is-paid { color: var(--brand-800) !important; }

/* the sync indicator is the one place colour is allowed — it carries state */
.vx-portal-shell .vx-main-header-actions .vx-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    background: #fff !important;
    border: 1px solid var(--n-300) !important;
    border-radius: var(--r-pill);
    padding: var(--sp-3) var(--sp-6);
    font-family: var(--vx-font-display);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--n-800) !important;
}
.vx-portal-shell .vx-main-header-actions .vx-live-indicator i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok-solid);
    flex: none;
    display: block;
}
.vx-portal-shell .vx-main-header-actions .vx-live-indicator.is-cached i { background: var(--warn-solid); }

/* bell as a plain circular icon button */
.vx-portal-shell .vx-alert-pill {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0 !important;
    flex: none;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--n-300);
    color: var(--n-900);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    position: relative;
    transition: background .15s ease, border-color .15s ease;
}
.vx-portal-shell .vx-alert-pill:hover { background: var(--n-50); border-color: var(--brand-250); }
.vx-portal-shell .dashboard-alert-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--bad-solid);
    border: 2px solid #fff;
    color: #fff;
    font-family: var(--vx-font-display);
    font-size: .62rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

@media (max-width: 720px) {
    .vx-portal-shell .vx-main-header { padding: var(--sp-8) var(--sp-8) var(--sp-7); gap: var(--sp-7); }
    .vx-portal-shell .vx-main-header-actions { width: 100%; }
    .vx-portal-shell .vx-flow-progress { width: 100%; overflow-x: auto; }
}

/* ==========================================================================
   Social sign-in buttons
   Google and Apple both publish branding rules for these; the shapes below
   follow them — Google keeps its wordmark colours on a white button, Apple
   stays black-on-white with its own glyph.
   ========================================================================== */

.portal-auth-body .auth-social-buttons {
    display: grid;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
}

.portal-auth-body .auth-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-5);
    width: 100%;
    padding: var(--sp-6) var(--sp-8);
    border-radius: var(--r-2);
    border: 1px solid var(--n-300);
    background: var(--n-0);
    font-family: var(--font-display);
    font-size: var(--t-small);
    font-weight: 600;
    color: var(--n-950);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.portal-auth-body .auth-social-btn svg { width: 18px; height: 18px; flex: none; }
.portal-auth-body .auth-social-btn:hover {
    background: var(--n-25);
    border-color: var(--brand-250);
    transform: translateY(-1px);
    color: var(--n-950);
}
.portal-auth-body .auth-social-btn:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.portal-auth-body .auth-social-btn--apple {
    background: var(--n-950);
    border-color: var(--n-950);
    color: var(--n-0);
}
.portal-auth-body .auth-social-btn--apple:hover {
    background: #000;
    border-color: #000;
    color: var(--n-0);
}

.portal-auth-body .auth-social-note {
    margin: var(--sp-4) 0 0;
    font-size: var(--t-caption);
    color: var(--n-700);
    text-align: center;
}

/* Logout submits a real form rather than relying on inline JS, so the control is
   a button. These keep it looking exactly like the link it replaced. */
.portal-shell .vx-logout-form,
.portal-shell .nav-logout-form { margin: 0; display: contents; }

.portal-shell .nav-logout-button {
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

/* ==========================================================================
   Auth recovery & one-time-code sign-in
   --------------------------------------------------------------------------
   Login already reads the way Credit Karma and Credit Sesame read: a dark
   brand surface on the left that carries the reassurance, a plain white panel
   on the right that does nothing but take the input. Password recovery and the
   emailed sign-in code were the odd pages out — a violet card floating on a
   violet page, with a primary button that inherited a white background from
   the theme and white text from the contrast pass, so the label vanished.

   Everything below puts those screens on the same split and repairs the
   button colours for the whole auth body.
   ========================================================================== */

/* ---- primary / secondary buttons -----------------------------------------
   The auth body carries two different surfaces, and the button has to answer
   to whichever it is standing on:

     .portal-auth-panel   the white half of the split (login, register,
                          recovery, the code screens)
     .portal-auth-single  the violet card still used by confirm-password,
                          the two-factor challenge and enable-2FA

   portal-theme.css paints .portal-auth-form .btn-primary white with !important,
   which is right on the violet card and wrong on white. What actually broke
   both was the contrast pass above forcing `color: var(--n-0) !important` on
   every .btn-primary in the body: on the violet card that made white text on a
   white button, and on the white panel it did the same. So the card keeps its
   white button and gets its dark violet label back; only the white panel takes
   the gradient. Nothing here matches a bare .btn-primary, which is what the
   webview payment screens use. */
.portal-auth-body .portal-auth-panel .portal-auth-form .btn-primary,
.portal-auth-body .portal-auth-panel .auth-login-form .btn-primary,
.portal-auth-body .portal-auth-panel .btn-karma-primary {
    background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%) !important;
    color: var(--n-0) !important;
    box-shadow: 0 10px 22px -10px rgba(91, 33, 182, .7) !important;
}
.portal-auth-body .portal-auth-panel .portal-auth-form .btn-primary:hover,
.portal-auth-body .portal-auth-panel .auth-login-form .btn-primary:hover,
.portal-auth-body .portal-auth-panel .btn-karma-primary:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

/* the violet card: white button, violet label — portal-theme's original intent */
.portal-auth-body .portal-auth-single .portal-auth-form .btn-primary {
    background: #fff !important;
    color: var(--brand-800) !important;
}

.portal-auth-body .portal-auth-panel .portal-auth-form .btn-outline-dark,
.portal-auth-body .portal-auth-panel .portal-auth-form .btn-secondary,
.portal-auth-body .portal-auth-panel .btn-karma-secondary {
    background: var(--n-0) !important;
    color: var(--brand-800) !important;
    border: 1px solid var(--n-300) !important;
    box-shadow: none !important;
}
.portal-auth-body .portal-auth-panel .portal-auth-form .btn-outline-dark:hover,
.portal-auth-body .portal-auth-panel .portal-auth-form .btn-secondary:hover,
.portal-auth-body .portal-auth-panel .btn-karma-secondary:hover {
    background: var(--brand-50) !important;
    border-color: var(--brand-250) !important;
}

/* Text links on the white panel.
   These all have to out-rank `.portal-auth-body .portal-auth-panel a:not(.btn)`
   from the contrast pass above, which paints every anchor in the panel --n-700.
   That blanket rule was also flattening the two social buttons: it beat
   `.portal-auth-body .auth-social-btn--apple`, so "Continue with Apple" was
   rendering grey-violet on near-black. Both are restored by name below, each
   selector deliberately matching that rule's weight and winning on order. */
.portal-auth-body .portal-auth-panel a.forgot-password,
.portal-auth-body .portal-auth-panel .auth-alt-method a,
.portal-auth-body .portal-auth-panel .auth-panel-foot a,
.portal-auth-body .portal-auth-panel .auth-code-meta a {
    color: var(--brand-700);
    font-weight: 600;
    text-decoration: none;
}
.portal-auth-body .portal-auth-panel a.forgot-password:hover,
.portal-auth-body .portal-auth-panel .auth-alt-method a:hover,
.portal-auth-body .portal-auth-panel .auth-panel-foot a:hover,
.portal-auth-body .portal-auth-panel .auth-code-meta a:hover {
    color: var(--brand-800);
    text-decoration: underline;
}

.portal-auth-body .portal-auth-panel a.auth-social-btn { color: var(--n-950); }
.portal-auth-body .portal-auth-panel a.auth-social-btn--apple { color: var(--n-0); }

/* ---- the recovery split ---------------------------------------------------
   Narrower brand half than login: these screens are a single decision, so the
   form deserves the wider column. */
.portal-auth-body .portal-auth-layout-recovery {
    grid-template-columns: minmax(320px, 38%) minmax(0, 1fr);
    background: #fff;
    min-height: calc(100dvh - 210px);
}

.portal-auth-body .auth-recovery-panel {
    padding: var(--sp-13) clamp(var(--sp-11), 5vw, var(--sp-15));
}

.portal-auth-body .auth-recovery-panel .portal-auth-form { margin-top: var(--sp-10); }

/* the numbered "what happens next" list in the brand half */
.portal-auth-body .auth-steps {
    list-style: none;
    counter-reset: authstep;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-7);
}
.portal-auth-body .auth-steps li {
    counter-increment: authstep;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-6);
    color: rgba(255, 255, 255, .78);
    font-size: .84rem;
    line-height: 1.45;
}
.portal-auth-body .auth-steps li::before {
    content: counter(authstep);
    font-family: var(--vx-font-display, Archivo, sans-serif);
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: var(--r-pill);
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
}
.portal-auth-body .auth-steps li strong {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: .88rem;
    margin-bottom: 2px;
}

/* ---- panel head ---- */
.portal-auth-body .auth-panel-head { margin-bottom: var(--sp-2); }

.portal-auth-body .auth-recovery-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
    font-family: var(--vx-font-display, Archivo, sans-serif);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: #f2ebff;
    border: 1px solid #d9c8f8;
    color: var(--brand-800);
    border-radius: var(--r-pill);
    padding: var(--sp-3) var(--sp-6);
    margin-bottom: var(--sp-8);
}

/* the address the code or link went to, echoed back so people can catch typos */
.portal-auth-body .auth-sent-to {
    display: inline-block;
    font-weight: 700;
    color: var(--n-950);
    word-break: break-all;
}

/* ---- alerts on white ---- */
.portal-auth-body .auth-alert {
    display: flex;
    gap: var(--sp-6);
    align-items: flex-start;
    border-radius: var(--r-2);
    padding: var(--sp-7) var(--sp-8);
    font-size: .88rem;
    line-height: 1.5;
    margin-bottom: var(--sp-9);
    border: 1px solid transparent;
}
.portal-auth-body .auth-alert svg { flex: none; margin-top: 1px; }
.portal-auth-body .auth-alert--ok {
    background: var(--ok-bg);
    border-color: rgba(14, 159, 110, .3);
    color: var(--ok-fg);
}
.portal-auth-body .auth-alert--bad {
    background: var(--bad-bg);
    border-color: rgba(209, 58, 94, .3);
    color: var(--bad-fg);
}

/* ---- the one-time code field --------------------------------------------
   Five real inputs so the form still submits without JavaScript; the script
   only adds auto-advance, paste-spreading and backspace. */
.portal-auth-body .auth-code-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.portal-auth-body .auth-code-fieldset > legend {
    float: none;
    width: auto;
    margin-bottom: var(--sp-3);
    padding: 0;
}

.portal-auth-body .auth-code-boxes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 56px));
    gap: var(--sp-6);
    margin: var(--sp-4) 0 var(--sp-2);
}
.portal-auth-body .auth-code-boxes input {
    width: 100%;
    aspect-ratio: 1 / 1.15;
    text-align: center;
    font-family: var(--vx-font-display, Archivo, sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--n-950);
    background: var(--n-25);
    border: 1.5px solid var(--n-300);
    border-radius: var(--r-2);
    padding: 0;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    -moz-appearance: textfield;
}
.portal-auth-body .auth-code-boxes input::-webkit-outer-spin-button,
.portal-auth-body .auth-code-boxes input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.portal-auth-body .auth-code-boxes input:focus {
    outline: none;
    background: #fff;
    border-color: var(--brand-600);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .16);
}
.portal-auth-body .auth-code-boxes input.is-filled {
    background: #fff;
    border-color: var(--brand-400);
}
.portal-auth-body .auth-code-boxes.is-invalid input { border-color: var(--bad-solid); }

/* expiry countdown + resend, on one line under the boxes */
.portal-auth-body .auth-code-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    margin-top: var(--sp-7);
    font-size: .84rem;
    color: var(--n-700);
}
.portal-auth-body .auth-code-meta strong { color: var(--n-950); font-variant-numeric: tabular-nums; }

.portal-auth-body .auth-resend-form { display: inline; }
.portal-auth-body .auth-resend-btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--brand-700);
    cursor: pointer;
    text-decoration: underline;
}
.portal-auth-body .auth-resend-btn:hover { color: var(--brand-800); }

/* ---- alternate sign-in method, offered under the password form ---- */
.portal-auth-body .auth-alt-method {
    display: flex;
    align-items: center;
    gap: var(--sp-7);
    margin-top: var(--sp-9);
    padding: var(--sp-8);
    border: 1px solid var(--n-200);
    border-radius: var(--r-3);
    background: var(--n-25);
}
.portal-auth-body .auth-alt-method-icon {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--r-2);
    background: #f2ebff;
    color: var(--brand-700);
}
.portal-auth-body .auth-alt-method p,
.portal-auth-body .auth-alt-method-copy {
    margin: 0;
    font-size: .84rem;
    line-height: 1.4;
    color: var(--n-700);
}
.portal-auth-body .auth-alt-method a {
    font-weight: 700;
    color: var(--brand-700);
    text-decoration: none;
}
.portal-auth-body .auth-alt-method a:hover { text-decoration: underline; }

/* ---- footer line under the form ---- */
.portal-auth-body .auth-panel-foot {
    margin-top: var(--sp-11);
    padding-top: var(--sp-9);
    border-top: 1px solid var(--n-200);
    font-size: .85rem;
    color: var(--n-700);
}
.portal-auth-body .auth-panel-foot a { font-weight: 700; }

@media (max-width: 900px) {
    .portal-auth-body .portal-auth-layout-recovery { grid-template-columns: minmax(0, 1fr); }
    .portal-auth-body .portal-auth-layout-recovery .portal-auth-hero { display: none; }
    .portal-auth-body .auth-recovery-panel { padding: var(--sp-12) var(--sp-10); }
    .portal-auth-body .auth-code-boxes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-5); }
}