/* ==========================================================================
   mWealth — Design System
   Dark institutional fintech. Built on Bootstrap 4 grid only.
   Loaded after bootstrap.min.css + fontawesome.min.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    --bg:            #05080F;
    --bg-1:          #0A101C;
    --bg-2:          #0F1727;
    --bg-3:          #141E33;
    --line:          rgba(255, 255, 255, .08);
    --line-strong:   rgba(255, 255, 255, .16);

    --txt:           #E8EDF7;
    --txt-2:         #94A3BE;
    --txt-3:         #64748B;

    --gold:          #D4AF37;
    --gold-lite:     #EBCB63;
    --gold-deep:     #A9861F;
    --gold-glow:     rgba(212, 175, 55, .14);
    --gold-line:     rgba(212, 175, 55, .28);

    --up:            #2BB673;
    --down:          #E5484D;
    --info:          #4C8DFF;

    --radius:        14px;
    --radius-sm:     10px;
    --radius-lg:     22px;

    --shadow:        0 24px 60px -20px rgba(0, 0, 0, .75);
    --shadow-gold:   0 18px 44px -18px rgba(212, 175, 55, .38);

    --ff-sans:       'Inter', 'PT Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --ff-mono:       'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

    --header-h:      82px;
    --ease:          cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--txt);
    font-family: var(--ff-sans);
    font-size: 16px;
    line-height: 1.72;
    font-weight: 400;
    letter-spacing: -.005em;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-sans);
    color: #fff;
    font-weight: 700;
    letter-spacing: -.024em;
    line-height: 1.16;
    margin: 0 0 .6em;
}

h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); letter-spacing: -.033em; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.85rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); }
h4 { font-size: 1.16rem; }
h5 { font-size: 1.02rem; }

p { margin: 0 0 1.1rem; color: var(--txt-2); }
p:last-child { margin-bottom: 0; }

a { color: var(--gold); text-decoration: none; transition: color .22s var(--ease); }
a:hover, a:focus { color: var(--gold-lite); text-decoration: none; }

img { max-width: 100%; height: auto; }

::selection { background: var(--gold); color: #05080F; }

hr { border-color: var(--line); }

/* Focus visibility — never remove it, only make it fit the theme. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.container { max-width: 1200px; }

/* --------------------------------------------------------------------------
   3. Section scaffolding
   -------------------------------------------------------------------------- */
.mw-section { position: relative; padding: 104px 0; }
.mw-section--tight { padding: 72px 0; }
.mw-section--alt { background: var(--bg-1); }
.mw-section--deep {
    background:
        radial-gradient(900px 480px at 12% -10%, rgba(212, 175, 55, .09), transparent 62%),
        var(--bg-1);
}
.mw-section + .mw-section--alt,
.mw-section--alt + .mw-section { border-top: 1px solid var(--line); }

.mw-head { max-width: 760px; margin-bottom: 58px; }
.mw-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.mw-head p { font-size: 1.06rem; }

.mw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-mono);
    font-size: .705rem;
    font-weight: 600;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
}
.mw-eyebrow::before {
    content: "";
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}
.mw-head--center .mw-eyebrow::after {
    content: "";
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
}

.mw-lead { font-size: 1.12rem; line-height: 1.75; color: var(--txt-2); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.mw-btn,
.me-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--gold-lite), var(--gold-deep));
    color: #0A0A0A !important;
    font-family: var(--ff-sans);
    font-size: .93rem;
    font-weight: 700;
    letter-spacing: .005em;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease);
}
.mw-btn:hover, .me-btn:hover,
.mw-btn:focus, .me-btn:focus {
    color: #0A0A0A !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
    filter: brightness(1.06);
}
.mw-btn:active, .me-btn:active { transform: translateY(0); }

.mw-btn--ghost {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--txt) !important;
}
.mw-btn--ghost:hover, .mw-btn--ghost:focus {
    color: #fff !important;
    border-color: var(--gold-line);
    background: var(--gold-glow);
    box-shadow: none;
}

.mw-btn--lg { padding: 18px 38px; font-size: 1rem; }
.mw-btn--block { width: 100%; }

/* asp:Button renders <input type="submit">, which cannot lay out flex children.
   Give the form controls a block box with centred text instead. */
input.mw-btn, input.me-btn,
button.mw-btn, button.me-btn {
    display: inline-block;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
}

.mw-btn--link {
    padding: 0;
    background: none;
    color: var(--gold) !important;
    font-weight: 600;
    font-size: .92rem;
}
.mw-btn--link:hover, .mw-btn--link:focus {
    color: var(--gold-lite) !important;
    transform: none;
    box-shadow: none;
}
.mw-btn--link i { transition: transform .22s var(--ease); }
.mw-btn--link:hover i { transform: translateX(4px); }

.mw-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.mw-head--center .mw-btns { justify-content: center; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.mw-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1040;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: rgba(5, 8, 15, .72);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid transparent;
    transition: background .28s var(--ease), border-color .28s var(--ease), height .28s var(--ease);
}
.mw-header.is-stuck {
    height: 70px;
    background: rgba(5, 8, 15, .95);
    border-bottom-color: var(--line);
}
.mw-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    width: 100%;
}

