@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap");
/* Customer signup page, v2 look (2026-10-30). Generated from join-v2.css. Loaded only by Views/Home/Signup-FinancialEdge.cshtml when the address
   has ?v2=1. It restyles the existing enrollment form to match makewealthreal.com; the form's
   fields, ids, scripts and posting are untouched. Everything is scoped to html.v2join. */
html.v2join {
  --mj-bg: #f5f7fa; --mj-card: #ffffff; --mj-line: #e3e7ee; --mj-ink: #121417; --mj-ink-2: #2e3239; --mj-muted: #5f6670;
  --mj-blue: #00b4ff; --mj-blue-d: #0798dd; --mj-green: #76c043; --mj-red: #e5484d;
  --mj-grad: linear-gradient(115deg, #00b4ff 0%, #3cbcb0 50%, #76c043 100%);
  --mj-dark: #0e0f11; --mj-dark-2: #1a1b1f;
}
html.v2join body { font-family: "Montserrat", system-ui, sans-serif !important; background: var(--mj-bg) !important; color: var(--mj-ink); -webkit-font-smoothing: antialiased; padding-top: 0 !important; }
html.v2join body * { font-family: "Montserrat", system-ui, sans-serif; }

/* the old header, nav bar, title, sponsor line and footer give way to the makewealthreal.com ones */
#newThemeHeader, #navLayout, #footBottom,
html.v2join .joinTitleText, html.v2join #SponsorText, html.v2join #SponsorTextFr, html.v2join #SponsorTextSp, html.v2join #SponsorTextPt { display: none !important; }

/* ---------- header ---------- */
.mj-dbar { background: var(--mj-grad); color: #fff; font-size: 14px; font-weight: 600; text-align: center; padding: 9px 16px; }
.mj-dbar b { font-weight: 800; }
.mj-hd { background: var(--mj-dark); border-bottom: 1px solid rgba(255,255,255,.08); }
.mj-wrap { max-width: 1220px; margin: 0 auto; padding: 0 28px; }
.mj-hd .mj-wrap { display: flex; align-items: center; gap: 20px; min-height: 78px; }
.mj-logo img { height: 46px; width: auto; display: block; }
.mj-hd-r { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.mj-secure { display: inline-flex; align-items: center; gap: 8px; color: #d6d9df; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.mj-secure svg { width: 16px; height: 16px; stroke: #3ddc84; fill: none; stroke-width: 2; }
html.v2join .mj-hd a.mj-help { color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 9px 18px; }
html.v2join .mj-hd a.mj-help:hover { border-color: var(--mj-blue); color: #fff; }

/* ---------- hero ---------- */
.mj-hero { background: var(--mj-dark); color: #f4f5f7; position: relative; overflow: hidden; padding: 46px 0 120px; text-align: center; }
.mj-hero::before { content: ""; position: absolute; width: 900px; height: 900px; left: -380px; top: -460px; border-radius: 50%; background: radial-gradient(circle, rgba(0,180,255,.16), transparent 65%); pointer-events: none; }
.mj-hero .mj-wrap { position: relative; }
.mj-crumb { font-size: 13px; font-weight: 700; color: #a3a7b0; margin-bottom: 8px; }
html.v2join .mj-crumb a { color: #a3a7b0; text-decoration: none; }
.mj-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--mj-blue); }
.mj-kicker::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: var(--mj-grad); }
html.v2join .mj-hero h1 { font-size: clamp(34px, 4.6vw, 58px); font-weight: 900; letter-spacing: -.025em; line-height: 1.08; margin: 16px 0 16px; color: #f4f5f7; }
.mj-gt { background: var(--mj-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mj-lede { font-size: 18px; color: #a3a7b0; max-width: 640px; margin: 0 auto; line-height: 1.6; }

/* ---------- the form card ---------- */
html.v2join #MainDivFe { width: auto !important; max-width: 900px; margin: -80px auto 70px !important; padding: 0 20px !important; position: relative; z-index: 2; background: transparent !important; }
html.v2join #MainDivFe > #checkoutPage { max-width: none !important; background: var(--mj-card); border: 1px solid var(--mj-line); border-radius: 28px; box-shadow: 0 30px 70px rgba(18,20,23,.14); padding: 40px 44px 44px; margin: 0 auto !important; }
html.v2join #FEform fieldset { border: 0; margin: 0; padding: 0; }
html.v2join #FEform .block { margin: 0 0 8px; padding: 0; border: 0; background: transparent; }

/* step headings: the page script rewrites their text, so only the look changes */
html.v2join #FEform .legend.newTheme { background: none !important; color: var(--mj-ink) !important; border: 0 !important; border-top: 1px solid var(--mj-line) !important; border-radius: 0; font-size: 22px !important; font-weight: 900 !important; letter-spacing: -.02em; line-height: 1.2; padding: 30px 0 14px !important; margin: 18px 0 6px !important; text-transform: none; height: auto !important; width: auto !important; }
html.v2join #FEform .legend.newTheme::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 3px; background: var(--mj-grad); margin-bottom: 12px; }
html.v2join #FEform .block:first-child .legend.newTheme { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }

/* rows: the page script paints focused rows with inline backgrounds; keep them clean */
html.v2join #FEform .formRow { background: transparent !important; border: 0 !important; padding: 6px 0 !important; margin: 0 !important; box-shadow: none !important; }
html.v2join #FEform label { font-size: 14px !important; font-weight: 700 !important; color: var(--mj-ink-2) !important; margin-bottom: 6px; }
html.v2join #FEform { color: var(--mj-ink-2); font-size: 15px; line-height: 1.6; }

/* text fields and selects */
html.v2join #FEform input[type=text], html.v2join #FEform input[type=integer], html.v2join #FEform input[type=email],
html.v2join #FEform input[type=password], html.v2join #FEform input[type=date], html.v2join #FEform input[type=tel],
html.v2join #FEform select, html.v2join #FEform textarea {
  font-size: 15px !important; color: var(--mj-ink) !important; background: #fff !important; border: 1px solid #cfd6e0 !important;
  border-radius: 12px !important; box-shadow: none !important; height: 46px !important; line-height: 1.3 !important; padding: 10px 14px !important;
  transition: border-color .15s, box-shadow .15s; box-sizing: border-box !important;
}
html.v2join #FEform textarea { height: auto !important; }
/* the short fields keep their original widths, so they get less padding */
html.v2join #FEform #CreditCardMonth, html.v2join #FEform #CreditCardYear, html.v2join #FEform #CreditCardCCV { padding: 6px 8px !important; }
html.v2join #FEform .jSignature { border: 0 !important; }
html.v2join #FEform .jSignature { display: block; }
html.v2join #FEform input:focus, html.v2join #FEform select:focus, html.v2join #FEform textarea:focus {
  border-color: var(--mj-blue) !important; box-shadow: 0 0 0 4px rgba(0,180,255,.16) !important; outline: 0 !important;
}
html.v2join #FEform input[type=radio], html.v2join #FEform input[type=checkbox] { accent-color: var(--mj-blue); width: 18px; height: 18px; vertical-align: -3px; }

/* validation */
html.v2join #FEform .field-validation-error, html.v2join #FEform .field-validation-error span, html.v2join #FEform label.error { color: var(--mj-red) !important; font-size: 13px !important; font-weight: 700 !important; }
html.v2join #FEform .input-validation-error { border-color: var(--mj-red) !important; }

/* ---------- Step 1: the two selections as cards ---------- */
html.v2join #FEform #divEnrollment, html.v2join #FEform #FinancialEdgeDiv {
  border: 1px solid var(--mj-line) !important; border-radius: 20px !important; padding: 22px 24px !important; margin: 14px 0 0 !important;
  background: #fff !important; box-shadow: 0 2px 10px rgba(18,20,23,.06);
}
html.v2join #FEform #divEnrollment:has(input:checked), html.v2join #FEform #FinancialEdgeDiv:has(input:checked) { border-color: var(--mj-blue) !important; box-shadow: 0 0 0 3px rgba(0,180,255,.14), 0 14px 40px rgba(18,20,23,.08); }
html.v2join #FEform #divEnrollment .first { float: none !important; width: auto !important; display: flex; align-items: center; gap: 4px; }
html.v2join #FEform #divPromoterText { padding: 0 24px 6px !important; margin-top: -6px !important; border: 1px solid var(--mj-blue) !important; border-top: 0 !important; border-radius: 0 0 20px 20px !important; background: #fff !important; box-shadow: 0 14px 40px rgba(18,20,23,.08) !important; }
html.v2join #FEform #divEnrollment:has(input:checked) { border-radius: 20px 20px 0 0 !important; border-bottom: 0 !important; box-shadow: none; }
html.v2join .v2-role { display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mj-blue); margin-bottom: 2px; }
html.v2join #LCText { font-size: 20px; font-weight: 900; color: var(--mj-ink); letter-spacing: -.01em; line-height: 1.25; margin-left: 12px !important; }
html.v2join .v2-price { display: block; font-size: 15px; font-weight: 700; color: var(--mj-muted); letter-spacing: 0; margin-top: 2px; }
html.v2join .v2-price b { color: var(--mj-ink); font-weight: 900; font-size: 18px; }
html.v2join .v2-desc { margin: 10px 0 4px !important; font-size: 15px; color: var(--mj-ink-2); }
html.v2join .v2-list { display: block; margin: 10px 0 4px; }
html.v2join .v2-list > span { display: block; position: relative; padding-left: 26px; margin: 7px 0; font-size: 14.5px; line-height: 1.55; color: var(--mj-ink-2); }
html.v2join .v2-list > span::before { content: "\2713"; position: absolute; left: 2px; top: 0; color: var(--mj-green); font-weight: 900; }
html.v2join .v2-list b { color: var(--mj-ink); }
html.v2join .v2-note { display: block; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #eef9ff; color: #0b5f86; font-size: 13.5px; font-weight: 600; line-height: 1.5; }
html.v2join .v2-free { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--mj-grad); border-radius: 999px; padding: 5px 12px; }
html.v2join #FEform #FinancialEdgeDiv { margin-left: 0 !important; color: var(--mj-ink-2) !important; }
html.v2join #FEform #FinancialEdgeDiv .v2-mhead { display: inline-block; vertical-align: top; margin-left: 12px; }
html.v2join #FEform #FinancialEdgeDiv .v2-mtitle { font-size: 20px; font-weight: 900; color: var(--mj-ink); letter-spacing: -.01em; line-height: 1.25; }

/* "continue" link and the bottom "continue after filling" link read as buttons */
html.v2join #divProceedEnrollmentLink { margin: 30px 0 10px !important; }
html.v2join #ProceedEnrollmentLink, html.v2join .fill_fields a {
  display: inline-flex; align-items: center; justify-content: center; background: var(--mj-grad); color: #fff !important; font-weight: 800 !important;
  font-size: 15px; letter-spacing: .02em; border-radius: 999px; padding: 15px 30px; text-decoration: none !important; box-shadow: 0 14px 30px rgba(0,180,255,.30);
}

/* ---------- submit ---------- */
html.v2join .btnContainer { text-align: center; margin: 26px 0 10px !important; }
html.v2join #joinNow, html.v2join .btnSignup {
  background: var(--mj-grad) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 17px 44px !important;
  font-size: 17px !important; font-weight: 800 !important; letter-spacing: .02em; text-shadow: none !important; box-shadow: 0 14px 30px rgba(0,180,255,.30) !important;
  height: auto !important; width: auto !important; min-width: 240px; cursor: pointer; transition: transform .15s;
}
html.v2join #joinNow:hover { transform: translateY(-2px); }
html.v2join #joinNow[disabled] { opacity: .6; transform: none; }

/* signature pad, agreement and reCAPTCHA */

html.v2join .servAgr, html.v2join .agree { font-size: 14px; color: var(--mj-ink-2); }
html.v2join #FEform a { color: var(--mj-blue-d); }

/* ---------- footer ---------- */
.mj-ft { background: var(--mj-dark); color: #a3a7b0; padding: 64px 0 34px; font-size: 14px; line-height: 1.7; }
.mj-fg { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.mj-ft img { height: 54px; width: auto; margin-bottom: 14px; display: block; }
html.v2join .mj-ft h4 { color: #f4f5f7; font-size: 15px; font-weight: 800; margin: 0 0 12px; }
html.v2join .mj-ft ul { list-style: none; margin: 0; padding: 0; }
html.v2join .mj-ft li { margin: 0 0 8px; }
html.v2join .mj-ft a { color: #a3a7b0; text-decoration: none; }
html.v2join .mj-ft a:hover { color: #fff; }
.mj-legal { border-top: 1px solid rgba(255,255,255,.08); margin-top: 40px; padding-top: 22px; font-size: 12.5px; display: grid; gap: 8px; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .mj-wrap { padding: 0 16px; }
  .mj-hd .mj-wrap { min-height: 64px; }
  .mj-logo img { height: 38px; }
  .mj-secure span, .mj-q { display: none; }
  html.v2join .mj-hd a.mj-help { padding: 8px 14px; font-size: 13px; }
  .mj-hero { padding: 30px 0 100px; }
  .mj-lede { font-size: 16px; }
  html.v2join #MainDivFe { padding: 0 12px !important; margin-top: -70px !important; }
  html.v2join #MainDivFe > #checkoutPage { padding: 26px 18px 30px; border-radius: 22px; }
  html.v2join #FEform .first, html.v2join #FEform .second { float: none !important; width: 100% !important; margin-left: 0 !important; }
  html.v2join #FEform .legend.newTheme { font-size: 19px !important; }
  html.v2join #FEform #divEnrollment, html.v2join #FEform #FinancialEdgeDiv { padding: 18px !important; }
  html.v2join #FEform #divPromoterText { padding: 0 18px 6px !important; }
  html.v2join #LCText, html.v2join #FEform #FinancialEdgeDiv .v2-mtitle { font-size: 18px; }
  .mj-fg { grid-template-columns: 1fr 1fr; gap: 28px; }
  .mj-fg > div:first-child { grid-column: 1 / -1; }
}

/* ---------- customer signup only ---------- */
/* the membership summary and the price box beside it */
html.v2join #FEform fieldset.singup_protection { border: 0; margin: 0; padding: 0; }
html.v2join #FEform .service-agreement > .clearfix { display: flex; gap: 22px; align-items: flex-start; margin-top: 0 !important; background: transparent !important; padding: 0 !important; }
html.v2join #FEform .service-agreement .span6 { padding: 0 !important; flex: 1.5; width: auto !important; margin: 0 !important; float: none !important; }
html.v2join #FEform .service-agreement .span5 { flex: 1; width: auto !important; margin: 0 !important; float: none !important; background: var(--mj-bg); border: 1px solid var(--mj-line); border-radius: 18px; padding: 18px 20px; font-size: 15px; color: var(--mj-ink-2); line-height: 1.9; }
html.v2join #FEform .service-agreement .span5 .total { border-top: 1px solid var(--mj-line); margin-top: 8px; padding-top: 8px; font-size: 18px; color: var(--mj-ink); }
html.v2join #FEform .v2-card-title { font-size: 26px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; color: var(--mj-ink); margin: 2px 0 6px; }
html.v2join #FEform .v2-price { margin: 0 0 6px; }
html.v2join #FEform .adh-text { display: none; }

/* section headings (the page script paints these blue inline) */
html.v2join #FEform .blue-header { background: none !important; border: 0; border-top: 1px solid var(--mj-line); border-radius: 0; padding: 30px 0 10px; margin: 22px 0 6px; }
html.v2join #FEform .blue-header::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 3px; background: var(--mj-grad); margin-bottom: 12px; }
html.v2join #FEform .blue-header h3 { color: var(--mj-ink) !important; font-size: 22px !important; font-weight: 900 !important; letter-spacing: -.02em; text-transform: lowercase; margin: 0; padding: 0; line-height: 1.2; background: none !important; }

html.v2join #FEform .blue-header h3::first-letter { text-transform: uppercase; }

/* total, signature, reCAPTCHA and agreement */
html.v2join #FEform .content-text { font-family: "Montserrat", system-ui, sans-serif; color: var(--mj-ink-2) !important; font-size: 15px; }
html.v2join #FEform p.tos { text-align: center; background: #eef9ff; color: #0b5f86 !important; border-radius: 14px; padding: 14px 16px; font-weight: 600; }
html.v2join #SignatureParent { background: var(--mj-bg) !important; border: 1px dashed #cfd6e0; border-radius: 14px; color: var(--mj-ink-2) !important; }
html.v2join #signature { border: 0 !important; background: #fff !important; border-radius: 10px; }
html.v2join #FEform #AgreeTermsCM p { color: var(--mj-muted); text-align: left; }

html.v2join #FEform .v2-sign { max-width: 560px; margin: 4px auto 16px; padding: 14px 18px; border-radius: 14px; border: 1px solid #ffd27a; background: #fff8e6; color: #6b4a00; font-size: 14.5px; font-weight: 600; line-height: 1.55; text-align: center; }
html.v2join #FEform .v2-sign b { display: block; font-size: 16px; font-weight: 900; color: #4a3300; margin-bottom: 2px; }

/* Signup Now comes after the signature, reCAPTCHA and agreement; only the display order changes, the markup and scripts stay as they are */
html.v2join #FEform div.inner.tos { display: flex; flex-direction: column; }
html.v2join #FEform div.inner.tos > br { display: none; }
html.v2join #FEform div.inner.tos > #signCheckSection { order: 1; }
html.v2join #FEform div.inner.tos > .servAgr { order: 2; margin-top: 26px !important; }
html.v2join #FEform div.inner.tos > .servAgr .btnContainer { margin-top: 0 !important; }

@media (max-width: 760px) {
  html.v2join #FEform .service-agreement > .clearfix { flex-direction: column; }
  html.v2join #FEform .service-agreement .span5 { width: 100% !important; box-sizing: border-box; }
  html.v2join #FEform .blue-header h3 { font-size: 19px !important; }
  html.v2join #signCheckSection > div > div:first-child { flex-direction: column; align-items: center; gap: 14px; }
  html.v2join #signCheckSection > div > div:first-child > div { margin-left: 0 !important; }
}