:root {
    --bg: #05070d;
    --panel: rgba(13, 19, 32, .78);
    --panel-strong: rgba(9, 14, 24, .96);
    --stroke: rgba(255,255,255,.09);
    --text: #f7fbff;
    --muted: #8e9db2;
    --gold: #f5b84b;
    --cyan: #23d3ee;
    --blue: #3867ff;
    --green: #23c483;
    --danger: #ff5470;
    --radius: 8px;
    --shadow: 0 18px 50px rgba(0,0,0,.32);
}

[data-theme="light"] {
    --bg: #f4f7fb;
    --panel: rgba(255,255,255,.82);
    --panel-strong: #ffffff;
    --stroke: rgba(8,18,36,.1);
    --text: #09111f;
    --muted: #657084;
    --shadow: 0 18px 45px rgba(31, 51, 84, .12);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 0%, rgba(56,103,255,.22), transparent 32%),
        radial-gradient(circle at 88% 12%, rgba(35,211,238,.12), transparent 28%),
        linear-gradient(135deg, var(--bg), #07111f 60%, var(--bg));
    color: var(--text);
    font-family: Inter, "SF Pro Display", Poppins, system-ui, sans-serif;
}
a { color: inherit; }
img, svg, canvas { max-width: 100%; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 278px;
    padding: 18px;
    background: var(--panel-strong);
    border-right: 1px solid var(--stroke);
    backdrop-filter: blur(22px);
    z-index: 1040;
    overflow-y: auto;
    transition: transform .24s ease;
}
.sidebar-close {
    display: none;
    position: sticky;
    top: 0;
    margin-left: auto;
    width: 42px;
    height: 42px;
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: rgba(255,255,255,.07);
    color: var(--text);
    font-size: 1.8rem;
    line-height: 1;
    place-items: center;
    z-index: 2;
}
.sidebar-close span {
    display: block;
    transform: translateY(-1px);
}
.main-panel { width: 100%; margin-left: 278px; min-height: 100vh; }
.brand, .top-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: -.02em;
}
.brand {
    max-width: 210px;
    margin-bottom: 22px;
}
.brand-mark {
    width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: var(--radius);
    color: #07111f;
    background: linear-gradient(135deg, var(--gold), #fff0b3);
}
.profile-mini {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; border: 1px solid var(--stroke); border-radius: var(--radius);
    background: rgba(255,255,255,.04); margin-bottom: 16px;
}
.profile-mini span { display: block; color: var(--muted); font-size: .78rem; }
.avatar {
    width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--cyan)); font-weight: 800;
}
.nav-stack { display: grid; gap: 4px; }
.nav-stack a {
    display: flex; align-items: center; gap: 10px; padding: 11px 12px;
    color: var(--muted); text-decoration: none; border-radius: var(--radius);
    transition: .2s ease; font-weight: 600; font-size: .94rem;
    min-height: 42px;
}
.nav-stack a:hover { color: var(--text); background: rgba(255,255,255,.06); }
.nav-stack i { width: 18px; color: var(--gold); }
.topbar {
    position: sticky; top: 0; z-index: 1020;
    min-height: 68px; display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px; border-bottom: 1px solid var(--stroke);
    background: rgba(5,7,13,.78); backdrop-filter: blur(18px);
}
[data-theme="light"] .topbar { background: rgba(255,255,255,.8); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
    width: 38px; height: 38px; border: 1px solid var(--stroke); border-radius: var(--radius);
    background: rgba(255,255,255,.04); color: var(--text);
}
.topbar [data-sidebar-toggle] { display: none; }
.content-wrap { padding: 28px; max-width: 1480px; margin: 0 auto; }
.hero {
    min-height: calc(100vh - 68px);
    display: grid; align-items: center; padding: 56px 0;
}
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: center; }
.hero h1, .page-title {
    font-family: Poppins, Inter, sans-serif;
    font-weight: 800; letter-spacing: -.04em;
}
.hero h1 { font-size: clamp(3rem, 7vw, 6.6rem); line-height: .9; }
.hero p { max-width: 720px; color: var(--muted); font-size: 1.08rem; }
.glass, .metric-card, .table-shell, .form-shell {
    background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--radius);
    box-shadow: var(--shadow); backdrop-filter: blur(18px);
}
.glass { padding: 24px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-card { padding: 18px; }
.metric-card span { color: var(--muted); font-size: .82rem; font-weight: 700; text-transform: uppercase; }
.metric-card strong { display: block; font-size: 1.55rem; margin-top: 8px; letter-spacing: -.03em; }
.metric-card .trend { color: var(--green); font-weight: 700; font-size: .82rem; }
.btn-gold {
    background: linear-gradient(135deg, var(--gold), #ffe29a);
    border: 0; color: #10131c; font-weight: 800;
}
.btn-cyan { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #fff; border: 0; font-weight: 800; }
.section-pad { padding: 56px 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature-card { padding: 20px; min-height: 172px; }
.feature-card i { color: var(--gold); font-size: 1.4rem; margin-bottom: 14px; }
.wallet-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.wallet-card {
    padding: 20px; border-radius: var(--radius); border: 1px solid var(--stroke);
    background: linear-gradient(135deg, rgba(56,103,255,.18), rgba(245,184,75,.08));
}
.table-shell { overflow-x: auto; overflow-y: hidden; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--stroke); margin: 0; }
.table-shell .table { min-width: 720px; }
.table td, .table th { vertical-align: middle; }
.form-control, .form-select {
    background: rgba(255,255,255,.06); border-color: var(--stroke); color: var(--text); border-radius: var(--radius);
}
.form-control:focus, .form-select:focus { background: rgba(255,255,255,.08); color: var(--text); border-color: var(--cyan); box-shadow: 0 0 0 .18rem rgba(35,211,238,.14); }
.form-control::placeholder { color: #74839a; }
.badge-soft { background: rgba(35,196,131,.12); color: var(--green); border: 1px solid rgba(35,196,131,.22); }
.badge-warn { background: rgba(245,184,75,.13); color: var(--gold); border: 1px solid rgba(245,184,75,.25); }
.badge-danger-soft { background: rgba(255,84,112,.12); color: var(--danger); border: 1px solid rgba(255,84,112,.25); }
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.chart-box { min-height: 280px; }
.chat-box { height: 520px; overflow: auto; padding: 16px; }
.chat-msg { max-width: 78%; padding: 10px 12px; margin-bottom: 10px; border-radius: var(--radius); background: rgba(255,255,255,.07); }
.chat-msg.admin { margin-left: auto; background: rgba(35,211,238,.16); }
.sidebar-backdrop { display: none; }
@media (min-width: 1101px) {
    .sidebar {
        transform: none !important;
    }
    .sidebar-backdrop.open { display: none; }
    .main-panel {
        min-width: 0;
    }
}
@media (max-width: 1100px) {
    .sidebar {
        width: min(88vw, 340px);
        padding: 14px;
        transform: translateX(-100%);
        box-shadow: 24px 0 60px rgba(0,0,0,.42);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-close { display: grid; }
    .brand { margin-top: -42px; padding-right: 52px; }
    .main-panel { margin-left: 0; }
    .topbar [data-sidebar-toggle] { display: inline-grid; place-items: center; }
    .sidebar-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1030; }
    .hero-grid, .feature-grid, .metric-grid, .wallet-row { grid-template-columns: 1fr 1fr; }
    .content-wrap { max-width: 100%; }
}
@media (max-width: 700px) {
    .content-wrap { padding: 16px; }
    .hero-grid, .feature-grid, .metric-grid, .wallet-row { grid-template-columns: 1fr; }
    .topbar {
        min-height: 62px;
        padding: 10px 12px;
        gap: 8px;
    }
    .top-brand {
        font-size: .88rem;
        max-width: 34vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .top-actions { gap: 6px; }
    .top-actions .btn {
        padding: .4rem .55rem;
        font-size: .78rem;
    }
    .icon-btn { width: 40px; height: 40px; }
    .hero h1 { font-size: 3rem; }
    .hero { min-height: auto; padding: 34px 0; }
    .glass { padding: 18px; }
    .metric-card strong { font-size: 1.28rem; }
    .quick-actions { gap: 8px; }
    .quick-actions .btn, .quick-actions a { min-height: 38px; display: inline-flex; align-items: center; }
    .form-shell, .glass, .metric-card { min-width: 0; }
    .chat-box { height: 420px; }
}
@media (max-width: 420px) {
    .sidebar { width: 92vw; }
    .top-brand { display: none; }
    .top-actions .btn-outline-light { display: none; }
    .hero h1 { font-size: 2.42rem; }
}

/* 2026 public banking refresh: desktop header, light-first pages, mobile drawer */
[data-theme="light"] body {
    background: #f7f9fc;
    color: #101827;
}
[data-theme="light"] .glass,
[data-theme="light"] .metric-card,
[data-theme="light"] .table-shell,
[data-theme="light"] .form-shell,
[data-theme="light"] .light-panel {
    background: rgba(255,255,255,.9);
    color: #101827;
    border-color: rgba(16,24,39,.11);
}
[data-theme="light"] .table {
    --bs-table-color: #101827;
    --bs-table-border-color: rgba(16,24,39,.12);
}
[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
    background: #fff;
    color: #101827;
    border-color: rgba(16,24,39,.16);
}
[data-theme="light"] .btn-outline-light {
    color: #101827;
    border-color: rgba(16,24,39,.24);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1050;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: 76px;
    padding: 12px clamp(18px, 4vw, 54px);
    border-bottom: 1px solid rgba(16,24,39,.1);
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 28px rgba(15,23,42,.06);
}
[data-theme="dark"] .site-header {
    background: rgba(5,7,13,.9);
    border-color: var(--stroke);
}
.site-brand {
    margin: 0;
    max-width: none;
    color: #101827;
}
[data-theme="dark"] .site-brand { color: var(--text); }
.brand-mobile { display: none; }
.desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}
.desktop-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: var(--radius);
    color: #334155;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
}
.desktop-nav a:hover {
    color: #0f172a;
    background: rgba(56,103,255,.08);
}
[data-theme="dark"] .desktop-nav a { color: #d8e2f2; }
[data-theme="dark"] .desktop-nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.admin-desktop-nav a { font-size: .82rem; padding: 7px 8px; }
.header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}
.mobile-menu-button { display: none; }
.main-panel,
.admin-main-panel {
    width: 100%;
    min-height: calc(100vh - 76px);
    margin-left: 0 !important;
}
.content-wrap {
    max-width: 1320px;
    padding: clamp(24px, 4vw, 48px);
}
.mobile-drawer {
    display: none;
}
.marketing-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(380px, .78fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    min-height: 640px;
    padding: clamp(38px, 6vw, 78px) 0;
}
.hero-copy {
    position: relative;
    z-index: 1;
}
.hero-eyebrow,
.section-kicker,
.metric-label {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(35,196,131,.12);
    color: #047857;
    border: 1px solid rgba(35,196,131,.24);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.marketing-hero h1 {
    max-width: 820px;
    color: #07111f;
    font-family: Poppins, Inter, sans-serif;
    font-size: clamp(3.1rem, 7vw, 6.5rem);
    line-height: .92;
    font-weight: 800;
}
.marketing-hero p {
    max-width: 760px;
    color: #334155;
    font-size: 1.12rem;
    line-height: 1.72;
}
[data-theme="dark"] .marketing-hero h1 { color: #fff; }
[data-theme="dark"] .marketing-hero p { color: #d9e4f4; }
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}
.hero-slider {
    position: relative;
    min-height: 520px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 28px 80px rgba(15,23,42,.18);
    background: #0b1220;
}
.hero-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: heroFade 18s infinite;
}
.hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,7,13,.05), rgba(5,7,13,.56));
}
.hero-slide-2 { animation-delay: 6s; }
.hero-slide-3 { animation-delay: 12s; }
.hero-slide figcaption {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 1;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--radius);
    background: rgba(5,7,13,.68);
    color: #fff;
    font-weight: 800;
}
@keyframes heroFade {
    0%, 8% { opacity: 0; transform: scale(1.02); }
    14%, 38% { opacity: 1; transform: scale(1); }
    45%, 100% { opacity: 0; transform: scale(1.03); }
}
.split-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .55fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
}
.split-section h2,
.alt-band h2 {
    color: #101827;
    font-family: Poppins, Inter, sans-serif;
    font-size: clamp(2rem, 4vw, 3.3rem);
    font-weight: 800;
    letter-spacing: 0;
}
.split-section p {
    color: #475569;
    font-size: 1.04rem;
    line-height: 1.78;
}
.service-metric {
    display: block;
    margin: 6px 0 18px;
    font-size: 2.5rem;
    color: #0f172a;
}
.feature-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.feature-list li {
    position: relative;
    padding-left: 24px;
    color: #334155;
    font-weight: 650;
}
.feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .54em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
}
.alt-band {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(clamp(24px, 4vw, 48px), calc((100vw - 1320px) / 2));
    padding-right: max(clamp(24px, 4vw, 48px), calc((100vw - 1320px) / 2));
    background: #eef4fb;
}
.service-directory {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}
.service-tile {
    display: block;
    min-height: 190px;
    padding: 22px;
    border: 1px solid rgba(16,24,39,.1);
    border-radius: var(--radius);
    background: #fff;
    color: #101827;
    text-decoration: none;
    box-shadow: 0 14px 35px rgba(15,23,42,.07);
}
.service-tile span {
    color: #047857;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
}
.service-tile strong {
    display: block;
    margin: 8px 0;
    font-size: 1.22rem;
}
.service-tile p {
    color: #475569;
    margin: 0;
}
.site-footer {
    margin-top: 48px;
    padding: 46px clamp(18px, 4vw, 54px) 24px;
    background: #07111f;
    color: #dbe7f8;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 28px;
    max-width: 1320px;
    margin: 0 auto;
}
.site-footer p {
    max-width: 420px;
    color: #a9b8cc;
    line-height: 1.7;
}
.site-footer h6 {
    color: #fff;
    font-weight: 800;
    margin-bottom: 14px;
}
.site-footer a {
    display: block;
    color: #cbd8ea;
    text-decoration: none;
    margin: 8px 0;
    font-weight: 650;
}
.site-footer a:hover { color: var(--gold); }
.footer-admin-link {
    margin-top: 18px !important;
    color: var(--gold) !important;
}
.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    max-width: 1320px;
    margin: 30px auto 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.12);
    color: #a9b8cc;
    font-size: .9rem;
}
.admin-footer { margin-top: 0; padding-top: 22px; }