/* Logo */
.mw-logo { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.mw-logo:hover { color: inherit; }
.mw-logo__mark { width: 40px; height: 40px; flex-shrink: 0; }
.mw-logo__text { display: flex; flex-direction: column; line-height: 1; }
.mw-logo__name {
    font-size: 1.42rem;
    font-weight: 700;
    letter-spacing: -.035em;
    color: #fff;
}
.mw-logo__name b { color: var(--gold); font-weight: 700; }
.mw-logo__tag {
    font-family: var(--ff-mono);
    font-size: .565rem;
    letter-spacing: .215em;
    text-transform: uppercase;
    color: var(--txt-3);
    margin-top: 5px;
}

/* Nav */
.mw-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto 0 18px; }
.mw-nav__item { position: relative; }
.mw-nav__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 15px;
    border-radius: 7px;
    color: var(--txt-2);
    font-size: .915rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color .2s var(--ease), background .2s var(--ease);
}
.mw-nav__link:hover,
.mw-nav__item:hover > .mw-nav__link { color: #fff; background: rgba(255, 255, 255, .05); }
.mw-nav__link.is-active { color: var(--gold); }
.mw-nav__link i.fa-chevron-down { font-size: .58rem; opacity: .6; transition: transform .22s var(--ease); }
.mw-nav__item:hover > .mw-nav__link i.fa-chevron-down { transform: rotate(180deg); }

/* Dropdown */
.mw-drop {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 306px;
    padding: 10px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .24s var(--ease);
}
.mw-nav__item:hover > .mw-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.mw-drop::before {
    content: "";
    position: absolute;
    top: -12px; left: 0; right: 0;
    height: 12px;
}
.mw-drop__link {
    display: flex;
    gap: 13px;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    color: var(--txt-2);
    transition: background .2s var(--ease);
}
.mw-drop__link:hover { background: rgba(255, 255, 255, .05); color: var(--txt-2); }
.mw-drop__link i {
    width: 34px; height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--gold-glow);
    color: var(--gold);
    font-size: .86rem;
}
.mw-drop__link strong { display: block; color: #fff; font-size: .93rem; font-weight: 600; line-height: 1.4; }
.mw-drop__link span { display: block; font-size: .805rem; line-height: 1.5; color: var(--txt-3); }

/* Header actions */
.mw-header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mw-header__actions .mw-btn { padding: 12px 22px; font-size: .88rem; }
.mw-login-link {
    padding: 12px 16px;
    color: var(--txt-2);
    font-size: .915rem;
    font-weight: 500;
    border-radius: 7px;
}
.mw-login-link:hover { color: #fff; background: rgba(255, 255, 255, .05); }

/* Burger */
.mw-burger {
    display: none;
    width: 44px; height: 44px;
    padding: 0;
    background: none;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--txt);
    font-size: 1.05rem;
    cursor: pointer;
}

/* Mobile drawer */
.mw-drawer {
    position: fixed;
    top: 0; right: 0;
    z-index: 1060;
    width: min(400px, 88vw);
    height: 100%;
    padding: 26px 24px 40px;
    background: var(--bg-1);
    border-left: 1px solid var(--line);
    overflow-y: auto;
    transform: translateX(102%);
    transition: transform .34s var(--ease);
}
.mw-drawer.is-open { transform: translateX(0); }
.mw-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.mw-drawer__close {
    width: 42px; height: 42px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--txt);
    font-size: 1.1rem;
    cursor: pointer;
}
.mw-drawer__group { border-top: 1px solid var(--line); padding: 6px 0; }
.mw-drawer a.mw-drawer__link {
    display: block;
    padding: 13px 2px;
    color: var(--txt);
    font-size: 1.02rem;
    font-weight: 500;
}
.mw-drawer a.mw-drawer__link:hover { color: var(--gold); }
.mw-drawer__sub { padding-left: 16px; border-left: 1px solid var(--line); margin: 2px 0 10px; }
.mw-drawer__sub a { display: block; padding: 9px 0; color: var(--txt-2); font-size: .93rem; }
.mw-drawer__label {
    font-family: var(--ff-mono);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--txt-3);
    padding: 14px 2px 4px;
}
.mw-drawer__cta { display: grid; gap: 11px; margin-top: 26px; }

.mw-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, .68);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.mw-overlay.is-open { opacity: 1; visibility: visible; }

body.mw-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.mw-hero {
    position: relative;
    padding: calc(var(--header-h) + 96px) 0 0;
    overflow: hidden;
    background:
        radial-gradient(1100px 620px at 78% 6%, rgba(212, 175, 55, .16), transparent 58%),
        radial-gradient(820px 620px at 8% 90%, rgba(76, 141, 255, .10), transparent 60%),
        var(--bg);
}
.mw-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 76px 76px;
    -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 20%, transparent 76%);
    mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 20%, transparent 76%);
    pointer-events: none;
}
.mw-hero__inner { position: relative; z-index: 2; }

.mw-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 8px 8px 8px 14px;
    margin-bottom: 30px;
    border: 1px solid var(--gold-line);
    border-radius: 100px;
    background: var(--gold-glow);
    font-size: .845rem;
    color: var(--txt);
}
.mw-hero__badge b { color: var(--gold); font-weight: 600; }
.mw-hero__badge span {
    padding: 3px 10px;
    border-radius: 100px;
    background: rgba(212, 175, 55, .18);
    font-family: var(--ff-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-lite);
}

.mw-hero h1 { margin-bottom: 24px; }
.mw-hero h1 em {
    font-style: normal;
    background: linear-gradient(120deg, var(--gold-lite) 10%, var(--gold) 55%, var(--gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gold);
}
.mw-hero__sub { font-size: 1.14rem; line-height: 1.76; max-width: 590px; margin-bottom: 34px; }
.mw-hero .mw-btns { margin-bottom: 34px; }

.mw-hero__note {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    font-size: .875rem;
    color: var(--txt-3);
}
.mw-hero__note span { display: inline-flex; align-items: center; gap: 8px; }
.mw-hero__note i { color: var(--up); font-size: .8rem; }

/* Hero visual card */
.mw-hero__visual { position: relative; }
.mw-quote-card {
    position: relative;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--bg-2), var(--bg-1));
    box-shadow: var(--shadow);
}
.mw-quote-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.mw-quote-card__sym { display: flex; align-items: center; gap: 12px; }
.mw-quote-card__sym i {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: var(--gold-glow);
    color: var(--gold);
}
.mw-quote-card__sym strong { display: block; color: #fff; font-size: 1.02rem; letter-spacing: -.01em; }
.mw-quote-card__sym span { display: block; font-size: .78rem; color: var(--txt-3); }
.mw-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 100px;
    font-family: var(--ff-mono);
    font-size: .765rem;
    font-weight: 600;
}
.mw-pill--up { background: rgba(43, 182, 115, .14); color: var(--up); }
.mw-pill--down { background: rgba(229, 72, 77, .14); color: var(--down); }

