/* =====================================================================
   Membership page (Views/Membership/Plans.cshtml)
   Keeps the membership theme (deep navy to indigo with cyan to blue) and the calm, layered feel of the home hero.
   Everything is scoped under .mpg. The hero is always dark; the sections below follow the site light/dark theme.
   ===================================================================== */
.mpg {
    --g-ink: #0f1b2d; --g-body: #46566b; --g-muted: #6b7c91; --g-line: rgba(20, 90, 140, .16);
    --g-card: rgba(255, 255, 255, .8); --g-soft: rgba(8, 145, 178, .10);
    --g-a: #0891b2; --g-b: #2563eb; --g-a-ink: #0b6f8c;
    --g-lift: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 2px 4px rgba(15, 60, 100, .08), 0 22px 36px -26px rgba(15, 80, 130, .45);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--g-body);
    overflow-x: clip;
}
[data-bs-theme="dark"] .mpg {
    --g-ink: #eef7ff; --g-body: #b4c6d9; --g-muted: #7f95ab; --g-line: rgba(110, 190, 230, .16);
    --g-card: rgba(7, 24, 44, .66); --g-soft: rgba(47, 184, 214, .12);
    --g-a: #2fb8d6; --g-b: #3b82f6; --g-a-ink: #7fd6ec;
    --g-lift: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 2px 4px rgba(0, 0, 0, .4), 0 22px 36px -26px rgba(0, 0, 0, .85);
}
.mpg *, .mpg *::before, .mpg *::after { box-sizing: border-box; }
.mpg-shell { width: min(1320px, 100% - 32px); margin-inline: auto; }