@media (max-width: 1180px) {
    .desktop-nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .desktop-nav::-webkit-scrollbar { height: 4px; }
    .desktop-nav::-webkit-scrollbar-thumb { background: rgba(15,23,42,.18); border-radius: 999px; }
    .marketing-hero { grid-template-columns: 1fr; min-height: auto; }
    .hero-slider { min-height: 420px; }
    .service-directory { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 820px) {
    .site-header {
        grid-template-columns: auto auto;
        min-height: 66px;
        padding: 10px 14px;
    }
    .brand-full,
    .desktop-nav,
    .header-actions .btn,
    .header-actions [data-theme-toggle] {
        display: none;
    }
    .brand-mobile { display: inline; }
    .site-brand {
        font-size: 1rem;
    }
    .mobile-menu-button {
        display: inline-grid;
        place-items: center;
    }
    .mobile-drawer {
        display: block;
        position: fixed;
        inset: 0 auto 0 0;
        width: min(88vw, 340px);
        padding: 14px;
        background: var(--panel-strong);
        border-right: 1px solid var(--stroke);
        transform: translateX(-100%);
        z-index: 1060;
        overflow-y: auto;
        transition: transform .24s ease;
        box-shadow: 24px 0 60px rgba(0,0,0,.42);
    }
    .mobile-drawer.open { transform: translateX(0); }
    .mobile-drawer .brand {
        color: #fff;
        margin-top: -42px;
        padding-right: 52px;
    }
    .mobile-drawer .brand-full { display: none; }
    .mobile-drawer .brand-mobile { display: inline; }
    .mobile-drawer .nav-stack a { color: #dbe7f8; }
    .sidebar-close { display: grid; }
    .sidebar-backdrop.open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        z-index: 1055;
    }
    .content-wrap { padding: 22px 16px; }
    .marketing-hero { padding: 28px 0; gap: 22px; }
    .marketing-hero h1 { font-size: clamp(2.35rem, 13vw, 3.2rem); }
    .marketing-hero p { font-size: 1rem; color: #334155; }
    .hero-slider { min-height: 300px; border-radius: 12px; }
    .hero-actions .btn { width: 100%; }
    .split-section,
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .service-directory { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; }
}

/* Branch-led banking experience */
.marketing-hero::before {
    background:
        linear-gradient(90deg, rgba(247,249,252,.78) 0%, rgba(247,249,252,.68) 48%, rgba(247,249,252,.56) 100%),
        linear-gradient(180deg, rgba(247,249,252,.48), rgba(247,249,252,.72));
}
.hero-slider,
[data-theme="dark"] .hero-slider {
    opacity: .42;
}
.hero-showcase {
    border: 8px solid rgba(255,255,255,.8);
    border-bottom-width: 20px;
    box-shadow: 0 32px 90px rgba(15,23,42,.24);
}
.service-image-directory {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-image-tile {
    display: block;
    padding: 0;
    overflow: hidden;
    min-height: 100%;
}
.service-image-tile > img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}
.service-tile-copy {
    padding: 22px;
}
.service-visual-panel {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}
.service-visual-panel > img {
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    display: block;
}
.service-visual-copy {
    padding: clamp(22px, 4vw, 34px);
}

.onboarding-shell {
    display: grid;
    grid-template-columns: minmax(300px, .72fr) minmax(0, 1.4fr);
    gap: 24px;
    align-items: start;
    padding-block: 24px 64px;
}
.onboarding-intro {
    position: sticky;
    top: 92px;
    overflow: hidden;
    border-radius: var(--radius);
    background: #07111f;
    color: #fff;
    box-shadow: var(--shadow);
}
.onboarding-intro img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.onboarding-intro > div {
    padding: 26px;
}
.onboarding-intro h2,
.onboarding-intro p {
    color: #fff;
}
.upload-tile {
    display: flex;
    min-height: 178px;
    padding: 18px;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    border: 1px dashed rgba(56,103,255,.38);
    border-radius: var(--radius);
    background: rgba(56,103,255,.045);
    cursor: pointer;
}
.upload-tile > i {
    color: var(--blue);
    font-size: 1.45rem;
}
.upload-tile > span {
    font-weight: 800;
}
.upload-tile > small {
    color: var(--muted);
}
.upload-tile .form-control {
    margin-top: 8px;
}

.banking-dashboard {
    display: grid;
    gap: 24px;
}
.dashboard-branch-hero {
    position: relative;
    min-height: 430px;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
    align-items: end;
    gap: 32px;
    overflow: hidden;
    padding: clamp(28px, 5vw, 54px);
    border-radius: var(--radius);
    color: #fff;
    box-shadow: 0 28px 72px rgba(7,17,31,.24);
}
.dashboard-branch-hero > img,
.dashboard-branch-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.dashboard-branch-hero > img {
    object-fit: cover;
}
.dashboard-branch-overlay {
    background: linear-gradient(90deg, rgba(4,14,30,.94), rgba(4,14,30,.68) 58%, rgba(4,14,30,.38));
}
.dashboard-welcome,
.dashboard-account-desk {
    position: relative;
    z-index: 1;
    min-width: 0;
}
.dashboard-welcome h1 {
    max-width: 740px;
    margin: 14px 0;
    color: #fff;
    font-size: clamp(2.25rem, 5vw, 4.5rem);
    line-height: .98;
}
.dashboard-welcome p {
    max-width: 650px;
    color: rgba(255,255,255,.88);
}
.dashboard-account-desk {
    min-height: 250px;
    display: flex;
    padding: 28px;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: var(--radius);
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(18px);
}
.dashboard-account-desk > span,
.dashboard-account-desk > small {
    color: rgba(255,255,255,.8);
}
.dashboard-account-desk > strong {
    margin: 8px 0 2px;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.2rem);
    overflow-wrap: anywhere;
}
.account-desk-number {
    display: flex;
    margin-top: 28px;
    padding-top: 18px;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid rgba(255,255,255,.2);
}
.account-desk-number b { max-width: 100%; overflow-wrap: anywhere; }
.dashboard-metrics {
    margin-top: -48px;
    position: relative;
    z-index: 2;
    padding-inline: 22px;
}
.bank-service-highlights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.bank-service-highlights a {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    border-radius: var(--radius);
    color: #fff;
    box-shadow: var(--shadow);
}
.bank-service-highlights img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}
.bank-service-highlights a:hover img {
    transform: scale(1.035);
}
.bank-service-highlights span {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    padding: 50px 18px 18px;
    flex-direction: column;
    background: linear-gradient(transparent, rgba(4,14,30,.92));
}
.bank-service-highlights b {
    font-size: 1.05rem;
}
.bank-service-highlights small {
    color: rgba(255,255,255,.78);
}
.section-heading-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.section-heading-row h5 {
    margin: 3px 0 0;
}
.section-heading-row a {
    color: var(--blue);
    font-weight: 750;
}
.card-desk-panel {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}
.dashboard-card-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
}
.dashboard-card-row small {
    display: block;
    color: var(--muted);
}
.card-chip {
    width: 44px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 6px;
    background: linear-gradient(135deg, #f4c95d, #a87712);
    box-shadow: inset 0 0 0 1px rgba(70,40,0,.18);
}
.dashboard-last-login {
    color: var(--muted);
    font-size: .86rem;
    text-align: right;
}

@media (max-width: 1100px) {
    .service-image-directory,
    .bank-service-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-branch-hero {
        grid-template-columns: 1fr;
    }
    .dashboard-account-desk {
        min-height: 0;
    }
}

/* Public-facing header is brand + theme + menu, always visible */
body.public-site .public-site-header {
    display: grid !important;
    grid-template-columns: auto auto !important;
    justify-content: start !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: visible !important;
}

body.public-site .public-site-header .desktop-nav,
body.public-site .public-site-header .header-actions .btn,
body.public-site .public-site-header .mobile-menu-button {
    display: none !important;
}

body.public-site .public-site-header .site-brand {
    grid-column: 1 !important;
    min-width: 0 !important;
    max-width: min(54vw, 190px) !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.public-site .public-site-header .header-actions {
    grid-column: 2 !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
}

body.public-site .public-site-header [data-theme-toggle],
body.public-site .public-site-header .public-menu-button {
    position: static !important;
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    color: #101827 !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(15,23,42,.16) !important;
    border-radius: 11px !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.12) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.public-site .public-site-header .public-menu-button i {
    display: inline-block !important;
}

body.public-site .public-site-header .public-menu-button::before,
body.public-site > .public-floating-menu-button {
    display: none !important;
    content: none !important;
}

[data-theme="dark"] body.public-site .public-site-header [data-theme-toggle],
[data-theme="dark"] body.public-site .public-site-header .public-menu-button {
    color: #f8fafc !important;
    background: rgba(15,23,42,.94) !important;
    border-color: rgba(255,255,255,.16) !important;
}

/* Dedicated public controls rendered beside the brand */
.public-compact-actions {
    display: none;
}

body.public-site .public-site-header {
    grid-template-columns: auto auto !important;
    justify-content: start !important;
}

body.public-site .public-site-header > .public-compact-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 6px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.public-site .public-site-header > .public-compact-actions .icon-btn {
    display: inline-grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    color: #101827 !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(15,23,42,.16) !important;
    border-radius: 11px !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.12) !important;
}

body.public-site .public-site-header > .header-actions {
    display: none !important;
}

[data-theme="dark"] body.public-site .public-site-header > .public-compact-actions .icon-btn {
    color: #f8fafc !important;
    background: rgba(15,23,42,.94) !important;
    border-color: rgba(255,255,255,.16) !important;
}

@media (max-width: 1180px) {
    body.public-site .public-site-header > .public-compact-actions {
        position: fixed !important;
        top: 14px !important;
        left: clamp(166px, 43vw, 188px) !important;
        z-index: 3010 !important;
        display: inline-flex !important;
    }
}

/* Final Solace Credit public navigation and homepage sections */
@media (min-width: 1181px) {
    body.public-site .public-site-header {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        justify-content: normal !important;
        gap: 24px !important;
        min-height: 76px !important;
        padding: 12px clamp(34px, 5vw, 72px) !important;
    }

    body.public-site .public-site-header > .public-compact-actions {
        display: none !important;
    }

    body.public-site .public-site-header .desktop-nav {
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    body.public-site .public-site-header > .header-actions {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    body.public-site .public-site-header .header-actions [data-theme-toggle],
    body.public-site .public-site-header .header-actions .btn {
        display: inline-flex !important;
    }

    body.public-site .public-site-header .header-actions .public-menu-button,
    body.public-site .public-site-header .header-actions .mobile-menu-button {
        display: none !important;
    }
}

@media (max-width: 1180px) {
    body.public-site .public-site-header {
        display: grid !important;
        grid-template-columns: auto auto !important;
        justify-content: start !important;
        align-items: center !important;
        gap: 10px !important;
    }

    body.public-site .public-site-header > .header-actions,
    body.public-site .public-site-header .desktop-nav {
        display: none !important;
    }

    body.public-site .public-site-header > .public-compact-actions {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-left: 6px !important;
    }

    body.public-site .public-site-header > .public-compact-actions .icon-btn {
        display: inline-grid !important;
        place-items: center !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
    }
}

.mobile-drawer.open,
.sidebar.mobile-drawer.open,
.customer-authenticated .mobile-drawer.open,
.public-site .mobile-drawer.open {
    z-index: 5000 !important;
}

.sidebar-backdrop.open,
.customer-authenticated .sidebar-backdrop.open,
.public-site .sidebar-backdrop.open {
    z-index: 4990 !important;
}

.site-header,
.customer-site-header,
.public-site-header {
    z-index: 3000 !important;
}

.section-lead {
    max-width: 760px;
    color: var(--db-muted, #64748b);
    font-size: 1.02rem;
    line-height: 1.75;
}

.service-category-stack {
    display: grid;
    gap: 26px;
    margin-top: 30px;
}

.service-category {
    min-width: 0;
}

.category-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.category-heading span {
    color: #101827;
    font: 900 clamp(1.05rem, 2vw, 1.35rem)/1.15 Poppins, Inter, sans-serif;
}

.category-heading small {
    display: none;
    color: var(--db-muted, #64748b);
    font-weight: 800;
}

.service-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.service-rail .service-tile {
    min-height: 100%;
}

.financial-clarity-section {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(clamp(24px, 4vw, 48px), calc((100vw - 1320px) / 2));
    padding-right: max(clamp(24px, 4vw, 48px), calc((100vw - 1320px) / 2));
    background:
        radial-gradient(circle at 14% 10%, rgba(59, 130, 246, .22), transparent 34%),
        radial-gradient(circle at 86% 8%, rgba(16, 185, 129, .16), transparent 32%),
        linear-gradient(135deg, #06111f 0%, #081827 52%, #0f172a 100%);
    color: #f8fafc;
}

.financial-clarity-section h2,
.financial-clarity-section p,
.financial-clarity-section .market-rates-heading p,
.financial-clarity-section .split-section p {
    color: #e5edf8 !important;
}

.financial-clarity-section .section-kicker {
    background: rgba(255,255,255,.11);
    border-color: rgba(255,255,255,.2);
    color: #bfdbfe;
}

.financial-clarity-section .glass,
.financial-clarity-section .light-panel {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.14) !important;
}

.why-solace-section h2,
.testimonial-section h2,
.solace-about-section h2 {
    max-width: 760px;
    color: #101827;
    font: 900 clamp(2rem, 4vw, 3.2rem)/1.08 Poppins, Inter, sans-serif;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 34px;
}

.why-card {
    min-height: 184px;
    padding: 28px;
    border: 1px solid rgba(15,23,42,.1);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15,23,42,.08);
    text-align: center;
}

.why-card i {
    color: #3152ff;
    font-size: 1.35rem;
    margin-bottom: 20px;
}

.why-card h3 {
    color: #101827;
    font: 900 1.02rem/1.25 Poppins, Inter, sans-serif;
}

.why-card p {
    color: #475569;
    line-height: 1.65;
    margin-bottom: 0;
}

.solace-about-section {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
    gap: clamp(34px, 5vw, 64px);
    align-items: center;
}

.about-proof-list {
    display: grid;
    gap: 14px;
}

.about-proof-list article {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(15,23,42,.08);
}

.about-proof-list i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 12px;
    color: #0f172a;
    background: #f3efe7;
}

.about-proof-list strong,
.about-proof-list span {
    display: block;
}

.about-proof-list strong {
    color: #101827;
    margin-bottom: 4px;
}

.about-proof-list span,
.about-copy p {
    color: #475569;
    line-height: 1.7;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.about-stats span {
    display: grid;
    gap: 4px;
    padding: 18px;
    border-radius: 12px;
    color: #fff;
    background: #07111f;
    text-align: center;
}

.about-stats strong {
    font-size: 1.55rem;
}

.about-stats small {
    color: #a8b4c5;
    text-transform: uppercase;
    font-weight: 800;
    font-size: .72rem;
}

.testimonial-section {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(clamp(24px, 4vw, 48px), calc((100vw - 1320px) / 2));
    padding-right: max(clamp(24px, 4vw, 48px), calc((100vw - 1320px) / 2));
    background:
        radial-gradient(circle at 12% 20%, rgba(49, 82, 255, .24), transparent 32%),
        linear-gradient(135deg, #06111f 0%, #0b1b2d 54%, #07111f 100%);
    color: #f8fafc;
}

.testimonial-section h2 {
    color: #fff;
}

.testimonial-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
}

.testimonial-card {
    min-height: 230px;
    padding: 24px;
    border: 1px solid rgba(49,82,255,.34);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(20,35,70,.9), rgba(13,26,48,.9));
    box-shadow: 0 22px 60px rgba(0,0,0,.22);
}

.stars {
    color: #ff3b3b;
    letter-spacing: .16em;
    font-weight: 900;
    margin-bottom: 16px;
}

.testimonial-card p {
    color: #dbe7f8;
    font-style: italic;
    line-height: 1.72;
}

.testimonial-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.testimonial-person > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #b45309);
    font-weight: 900;
}

.testimonial-person strong,
.testimonial-person small {
    display: block;
}

.testimonial-person small {
    color: #9fb0cc;
}

#home-inquiry {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(5,11,22,.86), rgba(9,24,44,.78)),
        url('/solacecredit/assets/images/9.png') center/cover no-repeat !important;
    color: #fff;
}

#home-inquiry h2,
#home-inquiry p,
#home-inquiry li {
    color: #fff !important;
}

#home-inquiry .form-shell {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(255,255,255,.2) !important;
}

@media (max-width: 1180px) {
    .service-rail,
    .testimonial-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .why-grid,
    .solace-about-section {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .service-category-section h2 {
        font-size: clamp(1.8rem, 9vw, 2.45rem);
    }

    .category-heading small {
        display: inline;
    }

    .service-rail,
    .testimonial-rail {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        padding: 2px 4px 16px;
        margin-inline: -4px;
        scrollbar-width: thin;
    }

    .service-rail .service-tile,
    .testimonial-card {
        flex: 0 0 min(82vw, 292px);
        scroll-snap-align: start;
    }

    .why-grid,
    .solace-about-section,
    .about-stats {
        grid-template-columns: 1fr;
    }

    .why-card {
        text-align: left;
    }

    .testimonial-section,
    .financial-clarity-section {
        padding-top: 42px;
        padding-bottom: 42px;
    }
}

/* Last-word public header and mobile hero fixes */
@media (min-width: 1181px) {
    body.public-site .public-site-header {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        justify-content: normal !important;
    }

    body.public-site .public-site-header > .public-compact-actions {
        display: none !important;
    }

    body.public-site .public-site-header .desktop-nav {
        display: flex !important;
    }

    body.public-site .public-site-header > .header-actions {
        display: inline-flex !important;
    }
}

@media (max-width: 1180px) {
    body.public-site .public-site-header {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        min-height: 64px !important;
        padding: 10px 14px !important;
        overflow: visible !important;
    }

    body.public-site .public-site-header .site-brand {
        flex: 0 1 auto !important;
        max-width: 160px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.public-site .public-site-header > .header-actions,
    body.public-site .public-site-header .desktop-nav {
        display: none !important;
    }

    body.public-site .public-site-header > .public-compact-actions {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.public-site .public-site-header > .public-compact-actions .icon-btn {
        position: static !important;
        display: inline-grid !important;
        place-items: center !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        color: #101827 !important;
        background: rgba(255,255,255,.96) !important;
        border: 1px solid rgba(15,23,42,.16) !important;
        border-radius: 11px !important;
        box-shadow: 0 8px 20px rgba(15,23,42,.12) !important;
    }

    body.public-site .public-site-header > .public-compact-actions .public-menu-button i {
        display: inline-block !important;
    }

    body.public-site .public-site-header > .public-compact-actions .public-menu-button::before {
        content: none !important;
        display: none !important;
    }

    body.public-site .marketing-hero h1 {
        width: min(100%, 340px) !important;
        max-width: 340px !important;
        margin-inline: auto !important;
        font-size: clamp(2.2rem, 11vw, 3.1rem) !important;
        line-height: 1.03 !important;
        overflow-wrap: normal !important;
        text-wrap: balance;
    }
}

@media (max-width: 820px) {
    .marketing-hero::before {
        background: linear-gradient(180deg, rgba(247,249,252,.78), rgba(247,249,252,.68) 55%, rgba(247,249,252,.82));
    }
    .hero-slider,
    [data-theme="dark"] .hero-slider {
        opacity: .38;
    }
    .service-image-directory,
    .bank-service-highlights,
    .onboarding-shell {
        grid-template-columns: 1fr;
    }
    .onboarding-intro {
        position: static;
    }
    .dashboard-branch-hero {
        min-height: 610px;
        padding: 26px 18px;
    }
    .dashboard-welcome h1 {
        font-size: 2.5rem;
    }
    .dashboard-metrics {
        margin-top: -34px;
        padding-inline: 10px;
    }
    .bank-service-highlights a {
        min-height: 220px;
    }
}

@media (max-width: 430px) {
    .site-header { min-height: 60px; }
    .brand-mark { width: 32px; height: 32px; }
    .marketing-hero h1 { font-size: 2.25rem; }
    .hero-slider { min-height: 250px; }
}

/* Navigation dropdowns, spatial depth, admin console, and consultancy intake */
body {
    position: relative;
    overflow-x: hidden;
}
body::before {
    content: "";
    position: fixed;
    left: -12vw;
    right: -12vw;
    bottom: -24vh;
    height: 58vh;
    pointer-events: none;
    background:
        linear-gradient(rgba(56,103,255,.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(35,211,238,.11) 1px, transparent 1px);
    background-size: 54px 54px;
    transform: perspective(780px) rotateX(63deg);
    transform-origin: center bottom;
    opacity: .58;
    z-index: 0;
}
body > * {
    position: relative;
    z-index: 1;
}

.nav-dropdown {
    position: relative;
}
.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: #334155;
    font-size: .9rem;
    font-weight: 800;
    white-space: nowrap;
}
.nav-dropdown-toggle:hover,
.nav-dropdown:focus-within .nav-dropdown-toggle {
    color: #0f172a;
    background: rgba(56,103,255,.08);
}
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    display: grid;
    min-width: 240px;
    padding: 10px;
    border: 1px solid rgba(16,24,39,.12);
    border-radius: var(--radius);
    background: rgba(255,255,255,.98);
    box-shadow: 0 24px 70px rgba(15,23,42,.18);
    transform: translate(-50%, 8px);
    opacity: 0;
    pointer-events: none;
    transition: .18s ease;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}
.nav-dropdown-menu a {
    justify-content: flex-start;
    padding: 10px 12px;
}
[data-theme="dark"] .nav-dropdown-toggle { color: #d8e2f2; }
[data-theme="dark"] .nav-dropdown-toggle:hover,
[data-theme="dark"] .nav-dropdown:focus-within .nav-dropdown-toggle {
    color: #fff;
    background: rgba(255,255,255,.08);
}
[data-theme="dark"] .nav-dropdown-menu {
    background: rgba(10,16,28,.98);
    border-color: rgba(255,255,255,.1);
}
.mobile-services {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius);
    overflow: hidden;
}
.mobile-services summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 11px 12px;
    color: #dbe7f8;
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}
.mobile-services summary::-webkit-details-marker { display: none; }
.mobile-services[open] summary i { transform: rotate(180deg); }
.mobile-services div {
    display: grid;
    gap: 2px;
    padding: 4px 8px 10px;
}
.mobile-services a {
    padding-left: 18px !important;
    background: rgba(255,255,255,.035);
}

.consulting-map {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .85fr);
    gap: clamp(22px, 4vw, 46px);
    align-items: stretch;
}
.map-canvas {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(16,24,39,.1);
    border-radius: var(--radius);
    background:
        linear-gradient(120deg, rgba(255,255,255,.76), rgba(238,244,251,.88)),
        linear-gradient(rgba(56,103,255,.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(35,211,238,.12) 1px, transparent 1px);
    background-size: auto, 44px 44px, 44px 44px;
    box-shadow: 0 28px 80px rgba(15,23,42,.12);
}
.map-canvas::before {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(56,103,255,.2);
    transform: skew(-10deg) rotate(-5deg);
}
.map-canvas::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 14%;
    height: 34%;
    border: 1px solid rgba(4,120,87,.18);
    transform: perspective(680px) rotateX(58deg);
}
.map-pin {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: #07111f;
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(15,23,42,.18);
}
.map-pin::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
}
.pin-na { left: 15%; top: 34%; }
.pin-eu { left: 51%; top: 23%; }
.pin-af { left: 48%; top: 55%; }
.pin-me { left: 68%; top: 44%; }
.map-panel {
    padding: clamp(24px, 4vw, 36px);
    border: 1px solid rgba(16,24,39,.1);
    border-radius: var(--radius);
    background: rgba(255,255,255,.9);
    box-shadow: 0 22px 60px rgba(15,23,42,.1);
}
.map-panel h2 {
    color: #101827;
    font-family: Poppins, Inter, sans-serif;
    font-weight: 800;
    letter-spacing: 0;
}
.map-panel p { color: #475569; line-height: 1.78; }
.compact-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}
.lead-list {
    display: grid;
    gap: 10px;
    max-height: 620px;
    overflow: auto;
}
.lead-item {
    padding: 12px;
    border: 1px solid rgba(16,24,39,.1);
    border-radius: var(--radius);
    background: rgba(248,250,252,.92);
}
.lead-item strong,
.lead-item span,
.lead-item small {
    display: block;
}
.lead-item span {
    color: #334155;
    font-weight: 700;
}
.lead-item small {
    color: #64748b;
    margin-top: 4px;
}