.mw-chart { display: block; width: 100%; height: auto; }

.mw-quote-card__foot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.mw-quote-card__foot div { text-align: center; }
.mw-quote-card__foot dt {
    font-family: var(--ff-mono);
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--txt-3);
    font-weight: 500;
    margin-bottom: 5px;
}
.mw-quote-card__foot dd {
    margin: 0;
    font-family: var(--ff-mono);
    font-size: 1.02rem;
    font-weight: 600;
    color: #fff;
}

.mw-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(15, 23, 39, .92);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
}
.mw-float i {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 9px;
    font-size: .82rem;
}
.mw-float strong { display: block; color: #fff; font-size: .93rem; line-height: 1.3; }
.mw-float span { display: block; font-size: .765rem; color: var(--txt-3); }
.mw-float--a { top: -22px; left: -34px; }
.mw-float--a i { background: rgba(43, 182, 115, .16); color: var(--up); }
.mw-float--b { bottom: -24px; right: -26px; }
.mw-float--b i { background: rgba(76, 141, 255, .16); color: var(--info); }

/* Ticker */
.mw-ticker {
    position: relative;
    z-index: 2;
    margin-top: 92px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(10, 16, 28, .6);
    overflow: hidden;
}
.mw-ticker__track {
    display: flex;
    gap: 0;
    width: max-content;
    animation: mw-marquee 42s linear infinite;
}
.mw-ticker:hover .mw-ticker__track { animation-play-state: paused; }
.mw-ticker__item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 17px 34px;
    border-right: 1px solid var(--line);
    font-family: var(--ff-mono);
    font-size: .845rem;
    white-space: nowrap;
}
.mw-ticker__item b { color: var(--txt); font-weight: 600; letter-spacing: .04em; }
.mw-ticker__item span { color: var(--txt-3); }
.mw-ticker__item .up { color: var(--up); }
.mw-ticker__item .down { color: var(--down); }

@keyframes mw-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .mw-ticker__track { animation: none; }
    html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   7. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.mw-pagehero {
    position: relative;
    padding: calc(var(--header-h) + 78px) 0 78px;
    overflow: hidden;
    background:
        radial-gradient(880px 420px at 76% 0%, rgba(212, 175, 55, .13), transparent 60%),
        var(--bg-1);
    border-bottom: 1px solid var(--line);
}
.mw-pagehero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000, transparent 72%);
    mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000, transparent 72%);
    pointer-events: none;
}
.mw-pagehero > .container { position: relative; z-index: 2; }
.mw-pagehero h1 { font-size: clamp(2.1rem, 4vw, 3.15rem); margin-bottom: 18px; }
.mw-pagehero p { font-size: 1.09rem; max-width: 700px; margin-bottom: 0; }

.mw-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    font-size: .855rem;
    color: var(--txt-3);
}
.mw-crumb a { color: var(--txt-2); }
.mw-crumb a:hover { color: var(--gold); }
.mw-crumb li::after { content: "/"; margin-left: 10px; color: var(--txt-3); opacity: .55; }
.mw-crumb li:last-child { color: var(--gold); }
.mw-crumb li:last-child::after { display: none; }

/* --------------------------------------------------------------------------
   8. Stats
   -------------------------------------------------------------------------- */
.mw-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
    overflow: hidden;
}
.mw-stat { padding: 34px 30px; border-right: 1px solid var(--line); }
.mw-stat:last-child { border-right: 0; }
.mw-stat__num {
    display: block;
    font-family: var(--ff-mono);
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--gold);
    margin-bottom: 12px;
}
.mw-stat__label { display: block; color: #fff; font-size: .97rem; font-weight: 600; margin-bottom: 5px; }
.mw-stat__desc { display: block; font-size: .845rem; color: var(--txt-3); line-height: 1.6; }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.mw-card {
    position: relative;
    height: 100%;
    padding: 34px 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(165deg, var(--bg-2), var(--bg-1));
    transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
    overflow: hidden;
}
.mw-card::before {
    content: "";
    position: absolute;
    top: 0; left: 24px; right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
    opacity: 0;
    transition: opacity .3s var(--ease);
}
.mw-card:hover {
    transform: translateY(-5px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
}
.mw-card:hover::before { opacity: 1; }

.mw-card__icon {
    width: 54px; height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    border: 1px solid var(--gold-line);
    border-radius: 13px;
    background: var(--gold-glow);
    color: var(--gold);
    font-size: 1.24rem;
}
.mw-card h3 { font-size: 1.24rem; margin-bottom: 12px; }
.mw-card p { font-size: .955rem; line-height: 1.72; margin-bottom: 20px; }
.mw-card__list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}
.mw-card__list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    font-size: .9rem;
    color: var(--txt-2);
    line-height: 1.6;
}
.mw-card__list li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    position: absolute;
    left: 0; top: 1px;
    font-size: .7rem;
    color: var(--gold);
}
.mw-card__tag {
    position: absolute;
    top: 22px; right: 22px;
    padding: 4px 10px;
    border-radius: 100px;
    background: rgba(43, 182, 115, .14);
    font-family: var(--ff-mono);
    font-size: .655rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--up);
}