/* ---------- hero ---------- */
.mpg-hero { position: relative; isolation: isolate; color: #e7efff; background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #4f46e5 120%); padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 5vw, 64px); overflow: hidden; }
.mpg-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mpg-hero__bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 80%); }
.mpg-hero__bg i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: mpg-drift 16s ease-in-out infinite alternate; }
.mpg-hero__bg i:nth-child(1) { width: 380px; height: 380px; left: -90px; top: -80px; background: #06b6d4; }
.mpg-hero__bg i:nth-child(2) { width: 340px; height: 340px; right: -60px; top: 10%; background: #6366f1; animation-delay: -5s; }
.mpg-hero__bg i:nth-child(3) { width: 300px; height: 300px; left: 38%; bottom: -140px; background: #3b82f6; animation-delay: -9s; }
@keyframes mpg-drift { to { transform: translate(40px, 30px) scale(1.08); } }
.mpg-hero__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mpg-hero h1 { margin: 0 0 14px; max-width: 18ch; font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; color: #fff; text-wrap: balance; }
.mpg-hero h1 em { font-style: normal; background: linear-gradient(100deg, #22d3ee, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mpg-hero h1 em.alt { background-image: linear-gradient(100deg, #2dd4bf, #22d3ee); }
.mpg-lede { margin: 0 0 24px; max-width: 56ch; font-size: clamp(1rem, 1.5vw, 1.0625rem); line-height: 1.6; color: #b9c8e6; }
.mpg-perks { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; }
.mpg-perks li { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .07); color: #e3ecff; font-size: .8125rem; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mpg-perks li i { color: #22d3ee; }
.mpg-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.mpg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 26px; border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: .9375rem; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, background .2s; }
.mpg-btn--main { background: linear-gradient(135deg, #06b6d4, #3b82f6); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 16px 28px -14px rgba(8, 145, 178, .85); }
.mpg-btn--main:hover { transform: translateY(-2px); color: #fff; }
.mpg-btn--main i, .mpg-btn--ghost i { transition: transform .25s; }
.mpg-btn--main:hover i { transform: translateY(3px); }
.mpg-btn--ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); color: #fff; }
.mpg-btn--ghost:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }
.mpg-btn--ghost:hover i { transform: translateX(4px); }
.mpg-btn:active { transform: scale(.98); }
.mpg-btn:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }

/* ---------- shared section heads ---------- */
.mpg-plans, .mpg-why, .mpg-faq { padding: clamp(36px, 5vw, 64px) 0 clamp(16px, 2.4vw, 28px); }
.mpg-sec-head { max-width: 780px; margin: 0 auto clamp(26px, 3.5vw, 44px); text-align: center; }
.mpg-eyebrow { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--g-line); background: var(--g-soft); color: var(--g-a-ink); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mpg-sec-head h2 { margin: 14px 0 12px; font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 800; color: var(--g-ink); }
.mpg-sec-head h2 em { font-style: normal; background: linear-gradient(100deg, var(--g-a), var(--g-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mpg-sec-head p { margin: 0 auto; font-size: 1rem; line-height: 1.65; color: var(--g-body); }
.mpg-trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 20px !important; font-size: .9375rem; font-weight: 600; color: var(--g-ink) !important; }
.mpg-trust img { height: 32px; width: auto; }
.mpg-trust i { color: #17b26a; margin-right: 6px; }

.mpg-rv { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--d, 0ms), transform .6s var(--d, 0ms) cubic-bezier(.2, .7, .2, 1); }
.mpg-rv.in { opacity: 1; transform: none; }

/* ---------- why membership ---------- */
.mpg-why__grid { list-style: none; margin: 0 0 clamp(28px, 4vw, 48px); padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.mpg-why__grid li { position: relative; display: grid; gap: 4px; padding: 20px; border: 1px solid var(--g-line); border-radius: 16px; background: var(--g-card); box-shadow: var(--g-lift); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .25s cubic-bezier(.2, .7, .2, 1), border-color .25s, box-shadow .25s; }
.mpg-why__grid li:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--g-a) 45%, var(--g-line)); }
.mpg-why__grid li i { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 8px; border-radius: 12px; background: linear-gradient(135deg, #06b6d4, #3b82f6); color: #fff; font-size: 1.1rem; box-shadow: 0 10px 18px -10px rgba(8, 145, 178, .8); transition: transform .3s; }
.mpg-why__grid li:hover i { transform: rotate(-6deg) scale(1.06); }
.mpg-why__grid li b { font-size: 1.0625rem; font-weight: 700; color: var(--g-ink); }
.mpg-why__grid li small { font-size: .875rem; color: var(--g-muted); }

.mpg-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, .22); box-shadow: 0 30px 50px -34px rgba(8, 120, 170, .7); }
.mpg-stats > div { display: grid; gap: 4px; padding: 26px 16px; text-align: center; color: #fff; background: linear-gradient(135deg, #0e7490 0%, #2563eb 100%); }
.mpg-stats b { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mpg-stats span { font-size: .9375rem; opacity: .85; }
@media (min-width: 768px) { .mpg-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.mpg-proof { padding-top: clamp(16px, 3vw, 32px); }
.mpg-faq .row { margin-inline: 0; }

@media (max-width: 575.98px) {
    .mpg-cta .mpg-btn { flex: 1 1 100%; }
    .mpg-perks li { height: 34px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .mpg-hero__bg i { animation: none; }
    .mpg-rv { opacity: 1; transform: none; transition: none; }
    .mpg-btn, .mpg-why__grid li { transition: none; }
}

/* ---------- two pages, one layout: bootcamp (cyan to blue) and self-paced (indigo) ---------- */
.mpg--bc .mpg-hero { background: linear-gradient(135deg, #0b1730 0%, #0b4a7a 55%, #0891b2 135%); }
.mpg--sp .mpg-hero { background: linear-gradient(135deg, #14123a 0%, #3730a3 55%, #7c6cf0 135%); }
.mpg--bc .mpg-hero__bg i:nth-child(1) { background: #06b6d4; }
.mpg--bc .mpg-hero__bg i:nth-child(2) { background: #2563eb; }
.mpg--bc .mpg-hero__bg i:nth-child(3) { background: #0ea5e9; }
.mpg--sp .mpg-hero__bg i:nth-child(1) { background: #6366f1; }
.mpg--sp .mpg-hero__bg i:nth-child(2) { background: #8b5cf6; }
.mpg--sp .mpg-hero__bg i:nth-child(3) { background: #4f46e5; }
.mpg--sp .mpg-hero h1 em { background-image: linear-gradient(100deg, #c7d2fe, #ddd6fe); }
.mpg--sp .mpg-perks li i { color: #c4b5fd; }
.mpg-hero h1 { max-width: 20ch; }

.mpg-switch { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 22px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mpg-switch a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; color: #dbe7ff; font-size: .9rem; font-weight: 700; text-decoration: none; transition: background .2s, color .2s, transform .15s; }
.mpg-switch a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.mpg-switch a:active { transform: scale(.97); }
.mpg-switch a.on { background: #fff; color: #0f1b2d; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6); }
.mpg--bc .mpg-switch a.on i { color: #0891b2; }
.mpg--sp .mpg-switch a.on i { color: #4f46e5; }
.mpg-switch a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.mpg-plans { padding-top: clamp(28px, 4vw, 48px); }
.mpg-other { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin: 28px 0 0; font-size: .9375rem; color: var(--g-body); }
.mpg-other a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--g-a-ink); text-decoration: none; }
.mpg-other a:hover { color: var(--g-b); }
.mpg-other a i { transition: transform .2s; }
.mpg-other a:hover i { transform: translateX(3px); }
.mpg-other button { height: 40px; padding: 0 18px; border: 1px solid var(--g-line); border-radius: 999px; background: var(--g-card); color: var(--g-ink); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; transition: border-color .2s, transform .15s; }
.mpg-other button:hover { border-color: color-mix(in srgb, var(--g-a) 45%, var(--g-line)); }
.mpg-other button:active { transform: scale(.97); }