.admin-body {
    background: #eef3f8;
    color: #101827;
}
.admin-body::before {
    background:
        linear-gradient(rgba(56,103,255,.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(35,211,238,.12) 1px, transparent 1px);
    opacity: .38;
}
.admin-shell-layout {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    min-height: 100vh;
    transition: grid-template-columns .22s ease;
}
.admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 16px;
    overflow-y: auto;
    border-right: 1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(180deg, rgba(10,17,31,.98), rgba(5,10,20,.98)),
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
    color: #dbe7f8;
    box-shadow: 16px 0 44px rgba(15,23,42,.12);
    z-index: 1060;
    transition: width .22s ease, transform .24s ease;
}
.admin-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}
.admin-brand {
    color: #fff;
    margin: 0;
    min-width: 0;
}
.admin-collapse-btn {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius);
    background: rgba(255,255,255,.05);
    color: #dbe7f8;
}
.admin-profile-mini {
    border-color: rgba(255,255,255,.1);
    background: rgba(255,255,255,.055);
}
.admin-nav-section {
    margin: 18px 0 8px;
    color: #8190a7;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.admin-nav,
.admin-sidebar-foot {
    display: grid;
    gap: 5px;
}
.admin-nav a,
.admin-sidebar-foot a {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: var(--radius);
    color: #b8c7dc;
    text-decoration: none;
    font-weight: 750;
}
.admin-nav a:hover,
.admin-nav a.active,
.admin-sidebar-foot a:hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(56,103,255,.22), rgba(35,211,238,.12));
}
.admin-nav i,
.admin-sidebar-foot i {
    width: 18px;
    color: var(--gold);
}
.admin-sidebar-foot {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.admin-main-panel {
    min-width: 0;
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(255,255,255,.72), rgba(238,244,251,.86)),
        radial-gradient(circle at 78% 0%, rgba(56,103,255,.14), transparent 34%);
}
.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 78px;
    padding: 14px clamp(18px, 3vw, 34px);
    border-bottom: 1px solid rgba(16,24,39,.1);
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(18px);
}
.admin-topbar-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.admin-topbar-title span {
    display: block;
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.admin-topbar-title h1 {
    margin: 0;
    color: #101827;
    font-family: Poppins, Inter, sans-serif;
    font-size: clamp(1.2rem, 2vw, 1.75rem);
    font-weight: 800;
}
.admin-content-wrap {
    max-width: 1480px;
}
.admin-footer {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin: 28px clamp(18px, 3vw, 34px);
    padding: 18px 0 0;
    border-top: 1px solid rgba(16,24,39,.1);
    color: #64748b;
    font-size: .9rem;
}
.admin-footer a {
    color: #0f3fbd;
    font-weight: 800;
    text-decoration: none;
}
.admin-shell-layout.admin-sidebar-collapsed {
    grid-template-columns: 88px minmax(0, 1fr);
}
.admin-shell-layout.admin-sidebar-collapsed .admin-sidebar {
    padding-left: 12px;
    padding-right: 12px;
}
.admin-shell-layout.admin-sidebar-collapsed .admin-brand .brand-full,
.admin-shell-layout.admin-sidebar-collapsed .admin-profile-mini div:not(.avatar),
.admin-shell-layout.admin-sidebar-collapsed .admin-nav-section,
.admin-shell-layout.admin-sidebar-collapsed .admin-nav span,
.admin-shell-layout.admin-sidebar-collapsed .admin-sidebar-foot span {
    display: none;
}
.admin-shell-layout.admin-sidebar-collapsed .admin-profile-mini,
.admin-shell-layout.admin-sidebar-collapsed .admin-nav a,
.admin-shell-layout.admin-sidebar-collapsed .admin-sidebar-foot a {
    justify-content: center;
}
.admin-shell-layout.admin-sidebar-collapsed .admin-collapse-btn i {
    transform: rotate(180deg);
}

@media (max-width: 980px) {
    .admin-shell-layout {
        display: block;
    }
    .admin-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(88vw, 340px);
        transform: translateX(-100%);
        box-shadow: none;
    }
    .admin-sidebar.open {
        transform: translateX(0);
        box-shadow: 24px 0 60px rgba(0,0,0,.42);
    }
    .admin-sidebar .sidebar-close {
        display: grid;
    }
    .admin-shell-layout.admin-sidebar-collapsed .admin-sidebar {
        width: min(88vw, 340px);
    }
    .admin-shell-layout.admin-sidebar-collapsed .admin-brand .brand-full,
    .admin-shell-layout.admin-sidebar-collapsed .admin-profile-mini div:not(.avatar),
    .admin-shell-layout.admin-sidebar-collapsed .admin-nav-section,
    .admin-shell-layout.admin-sidebar-collapsed .admin-nav span,
    .admin-shell-layout.admin-sidebar-collapsed .admin-sidebar-foot span {
        display: initial;
    }
    .admin-shell-layout.admin-sidebar-collapsed .admin-nav a,
    .admin-shell-layout.admin-sidebar-collapsed .admin-sidebar-foot a,
    .admin-shell-layout.admin-sidebar-collapsed .admin-profile-mini {
        justify-content: flex-start;
    }
    .desktop-admin-toggle,
    .admin-sidebar-head .admin-collapse-btn {
        display: none;
    }
    .admin-topbar .mobile-menu-button {
        display: inline-grid;
        place-items: center;
    }
    .sidebar-backdrop.open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        z-index: 1055;
    }
}

@media (min-width: 981px) {
    .admin-topbar .mobile-menu-button {
        display: none;
    }
}

@media (max-width: 820px) {
    .consulting-map {
        grid-template-columns: 1fr;
    }
    .map-canvas {
        min-height: 320px;
    }
    .compact-metrics {
        grid-template-columns: 1fr 1fr;
    }
    .nav-dropdown {
        display: none;
    }
    .admin-topbar {
        align-items: flex-start;
        flex-direction: column;
    }
    .admin-footer {
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .compact-metrics {
        grid-template-columns: 1fr;
    }
    .map-pin {
        font-size: .7rem;
        padding: 7px 8px;
    }
}

/* Mobile clarity and full-bleed hero slideshow refinements */
.marketing-hero {
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: min(720px, calc(100vh - 76px));
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(56px, 8vw, 96px) max(clamp(24px, 4vw, 48px), calc((100vw - 1320px) / 2));
    overflow: hidden;
}
.marketing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(247,249,252,.94) 0%, rgba(247,249,252,.84) 46%, rgba(247,249,252,.62) 100%),
        linear-gradient(180deg, rgba(247,249,252,.78), rgba(247,249,252,.95));
}
[data-theme="dark"] .marketing-hero::before {
    background:
        linear-gradient(90deg, rgba(5,7,13,.88) 0%, rgba(5,7,13,.74) 48%, rgba(5,7,13,.56) 100%),
        linear-gradient(180deg, rgba(5,7,13,.58), rgba(5,7,13,.86));
}
.hero-copy {
    z-index: 2;
    max-width: 780px;
}
.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: 100%;
    border-radius: 0;
    box-shadow: none;
    background: #eef4fb;
    opacity: .48;
}
[data-theme="dark"] .hero-slider {
    opacity: .42;
}
.hero-slide::before {
    background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.2));
}
.hero-slide figcaption {
    display: none;
}
.marketing-hero .btn-outline-dark {
    background: rgba(255,255,255,.68);
}
[data-theme="dark"] .marketing-hero .btn-outline-dark {
    color: #fff;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.4);
}

@media (max-width: 820px) {
    .site-header {
        box-shadow: none;
    }
    .header-actions [data-theme-toggle] {
        display: inline-grid;
        place-items: center;
    }
    .header-actions {
        gap: 8px;
    }
    .mobile-drawer {
        background: #fff;
        color: #101827;
        border-right-color: rgba(16,24,39,.1);
        box-shadow: none;
    }
    .mobile-drawer.open {
        box-shadow: 24px 0 60px rgba(15,23,42,.24);
    }
    .mobile-drawer .brand {
        color: #101827;
    }
    .mobile-drawer .nav-stack a,
    .mobile-services summary {
        color: #172033;
        font-weight: 850;
    }
    .mobile-drawer .nav-stack a:hover,
    .mobile-services[open] summary {
        color: #07111f;
        background: rgba(56,103,255,.08);
    }
    .mobile-services {
        border-color: rgba(16,24,39,.1);
        background: rgba(248,250,252,.94);
    }
    .mobile-services a {
        color: #243044 !important;
        background: rgba(56,103,255,.045);
    }
    .sidebar-close {
        background: #fff;
        color: #101827;
        border-color: rgba(16,24,39,.14);
        box-shadow: 0 8px 18px rgba(15,23,42,.08);
    }
    [data-theme="dark"] .mobile-drawer {
        background: #07111f;
        color: #f7fbff;
        border-right-color: rgba(255,255,255,.12);
    }
    [data-theme="dark"] .mobile-drawer .brand,
    [data-theme="dark"] .mobile-drawer .nav-stack a,
    [data-theme="dark"] .mobile-services summary {
        color: #f7fbff;
    }
    [data-theme="dark"] .mobile-services {
        border-color: rgba(255,255,255,.12);
        background: rgba(255,255,255,.04);
    }
    [data-theme="dark"] .mobile-services a {
        color: #dbe7f8 !important;
        background: rgba(255,255,255,.045);
    }
    [data-theme="dark"] .sidebar-close {
        background: #0b1220;
        color: #f7fbff;
        border-color: rgba(255,255,255,.16);
    }
    .marketing-hero {
        min-height: calc(100vh - 60px);
        padding: 52px 16px;
        gap: 0;
    }
    .marketing-hero::before {
        background:
            linear-gradient(180deg, rgba(247,249,252,.95), rgba(247,249,252,.82) 54%, rgba(247,249,252,.96)),
            linear-gradient(90deg, rgba(247,249,252,.94), rgba(247,249,252,.82));
    }
    [data-theme="dark"] .marketing-hero::before {
        background:
            linear-gradient(180deg, rgba(5,7,13,.9), rgba(5,7,13,.72) 54%, rgba(5,7,13,.94)),
            linear-gradient(90deg, rgba(5,7,13,.88), rgba(5,7,13,.72));
    }
    .hero-slider {
        opacity: .38;
    }
    .marketing-hero p {
        color: #172033;
    }
    [data-theme="dark"] .marketing-hero p {
        color: #e5edf8;
    }
}

@media (max-width: 430px) {
    .marketing-hero {
        padding-top: 50px;
        padding-bottom: 42px;
    }
    .marketing-hero h1 {
        font-size: 2.12rem;
    }
    .marketing-hero p {
        line-height: 1.55;
    }
}

/* Stronger hero imagery pass */
.marketing-hero {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(360px, .72fr);
    gap: clamp(28px, 5vw, 62px);
}
.marketing-hero::before {
    background:
        linear-gradient(90deg, rgba(247,249,252,.6) 0%, rgba(247,249,252,.62) 48%, rgba(247,249,252,.5) 100%),
        linear-gradient(180deg, rgba(247,249,252,.58), rgba(247,249,252,.64));
}
[data-theme="dark"] .marketing-hero::before {
    background:
        linear-gradient(90deg, rgba(5,7,13,.62) 0%, rgba(5,7,13,.58) 48%, rgba(5,7,13,.5) 100%),
        linear-gradient(180deg, rgba(5,7,13,.54), rgba(5,7,13,.66));
}
.hero-slider {
    opacity: .4;
}
[data-theme="dark"] .hero-slider {
    opacity: .4;
}
.hero-showcase {
    position: relative;
    z-index: 2;
    min-height: 500px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 18px;
    background: #07111f;
    box-shadow: 0 28px 80px rgba(15,23,42,.22);
}
.hero-showcase::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5,7,13,.04), rgba(5,7,13,.42)),
        linear-gradient(90deg, rgba(5,7,13,.1), transparent);
    pointer-events: none;
}
.hero-showcase-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: heroFade 18s infinite;
}
.hero-showcase-slide-2 { animation-delay: 6s; }
.hero-showcase-slide-3 { animation-delay: 12s; }
.hero-showcase-slide figcaption {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 2;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: var(--radius);
    background: rgba(5,7,13,.68);
    color: #fff;
    font-weight: 800;
}

@media (max-width: 1180px) {
    .marketing-hero {
        grid-template-columns: 1fr;
    }
    .hero-showcase {
        min-height: 380px;
    }
}

@media (max-width: 820px) {
    .marketing-hero {
        grid-template-columns: 1fr;
    }
    .marketing-hero::before {
        background:
            linear-gradient(180deg, rgba(247,249,252,.62), rgba(247,249,252,.58) 52%, rgba(247,249,252,.7)),
            linear-gradient(90deg, rgba(247,249,252,.6), rgba(247,249,252,.54));
    }
    [data-theme="dark"] .marketing-hero::before {
        background:
            linear-gradient(180deg, rgba(5,7,13,.66), rgba(5,7,13,.58) 52%, rgba(5,7,13,.72)),
            linear-gradient(90deg, rgba(5,7,13,.62), rgba(5,7,13,.54));
    }
    .hero-showcase {
        min-height: 280px;
        border-radius: 12px;
    }
}

@media (max-width: 430px) {
    .hero-showcase {
        min-height: 230px;
    }
}

/* Home/service polish pass */
.content-wrap > .marketing-hero:first-child {
    margin-top: calc(-1 * clamp(24px, 4vw, 48px));
}
.hero-slider,
[data-theme="dark"] .hero-slider {
    opacity: .25;
}
.section-title {
    color: #101827;
    font-family: Poppins, Inter, sans-serif;
    font-size: clamp(2rem, 4vw, 3.3rem);
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 22px;
}
[data-theme="dark"] .section-title {
    color: #fff;
}
.metric-card {
    position: relative;
}
.metric-card > i,
.service-tile > i {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(245,184,75,.95), rgba(35,211,238,.28));
    color: #07111f;
    font-size: 1rem;
    box-shadow: 0 12px 26px rgba(15,23,42,.1);
}
.metric-card > i {
    position: absolute;
    top: 16px;
    right: 16px;
    margin: 0;
}
.metric-card span,
.metric-card strong,
.metric-card .trend {
    padding-right: 52px;
}
.service-tile {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(56,103,255,.22);
    box-shadow: 0 22px 48px rgba(15,23,42,.12);
}
.site-footer {
    margin-top: 28px;
}
.footer-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
}
.footer-brand {
    margin-bottom: 12px;
}
.site-footer a {
    line-height: 1.35;
}

@media (max-width: 1180px) {
    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .content-wrap > .marketing-hero:first-child {
        margin-top: -22px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .metric-card > i {
        position: static;
        margin-bottom: 12px;
    }
    .metric-card span,
    .metric-card strong,
    .metric-card .trend {
        padding-right: 0;
    }
}

/* Final local-image hero visibility */
.marketing-hero::before {
    background:
        linear-gradient(90deg, rgba(247,249,252,.78) 0%, rgba(247,249,252,.68) 48%, rgba(247,249,252,.56) 100%),
        linear-gradient(180deg, rgba(247,249,252,.48), rgba(247,249,252,.72));
}
.hero-slider,
[data-theme="dark"] .hero-slider {
    opacity: .42;
}
[data-theme="dark"] .marketing-hero::before {
    background:
        linear-gradient(90deg, rgba(5,7,13,.72), rgba(5,7,13,.6) 52%, rgba(5,7,13,.48)),
        linear-gradient(180deg, rgba(5,7,13,.45), rgba(5,7,13,.68));
}
@media (max-width: 820px) {
    .marketing-hero::before {
        background: linear-gradient(180deg, rgba(247,249,252,.8), rgba(247,249,252,.68) 55%, rgba(247,249,252,.84));
    }
    [data-theme="dark"] .marketing-hero::before {
        background: linear-gradient(180deg, rgba(5,7,13,.78), rgba(5,7,13,.62) 55%, rgba(5,7,13,.82));
    }
    html,
    body,
    .main-panel,
    .content-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }
    .site-header {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }
    .site-brand,
    .header-actions,
    .hero-copy,
    .hero-showcase {
        min-width: 0;
        max-width: 100%;
    }
    .marketing-hero {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: 16px;
        padding-right: 16px;
    }
    .marketing-hero h1,
    .marketing-hero p,
    .hero-actions,
    .hero-actions .btn {
        max-width: 100%;
    }
    .marketing-hero h1,
    .marketing-hero p,
    .hero-showcase-slide figcaption {
        overflow-wrap: anywhere;
    }
}
@media (max-width: 430px) {
    .marketing-hero h1 {
        font-size: 2.05rem;
        line-height: 1.02;
    }
}

/* Solace Credit 2026 visual system */
:root,
[data-theme="light"] {
    --db-bg: #f4f7fb;
    --db-surface: #ffffff;
    --db-surface-soft: #eef3fa;
    --db-text: #11162a;
    --db-muted: #6d768d;
    --db-line: #dce3ee;
    --db-primary: #3156e7;
    --db-primary-dark: #1f3fb7;
    --db-gold: #f1b744;
    --db-green: #16a36a;
    --db-navy: #09152b;
    --db-shadow: 0 18px 48px rgba(27, 45, 86, .10);
}