/* Compact value card */
.mw-mini {
    height: 100%;
    padding: 28px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-1);
    transition: border-color .3s var(--ease), background .3s var(--ease);
}
.mw-mini:hover { border-color: var(--gold-line); background: var(--bg-2); }
.mw-mini i {
    display: block;
    margin-bottom: 16px;
    font-size: 1.32rem;
    color: var(--gold);
}
.mw-mini h4 { font-size: 1.05rem; margin-bottom: 8px; }
.mw-mini p { font-size: .89rem; line-height: 1.65; margin: 0; }

/* --------------------------------------------------------------------------
   10. Split / feature layout
   -------------------------------------------------------------------------- */
.mw-split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.mw-split--wide { grid-template-columns: 1.05fr .95fr; }

.mw-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.mw-checklist li { display: flex; gap: 14px; align-items: flex-start; }
.mw-checklist i {
    width: 24px; height: 24px;
    flex-shrink: 0;
    display: grid; place-items: center;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--gold-glow);
    color: var(--gold);
    font-size: .62rem;
}
.mw-checklist strong { display: block; color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.5; }
.mw-checklist span { display: block; font-size: .91rem; color: var(--txt-2); line-height: 1.65; }

.mw-panel {
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--bg-2), var(--bg-1));
}
.mw-panel--gold {
    border-color: var(--gold-line);
    background:
        radial-gradient(600px 300px at 100% 0%, rgba(212, 175, 55, .12), transparent 60%),
        linear-gradient(165deg, var(--bg-2), var(--bg-1));
}
.mw-panel h3 { font-size: 1.32rem; }
.mw-panel__title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
    font-size: 1.06rem;
    font-weight: 600;
    color: #fff;
}
.mw-panel__title i { color: var(--gold); }

/* --------------------------------------------------------------------------
   11. Steps
   -------------------------------------------------------------------------- */
.mw-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: mw-step; }
.mw-step { position: relative; padding-top: 30px; }
.mw-step::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--line);
}
.mw-step::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 42px; height: 2px;
    background: var(--gold);
}
.mw-step__n {
    counter-increment: mw-step;
    display: block;
    font-family: var(--ff-mono);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}
.mw-step__n::before { content: "Step " counter(mw-step, decimal-leading-zero); }
.mw-step h4 { font-size: 1.1rem; margin-bottom: 10px; }
.mw-step p { font-size: .91rem; line-height: 1.68; margin: 0; }

/* --------------------------------------------------------------------------
   12. Testimonials
   -------------------------------------------------------------------------- */
.mw-quote {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 32px 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-1);
    transition: border-color .3s var(--ease);
}
.mw-quote:hover { border-color: var(--gold-line); }
.mw-quote__stars { color: var(--gold); font-size: .8rem; letter-spacing: 2px; margin-bottom: 18px; }
.mw-quote p {
    flex: 1;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--txt);
    margin-bottom: 24px;
}
.mw-quote__who { display: flex; align-items: center; gap: 13px; padding-top: 20px; border-top: 1px solid var(--line); }
.mw-quote__ava {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--gold-glow);
    border: 1px solid var(--gold-line);
    color: var(--gold);
    font-weight: 700;
    font-size: .95rem;
}
.mw-quote__who strong { display: block; color: #fff; font-size: .95rem; line-height: 1.4; }
.mw-quote__who span { display: block; font-size: .82rem; color: var(--txt-3); }

/* --------------------------------------------------------------------------
   13. Partner strip
   -------------------------------------------------------------------------- */
.mw-partners {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-1);
}
.mw-partner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px 20px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-align: center;
    transition: background .25s var(--ease);
}
.mw-partner:hover { background: var(--bg-2); }
.mw-partner i { font-size: 1.34rem; color: var(--gold); }
.mw-partner strong { color: #fff; font-size: .97rem; font-weight: 600; }
.mw-partner span {
    font-family: var(--ff-mono);
    font-size: .69rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--txt-3);
}

/* --------------------------------------------------------------------------
   14. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.mw-faq { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-1); }
.mw-faq__item + .mw-faq__item { border-top: 1px solid var(--line); }
.mw-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 24px 28px;
    background: none;
    border: 0;
    text-align: left;
    color: #fff;
    font-family: var(--ff-sans);
    font-size: 1.04rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: color .2s var(--ease);
}
.mw-faq__q:hover { color: var(--gold); }
.mw-faq__q i {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--gold-glow);
    color: var(--gold);
    font-size: .74rem;
    transition: transform .28s var(--ease);
}
.mw-faq__q[aria-expanded="true"] { color: var(--gold); }
.mw-faq__q[aria-expanded="true"] i { transform: rotate(45deg); }
.mw-faq__a { padding: 0 28px 26px; }
.mw-faq__a p { font-size: .97rem; line-height: 1.75; margin: 0; max-width: 860px; }

/* --------------------------------------------------------------------------
   15. Tables
   -------------------------------------------------------------------------- */
.mw-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-1); }
.mw-table { width: 100%; min-width: 620px; border-collapse: collapse; margin: 0; }
.mw-table th, .mw-table td { padding: 17px 24px; text-align: left; border-bottom: 1px solid var(--line); }
.mw-table thead th {
    background: var(--bg-2);
    font-family: var(--ff-mono);
    font-size: .705rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--txt-3);
}
.mw-table tbody th { color: #fff; font-weight: 600; font-size: .96rem; }
.mw-table td { color: var(--txt-2); font-size: .94rem; }
.mw-table tbody tr:last-child th, .mw-table tbody tr:last-child td { border-bottom: 0; }
.mw-table tbody tr:hover { background: rgba(255, 255, 255, .022); }
.mw-table .yes { color: var(--up); }
.mw-table .no { color: var(--txt-3); }

/* --------------------------------------------------------------------------
   16. CTA band
   -------------------------------------------------------------------------- */
.mw-cta {
    position: relative;
    padding: 78px 62px;
    border: 1px solid var(--gold-line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(800px 400px at 88% 8%, rgba(212, 175, 55, .17), transparent 62%),
        linear-gradient(150deg, var(--bg-2), var(--bg-1));
    overflow: hidden;
    text-align: center;
}
.mw-cta h2 { margin-bottom: 16px; }
.mw-cta p { font-size: 1.1rem; max-width: 620px; margin: 0 auto 32px; }
.mw-cta .mw-btns { justify-content: center; }

/* --------------------------------------------------------------------------
   17. Risk / notice blocks
   -------------------------------------------------------------------------- */
.mw-notice {
    display: flex;
    gap: 18px;
    padding: 24px 26px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-sm);
    background: rgba(212, 175, 55, .05);
}
.mw-notice i { flex-shrink: 0; font-size: 1.05rem; color: var(--gold); margin-top: 4px; }
.mw-notice strong { display: block; color: #fff; font-size: 1rem; margin-bottom: 6px; }
.mw-notice p { font-size: .91rem; line-height: 1.7; margin: 0; }

/* --------------------------------------------------------------------------
   18. Forms
   -------------------------------------------------------------------------- */
.mw-field { margin-bottom: 18px; }
.mw-field label,
.mw-label {
    display: block;
    margin-bottom: 8px;
    font-size: .845rem;
    font-weight: 600;
    color: var(--txt-2);
    letter-spacing: .005em;
}
.mw-input,
.mw-form input[type="text"],
.mw-form input[type="email"],
.mw-form input[type="tel"],
.mw-form input[type="password"],
.mw-form select,
.mw-form textarea {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--txt);
    font-family: var(--ff-sans);
    font-size: .96rem;
    line-height: 1.5;
    transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.mw-input::placeholder,
.mw-form input::placeholder,
.mw-form textarea::placeholder { color: var(--txt-3); }
.mw-input:focus,
.mw-form input:focus,
.mw-form select:focus,
.mw-form textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
}
.mw-form textarea { resize: vertical; min-height: 140px; }
.mw-form select option { background: var(--bg-2); color: var(--txt); }
.mw-hint { font-size: .82rem; color: var(--txt-3); margin-top: 8px; }

.mw-formmsg {
    display: block;
    padding: 14px 18px;
    margin-bottom: 20px;
    border-radius: var(--radius-sm);
    background: rgba(43, 182, 115, .12);
    border: 1px solid rgba(43, 182, 115, .3);
    color: #7BE0AC;
    font-size: .93rem;
}
.mw-formmsg:empty { display: none; }
.mw-formmsg--error {
    background: rgba(229, 72, 77, .12);
    border-color: rgba(229, 72, 77, .32);
    color: #FF9DA1;
}

/* --------------------------------------------------------------------------
   19. Contact tiles
   -------------------------------------------------------------------------- */
.mw-contact-tile {
    display: flex;
    gap: 18px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-1);
    height: 100%;
    transition: border-color .3s var(--ease);
}
.mw-contact-tile:hover { border-color: var(--gold-line); }
.mw-contact-tile i {
    width: 46px; height: 46px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--gold-glow);
    color: var(--gold);
    font-size: 1.02rem;
}
.mw-contact-tile h4 { font-size: 1.02rem; margin-bottom: 6px; }
.mw-contact-tile p { font-size: .93rem; margin: 0; line-height: 1.65; }
.mw-contact-tile a { color: var(--txt-2); }
.mw-contact-tile a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   19b. Standalone auth pages (login / forgot / register / confirmation)
   -------------------------------------------------------------------------- */
.mw-auth {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: calc(var(--header-h) + 56px) 0 84px;
    background:
        radial-gradient(900px 520px at 78% 4%, rgba(212, 175, 55, .13), transparent 60%),
        radial-gradient(700px 500px at 6% 96%, rgba(76, 141, 255, .09), transparent 62%),
        var(--bg);
}
.mw-auth::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 70px 70px;
    -webkit-mask-image: radial-gradient(ellipse 76% 70% at 50% 30%, #000 15%, transparent 74%);
    mask-image: radial-gradient(ellipse 76% 70% at 50% 30%, #000 15%, transparent 74%);
    pointer-events: none;
}
.mw-auth > .container { position: relative; z-index: 2; }

.mw-auth__card {
    max-width: 520px;
    margin: 0 auto;
    padding: 44px 42px 38px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--bg-2), var(--bg-1));
    box-shadow: var(--shadow);
}
.mw-auth__card--wide { max-width: 760px; }

/* Standalone auth screens with no site header above them (admin consoles). */
.mw-auth--bare { padding: 48px 0; }
.mw-auth--bare .mw-auth__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 30px;
}
.mw-auth__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 14px;
    border: 1px solid var(--gold-line);
    border-radius: 100px;
    background: var(--gold-glow);
    font-family: var(--ff-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--gold);
}
.mw-auth__back {
    display: block;
    margin-top: 26px;
    text-align: center;
    font-size: .875rem;
    color: var(--txt-3);
}
.mw-auth__back:hover { color: var(--gold); }

/* Input with a trailing status icon. */
.mw-input-icon { position: relative; }
.mw-input-icon > i {
    position: absolute;
    top: 50%; right: 16px;
    transform: translateY(-50%);
    color: var(--txt-3);
    font-size: .92rem;
    pointer-events: none;
}
.mw-input-icon input { padding-right: 44px !important; }
.mw-auth__head { text-align: center; margin-bottom: 30px; }
.mw-auth__head h1 { font-size: 1.85rem; margin-bottom: 10px; }
.mw-auth__head p { font-size: .95rem; margin: 0; }