[data-theme="dark"] {
    --db-bg: #08101e;
    --db-surface: #101b2e;
    --db-surface-soft: #16243a;
    --db-text: #f6f8fc;
    --db-muted: #aab5c8;
    --db-line: #273750;
    --db-primary: #6382ff;
    --db-primary-dark: #4f6ff0;
    --db-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

html { background: var(--db-bg); }
body {
    background: var(--db-bg);
    color: var(--db-text);
    font-family: Inter, "SF Pro Display", "Segoe UI", sans-serif;
    letter-spacing: 0;
}

.main-panel,
.content-wrap { background: var(--db-bg); }
.content-wrap { max-width: none; padding: 0; }
.content-wrap > .alert { margin: 16px auto; max-width: 1240px; }

.site-header {
    min-height: 76px;
    padding: 0 clamp(20px, 4vw, 64px);
    background: color-mix(in srgb, var(--db-surface) 94%, transparent);
    border-bottom: 1px solid var(--db-line);
    box-shadow: none;
    backdrop-filter: blur(18px);
}
.brand { color: var(--db-text); font-weight: 800; gap: 10px; }
.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(145deg, var(--db-primary), #6b85ff);
    box-shadow: 0 8px 22px rgba(49, 86, 231, .25);
}
.desktop-nav { gap: 30px; }
.desktop-nav > a,
.nav-dropdown-toggle { color: var(--db-text); font-size: .92rem; font-weight: 650; }
.desktop-nav > a:hover,
.nav-dropdown-toggle:hover { color: var(--db-primary); }
.nav-dropdown-menu {
    min-width: 240px;
    padding: 10px;
    background: var(--db-surface);
    border: 1px solid var(--db-line);
    border-radius: 8px;
    box-shadow: var(--db-shadow);
}
.nav-dropdown-menu a { color: var(--db-text); border-radius: 6px; }
.nav-dropdown-menu a:hover { background: var(--db-surface-soft); color: var(--db-primary); }
.icon-btn {
    color: var(--db-text);
    background: var(--db-surface);
    border: 1px solid var(--db-line);
    border-radius: 8px;
}

.btn { border-radius: 7px; font-weight: 750; letter-spacing: 0; }
.btn-gold,
.btn-cyan {
    color: #fff;
    background: var(--db-primary);
    border-color: var(--db-primary);
    box-shadow: 0 9px 24px rgba(49, 86, 231, .20);
}
.btn-gold:hover,
.btn-cyan:hover { color: #fff; background: var(--db-primary-dark); border-color: var(--db-primary-dark); transform: translateY(-1px); }
.btn-outline-dark { color: var(--db-text); border-color: var(--db-line); background: var(--db-surface); }
.btn-outline-dark:hover { color: var(--db-primary); background: var(--db-surface-soft); border-color: var(--db-primary); }

.marketing-hero {
    min-height: min(720px, calc(100vh - 76px));
    padding: clamp(60px, 8vw, 110px) clamp(24px, 7vw, 96px);
    grid-template-columns: minmax(0, .92fr) minmax(420px, .78fr);
    gap: clamp(38px, 7vw, 110px);
    background: var(--db-surface);
    border: 0;
    overflow: hidden;
}
.hero-slider { inset: 0; opacity: .22; }
.hero-slider::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    background: linear-gradient(90deg, var(--db-surface) 5%, color-mix(in srgb, var(--db-surface) 86%, transparent) 48%, color-mix(in srgb, var(--db-surface) 45%, transparent));
}
.hero-slide { background-position: center; }
.hero-copy { max-width: 690px; color: var(--db-text); z-index: 6; }
.hero-eyebrow,
.section-kicker {
    color: var(--db-primary);
    background: rgba(49, 86, 231, .08);
    border: 1px solid rgba(49, 86, 231, .14);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.marketing-hero h1 {
    max-width: 700px;
    margin: 18px 0;
    color: var(--db-text);
    font-family: Poppins, Inter, sans-serif;
    font-size: clamp(3.6rem, 7vw, 6.6rem);
    line-height: .95;
    letter-spacing: 0;
}
.marketing-hero p { max-width: 650px; color: var(--db-muted); font-size: clamp(1.05rem, 1.35vw, 1.24rem); line-height: 1.75; }
.hero-showcase {
    position: relative;
    min-height: 460px;
    z-index: 6;
    border: 8px solid color-mix(in srgb, var(--db-surface) 88%, transparent);
    border-radius: 8px;
    box-shadow: 0 32px 70px rgba(13, 31, 68, .22);
    overflow: hidden;
}
.hero-showcase-slide { background-position: center; }
.hero-showcase-slide::after { background: linear-gradient(180deg, transparent 58%, rgba(6, 14, 29, .76)); }
.hero-showcase-slide figcaption { color: #fff; font-size: .9rem; }

.section-pad { padding: clamp(64px, 7vw, 104px) clamp(24px, 6vw, 84px); }
.section-pad > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.section-pad h2,
.section-title { color: var(--db-text); font-family: Poppins, Inter, sans-serif; font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1.08; letter-spacing: 0; }
.section-pad p { color: var(--db-muted); line-height: 1.7; }
.alt-band { background: var(--db-surface-soft); }
.split-section { gap: clamp(36px, 6vw, 86px); align-items: center; }

.metric-grid { gap: 14px; }
.metric-card,
.glass,
.light-panel,
.form-shell,
.table-shell,
.service-tile,
.card-desk-panel,
.security-desk {
    color: var(--db-text);
    background: var(--db-surface);
    border: 1px solid var(--db-line);
    border-radius: 8px;
    box-shadow: 0 12px 34px rgba(26, 45, 85, .07);
}
.metric-card { min-height: 136px; padding: 22px; }
.metric-card i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 18px;
    color: var(--db-primary);
    background: rgba(49, 86, 231, .09);
    border-radius: 8px;
}
.metric-card strong { color: var(--db-text); font-size: 1.42rem; }
.metric-card span { color: var(--db-muted); }
.trend { color: var(--db-green); }

.service-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.service-tile { padding: 24px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.service-tile:hover { transform: translateY(-4px); border-color: rgba(49, 86, 231, .35); box-shadow: var(--db-shadow); }
.service-tile > i,
.service-tile-copy > i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #fff;
    background: var(--db-primary);
    border-radius: 8px;
}
.service-tile strong { color: var(--db-text); font-size: 1.14rem; }
.service-tile p { color: var(--db-muted); }
.service-image-tile { padding: 0; overflow: hidden; }
.service-image-tile img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.service-tile-copy { padding: 22px; }
.service-visual-panel { border-radius: 8px; box-shadow: var(--db-shadow); }

.form-control,
.form-select {
    min-height: 48px;
    color: var(--db-text);
    background-color: var(--db-surface);
    border: 1px solid var(--db-line);
    border-radius: 7px;
}
.form-control:focus,
.form-select:focus { color: var(--db-text); background: var(--db-surface); border-color: var(--db-primary); box-shadow: 0 0 0 3px rgba(49, 86, 231, .12); }
.form-label { color: var(--db-text); font-size: .84rem; font-weight: 700; }
.input-with-icon { position: relative; }
.input-with-icon > i { position: absolute; z-index: 2; left: 15px; top: 50%; transform: translateY(-50%); color: var(--db-muted); }
.input-with-icon .form-control { padding-left: 42px; }

.site-footer { color: #dce5f4; background: #071326; }
.footer-grid { grid-template-columns: 1.2fr repeat(4, 1fr); max-width: 1240px; gap: clamp(28px, 4vw, 64px); }
.site-footer h6,
.site-footer .brand { color: #fff; }
.site-footer a { color: #b9c8de; }
.site-footer a:hover { color: #fff; }
.site-footer p,
.footer-bottom { color: #91a2ba; }

.auth-experience {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, .75fr);
    min-height: calc(100vh - 76px);
    background: var(--db-surface);
}
.auth-visual { position: relative; min-height: 660px; background-position: center; background-size: cover; }
.auth-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 19, 38, .12), rgba(7, 19, 38, .88)); }
.auth-visual-copy { position: absolute; z-index: 2; left: clamp(30px, 6vw, 90px); right: 30px; bottom: clamp(40px, 8vw, 100px); max-width: 620px; color: #fff; }
.auth-visual-copy h1 { margin: 16px 0; font: 700 clamp(3rem, 6vw, 5.4rem)/.96 Poppins, sans-serif; }
.auth-visual-copy p { color: #d7dfec; font-size: 1.12rem; }
.auth-trust-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; }
.auth-trust-row span { display: flex; gap: 8px; align-items: center; }
.auth-form-panel { align-self: center; width: min(100%, 520px); padding: clamp(36px, 6vw, 76px); margin: auto; }
.auth-brand { display: inline-flex; margin-bottom: 64px; }
.auth-form-panel h2 { margin: 16px 0 8px; color: var(--db-text); font: 700 clamp(2rem, 3vw, 2.8rem)/1.05 Poppins, sans-serif; }
.demo-access-note { display: grid; gap: 3px; margin-top: 22px; padding: 14px 16px; color: var(--db-muted); background: var(--db-surface-soft); border-radius: 7px; font-size: .83rem; }
.demo-access-note strong { color: var(--db-text); }
.auth-register-link { margin-top: 24px; text-align: center; }
.auth-register-link a { color: var(--db-primary); font-weight: 750; }

.premium-card-list { display: grid; gap: 22px; }
.bank-card-account { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 22px; padding: 18px; background: var(--db-surface); border: 1px solid var(--db-line); border-radius: 8px; box-shadow: 0 16px 38px rgba(26, 45, 85, .09); }
.bank-card-art { display: flex; flex-direction: column; justify-content: space-between; min-height: 210px; padding: 24px; color: #fff; border-radius: 8px; overflow: hidden; position: relative; box-shadow: 0 18px 35px rgba(17, 27, 70, .25); }
.bank-card-art::after { content: ""; position: absolute; width: 210px; height: 210px; right: -80px; bottom: -100px; border: 38px solid rgba(255,255,255,.12); border-radius: 50%; }
.bank-card-art-1 { background: linear-gradient(135deg, #1839cd, #25c8e5); }
.bank-card-art-2 { background: linear-gradient(135deg, #17244d, #6848ef 58%, #e169cb); }
.bank-card-art-3 { background: linear-gradient(135deg, #087c7f, #2fba72 58%, #b9d56d); }
.bank-card-top,
.bank-card-bottom { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.bank-card-chip { width: 42px; height: 32px; border-radius: 6px; background: linear-gradient(135deg, #ffe695, #c89728); }
.bank-card-contactless { transform: rotate(90deg); opacity: .9; }
.bank-card-number { position: relative; z-index: 1; font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 650; letter-spacing: .08em; }
.bank-card-bottom small { display: block; color: rgba(255,255,255,.7); font-size: .62rem; text-transform: uppercase; }
.bank-card-bottom strong { font-size: .82rem; }
.bank-card-controls { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.bank-card-controls .section-heading-row strong { display: block; color: var(--db-text); font-size: 1.55rem; }
.bank-card-controls small { color: var(--db-muted); }
.card-control-actions { display: flex; gap: 10px; margin: 18px 0; }
.icon-command { display: grid; place-items: center; gap: 5px; min-width: 84px; padding: 10px; color: var(--db-text); background: var(--db-surface-soft); border: 1px solid var(--db-line); border-radius: 7px; font-size: .72rem; }
.icon-command i { color: var(--db-primary); font-size: 1rem; }
.icon-command.static { cursor: default; }
.card-fund-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.card-page-badge { display: inline-flex; gap: 8px; align-items: center; padding: 9px 12px; color: var(--db-green); background: rgba(22,163,106,.08); border: 1px solid rgba(22,163,106,.18); border-radius: 7px; font-size: .82rem; font-weight: 700; }

.banking-dashboard { max-width: 1320px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 44px) 70px; }
.dashboard-branch-hero { border-radius: 8px; box-shadow: var(--db-shadow); }
.dashboard-account-desk { background: linear-gradient(145deg, var(--db-primary), #2442aa); border-radius: 8px; }
[data-theme="dark"] .dashboard-account-desk { color: #171006; background: linear-gradient(145deg, #b97815, #f1b744 64%, #ffe09a); border-color: rgba(255,224,154,.5); }
[data-theme="dark"] .dashboard-account-desk > strong,
[data-theme="dark"] .dashboard-account-desk > span,
[data-theme="dark"] .dashboard-account-desk > small { color: #171006; }
[data-theme="dark"] .dashboard-account-desk .account-desk-number { border-color: rgba(23,16,6,.2); }
.bank-service-highlights a { background: var(--db-surface); border-color: var(--db-line); border-radius: 8px; box-shadow: 0 10px 25px rgba(26,45,85,.07); }
.bank-service-highlights b { color: var(--db-text); }
.bank-service-highlights small { color: var(--db-muted); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--db-text); --bs-table-border-color: var(--db-line); }

.admin-body { background: var(--db-bg); }
.admin-sidebar { background: #071326; border-right: 1px solid #172740; box-shadow: 18px 0 50px rgba(4, 12, 26, .12); }
.admin-nav a { color: #aebbd0; border-radius: 7px; }
.admin-nav a:hover,
.admin-nav a.active { color: #fff; background: rgba(99, 130, 255, .20); }
.admin-nav a.active::before { background: #7893ff; }
.admin-topbar { background: color-mix(in srgb, var(--db-surface) 94%, transparent); border-bottom-color: var(--db-line); box-shadow: none; }
.admin-topbar-title span { color: var(--db-primary); }
.admin-topbar-title h1 { color: var(--db-text); }
.admin-content-wrap { padding: 28px; }

@media (max-width: 1100px) {
    .desktop-nav { display: none; }
    .mobile-menu-button { display: inline-grid; }
    .marketing-hero { grid-template-columns: 1fr 42%; gap: 36px; }
    .service-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    html,
    body,
    .main-panel,
    .content-wrap { min-width: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
    .site-header { min-height: 62px; padding: 0 14px; }
    .site-brand .brand-full { display: none; }
    .site-brand .brand-mobile { display: inline; }
    .site-header .btn { display: none; }
    .site-header [data-theme-toggle] { display: inline-grid; }
    .mobile-drawer { width: min(86vw, 330px); color: var(--db-text); background: var(--db-surface); box-shadow: none; }
    .mobile-drawer.open { box-shadow: 20px 0 55px rgba(6, 16, 35, .25); }
    .sidebar-backdrop { box-shadow: none !important; }
    .nav-stack a,
    .mobile-services summary { color: var(--db-text); }
    .marketing-hero {
        min-height: auto;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
        grid-template-columns: 1fr;
        padding: 48px 18px 28px;
        gap: 30px;
    }
    .hero-slider { opacity: .16; }
    .hero-slider::after { background: linear-gradient(180deg, var(--db-surface) 0%, color-mix(in srgb, var(--db-surface) 84%, transparent) 58%, var(--db-surface) 100%); }
    .marketing-hero h1 { width: 100%; max-width: 100%; font-size: clamp(2.5rem, 12vw, 3.65rem); white-space: normal; overflow-wrap: normal; word-break: normal; }
    .marketing-hero p { font-size: 1rem; line-height: 1.65; }
    .hero-actions { display: grid; grid-template-columns: 1fr; }
    .hero-actions .btn { width: 100%; }
    .hero-showcase { width: 100%; min-width: 0; min-height: 250px; order: 2; }
    .hero-showcase-slide figcaption { left: 12px; right: 12px; bottom: 12px; max-width: calc(100% - 24px); font-size: .78rem; }
    .section-pad { padding: 54px 18px; }
    .metric-grid,
    .service-directory { grid-template-columns: 1fr; }
    .metric-card { min-height: 118px; }
    .service-image-tile img { aspect-ratio: 16 / 10; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { align-items: flex-start; flex-direction: column; }
    .auth-experience { grid-template-columns: 1fr; }
    .auth-visual { min-height: 300px; }
    .auth-visual-copy { left: 22px; bottom: 28px; }
    .auth-visual-copy h1 { font-size: 2.8rem; }
    .auth-form-panel { width: 100%; padding: 38px 20px 54px; }
    .auth-brand { margin-bottom: 38px; }
    .bank-card-account { grid-template-columns: 1fr; padding: 12px; }
    .bank-card-art { min-height: 205px; }
    .card-control-actions { overflow-x: auto; padding-bottom: 4px; }
    .icon-command { flex: 0 0 88px; }
    .card-fund-form { grid-template-columns: 1fr; }
    .customer-authenticated .banking-dashboard {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 0 0 55px;
        overflow: hidden;
    }
    .dashboard-branch-hero {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: auto;
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 32px 18px 48px;
    }
    .dashboard-welcome,
    .dashboard-account-desk { width: 100%; max-width: calc(100vw - 80px); min-width: 0; }
    .dashboard-welcome h1 { width: 100%; max-width: 100%; font-size: clamp(2rem, 9vw, 2.6rem); white-space: normal; overflow-wrap: anywhere; }
    .dashboard-welcome p { max-width: 100%; }
    .dashboard-welcome .quick-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .dashboard-welcome .quick-actions .btn { min-width: 0; justify-content: center; padding-inline: 10px; }
    .dashboard-account-desk { min-height: 0; padding: 22px 18px; }
    .dashboard-account-desk > strong { font-size: clamp(1.9rem, 10vw, 2.65rem); }
    .account-desk-number { align-items: flex-start; flex-direction: column; gap: 6px; }
    .dashboard-metrics { width: 100%; max-width: 100%; margin-top: -28px; padding-inline: 10px; }
    .dashboard-metrics .metric-card { width: 100%; max-width: 100%; }
    .admin-content-wrap { padding: 16px; }
}

@media (max-width: 380px) {
    .header-actions { gap: 6px; }
    .icon-btn { width: 38px; height: 38px; }
    .brand-mark { width: 34px; height: 34px; }
    .marketing-hero h1 { font-size: 2.5rem; }
    .bank-card-art { min-height: 190px; padding: 20px; }
    .bank-card-number { font-size: 1.04rem; }
}

/* Full-canvas trust hero */
.marketing-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    min-height: min(760px, calc(100vh - 76px));
    padding: clamp(82px, 10vw, 136px) clamp(22px, 7vw, 96px);
    margin: 0;
    background: #081426;
    isolation: isolate;
}
.marketing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(4, 13, 29, .52), rgba(4, 13, 29, .72)),
        radial-gradient(circle at center, rgba(31, 69, 151, .12), rgba(3, 10, 24, .28));
    pointer-events: none;
}
.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    opacity: 1;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.hero-slider::after { display: none; }
.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: heroFade 18s infinite;
}
.hero-slide-2 { animation-delay: 6s; }
.hero-slide-3 { animation-delay: 12s; }
.hero-slide::before { display: none; }
.hero-slide figcaption { display: none; }
.hero-copy {
    position: relative;
    z-index: 3;
    width: min(100%, 920px);
    max-width: 920px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
}
.hero-eyebrow {
    margin-left: auto;
    margin-right: auto;
    color: #dbe5ff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
    backdrop-filter: blur(12px);
}
.marketing-hero h1,
[data-theme="dark"] .marketing-hero h1 {
    max-width: 920px;
    margin: 20px auto;
    color: #fff;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .28);
}
.marketing-hero p,
[data-theme="dark"] .marketing-hero p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    color: #edf3ff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .36);
}
.marketing-hero .hero-actions { justify-content: center; }
.marketing-hero .btn-gold {
    color: #10172b;
    background: #fff;
    border-color: #fff;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}
.marketing-hero .btn-gold:hover { color: #fff; background: var(--db-primary); border-color: var(--db-primary); }
.marketing-hero .btn-outline-dark,
[data-theme="dark"] .marketing-hero .btn-outline-dark {
    color: #fff;
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .55);
    backdrop-filter: blur(10px);
}
.marketing-hero .btn-outline-dark:hover { color: #10172b; background: #fff; border-color: #fff; }
.hero-trust-signals {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
    margin-top: 34px;
    color: #edf3ff;
    font-size: .84rem;
    font-weight: 700;
}
.hero-trust-signals span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust-signals i { color: #9db2ff; }

@media (max-width: 767px) {
    .marketing-hero {
        width: 100% !important;
        max-width: 100% !important;
        min-height: calc(100svh - 62px);
        padding: 64px 18px 52px;
        margin: 0 !important;
    }
    .marketing-hero::before {
        background: linear-gradient(180deg, rgba(4, 13, 29, .58), rgba(4, 13, 29, .78));
    }
    .hero-slide { background-position: center; }
    .marketing-hero h1 {
        max-width: 100%;
        font-size: clamp(2.55rem, 13vw, 4rem);
        line-height: .98;
        overflow-wrap: normal;
        word-break: normal;
    }
    .marketing-hero p { font-size: .98rem; line-height: 1.65; }
    .hero-trust-signals { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 10px; margin-top: 26px; }
}

/* Solace Credit authenticated experience and live market surfaces */
[data-theme="dark"] {
    --db-primary: #f1b744;
    --db-primary-dark: #d99b28;
    --db-gold: #f1b744;
}
[data-theme="dark"] .brand-mark {
    color: #171006;
    background: linear-gradient(145deg, #f1b744, #ffe09a);
    box-shadow: 0 8px 24px rgba(241, 183, 68, .24);
}
[data-theme="dark"] .btn-gold,
[data-theme="dark"] .btn-cyan { color: #171006; background: #f1b744; border-color: #f1b744; box-shadow: 0 10px 24px rgba(241,183,68,.18); }
[data-theme="dark"] .btn-gold:hover,
[data-theme="dark"] .btn-cyan:hover { color: #171006; background: #ffcf68; border-color: #ffcf68; }
[data-theme="dark"] .metric-card i,
[data-theme="dark"] .service-tile > i,
[data-theme="dark"] .service-tile-copy > i,
[data-theme="dark"] .icon-command i { color: #171006; background: #f1b744; }
[data-theme="dark"] .section-kicker { color: #f1b744; background: rgba(241,183,68,.09); border-color: rgba(241,183,68,.25); }
[data-theme="dark"] .desktop-nav > a:hover,
[data-theme="dark"] .nav-dropdown-toggle:hover { color: #f1b744; }

.hero-bank-status {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    width: min(100%, 820px);
    margin: 34px auto 0;
}
.hero-bank-status span {
    display: grid;
    gap: 3px;
    min-height: 96px;
    padding: 14px 15px;
    color: #fff;
    text-align: left;
    background: rgba(7, 19, 39, .46);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px;
    backdrop-filter: blur(12px);
}
.hero-bank-status small { color: #bfcdf0; font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.hero-bank-status b { font-size: 1.12rem; }
.hero-bank-status em { color: #eaf0ff; font-size: .72rem; font-style: normal; }
.hero-trust-signals { margin-top: 18px; }

.market-rates-heading { display: grid; grid-template-columns: 1fr minmax(300px, .75fr); gap: 34px; align-items: end; margin-bottom: 24px; }
.market-rates-heading h2 { margin-bottom: 0; }
.market-rates-heading p { margin: 0; }
.market-ticker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 56px;
    overflow: hidden;
    color: var(--db-text);
    background: var(--db-line);
    border: 1px solid var(--db-line);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(26,45,85,.08);
}
.fx-quote,
.market-updated,
.market-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 14px 18px;
    background: var(--db-surface);
}
.fx-quote .fx-flag { display: grid; place-items: center; width: 34px; height: 34px; color: var(--db-primary); background: color-mix(in srgb, var(--db-primary) 10%, transparent); border-radius: 8px; font-size: .72rem; font-weight: 800; }
.fx-quote span:nth-child(2) { display: grid; flex: 1; }
.fx-quote small,
.market-updated small { color: var(--db-muted); font-size: .68rem; }
.fx-quote strong { font-size: .82rem; }
.fx-quote b { font-size: 1rem; }
.market-updated { color: var(--db-primary); }
.market-updated > span { display: grid; color: var(--db-text); font-size: .75rem; font-weight: 700; }
.customer-market-ticker { margin: 20px 0 26px; grid-template-columns: repeat(3, minmax(180px, 1fr)); }
.chart-canvas-wrap { position: relative; min-height: 330px; }
.market-chart-box .section-heading-row p { margin: 5px 0 0; color: var(--db-muted); font-size: .83rem; }

.investment-experience,
.accounts-experience { max-width: 1320px; margin: 0 auto; }
.investment-heading { margin-bottom: 26px; }
.investment-heading p { max-width: 700px; color: var(--db-muted); }
.investment-balance { display: grid; padding: 14px 18px; background: var(--db-surface); border: 1px solid var(--db-line); border-radius: 8px; box-shadow: 0 12px 28px rgba(26,45,85,.07); }
.investment-balance span { color: var(--db-muted); font-size: .72rem; }
.investment-balance strong { font-size: 1.35rem; }
.investment-market-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); gap: 18px; }
.investment-chart-panel { padding: 22px; }
.market-data-note { color: var(--db-muted); font-size: .7rem; text-align: right; }
.market-opportunity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.market-opportunity { display: grid; align-content: center; min-height: 150px; padding: 18px; background: var(--db-surface); border: 1px solid var(--db-line); border-radius: 8px; box-shadow: 0 10px 28px rgba(26,45,85,.07); }
.market-opportunity span { color: var(--db-primary); font-size: .7rem; font-weight: 800; }
.market-opportunity strong { margin: 5px 0 12px; }
.market-opportunity b { font-size: 1.25rem; }
.market-opportunity em { font-size: .78rem; font-style: normal; font-weight: 750; }
.positive { color: #16a36a; }
.negative { color: #d94b65; }
.market-disclaimer { margin: 14px 0 40px; color: var(--db-muted); font-size: .72rem; }
.subsection-title { margin-bottom: 20px; font: 700 clamp(1.55rem, 3vw, 2.25rem)/1.1 Poppins, sans-serif; }
.investment-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.investment-plan-card { display: flex; flex-direction: column; padding: 24px; }
.investment-plan-card > p { min-height: 54px; color: var(--db-muted); }
.investment-plan-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; color: #fff; background: var(--db-primary); border-radius: 8px; }
.investment-plan-stats { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 8px; margin: auto 0 18px; }
.investment-plan-stats span { font-size: .73rem; font-weight: 700; }
.investment-plan-stats small { display: block; color: var(--db-muted); font-weight: 500; }

.account-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.account-balance-card { padding: 24px; background: var(--db-surface); border: 1px solid var(--db-line); border-radius: 8px; box-shadow: 0 14px 34px rgba(26,45,85,.08); }
.account-balance-card.primary { color: #fff; background: linear-gradient(145deg, #1839cd, #3156e7 62%, #5574ef); border-color: transparent; box-shadow: 0 20px 44px rgba(49,86,231,.25); }
[data-theme="dark"] .account-balance-card.primary { color: #171006; background: linear-gradient(145deg, #b97815, #f1b744 62%, #ffe09a); box-shadow: 0 20px 44px rgba(241,183,68,.2); }
[data-theme="dark"] .account-balance-card.primary > small { color: #4f3510; }
[data-theme="dark"] .account-balance-card.primary .account-number-line { border-color: rgba(23,16,6,.2); }
.account-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.account-icon { display: grid; place-items: center; width: 42px; height: 42px; color: var(--db-primary); background: color-mix(in srgb, var(--db-primary) 10%, var(--db-surface)); border-radius: 8px; }
.primary .account-icon { color: #fff; background: rgba(255,255,255,.16); }
.account-balance-card > small { color: var(--db-muted); }
.account-balance-card.primary > small { color: #cbd6ff; }
.account-balance-card h3 { margin: 6px 0 18px; font-size: 1.05rem; }
.account-balance-card > strong { display: block; margin-bottom: 22px; font-size: 2rem; }
.account-number-line { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; border-top: 1px solid var(--db-line); font-size: .8rem; }
.primary .account-number-line { border-color: rgba(255,255,255,.2); }
.copy-account { color: inherit; background: transparent; border: 0; }
.account-fund-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.account-fund-controls .btn { grid-column: 1 / -1; }
.account-identity-panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 22px; overflow: hidden; background: var(--db-line); border: 1px solid var(--db-line); border-radius: 8px; }
.account-identity-panel div { display: grid; gap: 4px; padding: 18px; background: var(--db-surface); }
.account-identity-panel span { color: var(--db-muted); font-size: .68rem; text-transform: uppercase; }
.account-identity-panel strong { font-size: .85rem; overflow-wrap: anywhere; }

.pin-verification-page .site-footer { display: none; }
.pin-auth-shell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .75fr); min-height: calc(100vh - 76px); background: var(--db-surface); }
.pin-auth-visual { position: relative; display: flex; align-items: end; min-height: 640px; padding: clamp(38px, 7vw, 90px); color: #fff; background-size: cover; background-position: center; }
.pin-auth-visual::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,11,27,.2), rgba(3,11,27,.88)); }
.pin-auth-visual > div { position: relative; z-index: 1; max-width: 620px; }
.pin-auth-visual h1 { margin: 16px 0; font: 700 clamp(3rem, 6vw, 5rem)/.98 Poppins, sans-serif; }
.pin-auth-visual p { max-width: 580px; color: #dce6f6; font-size: 1.05rem; }
.pin-auth-panel { align-self: center; width: min(100%, 520px); padding: clamp(32px, 6vw, 76px); margin: auto; text-align: center; }
.pin-shield { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 22px; color: #fff; background: var(--db-primary); border-radius: 50%; box-shadow: 0 15px 34px color-mix(in srgb, var(--db-primary) 28%, transparent); font-size: 1.45rem; }
.pin-auth-panel h2 { margin: 14px 0 8px; font: 700 clamp(2rem, 4vw, 3rem)/1.05 Poppins, sans-serif; }
.pin-auth-panel > p { color: var(--db-muted); }
.pin-form { margin-top: 28px; text-align: left; }
.pin-input { height: 70px; margin-bottom: 14px; text-align: center; font-size: 2rem; font-weight: 800; letter-spacing: .35em; }
.pin-security-notes { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; color: var(--db-muted); font-size: .72rem; }
.pin-security-notes i { color: var(--db-primary); }
.pin-back-link { display: inline-block; margin-top: 25px; color: var(--db-muted); font-size: .82rem; }

@media (min-width: 1101px) {
    .customer-authenticated .customer-sidebar {
        display: flex;
        flex-direction: column;
        width: 272px;
        padding: 24px 18px;
        color: #eaf0fb;
        background: #071326;
        border-right: 1px solid #172944;
        transform: none !important;
        box-shadow: 18px 0 50px rgba(6,18,39,.10);
    }
    .customer-authenticated .customer-sidebar .brand { margin: 0 0 26px; padding: 0; color: #fff; }
    .customer-authenticated .customer-sidebar .profile-mini { color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
    .customer-authenticated .customer-sidebar .profile-mini span { color: #9eb0ca; }
    .customer-authenticated .customer-sidebar .nav-stack { display: grid; gap: 4px; }
    .customer-authenticated .customer-sidebar .nav-stack a { display: flex; align-items: center; gap: 12px; padding: 11px 13px; color: #aebbd0; border-radius: 7px; font-size: .86rem; font-weight: 650; }
    .customer-authenticated .customer-sidebar .nav-stack a i { width: 18px; color: #8497b4; text-align: center; }
    .customer-authenticated .customer-sidebar .nav-stack a:hover,
    .customer-authenticated .customer-sidebar .nav-stack a.active { color: #fff; background: rgba(49,86,231,.22); }
    [data-theme="dark"] .customer-authenticated .customer-sidebar .nav-stack a:hover,
    [data-theme="dark"] .customer-authenticated .customer-sidebar .nav-stack a.active { color: #171006; background: #f1b744; }
    [data-theme="dark"] .customer-authenticated .customer-sidebar .nav-stack a.active i { color: #171006; }
    .customer-authenticated .customer-sidebar .sidebar-close { display: none; }
    .customer-authenticated .customer-site-header { width: calc(100% - 272px); margin-left: 272px; grid-template-columns: 1fr auto; }
    .customer-authenticated .customer-site-header .desktop-nav { display: none; }
    .customer-authenticated .main-panel { width: calc(100% - 272px); margin-left: 272px !important; }
    .customer-authenticated .site-footer { display: none; }
}
.customer-header-context { display: grid; }
.customer-header-context span { color: var(--db-muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.customer-header-context strong { font-size: 1rem; }
.customer-authenticated .content-wrap { max-width: none; padding: 28px clamp(18px, 3vw, 42px) 70px; }
.customer-authenticated .content-wrap > section:not(.banking-dashboard) { max-width: 1320px; margin: 0 auto; }

@media (max-width: 980px) {
    .hero-bank-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .market-ticker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .investment-market-grid { grid-template-columns: 1fr; }
    .investment-plan-grid,
    .account-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-identity-panel { grid-template-columns: repeat(2, 1fr); }
    .pin-auth-shell { grid-template-columns: 1fr; }
    .pin-auth-visual { min-height: 340px; }
}

@media (max-width: 767px) {
    .hero-bank-status { gap: 7px; margin-top: 26px; }
    .hero-bank-status span { min-height: 82px; padding: 11px; }
    .hero-bank-status b { font-size: 1rem; }
    .hero-bank-status em { font-size: .66rem; }
    .market-rates-heading { grid-template-columns: 1fr; gap: 12px; }
    .market-ticker,
    .customer-market-ticker { grid-template-columns: 1fr; margin-bottom: 32px; }
    .fx-quote,
    .market-updated { min-height: 66px; }
    .investment-heading { align-items: flex-start; flex-direction: column; }
    .investment-balance { width: 100%; }
    .market-opportunity-grid,
    .investment-plan-grid,
    .account-card-grid,
    .account-identity-panel { grid-template-columns: 1fr; }
    .chart-canvas-wrap { min-height: 270px; }
    .pin-auth-visual { min-height: 280px; padding: 28px 20px; }
    .pin-auth-visual h1 { font-size: 2.55rem; }
    .pin-auth-panel { padding: 38px 20px 54px; }
    .pin-input { height: 62px; }
    .customer-header-context strong { display: none; }
    .customer-header-context span { color: var(--db-text); font-size: .9rem; text-transform: none; }
    .customer-authenticated .content-wrap { padding: 18px 14px 54px; }
}

/* Solace Credit narrow-screen guard */
@media (max-width: 767px) {
    .public-site-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding-inline: 14px;
    }
    .public-site-header .desktop-nav { display: none; }
    .public-site-header .site-brand {
        min-width: 0;
        max-width: calc(100vw - 118px);
        overflow: hidden;
    }
    .public-site-header .brand-mobile {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .public-site-header .header-actions {
        min-width: 82px;
        gap: 6px;
    }
    .marketing-hero .hero-copy {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .marketing-hero h1,
    [data-theme="dark"] .marketing-hero h1 {
        width: 100%;
        max-width: 100%;
        font-size: clamp(2.15rem, 10.5vw, 2.75rem);
        line-height: 1;
        overflow-wrap: anywhere;
        word-break: normal;
    }
    .marketing-hero h1 .hero-brand-word {
        display: block;
    }
}

/* Public header controls apply across mobile/tablet browser emulation */
@media (max-width: 900px) {
    body.public-site .public-site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        min-height: 64px !important;
        padding: 10px 14px !important;
        overflow: visible !important;
    }

    body.public-site .public-site-header .desktop-nav,
    body.public-site .public-site-header .header-actions .btn,
    body.public-site .public-site-header .mobile-menu-button {
        display: none !important;
    }

    body.public-site .public-site-header .site-brand {
        min-width: 0 !important;
        max-width: calc(100vw - 122px) !important;
        padding: 0 !important;
    }

    body.public-site .public-site-header .header-actions {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        width: auto !important;
        min-width: 90px !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
    }

    body.public-site .public-site-header [data-theme-toggle],
    body.public-site .public-site-header .public-menu-button {
        position: static !important;
        display: inline-grid !important;
        place-items: center !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        color: #101827 !important;
        background: rgba(255,255,255,.96) !important;
        border: 1px solid rgba(15,23,42,.16) !important;
        border-radius: 11px !important;
        box-shadow: 0 8px 20px rgba(15,23,42,.12) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.public-site .public-site-header .public-menu-button i {
        display: inline-block !important;
    }

    body.public-site .public-site-header .public-menu-button::before,
    body.public-site > .public-floating-menu-button {
        display: none !important;
        content: none !important;
    }

    [data-theme="dark"] body.public-site .public-site-header [data-theme-toggle],
    [data-theme="dark"] body.public-site .public-site-header .public-menu-button {
        color: #f8fafc !important;
        background: rgba(15,23,42,.94) !important;
        border-color: rgba(255,255,255,.16) !important;
    }
}

/* Absolute final override: public nav desktop/mobile and mobile headline */
@media (min-width: 1181px) {
    body.public-site .public-site-header {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        justify-content: normal !important;
    }

    body.public-site .public-site-header > .public-compact-actions {
        display: none !important;
    }

    body.public-site .public-site-header .desktop-nav {
        display: flex !important;
    }

    body.public-site .public-site-header > .header-actions {
        display: inline-flex !important;
    }
}

@media (max-width: 1180px) {
    body.public-site .public-site-header {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        min-height: 64px !important;
        padding: 10px 14px !important;
        overflow: visible !important;
    }

    body.public-site .public-site-header .site-brand {
        flex: 0 1 auto !important;
        max-width: 160px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.public-site .public-site-header > .header-actions,
    body.public-site .public-site-header .desktop-nav {
        display: none !important;
    }

    body.public-site .public-site-header > .public-compact-actions {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.public-site .public-site-header > .public-compact-actions .icon-btn {
        position: static !important;
        display: inline-grid !important;
        place-items: center !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        color: #101827 !important;
        background: rgba(255,255,255,.96) !important;
        border: 1px solid rgba(15,23,42,.16) !important;
        border-radius: 11px !important;
        box-shadow: 0 8px 20px rgba(15,23,42,.12) !important;
    }

    body.public-site .public-site-header > .public-compact-actions .public-menu-button i {
        display: inline-block !important;
    }

    body.public-site .public-site-header > .public-compact-actions .public-menu-button::before {
        content: none !important;
        display: none !important;
    }

    body.public-site .marketing-hero h1 {
        width: min(100%, 340px) !important;
        max-width: 340px !important;
        margin-inline: auto !important;
        font-size: clamp(2.2rem, 11vw, 3.1rem) !important;
        line-height: 1.03 !important;
        overflow-wrap: normal !important;
        text-wrap: balance;
    }
}

/* Cover Chrome mobile emulation layout widths without changing full desktop */
@media (max-width: 1180px) {
    body.public-site .public-site-header .desktop-nav,
    body.public-site .public-site-header .header-actions .btn,
    body.public-site .public-site-header .mobile-menu-button {
        display: none !important;
    }

    body.public-site .public-site-header .header-actions {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.public-site .public-site-header [data-theme-toggle],
    body.public-site .public-site-header .public-menu-button {
        display: grid !important;
        place-items: center !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        color: #101827 !important;
        background: rgba(255,255,255,.96) !important;
        border: 1px solid rgba(15,23,42,.16) !important;
        border-radius: 11px !important;
        box-shadow: 0 8px 20px rgba(15,23,42,.12) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.public-site .public-site-header [data-theme-toggle] {
        position: fixed !important;
        top: 14px !important;
        left: clamp(216px, calc(100vw - 138px), 278px) !important;
        z-index: 3010 !important;
    }

    body.public-site .public-site-header .public-menu-button {
        position: fixed !important;
        top: 14px !important;
        left: clamp(260px, calc(100vw - 92px), 324px) !important;
        z-index: 3011 !important;
    }

    body.public-site .public-site-header .public-menu-button i {
        display: inline-block !important;
    }

    body.public-site .public-site-header .public-menu-button::before,
    body.public-site > .public-floating-menu-button {
        display: none !important;
        content: none !important;
    }
}

/* Keep the public icons inside narrow phone screenshots even with wide layout viewports */
@media (max-width: 900px) {
    body.public-site .public-site-header [data-theme-toggle] {
        position: fixed !important;
        top: 14px !important;
        left: clamp(216px, calc(100vw - 138px), 278px) !important;
        z-index: 3010 !important;
    }

    body.public-site .public-site-header .public-menu-button {
        position: fixed !important;
        top: 14px !important;
        left: clamp(260px, calc(100vw - 92px), 324px) !important;
        z-index: 3011 !important;
    }
}

/* Solace Credit app-style customer banking */
:root {
    --sc-app-bg: #f4f5f7;
    --sc-app-surface: #ffffff;
    --sc-app-text: #14171d;
    --sc-app-muted: #737985;
    --sc-app-line: #e6e9ee;
    --sc-app-primary: #b12a27;
    --sc-app-primary-strong: #8f201e;
    --sc-app-green: #13b981;
    --sc-app-blue: #3156e7;
    --sc-app-pink: #f8e7ea;
    --sc-app-yellow: #fff5d8;
    --sc-app-mint: #ddf7f1;
    --sc-app-shadow: 0 16px 34px rgba(28, 38, 58, .08);
}

.customer-authenticated {
    background: var(--sc-app-bg);
    color: var(--sc-app-text);
    overflow-x: hidden;
}

.customer-authenticated .customer-site-header {
    background: rgba(244,245,247,.92);
    border-bottom: 0;
    box-shadow: none;
    max-width: 100vw;
    overflow: hidden;
}

.customer-authenticated .content-wrap {
    padding-bottom: 108px;
    max-width: 100vw;
    overflow-x: hidden;
}

.mobile-bank-ui {
    width: min(100%, 980px);
    max-width: 100%;
    margin: 0 auto;
    color: var(--sc-app-text);
    overflow-x: hidden;
}

.mobile-bank-ui a {
    text-decoration: none;
}

.mobile-bank-top,
.app-page-title,
.section-row-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.customer-greeting {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.customer-greeting span,
.customer-greeting small {
    display: block;
    color: var(--sc-app-muted);
    font-size: .82rem;
    font-weight: 650;
}

.customer-greeting strong {
    display: block;
    max-width: min(62vw, 520px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.08rem;
}

.customer-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, var(--sc-app-primary), #db6d4a);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: var(--sc-app-shadow);
    font-weight: 800;
}

.customer-avatar.large {
    width: 82px;
    height: 82px;
    font-size: 1.5rem;
}

.customer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top-icon-cluster {
    display: flex;
    gap: 10px;
}

.round-icon,
.pill-icon-button {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #151821;
    background: #fff;
    border: 1px solid rgba(20,23,29,.06);
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(25,32,48,.08);
}

.pill-icon-button {
    width: 72px;
    border-radius: 999px;
    border: 0;
    color: #fff;
    background: #111;
}

.wallet-hero-card {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    min-height: 178px;
    padding: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(255,255,255,.18), transparent 24%),
        linear-gradient(135deg, var(--sc-app-primary), #ef315f 58%, #f09a23);
    border-radius: 8px;
    box-shadow: 0 18px 38px rgba(177,42,39,.22);
}

.wallet-hero-card span,
.wallet-hero-card small,
.wallet-hero-card a {
    color: rgba(255,255,255,.86);
}

.wallet-hero-card strong {
    display: block;
    margin: 18px 0 8px;
    font-size: clamp(2rem, 6vw, 3.1rem);
    line-height: 1;
}

.wallet-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}

.wallet-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    color: #181b22 !important;
    background: #fff;
    border-radius: 999px;
    font-weight: 800;
}

.app-action-row,
.app-action-grid {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.app-action-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 18px;
    background: var(--sc-app-surface);
    border-radius: 8px;
    box-shadow: var(--sc-app-shadow);
}

.app-action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 18px;
    background: var(--sc-app-surface);
    border-radius: 8px;
}

.app-action-row a,
.app-action-row button,
.app-action-grid a {
    display: grid;
    justify-items: center;
    gap: 8px;
    min-width: 0;
    color: #323743;
    background: transparent;
    border: 0;
    font: inherit;
    font-weight: 700;
}

.app-action-row i,
.app-action-grid i {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--sc-app-primary);
    background: #f8e7ea;
    border-radius: 8px;
    font-size: 1.05rem;
}

.app-action-grid a:nth-child(2) i { color: #1761a7; background: #e0f2ff; }
.app-action-grid a:nth-child(3) i { color: #0d8d67; background: #ddf7f1; }
.app-action-grid a:nth-child(4) i { color: #9b6a04; background: #fff5d8; }
.app-action-grid a:nth-child(5) i { color: #5c4fd6; background: #ece9ff; }
.app-action-grid a:nth-child(6) i { color: #058464; background: #e5fbf1; }
.app-action-grid a:nth-child(7) i { color: #b12a27; background: #f8e7ea; }
.app-action-grid a:nth-child(8) i { color: #383d47; background: #eef0f4; }

.app-action-row span,
.app-action-grid span {
    width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
    font-size: .84rem;
}

.dashboard-image-strip {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 12px;
    margin: 22px 0;
}

.dashboard-image-strip a {
    position: relative;
    min-height: 150px;
    overflow: hidden;
    color: #fff;
    background-position: center;
    background-size: cover;
    border-radius: 8px;
    box-shadow: var(--sc-app-shadow);
}

.dashboard-image-strip a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.58));
}

.dashboard-image-strip span {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 1;
    font-weight: 800;
}

.verification-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0 28px;
    padding: 20px;
    color: var(--sc-app-text);
    background: var(--sc-app-surface);
    border-radius: 8px;
    box-shadow: var(--sc-app-shadow);
}

.verification-card span {
    display: grid;
    gap: 6px;
}

.verification-card small {
    color: var(--sc-app-muted);
}

.verification-card strong {
    flex: 0 0 auto;
    padding: 12px 18px;
    color: #fff;
    background: var(--sc-app-primary);
    border-radius: 7px;
}

.section-row-title h2,
.app-page-title h1,
.profile-section-label {
    margin: 0;
    font: 800 clamp(1.45rem, 4vw, 2.2rem)/1.1 Poppins, Inter, sans-serif;
    letter-spacing: 0;
}

.section-row-title a {
    color: var(--sc-app-muted);
    font-weight: 750;
}

.transaction-list {
    display: grid;
    gap: 10px;
}

.transaction-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 12px;
    color: var(--sc-app-text);
    background: var(--sc-app-surface);
    border-radius: 8px;
}

.transaction-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--sc-app-green);
    background: #e8fbf5;
    border-radius: 50%;
}

.transaction-item b,
.transaction-item small {
    display: block;
}

.transaction-item b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transaction-item small {
    color: var(--sc-app-muted);
}

.transaction-item strong {
    color: var(--sc-app-green);
    text-align: right;
    white-space: nowrap;
}

.empty-state-card,
.app-form-panel,
.profile-identity-card,
.profile-level-card,
.settings-list,
.app-card-control {
    background: var(--sc-app-surface);
    border: 1px solid rgba(20,23,29,.05);
    border-radius: 8px;
    box-shadow: var(--sc-app-shadow);
}

.empty-state-card {
    padding: 30px 18px;
    color: var(--sc-app-muted);
    text-align: center;
}

.customer-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 76px;
    padding: 8px max(12px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
    background: rgba(255,255,255,.96);
    border-top: 1px solid var(--sc-app-line);
    box-shadow: 0 -12px 28px rgba(29,36,52,.08);
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

.customer-bottom-nav a {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    min-width: 0;
    color: #717782;
    font-weight: 800;
    font-size: .76rem;
}

.customer-bottom-nav i {
    font-size: 1.22rem;
}

.customer-bottom-nav a.active {
    color: var(--sc-app-primary);
}

.card-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 24px;
    overflow: hidden;
    background: #eceeef;
    border-radius: 8px;
}

.card-tabs span {
    display: grid;
    place-items: center;
    min-height: 64px;
    color: #707681;
    font-weight: 800;
}

.card-tabs .active {
    color: #151821;
    background: #fff;
}

.app-card-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 230px;
    padding: 24px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 85% 15%, transparent 0 34px, rgba(255,255,255,.18) 35px 42px, transparent 43px),
        linear-gradient(145deg, #111, #252525);
    border-radius: 8px;
    box-shadow: 0 18px 38px rgba(0,0,0,.18);
}

.app-card-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 220px;
    height: 220px;
    border: 36px solid rgba(177,42,39,.82);
    border-radius: 50%;
}

.app-card-brand,
.app-card-hero div,
.app-card-hero strong,
.app-card-hero em {
    position: relative;
    z-index: 1;
}

.app-card-hero strong {
    font-size: 2.4rem;
}

.app-card-hero span,
.app-card-hero small {
    display: block;
}

.app-card-hero em {
    align-self: flex-end;
    font-style: normal;
    font-weight: 800;
}

.card-logo-dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
    background: var(--sc-app-primary);
    border-radius: 6px;
}

.card-action-row {
    margin-bottom: 18px;
}

.card-action-row form,
.card-action-row button {
    width: 100%;
}

.app-form-panel {
    padding: 18px;
    margin-bottom: 18px;
}

.toggle-line {
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 700;
}

.cards-stack {
    display: grid;
    gap: 12px;
    margin: 18px 0 28px;
}

.app-card-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    padding: 18px;
}

.app-card-control small {
    display: block;
    color: var(--sc-app-muted);
}

.app-card-control > strong {
    color: var(--sc-app-primary);
}

.app-card-control .card-fund-form {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.profile-identity-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 24px;
}

.profile-identity-card strong,
.profile-identity-card span,
.profile-identity-card small {
    display: block;
}

.profile-identity-card strong {
    font-size: clamp(1.2rem, 3vw, 1.7rem);
}

.profile-identity-card span,
.profile-identity-card small {
    color: var(--sc-app-muted);
}

.profile-identity-card a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--sc-app-primary);
    background: #f8e7ea;
    border-radius: 50%;
}

.profile-level-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 14px 0 28px;
    padding: 14px 16px;
    background: #f1e1e4;
}

.profile-level-card span {
    font-weight: 800;
}

.profile-level-card i {
    color: #f3a300;
}

.profile-level-card a {
    padding: 10px 16px;
    color: var(--sc-app-primary);
    background: #fff;
    border-radius: 7px;
    font-weight: 800;
}

.profile-section-label {
    margin: 28px 0 12px;
    color: #727985;
    font-size: clamp(1.1rem, 3vw, 1.35rem);
    font-weight: 650;
}

.settings-list {
    display: grid;
    overflow: hidden;
}

.settings-list a,
.settings-list .setting-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 12px 18px;
    color: var(--sc-app-text);
}

.settings-list i:first-child {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #111;
    background: #f3f4f6;
    border-radius: 50%;
}

.settings-list em {
    color: #b1b6bf;
    font-size: .8rem;
    font-style: normal;
}

.settings-list span {
    display: grid;
    gap: 2px;
    font-weight: 750;
}

.settings-list small {
    color: var(--sc-app-muted);
    overflow-wrap: anywhere;
    font-weight: 550;
}

.profile-detail-drawer {
    margin-top: 22px;
    padding: 16px 18px;
    background: #fff;
    border-radius: 8px;
}

.profile-detail-drawer summary {
    cursor: pointer;
    font-weight: 800;
}

.profile-detail-drawer p {
    display: grid;
    gap: 3px;
    margin: 14px 0 0;
}

.profile-detail-drawer span {
    color: var(--sc-app-muted);
}

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

.accounts-app-page .settings-list a[href="#"] {
    cursor: default;
}

@media (min-width: 1101px) {
    .customer-bottom-nav {
        left: 272px;
    }
}

@media (max-width: 820px) {
    body.customer-authenticated,
    .customer-authenticated .main-panel {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .customer-authenticated .customer-site-header {
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
        max-width: 100vw;
        margin-left: 0;
    }

    .customer-authenticated .customer-header-context {
        min-width: 0;
        overflow: hidden;
    }

    .customer-authenticated .header-actions {
        flex: 0 0 auto;
        min-width: 0;
    }

    .customer-authenticated .site-footer {
        display: none;
    }

    .customer-authenticated .customer-site-header {
        min-height: 58px;
        padding: 8px 14px;
    }

    .customer-authenticated .header-actions .btn {
        display: none;
    }

    .customer-authenticated .header-actions [data-theme-toggle] {
        display: inline-grid;
    }

    .customer-authenticated .mobile-menu-button {
        display: inline-grid;
    }

    .mobile-bank-ui {
        width: 100%;
        max-width: 100%;
    }

    .wallet-hero-card {
        flex-direction: column;
        min-height: 166px;
        padding: 20px;
    }

    .wallet-hero-actions {
        flex-direction: row;
        align-items: center;
    }

    .app-action-row,
    .app-action-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 16px 10px;
    }

    .app-action-row i,
    .app-action-grid i {
        width: 44px;
        height: 44px;
    }

    .dashboard-image-strip {
        display: flex;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x mandatory;
    }

    .dashboard-image-strip a {
        flex: 0 0 78%;
        min-height: 132px;
        scroll-snap-align: start;
    }

    .verification-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .transaction-item {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .app-account-grid,
    .account-card-grid {
        grid-template-columns: 1fr;
    }

    .app-card-control {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-card-control > strong {
        justify-self: start;
    }
}

@media (max-width: 480px) {
    .customer-authenticated .content-wrap {
        padding: 14px 12px 104px;
    }

    .app-action-row span,
    .app-action-grid span,
    .customer-bottom-nav span {
        font-size: .72rem;
    }

    .app-action-row i,
    .app-action-grid i {
        width: 40px;
        height: 40px;
    }

    .customer-bottom-nav {
        min-height: 72px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding-left: 4px;
        padding-right: 4px;
    }

    .transaction-item {
        min-height: 72px;
        padding: 10px 8px;
    }

    .transaction-icon {
        width: 42px;
        height: 42px;
    }

    .transaction-item strong {
        font-size: .86rem;
    }

    .profile-identity-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .profile-identity-card a {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

/* Solace Credit premium banking refinement */
:root {
    --sc-app-bg: #f4f7f8;
    --sc-app-surface: #ffffff;
    --sc-app-text: #10141d;
    --sc-app-muted: #667080;
    --sc-app-line: #e1e7eb;
    --sc-app-primary: #12b981;
    --sc-app-primary-strong: #0a8e68;
    --sc-app-secondary: #b4272d;
    --sc-app-accent: #f4b53f;
    --sc-app-blue: #235be8;
    --sc-app-green: #12b981;
    --sc-app-pink: #fce8ec;
    --sc-app-yellow: #fff4d7;
    --sc-app-mint: #ddf8ef;
    --sc-app-shadow: 0 18px 44px rgba(17, 42, 58, .10);
    --sc-card-sheen: rgba(255,255,255,.62);
    --sc-card-ink: #131722;
}

[data-theme="dark"] {
    --sc-app-bg: #080a0f;
    --sc-app-surface: #11151d;
    --sc-app-text: #f5f7fb;
    --sc-app-muted: #9ba7b8;
    --sc-app-line: #242b36;
    --sc-app-primary: #17d194;
    --sc-app-primary-strong: #0fb17c;
    --sc-app-secondary: #ff4b63;
    --sc-app-accent: #f5b84b;
    --sc-app-blue: #7a91ff;
    --sc-app-green: #17d194;
    --sc-app-pink: rgba(255,75,99,.14);
    --sc-app-yellow: rgba(245,184,75,.16);
    --sc-app-mint: rgba(23,209,148,.14);
    --sc-app-shadow: 0 22px 54px rgba(0,0,0,.44);
    --sc-card-sheen: rgba(255,255,255,.14);
    --sc-card-ink: #f5f7fb;
}

[data-theme="dark"] body.customer-authenticated,
[data-theme="dark"] .customer-authenticated {
    background:
        radial-gradient(circle at 18% -10%, rgba(23,209,148,.16), transparent 32%),
        radial-gradient(circle at 88% 4%, rgba(255,75,99,.12), transparent 28%),
        linear-gradient(180deg, #080a0f 0%, #10131a 52%, #07090e 100%);
    color: var(--sc-app-text);
}

[data-theme="dark"] .customer-authenticated .customer-site-header,
[data-theme="dark"] .customer-bottom-nav {
    background: rgba(11, 14, 20, .88);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 -16px 34px rgba(0,0,0,.34);
}

[data-theme="dark"] .customer-authenticated .customer-site-header {
    box-shadow: 0 14px 34px rgba(0,0,0,.26);
}

[data-theme="dark"] .round-icon,
[data-theme="dark"] .pill-icon-button,
[data-theme="dark"] .empty-state-card,
[data-theme="dark"] .app-form-panel,
[data-theme="dark"] .profile-identity-card,
[data-theme="dark"] .profile-level-card,
[data-theme="dark"] .settings-list,
[data-theme="dark"] .app-card-control,
[data-theme="dark"] .app-action-row,
[data-theme="dark"] .app-action-grid,
[data-theme="dark"] .verification-card,
[data-theme="dark"] .transaction-item,
[data-theme="dark"] .card-tabs,
[data-theme="dark"] .account-balance-card,
[data-theme="dark"] .form-shell,
[data-theme="dark"] .glass {
    color: var(--sc-app-text);
    background: color-mix(in srgb, var(--sc-app-surface) 94%, transparent);
    border-color: rgba(255,255,255,.08);
}

[data-theme="dark"] .card-tabs .active,
[data-theme="dark"] .profile-level-card a,
[data-theme="dark"] .wallet-pill {
    color: #08100d !important;
    background: linear-gradient(135deg, #eafff5, #aef7db);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    color: var(--sc-app-text);
    background: #0d1118;
    border-color: #2a3342;
}

[data-theme="dark"] .form-control::placeholder {
    color: #758295;
}

[data-theme="dark"] .app-action-row a,
[data-theme="dark"] .app-action-row button,
[data-theme="dark"] .app-action-grid a,
[data-theme="dark"] .customer-bottom-nav a {
    color: #9da8ba;
}

[data-theme="dark"] .app-action-row a:hover,
[data-theme="dark"] .app-action-row button:hover,
[data-theme="dark"] .app-action-grid a:hover {
    color: #f5f7fb;
}

[data-theme="dark"] .section-row-title h2,
[data-theme="dark"] .app-page-title h1,
[data-theme="dark"] .profile-section-label {
    color: #f5f7fb;
}

.wallet-hero-card {
    background:
        radial-gradient(circle at 12% 15%, rgba(255,255,255,.34), transparent 17%),
        radial-gradient(circle at 78% 20%, rgba(255,255,255,.26), transparent 18%),
        linear-gradient(135deg, #10b981 0%, #18c7ac 34%, #b4272d 67%, #f4b53f 100%);
    box-shadow: 0 22px 54px rgba(16,185,129,.18), 0 16px 36px rgba(180,39,45,.14);
}

[data-theme="dark"] .wallet-hero-card {
    background:
        radial-gradient(circle at 12% 15%, rgba(255,255,255,.14), transparent 18%),
        radial-gradient(circle at 82% 18%, rgba(23,209,148,.28), transparent 22%),
        linear-gradient(135deg, #11161e 0%, #151a24 42%, #6d1720 72%, #c78922 100%);
    box-shadow: 0 24px 64px rgba(0,0,0,.48), 0 14px 40px rgba(23,209,148,.09);
}

.app-action-row i,
.app-action-grid i {
    color: var(--sc-app-primary-strong);
    background: linear-gradient(145deg, rgba(18,185,129,.14), rgba(18,199,172,.09));
}

.app-action-row a:hover i,
.app-action-row button:hover i,
.app-action-grid a:hover i {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(18,185,129,.18);
}

.customer-bottom-nav a,
.customer-bottom-nav a:hover,
.customer-bottom-nav a:focus,
.customer-bottom-nav span {
    text-decoration: none !important;
}

.customer-bottom-nav {
    padding-top: 9px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(22px);
}

.customer-bottom-nav a {
    position: relative;
    border-radius: 18px;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

.customer-bottom-nav a i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 30px;
    border-radius: 999px;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.customer-bottom-nav a:hover {
    color: var(--sc-app-primary-strong);
    background: rgba(18,185,129,.08);
    transform: translateY(-2px);
}

.customer-bottom-nav a.active {
    color: var(--sc-app-secondary);
}

.customer-bottom-nav a.active i {
    color: #fff;
    background: linear-gradient(135deg, var(--sc-app-secondary), #f05f54);
    box-shadow: 0 12px 22px rgba(180,39,45,.28);
}

[data-theme="dark"] .customer-bottom-nav a:hover {
    color: var(--sc-app-primary);
    background: rgba(23,209,148,.10);
}

[data-theme="dark"] .customer-bottom-nav a.active {
    color: #f7f9fb;
}

[data-theme="dark"] .customer-bottom-nav a.active i {
    background: linear-gradient(135deg, var(--sc-app-primary), #177dff);
    box-shadow: 0 14px 28px rgba(23,209,148,.26);
}

.app-card-hero,
.account-balance-card.primary,
.account-balance-card {
    isolation: isolate;
}

.app-card-hero {
    min-height: 252px;
    color: #fff;
    background:
        linear-gradient(115deg, rgba(255,255,255,.14), transparent 28%),
        radial-gradient(circle at 82% 10%, rgba(255,255,255,.28) 0 36px, transparent 37px),
        radial-gradient(circle at 92% 86%, rgba(180,39,45,.72) 0 92px, transparent 94px),
        linear-gradient(145deg, #11151d, #242935 54%, #0f1219);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: 0 26px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16);
}

.app-card-hero::before,
.account-balance-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg, transparent 0 38%, rgba(255,255,255,.12) 42%, transparent 48%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px);
    pointer-events: none;
}

.app-card-hero::after {
    border-color: rgba(180,39,45,.88);
    box-shadow: 0 0 0 18px rgba(255,255,255,.05);
}

.bank-card-chip,
.card-logo-dot {
    background: linear-gradient(145deg, #ffe79c, #b88620 48%, #ffe7a5);
    box-shadow: inset 0 0 0 1px rgba(90,56,0,.18);
}

.account-balance-card {
    position: relative;
    overflow: hidden;
    color: var(--sc-card-ink);
    background:
        linear-gradient(115deg, rgba(255,255,255,.64), rgba(255,255,255,.08) 42%, transparent),
        linear-gradient(145deg, #f7fafc, #e8eef5 62%, #d7e0ea);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 22px 48px rgba(28,43,68,.14), inset 0 1px 0 rgba(255,255,255,.9);
}

.account-balance-card.primary {
    color: #fff;
    background:
        radial-gradient(circle at 12% 12%, rgba(255,255,255,.18), transparent 18%),
        radial-gradient(circle at 90% 24%, rgba(18,185,129,.36), transparent 24%),
        linear-gradient(145deg, #133fcf, #235be8 48%, #0da978);
    border-color: rgba(255,255,255,.18);
}

[data-theme="dark"] .account-balance-card {
    color: var(--sc-app-text);
    background:
        linear-gradient(115deg, rgba(255,255,255,.10), transparent 42%),
        linear-gradient(145deg, #171c26, #0e121a 62%, #1f2430);
    border-color: rgba(255,255,255,.08);
}

[data-theme="dark"] .account-balance-card.primary {
    color: #fff;
    background:
        radial-gradient(circle at 12% 12%, rgba(255,255,255,.14), transparent 18%),
        radial-gradient(circle at 88% 18%, rgba(23,209,148,.26), transparent 25%),
        linear-gradient(145deg, #11161e, #26304f 50%, #5e1821);
}

.function-hero-page,
.customer-authenticated .content-wrap > section:has(.form-shell),
.customer-authenticated .content-wrap > .form-shell {
    position: relative;
    isolation: isolate;
    min-height: calc(100vh - 170px);
    padding: clamp(18px, 3vw, 28px);
    overflow: hidden;
    border-radius: 14px;
}

.function-hero-page::before,
.customer-authenticated .content-wrap > section:has(.form-shell)::before,
.customer-authenticated .content-wrap > .form-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 10% 18%, rgba(18,185,129,.24), transparent 24%),
        radial-gradient(circle at 88% 10%, rgba(180,39,45,.18), transparent 28%),
        radial-gradient(circle at 72% 80%, rgba(244,181,63,.20), transparent 26%),
        linear-gradient(145deg, rgba(255,255,255,.82), rgba(240,246,249,.86));
}

.function-hero-page::after,
.customer-authenticated .content-wrap > section:has(.form-shell)::after,
.customer-authenticated .content-wrap > .form-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(115deg, transparent 0 58%, rgba(255,255,255,.42) 59%, transparent 70%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0 1px, transparent 1px 15px);
    opacity: .9;
    pointer-events: none;
}

[data-theme="dark"] .function-hero-page::before,
[data-theme="dark"] .customer-authenticated .content-wrap > section:has(.form-shell)::before,
[data-theme="dark"] .customer-authenticated .content-wrap > .form-shell::before {
    background:
        radial-gradient(circle at 10% 18%, rgba(23,209,148,.18), transparent 26%),
        radial-gradient(circle at 88% 10%, rgba(255,75,99,.16), transparent 30%),
        radial-gradient(circle at 72% 80%, rgba(245,184,75,.14), transparent 28%),
        linear-gradient(145deg, rgba(11,14,20,.98), rgba(18,22,31,.96));
}

[data-theme="dark"] .function-hero-page::after,
[data-theme="dark"] .customer-authenticated .content-wrap > section:has(.form-shell)::after,
[data-theme="dark"] .customer-authenticated .content-wrap > .form-shell::after {
    background:
        linear-gradient(115deg, transparent 0 58%, rgba(255,255,255,.06) 59%, transparent 70%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 15px);
}

.function-hero-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
    padding: clamp(22px, 4vw, 34px);
    color: #fff;
    background:
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.18), transparent 22%),
        linear-gradient(135deg, #10141d, #1f2937 50%, #0f8f6a);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    box-shadow: 0 26px 64px rgba(14,28,44,.26);
}

.function-hero-card span {
    color: #bffbe6;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.function-hero-card h2 {
    max-width: 680px;
    margin: 12px 0 10px;
    font: 800 clamp(2rem, 6vw, 3.5rem)/.98 Poppins, Inter, sans-serif;
    letter-spacing: 0;
}

.function-hero-card p {
    max-width: 640px;
    color: rgba(255,255,255,.78);
}

.function-balance-chip {
    display: inline-grid;
    gap: 2px;
    min-width: 190px;
    margin-top: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    backdrop-filter: blur(16px);
}

.transfer-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.transfer-choice-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 170px;
    padding: 22px;
    color: var(--sc-app-text);
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 14px;
    box-shadow: var(--sc-app-shadow);
    backdrop-filter: blur(18px);
    transition: transform .18s ease, box-shadow .18s ease;
}

.transfer-choice-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 64px rgba(17,42,58,.16);
}

.choice-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    color: #fff;
    background: linear-gradient(145deg, var(--sc-app-primary), #13c7ac);
    border-radius: 16px;
    box-shadow: 0 14px 26px rgba(18,185,129,.24);
}

.global-wire .choice-icon {
    background: linear-gradient(145deg, var(--sc-app-secondary), #f4b53f);
    box-shadow: 0 14px 26px rgba(180,39,45,.22);
}

.choice-copy {
    display: grid;
    gap: 7px;
}

.choice-copy b {
    font-size: 1.15rem;
}

.choice-copy small {
    color: var(--sc-app-muted);
    line-height: 1.55;
}

.transfer-choice-card em {
    color: var(--sc-app-muted);
    font-style: normal;
}

[data-theme="dark"] .function-hero-card {
    background:
        radial-gradient(circle at 82% 18%, rgba(23,209,148,.22), transparent 24%),
        linear-gradient(135deg, #07090e, #171d29 54%, #331219);
}

[data-theme="dark"] .transfer-choice-card {
    color: var(--sc-app-text);
    background: rgba(17,21,29,.88);
    border-color: rgba(255,255,255,.08);
}

@media (max-width: 760px) {
    .transfer-choice-grid {
        grid-template-columns: 1fr;
    }

    .transfer-choice-card {
        min-height: 142px;
        padding: 18px;
    }
}

/* Real-card inspired Solace Credit top cards */
.wallet-hero-card,
.function-hero-card,
.app-card-hero,
.account-balance-card.primary,
.profile-identity-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.24);
    box-shadow:
        0 26px 64px rgba(10, 24, 43, .20),
        inset 0 1px 0 rgba(255,255,255,.22);
}

.wallet-hero-card,
.function-hero-card,
.account-balance-card.primary {
    color: #fff;
    background:
        linear-gradient(118deg, rgba(255,255,255,.18), transparent 23%),
        radial-gradient(circle at 86% 18%, rgba(255,255,255,.18) 0 40px, transparent 42px),
        radial-gradient(circle at 16% 82%, rgba(0,0,0,.34), transparent 34%),
        linear-gradient(135deg, #06233f 0%, #0f6ccf 34%, #0fb786 62%, #101827 100%);
}

.wallet-hero-card {
    background:
        linear-gradient(118deg, rgba(255,255,255,.22), transparent 26%),
        radial-gradient(circle at 86% 18%, rgba(255,255,255,.18) 0 40px, transparent 42px),
        radial-gradient(circle at 18% 86%, rgba(0,0,0,.30), transparent 34%),
        linear-gradient(135deg, #073b6d 0%, #0f85df 30%, #18c6a9 58%, #b4272d 82%, #f4b53f 100%);
}

.function-hero-card {
    background:
        linear-gradient(118deg, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 86% 18%, rgba(255,255,255,.14) 0 40px, transparent 42px),
        radial-gradient(circle at 14% 80%, rgba(0,0,0,.36), transparent 34%),
        linear-gradient(135deg, #071525 0%, #163155 33%, #0d8d70 68%, #111827 100%);
}

.account-balance-card.primary {
    background:
        linear-gradient(118deg, rgba(255,255,255,.18), transparent 24%),
        radial-gradient(circle at 86% 18%, rgba(255,255,255,.15) 0 38px, transparent 40px),
        radial-gradient(circle at 18% 82%, rgba(0,0,0,.26), transparent 34%),
        linear-gradient(135deg, #063a86 0%, #176ee7 42%, #19b997 100%);
}

.app-card-hero {
    background:
        linear-gradient(118deg, rgba(255,255,255,.13), transparent 24%),
        radial-gradient(circle at 84% 16%, rgba(255,255,255,.18) 0 42px, transparent 44px),
        radial-gradient(circle at 96% 88%, rgba(196,36,43,.78) 0 96px, transparent 98px),
        linear-gradient(135deg, #101727 0%, #232b39 48%, #11141c 100%);
}

.profile-identity-card {
    min-height: 220px;
    padding: 72px 24px 24px;
    color: #fff;
    background:
        linear-gradient(118deg, rgba(255,255,255,.18), transparent 23%),
        radial-gradient(circle at 86% 18%, rgba(255,255,255,.18) 0 42px, transparent 44px),
        radial-gradient(circle at 16% 88%, rgba(0,0,0,.32), transparent 34%),
        linear-gradient(135deg, #0b3159 0%, #0f74d1 40%, #0fb981 100%);
}

.wallet-hero-card::before,
.function-hero-card::before,
.app-card-hero::before,
.account-balance-card.primary::before,
.profile-identity-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg, transparent 0 38%, rgba(255,255,255,.16) 43%, transparent 50%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 8px),
        radial-gradient(ellipse at 30% 28%, rgba(255,255,255,.08), transparent 32%);
    pointer-events: none;
}

.wallet-hero-card::after,
.function-hero-card::after,
.account-balance-card.primary::after,
.profile-identity-card::after {
    content: "Solace Credit";
    position: absolute;
    top: 20px;
    right: 22px;
    z-index: 2;
    color: rgba(255,255,255,.92);
    font: 800 .9rem/1 Poppins, Inter, sans-serif;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.app-card-hero::after {
    content: "";
    position: absolute;
    right: -74px;
    bottom: -88px;
    width: 224px;
    height: 224px;
    border: 36px solid rgba(196,36,43,.86);
    border-radius: 50%;
    box-shadow: 0 0 0 20px rgba(255,255,255,.055);
}

.wallet-hero-card > div:first-child::before,
.function-hero-card > span:first-child::before,
.account-balance-card.primary .account-card-head::before,
.app-card-brand::before {
    content: "";
    display: block;
    width: 48px;
    height: 36px;
    margin-bottom: 18px;
    border-radius: 8px;
    background:
        linear-gradient(90deg, transparent 30%, rgba(87,55,0,.28) 31% 34%, transparent 35% 64%, rgba(87,55,0,.28) 65% 68%, transparent 69%),
        linear-gradient(145deg, #fff0a8, #c89825 48%, #ffe9a5);
    box-shadow: inset 0 0 0 1px rgba(65,42,0,.24), 0 8px 18px rgba(0,0,0,.14);
}

.function-hero-card > span:first-child::before {
    margin-bottom: 14px;
}

.app-card-brand::before {
    width: 28px;
    height: 22px;
    margin: 0 8px 0 0;
}

.app-card-brand {
    display: flex;
    align-items: center;
}

.card-logo-dot {
    display: none !important;
}

.app-card-brand .card-logo-dot {
    display: none !important;
}

.profile-identity-card::after {
    display: none;
}

.wallet-hero-card small,
.account-balance-card.primary small,
.profile-identity-card small {
    color: rgba(255,255,255,.78);
}

.profile-identity-card .customer-avatar {
    border-color: rgba(255,255,255,.84);
    box-shadow: 0 18px 34px rgba(0,0,0,.22);
}

.profile-identity-card strong,
.profile-identity-card span,
.profile-identity-card small {
    color: #fff;
}

.profile-identity-card > a {
    color: #102034;
    background: rgba(255,255,255,.86);
}

.solace-card-chip {
    position: absolute;
    left: 24px;
    top: 22px;
    width: 48px;
    height: 36px;
    border-radius: 8px;
    background:
        linear-gradient(90deg, transparent 30%, rgba(87,55,0,.28) 31% 34%, transparent 35% 64%, rgba(87,55,0,.28) 65% 68%, transparent 69%),
        linear-gradient(145deg, #fff0a8, #c89825 48%, #ffe9a5);
    box-shadow: inset 0 0 0 1px rgba(65,42,0,.24), 0 8px 18px rgba(0,0,0,.14);
}

.solace-card-bank {
    position: absolute;
    right: 22px;
    top: 24px;
    color: rgba(255,255,255,.92) !important;
    font: 800 .92rem/1 Poppins, Inter, sans-serif;
    text-transform: uppercase;
}

.solace-card-number {
    grid-column: 1 / -1;
    margin-top: 12px;
    color: rgba(255,255,255,.92) !important;
    font: 700 clamp(1rem, 4vw, 1.35rem)/1.1 "Courier New", monospace;
    letter-spacing: .08em;
    text-shadow: 0 2px 6px rgba(0,0,0,.24);
}

[data-theme="dark"] .wallet-hero-card,
[data-theme="dark"] .function-hero-card,
[data-theme="dark"] .account-balance-card.primary,
[data-theme="dark"] .profile-identity-card {
    background:
        linear-gradient(118deg, rgba(255,255,255,.10), transparent 24%),
        radial-gradient(circle at 86% 18%, rgba(255,255,255,.12) 0 40px, transparent 42px),
        radial-gradient(circle at 14% 82%, rgba(0,0,0,.46), transparent 34%),
        linear-gradient(135deg, #070b13 0%, #151d2a 42%, #093d38 70%, #55151c 100%);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 28px 72px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.10);
}

[data-theme="dark"] .app-card-hero {
    background:
        linear-gradient(118deg, rgba(255,255,255,.10), transparent 24%),
        radial-gradient(circle at 84% 16%, rgba(255,255,255,.14) 0 42px, transparent 44px),
        radial-gradient(circle at 96% 88%, rgba(196,36,43,.72) 0 96px, transparent 98px),
        linear-gradient(135deg, #0b1019 0%, #202633 48%, #090d14 100%);
}

/* Recent transaction icon fallback: visible even before webfont icons load */
.transaction-icon {
    position: relative;
    overflow: hidden;
}

.transaction-icon i {
    position: relative;
    z-index: 2;
}

.transaction-icon::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 16px;
    width: 15px;
    height: 15px;
    border-left: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(-45deg);
    opacity: .95;
}

.transaction-icon::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 14px;
    width: 3px;
    height: 21px;
    background: currentColor;
    border-radius: 999px;
    transform: rotate(45deg);
    opacity: .95;
}

[data-theme="dark"] .transaction-icon {
    color: #18d69a;
    background: rgba(24,214,154,.14);
}

@media (max-width: 520px) {
    .profile-identity-card {
        grid-template-columns: auto minmax(0, 1fr);
        padding-top: 76px;
    }

    .solace-card-number {
        font-size: .98rem;
        letter-spacing: .04em;
    }
}

/* Final upload polish: fixed public header, true card proportions, admin mobile command surfaces */
.public-site {
    --public-header-height: 76px;
}

.public-site .public-site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1080;
}

.public-site .main-panel {
    padding-top: var(--public-header-height);
    min-height: 100vh;
}

.public-site .mobile-drawer.open {
    z-index: 1090;
}

.public-site .sidebar-backdrop.open {
    z-index: 1085;
}

.mobile-bank-ui .wallet-hero-card,
.mobile-bank-ui .function-hero-card,
.mobile-bank-ui .app-card-hero,
.mobile-bank-ui .account-balance-card.primary,
.mobile-bank-ui .profile-identity-card {
    aspect-ratio: 85.6 / 53.98;
    min-height: 0 !important;
    max-width: 560px;
}

.mobile-bank-ui .wallet-hero-card,
.mobile-bank-ui .function-hero-card,
.mobile-bank-ui .app-card-hero {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mobile-bank-ui .wallet-hero-card {
    padding: clamp(18px, 5vw, 28px);
}

.mobile-bank-ui .function-hero-card {
    padding: clamp(18px, 5vw, 26px);
}

.mobile-bank-ui .function-hero-card h2 {
    max-width: 76%;
    font-size: clamp(1.6rem, 6vw, 2.45rem);
    line-height: .98;
}

.mobile-bank-ui .function-hero-card p {
    max-width: 84%;
    font-size: clamp(.9rem, 2.7vw, 1rem);
}

.mobile-bank-ui .app-card-hero {
    width: min(100%, 560px);
    padding: clamp(18px, 5vw, 28px);
}

.mobile-bank-ui .account-balance-card.primary {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(18px, 5vw, 28px);
}

.mobile-bank-ui .profile-identity-card {
    align-content: end;
    width: min(100%, 560px);
    padding: clamp(68px, 15vw, 88px) clamp(18px, 5vw, 28px) clamp(18px, 5vw, 26px);
}

.mobile-bank-ui .profile-identity-card .customer-avatar.large {
    width: clamp(48px, 13vw, 68px);
    height: clamp(48px, 13vw, 68px);
}

.mobile-bank-ui .solace-card-chip {
    width: clamp(38px, 10vw, 52px);
    height: clamp(28px, 7.5vw, 38px);
}

.mobile-bank-ui .solace-card-number {
    font-size: clamp(.88rem, 3.5vw, 1.35rem);
}

.admin-content-wrap .metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.admin-content-wrap .metric-card,
.admin-content-wrap .form-shell,
.admin-content-wrap .table-shell {
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .08);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
}

.admin-content-wrap .quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-content-wrap .table-shell a:not(.btn),
.admin-content-wrap .quick-actions a,
.admin-content-wrap section > a:not(.btn),
.admin-footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 9px;
    color: #0f3fbd;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(238,244,251,.9));
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
    font-size: .84rem;
    font-weight: 850;
    line-height: 1.1;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.admin-content-wrap .table-shell a:not(.btn):hover,
.admin-content-wrap .quick-actions a:hover,
.admin-content-wrap section > a:not(.btn):hover,
.admin-footer a:hover {
    transform: translateY(-1px);
    border-color: rgba(56, 103, 255, .32);
    background: linear-gradient(135deg, rgba(56,103,255,.14), rgba(35,211,238,.12));
    box-shadow: 0 12px 24px rgba(15, 23, 42, .12);
}

.admin-content-wrap .table-shell .table {
    margin-bottom: 0;
}

.admin-content-wrap .table-shell td,
.admin-content-wrap .table-shell th {
    vertical-align: middle;
}

[data-theme="dark"] .admin-content-wrap .metric-card,
[data-theme="dark"] .admin-content-wrap .form-shell,
[data-theme="dark"] .admin-content-wrap .table-shell {
    border-color: rgba(255,255,255,.08);
    background: rgba(12, 18, 30, .9);
    box-shadow: 0 18px 48px rgba(0,0,0,.3);
}

[data-theme="dark"] .admin-content-wrap .table-shell a:not(.btn),
[data-theme="dark"] .admin-content-wrap .quick-actions a,
[data-theme="dark"] .admin-content-wrap section > a:not(.btn),
[data-theme="dark"] .admin-footer a {
    color: #d8e8ff;
    border-color: rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(18,28,44,.96), rgba(10,17,29,.92));
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

@media (max-width: 720px) {
    .public-site {
        --public-header-height: 64px;
    }

    .public-site .public-site-header {
        min-height: var(--public-header-height);
    }

    .mobile-bank-ui .wallet-hero-card,
    .mobile-bank-ui .function-hero-card,
    .mobile-bank-ui .app-card-hero,
    .mobile-bank-ui .account-balance-card.primary,
    .mobile-bank-ui .profile-identity-card {
        max-width: 100%;
    }

    .mobile-bank-ui .function-hero-card h2,
    .mobile-bank-ui .function-hero-card p {
        max-width: 100%;
    }

    .admin-topbar {
        position: sticky;
        top: 0;
    }

    .admin-content-wrap {
        max-width: 100%;
        padding: 14px 12px 88px !important;
        overflow-x: hidden;
    }

    .admin-content-wrap .page-title {
        font-size: clamp(1.35rem, 7vw, 2rem);
    }

    .admin-content-wrap .row {
        margin-left: 0;
        margin-right: 0;
    }

    .admin-content-wrap .metric-grid {
        grid-template-columns: 1fr;
    }

    .admin-content-wrap .form-shell {
        padding: 16px !important;
    }

    .admin-content-wrap .table-shell {
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .admin-content-wrap .table-shell table,
    .admin-content-wrap .table-shell thead,
    .admin-content-wrap .table-shell tbody,
    .admin-content-wrap .table-shell tr,
    .admin-content-wrap .table-shell td {
        display: block;
        width: 100%;
    }

    .admin-content-wrap .table-shell thead {
        display: none;
    }

    .admin-content-wrap .table-shell tr {
        margin-bottom: 12px;
        padding: 14px;
        border: 1px solid rgba(15, 23, 42, .08);
        border-radius: 14px;
        background: rgba(255,255,255,.92);
        box-shadow: 0 14px 36px rgba(15, 23, 42, .08);
    }

    .admin-content-wrap .table-shell td {
        padding: 9px 0;
        border: 0;
        white-space: normal;
    }

    .admin-content-wrap .table-shell td + td {
        border-top: 1px solid rgba(15, 23, 42, .07);
    }

    .admin-content-wrap .table-shell a:not(.btn),
    .admin-content-wrap .quick-actions a,
    .admin-content-wrap section > a:not(.btn),
    .admin-content-wrap .btn {
        width: 100%;
        min-height: 42px;
    }

    .admin-content-wrap .quick-actions,
    .admin-content-wrap .table-shell form.quick-actions,
    .admin-content-wrap .table-shell form.d-flex {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .admin-content-wrap .table-shell input,
    .admin-content-wrap .table-shell select,
    .admin-content-wrap .table-shell textarea {
        min-width: 0;
        width: 100%;
    }

    .admin-topbar .header-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .admin-topbar .header-actions .btn {
        flex: 1 1 128px;
    }

    .admin-footer {
        margin: 18px 12px;
    }
}

@media (max-width: 420px) {
    .mobile-bank-ui .wallet-hero-card,
    .mobile-bank-ui .app-card-hero,
    .mobile-bank-ui .account-balance-card.primary,
    .mobile-bank-ui .profile-identity-card {
        border-radius: 12px;
    }

    .mobile-bank-ui .function-hero-card {
        aspect-ratio: auto;
        min-height: 236px !important;
    }

    .mobile-bank-ui .wallet-hero-card strong,
    .mobile-bank-ui .app-card-hero strong,
    .mobile-bank-ui .account-balance-card.primary > strong {
        font-size: clamp(1.45rem, 8vw, 2rem);
    }
}

@media (max-width: 767px) {
    html,
    body.public-site {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden !important;
    }

    body.public-site *,
    body.public-site *::before,
    body.public-site *::after {
        box-sizing: border-box;
    }

    .public-site .public-site-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: fixed !important;
        width: 100vw !important;
        max-width: 100vw;
        padding: 12px 14px !important;
        overflow: hidden;
    }

    .public-site .public-site-header .desktop-nav {
        display: none !important;
    }

    .public-site .public-site-header .site-brand {
        flex: 1 1 auto;
        max-width: calc(100vw - 74px) !important;
        padding-right: 54px;
    }

    .public-site .public-site-header .header-actions {
        position: absolute;
        top: 50%;
        right: 18px;
        transform: translateY(-50%);
        justify-content: flex-end;
        min-width: 0;
        width: 38px;
        max-width: 38px;
        flex: 0 0 38px;
    }

    .public-site .public-site-header .icon-btn {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
    }

    .public-site .public-site-header .mobile-menu-button {
        display: none !important;
    }

    .public-site .marketing-hero .hero-copy {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .public-site .main-panel,
    .public-site .content-wrap,
    .public-site .marketing-hero {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
    }

    .public-site .marketing-hero {
        position: relative;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        text-align: center;
    }

    .public-site .hero-copy,
    .public-site .hero-actions,
    .public-site .hero-microtrust,
    .public-site .metric-grid.compact-metrics {
        width: min(318px, calc(100vw - 72px)) !important;
        max-width: min(318px, calc(100vw - 72px)) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .public-site .hero-actions,
    .public-site .hero-microtrust,
    .public-site .metric-grid.compact-metrics {
        position: relative;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        justify-self: stretch !important;
        align-self: stretch !important;
    }

    .public-site .hero-actions .btn,
    .public-site .metric-grid.compact-metrics > * {
        width: 100% !important;
        max-width: 100% !important;
    }

    .public-site .metric-grid.compact-metrics {
        grid-template-columns: 1fr !important;
    }

    .public-site .hero-microtrust {
        justify-items: center;
        text-align: center;
    }

    .public-site .hero-bank-status {
        width: min(318px, calc(100vw - 72px)) !important;
        max-width: min(318px, calc(100vw - 72px)) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .public-site .hero-bank-status > span {
        width: 100% !important;
        max-width: 100% !important;
    }

    .public-site .hero-trust-signals {
        width: min(318px, calc(100vw - 72px)) !important;
        max-width: min(318px, calc(100vw - 72px)) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-items: center;
        text-align: center;
    }

    .public-site .marketing-hero h1,
    .public-site [data-theme="dark"] .marketing-hero h1 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(2rem, 9vw, 2.45rem);
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .public-site .marketing-hero p {
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(.92rem, 3.65vw, 1rem);
        line-height: 1.55;
        white-space: normal !important;
        overflow-wrap: break-word;
    }
}

/* Solace Credit follow-up refinements */
:root,
[data-theme="light"] {
    --solace-card-blue: #0f6ccf;
    --solace-card-teal: #10b981;
    --solace-card-navy: #071525;
}

[data-theme="dark"] {
    --solace-card-blue: #0b2238;
    --solace-card-teal: #0a5f52;
    --solace-card-navy: #050a12;
}

body.public-site .mobile-menu-button,
body.public-site .public-site-header .mobile-menu-button {
    display: none !important;
}

body.public-site .public-menu-button {
    display: none;
}

.customer-authenticated .customer-site-header {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1085;
    backdrop-filter: blur(18px);
}

.customer-authenticated .main-panel {
    padding-top: 62px;
}

@media (min-width: 821px) {
    .customer-authenticated .customer-site-header {
        left: 272px;
        width: auto !important;
        margin-left: 0 !important;
    }

    .customer-authenticated .main-panel {
        padding-top: 78px;
    }
}

.wallet-hero-card,
.function-hero-card,
.account-balance-card.primary,
.profile-identity-card {
    background:
        linear-gradient(118deg, rgba(255,255,255,.18), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.14) 0 42px, transparent 44px),
        radial-gradient(circle at 18% 88%, rgba(0,0,0,.26), transparent 34%),
        linear-gradient(135deg, var(--solace-card-navy) 0%, var(--solace-card-blue) 48%, var(--solace-card-teal) 100%) !important;
}

.wallet-hero-card::after,
.function-hero-card::after,
.account-balance-card.primary::after {
    content: "SOLACE\A CREDIT";
    top: 13px;
    right: 14px;
    width: clamp(64px, 17vw, 86px);
    height: clamp(64px, 17vw, 86px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    text-align: center;
    white-space: pre-line;
    color: #fff;
    background: rgba(255,255,255,.16);
    font: 900 clamp(.58rem, 2.1vw, .78rem)/1.08 Poppins, Inter, sans-serif;
    letter-spacing: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.wallet-hero-card strong,
.account-balance-card.primary > strong {
    font-size: clamp(1.7rem, 7vw, 2.7rem);
}

.account-balance-card.primary .badge-soft {
    color: #064e3b !important;
    background: rgba(220, 252, 231, .82) !important;
    border-color: rgba(6, 78, 59, .18) !important;
    font-weight: 950;
}

[data-theme="dark"] .account-balance-card.primary .badge-soft {
    color: #d1fae5 !important;
    background: rgba(6, 78, 59, .72) !important;
    border-color: rgba(209, 250, 229, .18) !important;
}

.app-card-brand {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
}

.app-card-brand::before {
    margin: 0 0 8px 0;
}

.app-card-brand b {
    font-size: 0;
    line-height: 0;
}

.app-card-brand b::before {
    content: "Solace\A Credit";
    display: block;
    white-space: pre-line;
    color: #fff;
    font: 900 .92rem/1.06 Poppins, Inter, sans-serif;
    text-transform: uppercase;
}

.app-card-hero em {
    color: #fff;
    font-size: 1.02rem;
}

.solace-card-bank {
    top: 14px;
    right: 14px;
    width: clamp(64px, 17vw, 86px);
    height: clamp(64px, 17vw, 86px);
    display: grid !important;
    place-items: center;
    border-radius: 50%;
    color: #fff !important;
    background: rgba(255,255,255,.16);
    text-align: center;
    white-space: normal;
    font: 900 clamp(.58rem, 2.1vw, .78rem)/1.08 Poppins, Inter, sans-serif;
}

.transaction-icon {
    color: #10b981 !important;
    background: #e8fbf5 !important;
}

.transaction-icon i {
    display: none !important;
}

.transaction-icon::before {
    content: "";
    position: static;
    width: 18px;
    height: 10px;
    background: transparent;
    border-left: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    border-radius: 1px;
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 1;
}

.transaction-icon::after {
    display: none !important;
}

.function-hero-card p {
    display: none !important;
}

.function-hero-card h2,
.mobile-bank-ui .function-hero-card h2 {
    max-width: min(420px, calc(100% - 84px));
    margin: 10px 0 14px;
    font-size: clamp(1.35rem, 5.3vw, 2.05rem);
    line-height: 1.05;
}

.function-hero-card {
    min-height: 0 !important;
}

@media (max-width: 620px) {
    .profile-identity-card {
        grid-template-columns: clamp(48px, 13vw, 60px) minmax(0, 1fr) 38px;
        align-items: end;
        column-gap: 13px;
        row-gap: 9px;
        padding: 86px 18px 18px !important;
    }

    .profile-identity-card .customer-avatar.large {
        align-self: center;
        grid-column: 1;
        grid-row: 1 / span 2;
        width: clamp(48px, 13vw, 60px);
        height: clamp(48px, 13vw, 60px);
        font-size: 1.2rem;
    }

    .profile-identity-card > div:not(.customer-avatar) {
        grid-column: 2;
        min-width: 0;
        display: grid;
        gap: 3px;
    }

    .profile-identity-card strong {
        font-size: clamp(.98rem, 4vw, 1.18rem);
        line-height: 1.1;
    }

    .profile-identity-card span,
    .profile-identity-card small {
        font-size: clamp(.73rem, 3.1vw, .86rem);
        line-height: 1.28;
        overflow-wrap: anywhere;
    }

    .profile-identity-card .solace-card-number {
        grid-column: 1 / -1;
        margin-top: 8px;
    }

    .profile-identity-card > a {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .function-hero-card,
    .mobile-bank-ui .function-hero-card {
        aspect-ratio: 85.6 / 53.98 !important;
        padding: 18px !important;
    }

    .function-hero-card h2,
    .mobile-bank-ui .function-hero-card h2 {
        max-width: calc(100% - 74px);
        font-size: clamp(1.25rem, 5vw, 1.7rem);
    }
}

/* Homepage/mobile refinement pass */
@media (max-width: 767px) {
    body.public-site .public-site-header .mobile-menu-button {
        display: inline-grid !important;
    }

    body.public-site .public-site-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        overflow: hidden;
    }

    body.public-site .public-site-header .header-actions {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto;
        display: inline-flex;
        gap: 8px;
        margin-left: auto;
    }

    body.public-site .public-site-header .site-brand {
        flex: 1 1 auto;
        max-width: calc(100vw - 120px) !important;
        padding-right: 0;
    }

    body.public-site .public-site-header .icon-btn {
        flex: 0 0 38px;
    }

    body.public-site .marketing-hero {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: calc(100svh - 64px);
        padding-top: 54px !important;
        padding-bottom: 32px !important;
    }

    body.public-site .hero-copy {
        display: grid;
        justify-items: center;
        width: min(100%, 344px) !important;
        max-width: calc(100vw - 32px) !important;
        margin-inline: auto !important;
        text-align: center;
    }

    body.public-site .hero-actions {
        width: min(100%, 320px) !important;
        max-width: min(100%, 320px) !important;
        margin-inline: auto !important;
    }

    body.public-site .hero-bank-status {
        width: min(100%, 320px) !important;
        max-width: min(100%, 320px) !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 20px auto 0 !important;
    }

    body.public-site .hero-bank-status > span {
        display: grid;
        align-content: center;
        justify-items: start;
        aspect-ratio: 1 / 1;
        min-height: 0 !important;
        padding: 12px !important;
        border-radius: 12px !important;
        background: rgba(7, 21, 37, .82) !important;
    }

    body.public-site .hero-bank-status small {
        font-size: .58rem !important;
    }

    body.public-site .hero-bank-status b {
        font-size: clamp(1rem, 5vw, 1.22rem) !important;
        line-height: 1.05;
    }

    body.public-site .hero-bank-status em {
        font-size: .64rem !important;
        line-height: 1.25;
    }

    body.public-site .hero-trust-signals {
        width: min(100%, 320px) !important;
        margin-inline: auto !important;
    }
}

.faq-accordion {
    display: grid;
    gap: 12px;
    max-width: 900px;
    margin: 26px auto 0;
}

.faq-item {
    border: 1px solid var(--db-line);
    border-radius: 12px;
    background: var(--db-surface);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
    overflow: hidden;
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
    color: var(--db-text);
    font-weight: 900;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.faq-item summary i {
    color: var(--db-primary);
}

.faq-item summary b {
    position: relative;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(15, 108, 207, .12);
}

.faq-item summary b::before,
.faq-item summary b::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 12px;
    height: 2px;
    background: var(--db-primary);
    border-radius: 999px;
    transform: translate(-50%, -50%);
}

.faq-item summary b::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] summary b::after {
    opacity: 0;
}

.faq-item p {
    margin: 0;
    padding: 0 20px 20px 54px;
    color: var(--db-muted);
    line-height: 1.7;
}

.wallet-hero-card,
.function-hero-card,
.account-balance-card.primary,
.profile-identity-card,
.app-card-hero {
    background:
        linear-gradient(118deg, rgba(255,255,255,.16), transparent 24%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 8px),
        linear-gradient(135deg, var(--solace-card-navy) 0%, var(--solace-card-blue) 54%, var(--solace-card-teal) 100%) !important;
}

.wallet-hero-card::before,
.function-hero-card::before,
.account-balance-card.primary::before,
.profile-identity-card::before,
.app-card-hero::before {
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 8px) !important;
}

.app-card-hero::after {
    content: "SOLACE\A CREDIT";
    top: 13px;
    right: 14px;
    bottom: auto;
    width: clamp(64px, 17vw, 86px);
    height: clamp(64px, 17vw, 86px);
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    text-align: center;
    white-space: pre-line;
    color: #fff;
    background: rgba(255,255,255,.16);
    font: 900 clamp(.58rem, 2.1vw, .78rem)/1.08 Poppins, Inter, sans-serif;
    letter-spacing: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.banking-dashboard .wallet-hero-card {
    --solace-card-navy: #071525;
    --solace-card-blue: #0f6ccf;
    --solace-card-teal: #10b981;
}

.accounts-app-page .account-balance-card.primary {
    --solace-card-navy: #06223d;
    --solace-card-blue: #1558d6;
    --solace-card-teal: #0ea5a4;
}

.transfer-choice-page .function-hero-card {
    --solace-card-navy: #12101f;
    --solace-card-blue: #7c2d12;
    --solace-card-teal: #b45309;
}

.profile-app-page .profile-identity-card {
    --solace-card-navy: #111827;
    --solace-card-blue: #7e22ce;
    --solace-card-teal: #0f766e;
}

.cards-app-page .app-card-hero {
    --solace-card-navy: #070b13;
    --solace-card-blue: #1f2937;
    --solace-card-teal: #991b1b;
}

.wallet-hero-actions {
    position: relative;
    z-index: 3;
    flex-wrap: wrap;
}

.wallet-hero-actions a {
    font-size: clamp(.78rem, 3.2vw, .92rem) !important;
}

@media (max-width: 420px) {
    .wallet-hero-card {
        padding-bottom: 16px !important;
    }

    .wallet-hero-actions {
        gap: 8px;
    }

    .wallet-hero-actions a {
        min-height: 34px;
        padding: 8px 11px;
    }

    .wallet-hero-card strong {
        font-size: clamp(1.45rem, 7.2vw, 1.82rem) !important;
    }

    .account-balance-card.primary .account-card-head {
        align-items: flex-start;
        gap: 54px;
    }

    .account-balance-card.primary .badge-soft {
        margin-right: clamp(72px, 20vw, 96px);
    }
}

@media (max-width: 767px) {
    body.public-site,
    body.public-site .main-panel,
    body.public-site .content-wrap,
    body.public-site .marketing-hero {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.public-site .public-site-header {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        padding: 12px 14px !important;
    }

    body.public-site .public-site-header .site-brand {
        min-width: 0;
        max-width: calc(100vw - 76px) !important;
        padding: 0 !important;
    }

    body.public-site .public-site-header .header-actions {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        width: 40px !important;
        max-width: 40px !important;
        min-width: 40px !important;
        display: grid !important;
        place-items: center;
        margin-left: 8px !important;
    }

    body.public-site .public-site-header .header-actions::before {
        display: none !important;
    }

    body.public-site .public-site-header [data-theme-toggle] {
        display: none !important;
    }

    body.public-site .public-site-header .mobile-menu-button {
        display: none !important;
    }

    body.public-site .public-site-header .public-menu-button {
        display: inline-grid !important;
        place-items: center;
        width: 38px !important;
        height: 38px !important;
        opacity: 1;
    }

    body.public-site .hero-copy,
    body.public-site .hero-actions,
    body.public-site .hero-bank-status,
    body.public-site .hero-trust-signals {
        width: min(286px, calc(100vw - 64px)) !important;
        max-width: min(286px, calc(100vw - 64px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.public-site .hero-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    body.public-site .hero-bank-status {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    body.public-site .hero-bank-status > span {
        aspect-ratio: 1 / 1;
        padding: 10px !important;
    }
}

/* Final mobile banking polish: premium cards, form spacing, and table cards */
.public-floating-menu-button {
    display: none;
}

@media (max-width: 767px) {
    body.public-site .public-floating-menu-button {
        position: fixed;
        top: 14px;
        right: 14px;
        z-index: 1200;
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border: 1px solid rgba(15, 23, 42, .12);
        border-radius: 10px;
        color: #101827;
        background: rgba(255,255,255,.96);
        box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
    }

    body.public-site .public-site-header .header-actions {
        display: none !important;
    }

    body.public-site .public-site-header .site-brand {
        max-width: calc(100vw - 76px) !important;
    }
}

.banking-dashboard .wallet-hero-card {
    --solace-card-navy: #07111f;
    --solace-card-blue: #123b63;
    --solace-card-teal: #0d8a78;
}

.accounts-app-page .account-balance-card.primary {
    --solace-card-navy: #07111f;
    --solace-card-blue: #172554;
    --solace-card-teal: #155e75;
}

.transfer-choice-page .function-hero-card {
    --solace-card-navy: #100b10;
    --solace-card-blue: #3b1726;
    --solace-card-teal: #9a3412;
}

.profile-app-page .profile-identity-card {
    --solace-card-navy: #0c0a14;
    --solace-card-blue: #3b0764;
    --solace-card-teal: #134e4a;
}

.cards-app-page .app-card-hero {
    --solace-card-navy: #05070d;
    --solace-card-blue: #111827;
    --solace-card-teal: #7f1d1d;
}

.wallet-hero-card,
.function-hero-card,
.account-balance-card.primary,
.profile-identity-card,
.app-card-hero {
    background:
        linear-gradient(118deg, rgba(255,255,255,.13), transparent 23%),
        radial-gradient(ellipse at 18% 12%, rgba(255,255,255,.08), transparent 28%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 9px),
        linear-gradient(135deg, var(--solace-card-navy) 0%, var(--solace-card-blue) 50%, var(--solace-card-teal) 100%) !important;
    box-shadow:
        0 24px 60px rgba(3, 7, 18, .24),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
}

@media (max-width: 820px) {
    .customer-authenticated .content-wrap {
        padding-top: 26px !important;
    }

    .customer-authenticated .content-wrap > section:not(.banking-dashboard) {
        padding-top: 30px !important;
    }

    .customer-authenticated .page-title,
    .customer-authenticated .app-page-title h1,
    .customer-authenticated section > h1:first-child {
        position: relative;
        z-index: 3;
        margin: 0 0 26px !important;
        line-height: 1.1;
        font-size: clamp(1.55rem, 7vw, 2rem);
    }

    .customer-authenticated .page-title + .row,
    .customer-authenticated section > h1:first-child + .row,
    .customer-authenticated .d-flex:has(.page-title) + form,
    .customer-authenticated .d-flex:has(.page-title) + .table-shell {
        margin-top: 6px !important;
    }

    .customer-authenticated .form-shell,
    .customer-authenticated .glass {
        position: relative;
        z-index: 2;
        border-radius: 12px;
    }

    .customer-authenticated .content-wrap > section:has(.form-shell),
    .customer-authenticated .content-wrap > .form-shell {
        padding-top: 34px !important;
        overflow: visible !important;
    }

    .customer-authenticated .table-shell {
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .customer-authenticated .table-shell table,
    .customer-authenticated .table-shell thead,
    .customer-authenticated .table-shell tbody,
    .customer-authenticated .table-shell tr,
    .customer-authenticated .table-shell td {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    .customer-authenticated .table-shell table {
        margin: 0;
    }

    .customer-authenticated .table-shell thead {
        display: none;
    }

    .customer-authenticated .table-shell tr {
        margin-bottom: 12px;
        padding: 14px;
        border: 1px solid rgba(15, 23, 42, .08);
        border-radius: 14px;
        background: rgba(255,255,255,.94);
        box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
    }

    .customer-authenticated .table-shell td {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        padding: 8px 0;
        border: 0;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .customer-authenticated .table-shell td + td {
        border-top: 1px solid rgba(15, 23, 42, .07);
    }

    .customer-authenticated .table-shell td::before {
        color: #64748b;
        font-size: .72rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .customer-authenticated .table-shell td:nth-child(1)::before { content: "Item"; }
    .customer-authenticated .table-shell td:nth-child(2)::before { content: "Amount"; }
    .customer-authenticated .table-shell td:nth-child(3)::before { content: "Details"; }
    .customer-authenticated .table-shell td:nth-child(4)::before { content: "Status"; }
    .customer-authenticated .table-shell td:nth-child(5)::before { content: "Date"; }
    .customer-authenticated .table-shell td:nth-child(6)::before { content: "Time"; }
    .customer-authenticated .table-shell td:nth-child(7)::before { content: "Action"; }

    .customer-authenticated .table-shell a:not(.btn) {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        min-height: 34px;
        padding: 8px 11px;
        border-radius: 9px;
        color: #0f3fbd;
        background: rgba(15, 108, 207, .08);
        font-weight: 850;
        text-decoration: none;
    }

    [data-theme="dark"] .customer-authenticated .table-shell tr {
        border-color: rgba(255,255,255,.08);
        background: rgba(12, 18, 30, .94);
        box-shadow: 0 14px 34px rgba(0,0,0,.28);
    }

    [data-theme="dark"] .customer-authenticated .table-shell td + td {
        border-top-color: rgba(255,255,255,.07);
    }
}

/* Final public mobile nav guarantee */
@media (max-width: 767px) {
    body.public-site > .public-floating-menu-button {
        position: fixed !important;
        top: 14px !important;
        right: 14px !important;
        z-index: 2147483647 !important;
        display: grid !important;
        place-items: center !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        border: 1px solid rgba(15, 23, 42, .16) !important;
        border-radius: 12px !important;
        color: #101827 !important;
        background: #fff !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .16) !important;
    }

    body.public-site > .public-floating-menu-button i {
        display: inline-block !important;
        color: inherit !important;
        font-size: 1rem !important;
        line-height: 1 !important;
    }
}

/* Keep public mobile navigation in the visible header flow */
@media (max-width: 767px) {
    body.public-site .public-site-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px !important;
        align-items: center !important;
        column-gap: 10px !important;
        overflow: visible !important;
    }

    body.public-site .public-site-header .header-actions {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        display: grid !important;
        place-items: center !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
    }

    body.public-site .public-site-header .header-actions .btn,
    body.public-site .public-site-header .header-actions [data-theme-toggle],
    body.public-site .public-site-header .header-actions .mobile-menu-button {
        display: none !important;
    }

    body.public-site .public-site-header .public-menu-button {
        display: grid !important;
        place-items: center !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        color: #101827 !important;
        background: #fff !important;
        border: 1px solid rgba(15, 23, 42, .16) !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 24px rgba(15,23,42,.14) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.public-site > .public-floating-menu-button {
        display: none !important;
    }
}

/* Device-emulation fallback for browsers that render a wider layout viewport */
@media (max-width: 767px) {
    body.public-site .public-site-header .public-menu-button {
        position: fixed !important;
        top: 14px !important;
        left: clamp(268px, 85vw, 332px) !important;
        z-index: 2147483647 !important;
        display: grid !important;
        place-items: center !important;
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        color: #101827 !important;
        background: #fff !important;
        border: 1px solid rgba(15,23,42,.16) !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 24px rgba(15,23,42,.14) !important;
    }

    body.public-site .public-site-header .public-menu-button i {
        display: none !important;
    }

    body.public-site .public-site-header .public-menu-button::before {
        content: "\2630";
        display: block;
        color: #101827;
        font: 900 22px/1 Inter, system-ui, sans-serif;
    }
}

/* Final navigation layering and public mobile controls */
.mobile-drawer.open,
.sidebar.mobile-drawer.open,
.customer-authenticated .mobile-drawer.open,
.public-site .mobile-drawer.open {
    z-index: 4000 !important;
}

.sidebar-backdrop.open,
.customer-authenticated .sidebar-backdrop.open,
.public-site .sidebar-backdrop.open {
    z-index: 3990 !important;
}

.site-header,
.customer-site-header,
.public-site-header {
    z-index: 3000 !important;
}

@media (max-width: 767px) {
    body.public-site .public-site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        min-height: 64px !important;
        padding: 10px 14px !important;
        overflow: visible !important;
    }

    body.public-site .public-site-header .site-brand {
        min-width: 0 !important;
        max-width: calc(100vw - 122px) !important;
    }

    body.public-site .public-site-header .header-actions {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        width: auto !important;
        min-width: 90px !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
    }

    body.public-site .public-site-header .header-actions .btn,
    body.public-site .public-site-header .mobile-menu-button {
        display: none !important;
    }

    body.public-site .public-site-header [data-theme-toggle],
    body.public-site .public-site-header .public-menu-button {
        position: static !important;
        display: inline-grid !important;
        place-items: center !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        color: #101827 !important;
        background: rgba(255,255,255,.96) !important;
        border: 1px solid rgba(15,23,42,.16) !important;
        border-radius: 11px !important;
        box-shadow: 0 8px 20px rgba(15,23,42,.12) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.public-site .public-site-header .public-menu-button i {
        display: inline-block !important;
        color: inherit !important;
        font-size: 1rem !important;
    }

    body.public-site .public-site-header .public-menu-button::before {
        content: none !important;
    }

    body.public-site > .public-floating-menu-button {
        display: none !important;
    }

    [data-theme="dark"] body.public-site .public-site-header [data-theme-toggle],
    [data-theme="dark"] body.public-site .public-site-header .public-menu-button {
        color: #f8fafc !important;
        background: rgba(15,23,42,.94) !important;
        border-color: rgba(255,255,255,.16) !important;
    }
}