.mw-auth__card .mw-field:last-of-type { margin-bottom: 22px; }
.mw-auth__card input[type="text"],
.mw-auth__card input[type="email"],
.mw-auth__card input[type="tel"],
.mw-auth__card input[type="password"],
.mw-auth__card select,
.mw-auth__card textarea,
.mw-auth__card .form-control {
    display: block;
    width: 100%;
    height: auto;
    padding: 14px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--txt);
    font-family: var(--ff-sans);
    font-size: .96rem;
    line-height: 1.5;
}
.mw-auth__card input::placeholder,
.mw-auth__card .form-control::placeholder { color: var(--txt-3); }
.mw-auth__card input:focus,
.mw-auth__card select:focus,
.mw-auth__card textarea:focus,
.mw-auth__card .form-control:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
    background: var(--bg);
    color: var(--txt);
}
.mw-auth__card .mw-btn { width: 100%; }

.mw-auth__msg {
    display: block;
    margin-bottom: 20px;
    padding: 13px 16px;
    border: 1px solid rgba(229, 72, 77, .3);
    border-radius: var(--radius-sm);
    background: rgba(229, 72, 77, .1);
    color: #FF9DA1;
    font-size: .9rem;
    text-align: center;
}
.mw-auth__msg:empty { display: none; }
.mw-auth__msg i { margin-right: 8px; }
.mw-auth__msg--ok {
    border-color: rgba(43, 182, 115, .3);
    background: rgba(43, 182, 115, .1);
    color: #7BE0AC;
}

.mw-auth__divider {
    position: relative;
    margin: 22px 0;
    text-align: center;
    border-top: 1px solid var(--line);
}
.mw-auth__divider span {
    position: relative;
    top: -12px;
    padding: 0 14px;
    background: var(--bg-2);
    font-family: var(--ff-mono);
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--txt-3);
}

.mw-auth__foot {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: .92rem;
    color: var(--txt-2);
}
.mw-auth__foot p { margin-bottom: 6px; font-size: .92rem; }
.mw-auth__links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
    font-size: .89rem;
}
.mw-auth__links label { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--txt-2); cursor: pointer; }
.mw-auth__links input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--gold); }

.mw-auth__note {
    display: flex;
    gap: 12px;
    max-width: 520px;
    margin: 26px auto 0;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .02);
}
.mw-auth__note i { color: var(--gold); font-size: .9rem; margin-top: 4px; flex-shrink: 0; }
.mw-auth__note p { font-size: .845rem; line-height: 1.65; margin: 0; }

@media (max-width: 575.98px) {
    .mw-auth { padding: calc(var(--header-h) + 36px) 0 56px; }
    .mw-auth--bare { padding: 32px 0; }
    .mw-auth__card { padding: 32px 22px 28px; }
}

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.mw-footer {
    position: relative;
    border-top: 1px solid var(--line);
    background:
        radial-gradient(900px 400px at 12% 0%, rgba(212, 175, 55, .07), transparent 62%),
        var(--bg-1);
}
.mw-footer__main { padding: 78px 0 58px; }
.mw-footer__grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr 1.5fr;
    gap: 54px;
}
.mw-footer .mw-logo { margin-bottom: 22px; }
.mw-footer__about { font-size: .93rem; line-height: 1.75; margin-bottom: 24px; max-width: 360px; }

.mw-footer h5 {
    font-family: var(--ff-mono);
    font-size: .715rem;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 22px;
}
.mw-footer__links { list-style: none; padding: 0; margin: 0; }
.mw-footer__links li { margin-bottom: 11px; }
.mw-footer__links a { color: var(--txt-2); font-size: .93rem; }
.mw-footer__links a:hover { color: var(--gold); padding-left: 4px; }
.mw-footer__links a { transition: color .22s var(--ease), padding-left .22s var(--ease); }

.mw-footer__contact { list-style: none; padding: 0; margin: 0 0 24px; }
.mw-footer__contact li { display: flex; gap: 12px; margin-bottom: 13px; font-size: .93rem; color: var(--txt-2); line-height: 1.6; }
.mw-footer__contact i { color: var(--gold); font-size: .88rem; margin-top: 5px; flex-shrink: 0; }
.mw-footer__contact a { color: var(--txt-2); }
.mw-footer__contact a:hover { color: var(--gold); }

.mw-subscribe { display: flex; gap: 10px; margin-bottom: 14px; }
.mw-subscribe input {
    flex: 1;
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--txt);
    font-family: var(--ff-sans);
    font-size: .92rem;
}
.mw-subscribe input::placeholder { color: var(--txt-3); }
.mw-subscribe input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
.mw-subscribe .mw-btn { padding: 13px 20px; flex-shrink: 0; }

.mw-social { display: flex; gap: 10px; }
.mw-social a {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--txt-2);
    font-size: .92rem;
    transition: all .24s var(--ease);
}
.mw-social a:hover { border-color: var(--gold-line); background: var(--gold-glow); color: var(--gold); transform: translateY(-2px); }

.mw-footer__risk { padding: 30px 0; border-top: 1px solid var(--line); }
.mw-footer__risk p { font-size: .81rem; line-height: 1.75; color: var(--txt-3); margin: 0; }
.mw-footer__risk strong { color: var(--txt-2); }

.mw-footer__bottom {
    padding: 24px 0;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.mw-footer__bottom p { font-size: .86rem; color: var(--txt-3); margin: 0; }
.mw-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; padding: 0; margin: 0; }
.mw-footer__bottom a { color: var(--txt-3); font-size: .86rem; }
.mw-footer__bottom a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   21. Legacy auth modals — restyled to the dark theme.
        Markup and control IDs are preserved from the original MasterPage.
   -------------------------------------------------------------------------- */
.me-login-model .modal-dialog { max-width: 520px; }
.me-login-model .modal-content {
    position: relative;
    padding: 42px 40px 36px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--bg-2), var(--bg-1));
    box-shadow: var(--shadow);
    color: var(--txt);
}
.me-login-model .modal-body { padding: 0; }
.me-login-model .me-team-close,
.me-login-model .close.me-team-close {
    position: absolute;
    top: 16px; right: 18px;
    z-index: 5;
    width: 38px; height: 38px;
    padding: 0;
    background: none;
    border: 1px solid var(--line);
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: var(--txt-2);
    font-size: 1.02rem;
    font-weight: 400;
    line-height: 1;
    text-shadow: none;
    opacity: 1;
    float: none;
    cursor: pointer;
    transition: all .22s var(--ease);
}
.me-login-model .me-team-close:hover,
.me-login-model .close.me-team-close:hover { color: #fff; border-color: var(--line-strong); background: rgba(255, 255, 255, .06); opacity: 1; }
/* The retired theme turned this span into an orange disc. Keep it a plain glyph. */
.me-login-model .me-team-close span {
    display: block;
    width: auto; height: auto;
    background: none;
    border-radius: 0;
    line-height: 1;
    color: inherit;
}

.me-login-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.028em;
    color: #fff;
    text-align: center;
    margin-bottom: 28px;
}

.me-login-form input[type="text"],
.me-login-form input[type="email"],
.me-login-form input[type="tel"],
.me-login-form input[type="password"],
.me-login-form select,
.me-login-model .form-control {
    display: block;
    width: 100%;
    height: auto;
    padding: 13px 15px;
    margin-bottom: 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--txt);
    font-family: var(--ff-sans);
    font-size: .95rem;
    line-height: 1.5;
    transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.me-login-form input::placeholder, .me-login-model .form-control::placeholder { color: var(--txt-3); }
.me-login-form input:focus,
.me-login-form select:focus,
.me-login-model .form-control:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
    background: var(--bg);
    color: var(--txt);
}
.me-login-model select option { background: var(--bg-2); color: var(--txt); }

.me-login-model .row > p { padding-left: 15px; padding-right: 15px; }

/* Country code and mobile number share one line in the sign-up modal. The
   country select also carries .form-control, so these rules have to outrank
   `.me-login-model .form-control { width: 100% }` or the select eats the whole
   row and pushes the number field outside the modal on narrow screens. */
.me-phone-row { display: flex; gap: 10px; align-items: flex-start; }
.me-login-model .me-phone-row select,
.me-login-model .me-phone-row .form-control,
.me-phone-row select {
    flex: 0 0 40%;
    width: 40%;
    min-width: 0;
    padding-left: 10px;
    padding-right: 8px;
}
.me-login-model .me-phone-row input,
.me-phone-row input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.me-remember {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 22px;
    font-size: .885rem;
    color: var(--txt-2);
}
.me-remember label { display: flex; align-items: center; gap: 9px; margin: 0; cursor: pointer; }
.me-remember input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.me-remember .s_checkbox { display: none; }
.me-forgot-password { position: static; color: var(--gold); font-size: .885rem; }

/* The retired theme absolutely positioned this paragraph over the submit
   button. Stack the two instead. */
.me-login-btn { position: relative; margin-top: 6px; }
.me-login-btn .me-btn { display: block; width: 100%; line-height: 1.2; }
.me-login-btn p {
    position: static;
    display: block;
    margin: 18px 0 0;
    text-align: center;
    font-size: .9rem;
    color: var(--txt-2);
}
.me-login-btn p a { color: var(--gold); padding-left: 4px; font-weight: 600; }

.me-login-with-social {
    position: relative;
    margin-top: 28px;
    padding: 28px 0 0;
    background: none;
    border-top: 1px solid var(--line);
    text-align: center;
}
.me-login-with-social > span {
    position: absolute;
    top: -11px; left: 50%;
    transform: translateX(-50%);
    width: auto; height: auto;
    padding: 0 14px;
    background: var(--bg-2);
    border-radius: 0;
    box-shadow: none;
    display: inline-block;
    line-height: 22px;
    font-family: var(--ff-mono);
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--txt-3);
}
.me-login-with-social p { color: var(--txt-2); font-size: .9rem; margin: 0 0 14px; }
.me-login-with-social ul { display: none; }
.me-login-with-social .me-btn {
    display: block;
    width: 100%;
    background: transparent;
    border-color: var(--line-strong);
    color: var(--txt) !important;
}
.me-login-with-social .me-btn:hover {
    color: #fff !important;
    border-color: var(--gold-line);
    background: var(--gold-glow);
    box-shadow: none;
}

.errormsg, .me-login-model .errormsg {
    display: block;
    margin-bottom: 14px;
    font-size: .89rem;
    color: #FF8A8F;
    text-align: center;
}
.me-login-model [id*="lblSpID"] { display: block; margin-bottom: 10px; font-size: .87rem; text-align: center; }

/* Sign-up success panel — the original used hard-coded light inline styles. */
.me-login-model [id*="pnlSucess"] { color: var(--txt); }
.me-login-model [id*="pnlSucess"] > div > div,
.me-login-model [id*="pnlSucess"] div[style] {
    background-color: transparent !important;
    border-color: var(--line) !important;
    color: var(--txt-2) !important;
}
.me-login-model [id*="pnlSucess"] h3,
.me-login-model [id*="pnlSucess"] h4 { color: #fff !important; }
.me-login-model [id*="pnlSucess"] td { color: var(--txt-2) !important; border-color: var(--line) !important; }
.me-login-model [id*="pnlSucess"] td:last-child { color: var(--gold) !important; }
.me-login-model [id*="pnlSucess"] ul { color: var(--txt-2) !important; }
.me-login-model [id*="pnlSucess"] li { color: var(--txt-2) !important; }
.me-login-model [id*="pnlSucess"] p { color: var(--txt-2) !important; }

.me-login-model h3.text-center[style] { color: var(--txt-3) !important; }

.modal-backdrop.show { opacity: .78; }

/* --------------------------------------------------------------------------
   22. Reveal on scroll
   -------------------------------------------------------------------------- */
.mw-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.mw-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .mw-reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   23. Utilities
   -------------------------------------------------------------------------- */
.mw-mb-0 { margin-bottom: 0 !important; }
.mw-mt-4 { margin-top: 34px; }
.mw-mt-5 { margin-top: 54px; }
.mw-gap { display: grid; gap: 26px; }
.mw-text-gold { color: var(--gold); }
.mw-mono { font-family: var(--ff-mono); }

/* --------------------------------------------------------------------------
   24. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .mw-nav__link { padding: 10px 11px; font-size: .885rem; }
    .mw-split { gap: 48px; }
    .mw-cta { padding: 62px 40px; }
}

@media (max-width: 991.98px) {
    :root { --header-h: 72px; }
    .mw-nav, .mw-header__actions .mw-btn, .mw-header__actions .mw-login-link { display: none; }
    .mw-burger { display: grid; place-items: center; }
    .mw-section { padding: 74px 0; }
    .mw-section--tight { padding: 56px 0; }
    .mw-head { margin-bottom: 42px; }
    .mw-hero { padding-top: calc(var(--header-h) + 62px); }
    .mw-hero__visual { margin-top: 62px; }
    .mw-float--a { left: 0; }
    .mw-float--b { right: 0; }
    .mw-ticker { margin-top: 62px; }
    .mw-split { grid-template-columns: 1fr; gap: 44px; }
    .mw-stats { grid-template-columns: repeat(2, 1fr); }
    .mw-stat:nth-child(2) { border-right: 0; }
    .mw-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .mw-steps { grid-template-columns: repeat(2, 1fr); gap: 34px 26px; }
    .mw-footer__grid { grid-template-columns: 1fr 1fr; gap: 44px; }
    .mw-pagehero { padding: calc(var(--header-h) + 56px) 0 56px; }
}

@media (max-width: 767.98px) {
    body { font-size: 15.5px; }
    .mw-section { padding: 62px 0; }
    .mw-hero__badge { font-size: .78rem; }
    .mw-hero__sub { font-size: 1.04rem; }
    .mw-btns { gap: 11px; }
    .mw-btn, .me-btn { width: 100%; }
    .mw-btn--link { width: auto; }
    .mw-quote-card { padding: 20px; }
    .mw-float { position: static; margin-top: 14px; width: 100%; }
    .mw-stats { grid-template-columns: 1fr; }
    .mw-stat { border-right: 0; border-bottom: 1px solid var(--line); }
    .mw-stat:last-child { border-bottom: 0; }
    .mw-steps { grid-template-columns: 1fr; }
    .mw-cta { padding: 48px 26px; }
    .mw-footer__grid { grid-template-columns: 1fr; gap: 38px; }
    .mw-footer__main { padding: 58px 0 42px; }
    .mw-subscribe { flex-direction: column; }
    .mw-subscribe .mw-btn { width: 100%; }
    .mw-faq__q { padding: 20px 20px; font-size: .98rem; }
    .mw-faq__a { padding: 0 20px 22px; }
    .me-login-model .modal-content { padding: 36px 22px 28px; }
    .mw-panel { padding: 26px 22px; }
    .mw-card { padding: 28px 24px; }
    .mw-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Sign-up: country code select
   --------------------------------------------------------------------------
   iOS Safari gives a native <select> its own intrinsic metrics and largely
   ignores the vertical padding used on the inputs beside it. On some handsets
   that rendered the country code shorter than the mobile field next to it,
   with its own text clipped. Dropping the native appearance puts the box back
   under this stylesheet's control - and once it is gone the arrow has to be
   drawn here too, since the browser stops supplying one.

   min-height is stated on the inputs as well, so the two halves of the phone
   row are pinned to the same height and cannot drift apart again on a
   platform that measures them differently.
   -------------------------------------------------------------------------- */
.me-login-form input[type="text"],
.me-login-form input[type="email"],
.me-login-form input[type="tel"],
.me-login-form input[type="password"],
.me-login-form select,
.me-login-model .form-control {
    min-height: 52px;
}

.me-login-form select,
.me-login-model select.form-control,
.me-login-model .me-phone-row select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Room for the arrow we now draw ourselves. */
    padding-right: 32px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2394A3BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 10px 6px;
    /* Safari ignores text-overflow on a select, so the label is kept short
       enough to fit rather than relying on an ellipsis. */
    text-overflow: ellipsis;
}

/* The base :focus rule re-declares `background`, which would wipe the arrow. */
.me-login-form select:focus,
.me-login-model select.form-control:focus,
.me-login-model .me-phone-row select:focus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23D4AF37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 10px 6px;
}

/* The dropdown list itself is drawn by the OS; only its options can be
   coloured, and only on desktop. */
.me-login-model select option { background: var(--bg-2); color: var(--txt); }

/* --------------------------------------------------------------------------
   Password reveal toggle
   --------------------------------------------------------------------------
   The wrapper and button are injected by assets/js/mwealth.js around every
   password field on the public pages, so no markup has to know about this.
   -------------------------------------------------------------------------- */
.mw-eye-wrap { position: relative; display: block; }

/* The field must not run its text under the button. */
.mw-eye-wrap > input[type="password"],
.mw-eye-wrap > input[type="text"] { padding-right: 48px !important; }

.mw-eye {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--txt-3);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    transition: color .18s var(--ease), background .18s var(--ease);
}
.mw-eye:hover { background: rgba(255,255,255,.06); color: var(--gold); }
.mw-eye:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* A revealed password is worth reading, so it gets the mono face. */
.mw-eye-wrap > input[type="text"] { font-family: var(--ff-mono, monospace); letter-spacing: .04em; }

/* The sign-up modal stacks its fields with a bottom margin; the wrapper is now
   the element in that flow, so it carries the gap instead of the input. */
.me-login-form .mw-eye-wrap { margin-bottom: 14px; }
.me-login-form .mw-eye-wrap > input { margin-bottom: 0 !important; }