/* ═══════════════════════════════════════════════════════════════════
   VixBooks.com auth layout — brand panel + form panel
   Real Estate Builders CRM public pages (Views/Shared/_PublicLayout.cshtml).
   Loaded last, after public.css and Bootstrap.
   ═══════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/inter/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/inter/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('../fonts/inter/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-display: swap; src: url('../fonts/inter/inter-800.woff2') format('woff2'); }

.vx-public {
  --vx-brand: #2f5bff;
  --vx-accent: #7c4dff;
  --vx-accent-ink: #6231e8;
  --vx-brand-hover: #1f47e6;
  --vx-brand-soft: rgba(47, 91, 255, 0.12);
  --vx-text: #0b1433;
  --vx-text-2: #3d4865;
  --vx-muted: #66708a;
  --vx-border: #e4e8f1;
  --vx-field: #f7f9fd;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--vx-text);
  -webkit-font-smoothing: antialiased;
}
.vx-public--auth { background: #ffffff !important; }
.vx-auth {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  background: #ffffff;
}

/* ── Brand panel ─────────────────────────────────────────────────── */
.vx-auth__brand {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: clamp(40px, 6vw, 80px);
  color: #0b1433;
  background:
    radial-gradient(70% 55% at 0% 0%, rgba(124, 77, 255, 0.10), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(47, 91, 255, 0.07), transparent 70%),
    #f6f8ff;
  border-right: 1px solid #e4e8f1;
}
.vx-auth__brand::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(11, 20, 51, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 20, 51, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 30% 20%, #000 20%, transparent 75%);
  pointer-events: none;
}
.vx-auth__glow { position: absolute; border-radius: 50%; filter: blur(20px); pointer-events: none; }
.vx-auth__glow--a {
  width: 520px; height: 520px; left: -200px; top: -220px; background: radial-gradient(closest-side, rgba(124, 77, 255, 0.14), transparent);
}
.vx-auth__glow--b {
  width: 480px; height: 480px; right: -200px; bottom: -200px; background: radial-gradient(closest-side, rgba(124, 77, 255, 0.08), transparent);
}

.vx-auth__brand-inner { position: relative; z-index: 1; max-width: 480px; }
.vx-auth__brand-logo { display: block; height: 34px; width: auto; }

.vx-auth__badge {
  display: inline-flex; align-items: center; gap: 10px; margin: 36px 0 0;
  padding: 7px 14px 7px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #3d4865;
  background: #ffffff; border: 1px solid #e4e8f1; box-shadow: 0 1px 2px rgba(11, 20, 51, 0.05);
}
.vx-auth__badge span { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.2); }
.vx-auth__badge i {
  width: 1px; height: 14px; background: #e4e8f1;
}

.vx-auth__headline {
  margin: 22px 0 0; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; font-weight: 800; letter-spacing: -0.03em; color: #0b1433;
}
.vx-auth__headline span {
  background: linear-gradient(90deg, #6231e8, #5a3df0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.vx-auth__list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 18px; }
.vx-auth__list li { display: flex; gap: 14px; align-items: flex-start; }
.vx-auth__ico {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: #6231e8;
  background: #ffffff; border: 1px solid rgba(124, 77, 255, 0.22);
  box-shadow: 0 6px 16px -10px rgba(124, 77, 255, 0.55);
}
.vx-auth__list strong {
  display: block; font-size: 15px; font-weight: 700; color: #0b1433;
}
.vx-auth__list p {
  margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: #3d4865;
}

.vx-auth__foot {
  display: flex; align-items: center; gap: 8px; margin: 34px 0 0; font-size: 13.5px; font-weight: 600; color: #047857;
}

/* ── Form panel ──────────────────────────────────────────────────── */
.vx-auth__main {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 24px 24px; min-height: 100dvh;
  background: radial-gradient(60% 40% at 100% 0%, rgba(124, 77, 255, 0.06), transparent 70%), #ffffff;
}
.vx-auth__panel { width: 100%; max-width: 420px; margin: auto 0; display: flex; flex-direction: column; gap: 20px; animation: vxAuthIn 0.35s ease-out; }
.vx-auth__panel--wide { max-width: 520px; }
@keyframes vxAuthIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.vx-auth__logo { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; text-decoration: none; margin-bottom: 8px; }
.vx-auth__logo img { height: 26px; width: auto; display: block; }
.vx-auth__product {
  font-size: 12px; font-weight: 700; color: #2446d8; background: var(--vx-brand-soft);
  padding: 4px 9px; border-radius: 999px; letter-spacing: 0.01em;
}

.vx-auth__legal { margin: 32px 0 0; font-size: 12.5px; color: var(--vx-muted); text-align: center; }
.vx-auth__legal a { color: var(--vx-muted); text-decoration: none; }
.vx-auth__legal a:hover { color: var(--vx-brand); }


/* CRM accent: violet product pill and brand-panel icons */
.vx-public .vx-auth__product { color: var(--vx-accent-ink); background: rgba(124, 77, 255, 0.12); }
.vx-public .vx-auth__foot i { font-size: 12px; }
.vx-public .public-orb { display: none; }

/* ── Existing CRM form markup inside the auth panel ─────────────── */
.vx-auth .public-auth-shell { display: block; width: 100%; max-width: none; margin: 0; padding: 0; min-height: 0; }
.vx-auth .public-auth-card,
.vx-auth .public-panel {
  width: auto; max-width: none; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0;
  background: transparent !important; box-shadow: none !important; backdrop-filter: none;
}
.vx-auth .public-panel-head { margin: 0 0 22px; text-align: left; }
.vx-auth .public-panel-label {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 0; background: none; border: 0;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vx-accent-ink);
}
.vx-auth .public-panel-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; color: var(--vx-text); }
.vx-auth .public-panel-copy { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--vx-muted); }

.vx-auth .form-label { font-size: 13.5px; font-weight: 600; color: var(--vx-text-2); margin-bottom: 6px; }
.vx-auth .form-control,
.vx-auth .form-select {
  height: 48px; padding: 0 14px; border: 1px solid var(--vx-border); border-radius: 12px; background: var(--vx-field);
  font-family: inherit; font-size: 15px; color: var(--vx-text); box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.vx-auth textarea.form-control { height: auto; min-height: 96px; padding: 12px 14px; }
.vx-auth .form-control:hover { border-color: #c5cde0; }
.vx-auth .form-control:focus, .vx-auth .form-select:focus {
  border-color: var(--vx-brand); background: #ffffff; box-shadow: 0 0 0 4px var(--vx-brand-soft);
}
.vx-auth .input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.vx-auth .input-group .btn {
  height: 48px; border: 1px solid var(--vx-border); border-left: 0; border-radius: 0 12px 12px 0; background: var(--vx-field);
  color: var(--vx-text-2); font-size: 13.5px; font-weight: 600; padding: 0 16px;
}
.vx-auth .input-group .btn:hover { background: #eef2fb; color: var(--vx-brand); }

.vx-auth .public-primary-btn,
.vx-auth .btn-primary {
  height: 50px; border: 0 !important; border-radius: 12px; font-family: inherit; font-size: 15.5px; font-weight: 700; color: #ffffff !important;
  background: linear-gradient(135deg, #2f5bff, #5a3df0) !important; box-shadow: 0 12px 24px -12px rgba(47, 91, 255, 0.75);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.vx-auth .public-primary-btn:hover, .vx-auth .btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 16px 28px -12px rgba(47, 91, 255, 0.85); }

.vx-auth .public-link-row { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--vx-border); }
.vx-auth .public-link-row a { font-size: 14px; font-weight: 600; color: var(--vx-brand); text-decoration: none; }
.vx-auth .public-link-row a:hover { text-decoration: underline; }
.vx-auth .public-aux-copy { font-weight: 500; color: var(--vx-muted); font-size: 12.5px; }
.vx-auth .alert { border-radius: 12px; font-size: 14px; }
.vx-auth .alert-danger:empty, .vx-auth .validation-summary-valid { display: none; }
.vx-auth #spinner { display: none; }
.vx-auth a:not(.vx-auth__logo) { color: var(--vx-brand); }

/* Wide sign-up form: let the panel grow and keep 2 columns */
.vx-auth__panel:has(.public-auth-shell--wide) { max-width: 620px; }
.vx-auth .public-auth-shell--wide .col-md-4 { flex: 0 0 auto; width: 50%; }
@media (max-width: 640px) { .vx-auth .public-auth-shell--wide .col-md-4 { width: 100%; } }

/* ── Landing: VixBooks.com family top bar, menu and footer ─────── */
.vx-public--site .public-brandbar { display: none; }
.vx-topbar { position: sticky; top: 0; z-index: 50; padding: 14px 20px 0; }
.vx-topbar__inner {
  max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 10px 14px 10px 18px;
  background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(12px); border: 1px solid var(--vx-border); border-radius: 16px;
  box-shadow: 0 10px 30px -20px rgba(11, 20, 51, 0.35);
}
.vx-topbar__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.vx-topbar__brand img { height: 24px; width: auto; display: block; }
.vx-topbar__product, .vx-auth__product { white-space: nowrap; }
.vx-topbar__product { font-size: 12px; font-weight: 700; color: var(--vx-accent-ink); background: rgba(124, 77, 255, 0.12); padding: 4px 9px; border-radius: 999px; }
.vx-topbar__nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.vx-topbar__link { padding: 8px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--vx-text-2); text-decoration: none; }
.vx-topbar__link:hover { color: var(--vx-text); background: #f3f5fb; }
.vx-topbar__actions { display: flex; gap: 8px; flex: none; }
.vx-btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border-radius: 12px; font-size: 14.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.vx-btn--ghost { color: var(--vx-text); border: 1px solid var(--vx-border); background: #ffffff; }
.vx-btn--ghost:hover { color: var(--vx-text); background: #f3f5fb; }
.vx-btn--primary { color: #ffffff; background: linear-gradient(135deg, #2f5bff, #5a3df0); box-shadow: 0 12px 24px -12px rgba(47, 91, 255, 0.75); }
.vx-btn--primary:hover { color: #ffffff; filter: brightness(1.06); }

.vx-family { position: relative; }
.vx-family summary {
  list-style: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px; cursor: pointer;
  font-size: 14.5px; font-weight: 700; color: var(--vx-accent-ink); background: rgba(124, 77, 255, 0.1);
}
.vx-family summary::-webkit-details-marker { display: none; }
.vx-family__caret { font-size: 10px; transition: transform 0.15s ease; }
.vx-family[open] .vx-family__caret { transform: rotate(180deg); }
.vx-family__menu {
  position: absolute; top: calc(100% + 10px); left: 0; width: 360px; padding: 10px; background: #ffffff;
  border: 1px solid var(--vx-border); border-radius: 16px; box-shadow: 0 24px 48px -20px rgba(11, 20, 51, 0.35); z-index: 60;
}
.vx-family__head { margin: 4px 8px 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vx-muted); }
.vx-family__item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; text-decoration: none; color: var(--vx-text); }
a.vx-family__item:hover { background: #f5f7fc; color: var(--vx-text); }
.vx-family__item strong { display: block; font-size: 14.5px; font-weight: 700; }
.vx-family__item small { display: block; font-size: 12.5px; color: var(--vx-muted); }
.vx-family__item--current { background: #f7f5ff; }
.vx-family__item em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--vx-accent-ink); background: rgba(124, 77, 255, 0.12); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.vx-family__all { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; padding: 10px; border-top: 1px solid var(--vx-border); font-size: 13px; font-weight: 700; color: #2446d8; text-decoration: none; }
.vx-fam-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-size: 15px; }
.vx-fam-ico--books { color: #2446d8; background: rgba(47, 91, 255, 0.12); }
.vx-fam-ico--crm { color: #6231e8; background: rgba(124, 77, 255, 0.13); }
.vx-fam-ico--wholesale { color: #047857; background: rgba(14, 159, 110, 0.13); }
.vx-fam-ico--rentals { color: #c2410c; background: rgba(232, 116, 12, 0.13); }

.vx-footer { margin-top: 48px; border-top: 1px solid var(--vx-border); background: #f8faff; }
.vx-footer__inner { max-width: 1200px; margin: 0 auto; padding: 44px 24px 28px; display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.vx-footer__brand img { height: 24px; width: auto; display: block; margin-bottom: 12px; }
.vx-footer__brand p { margin: 0; max-width: 300px; color: var(--vx-text-2); font-size: 14.5px; line-height: 1.55; }
.vx-footer h4 { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vx-muted); }
.vx-footer__inner > div > a { display: block; margin-bottom: 8px; font-size: 14.5px; font-weight: 600; color: var(--vx-text); text-decoration: none; }
.vx-footer__inner > div > a:hover { color: var(--vx-brand); }
.vx-footer__legal { max-width: 1200px; margin: 0 auto; padding: 16px 24px 24px; border-top: 1px solid var(--vx-border); font-size: 13px; color: var(--vx-muted); }

@media (max-width: 980px) {
  .vx-topbar__link { display: none; }
  .vx-footer__inner { grid-template-columns: 1fr 1fr; }
  .vx-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .vx-topbar { padding: 10px 10px 0; }
  .vx-topbar__inner { flex-wrap: wrap; gap: 10px; }
  .vx-topbar__product { display: none; }
  .vx-topbar__nav { margin-left: auto; }
  .vx-topbar__actions { width: 100%; }
  .vx-topbar__actions .vx-btn { flex: 1; }
  .vx-family__menu { position: fixed; left: 10px; right: 10px; top: 120px; width: auto; }
}
.vx-auth .form-control, .vx-auth .form-select { display: block; width: 100%; }
.vx-auth .input-group { display: flex; flex-wrap: nowrap; width: 100%; }
.vx-auth .input-group .form-control { flex: 1 1 auto; width: 1%; }
.vx-auth .public-primary-btn { width: 100%; }

/* ── Landing page: VixBooks.com family colours over landing-premium.css ── */
.vx-public .landing-vix {
  --lp-brand: #2f5bff; --lp-brand-deep: #2446d8; --lp-brand-light: #eef2ff;
  --lp-accent: #7c4dff; --lp-accent-light: #f3efff;
  --lp-teal: #2f5bff; --lp-teal-bg: #eef2ff;
  --lp-text: #0b1433; --lp-muted: #3d4865; --lp-subtle: #66708a; --lp-line: #e4e8f1;
  font-family: inherit;
}
.vx-public .landing-vix h1, .vx-public .landing-vix h2, .vx-public .landing-vix h3 { font-family: inherit; letter-spacing: -0.025em; }
.vx-public .landing-vix .lp-h1-accent {
  background: linear-gradient(90deg, #2f5bff, #7c4dff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vx-public .landing-vix .lp-btn-primary {
  background: linear-gradient(135deg, #2f5bff, #5a3df0) !important; border: 0 !important; color: #fff !important;
  box-shadow: 0 12px 24px -12px rgba(47, 91, 255, 0.75); border-radius: 12px;
}
.vx-public .landing-vix .lp-btn-ghost { border-radius: 12px; border-color: #e4e8f1; color: #0b1433; }
.vx-public .landing-vix .lp-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 11px; border-radius: 999px;
  background: #fff; border: 1px solid #e4e8f1; box-shadow: 0 4px 14px -8px rgba(11, 20, 51, 0.25);
  color: #0b1433; font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.vx-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16); }
.vx-public .landing-vix .lp-eco-crm { background: linear-gradient(160deg, #1b2a66, #0a1530) !important; border-color: transparent !important; }
.vx-public .landing-vix .lp-cta-section { background: radial-gradient(70% 120% at 100% 0%, rgba(124, 77, 255, 0.4), transparent 60%), linear-gradient(135deg, #0a1530, #1b2a66) !important; }

/* Family section on the landing page */
.vx-family-section { padding: 72px 0 64px; text-align: center; }
.vx-family-section__eyebrow { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #2446d8; }
.vx-family-section h2 { margin: 8px 0 10px; font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; color: #0b1433; }
.vx-family-section__lead { margin: 0 auto 28px; max-width: 620px; color: #3d4865; font-size: 16px; line-height: 1.55; }
.vx-family-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.vx-family-card {
  --fc: #2f5bff; --fi: #2446d8; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 22px;
  border-radius: 18px; background: #fff; border: 1px solid #e4e8f1; text-decoration: none; color: #0b1433;
  box-shadow: 0 1px 2px rgba(11, 20, 51, 0.04), 0 16px 36px -24px rgba(11, 20, 51, 0.35); transition: transform 0.2s ease;
}
.vx-family-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--fc); }
.vx-family-card:hover { transform: translateY(-3px); color: #0b1433; }
.vx-family-card--wholesale { --fc: #0e9f6e; --fi: #047857; }
.vx-family-card--rentals { --fc: #e8740c; --fi: #c2410c; }
.vx-family-card .vx-fam-ico { margin-bottom: 8px; }
.vx-family-card strong { font-size: 17px; font-weight: 800; }
.vx-family-card > span:not(.vx-fam-ico) { font-size: 14px; color: #3d4865; }
.vx-family-card em { margin-top: 10px; font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--fi); }
.vx-family-card em i { font-size: 11px; margin-left: 4px; }
@media (max-width: 860px) { .vx-family-grid { grid-template-columns: 1fr; } }

/* Landing: the hero starts right under the top bar (no empty band) */
.vx-public--site .public-main { padding-top: 0 !important; margin-top: 0 !important; }
.vx-public .landing-vix .lp-hero { padding: 2.75rem 0 3.5rem; }
@media (max-width: 640px) { .vx-public .landing-vix .lp-hero { padding: 1.75rem 0 2.5rem; } }

/* Long forms (sign-up): keep the brand panel's text at the top and in view while scrolling */
.vx-auth__brand { align-items: flex-start; overflow: clip; }
.vx-auth__brand-inner { position: sticky; top: clamp(40px, 12vh, 120px); }
.vx-auth .public-link-row, .vx-auth .public-link-row-stacked { justify-content: flex-start; text-align: left; }

/* ── One screen, no scrolling ────────────────────────────────────────
   The brand panel is exactly one viewport tall and stays in place, so only
   the form decides the page height. On short screens it drops the details. */
@media (min-width: 901px) {
  .vx-auth { align-items: start; }
  .vx-auth__brand { position: sticky; top: 0; height: 100vh; height: 100dvh; align-items: center; padding-block: 32px; }
  .vx-auth__brand-inner { position: relative; top: auto; }
}
@media (min-width: 901px) and (max-height: 900px) {
  .vx-auth__badge { margin-top: 22px; }
  .vx-auth__headline { margin-top: 16px; font-size: clamp(26px, 2.3vw, 32px); }
  .vx-auth__list { margin-top: 22px; gap: 12px; }
  .vx-auth__list p { display: none; }
  .vx-auth__ico { width: 34px; height: 34px; }
  .vx-auth__foot { margin-top: 22px; }
}

/* Compact organization sign-up: fits a 1366×768 laptop screen */
.vx-auth .vx-optional { border: 1px dashed var(--vx-border); border-radius: 12px; padding: 10px 14px; }
.vx-auth .vx-optional summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--vx-brand); list-style: none; }
.vx-auth .vx-optional summary::-webkit-details-marker { display: none; }
.vx-auth .vx-optional summary::before { content: "+ "; }
.vx-auth .vx-optional[open] summary::before { content: "– "; }
.vx-auth .vx-optional[open] { padding-bottom: 14px; }
.vx-auth .vx-signup-note { margin: 12px 0 0; font-size: 13.5px; color: var(--vx-muted); line-height: 1.5; }
.vx-auth .vx-signup-note i { color: #10b981; margin-right: 4px; }
.vx-auth .vx-signup-note strong { color: var(--vx-text); }
@media (min-width: 901px) {
  .vx-auth__main:has(.public-auth-shell--wide) { padding: 22px 32px 14px; }
  .vx-auth__panel:has(.public-auth-shell--wide) { gap: 0; }
  .vx-auth__panel:has(.public-auth-shell--wide) .vx-auth__logo { margin-bottom: 16px; }
  .vx-auth .public-auth-shell--wide .public-panel-head { margin-bottom: 14px; }
  .vx-auth .public-auth-shell--wide .public-panel-label { margin-bottom: 6px; }
  .vx-auth .public-auth-shell--wide .public-panel-title { font-size: 25px; }
  .vx-auth .public-auth-shell--wide .row.g-3 { --bs-gutter-y: 0.7rem; }
  .vx-auth .public-auth-shell--wide .form-control { height: 44px; }
  .vx-auth .public-auth-shell--wide textarea.form-control { height: auto; min-height: 64px; }
  .vx-auth .public-auth-shell--wide .form-label { margin-bottom: 4px; }
  .vx-auth .public-auth-shell--wide .public-primary-btn { height: 48px; }
  .vx-auth .public-auth-shell--wide .public-link-row { margin-top: 14px; padding-top: 12px; }
  .vx-auth__main:has(.public-auth-shell--wide) .vx-auth__legal { margin-top: 10px; }
}

/* Sign-up v2: fields and button visible on short laptop viewports (~650px) */
.vx-auth .vx-signup-sub { margin-top: 4px !important; font-size: 14px; color: #047857; font-weight: 600; }
.vx-auth .vx-optional { padding: 0 14px; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
.vx-auth .vx-optional[open] { position: relative; z-index: 2; padding: 10px 14px 14px; background: #fff; box-shadow: 0 18px 40px -20px rgba(11, 20, 51, 0.35); }
.vx-auth .vx-signup-note { margin-top: 10px; font-size: 12.5px; }
@media (min-width: 901px) {
  .vx-auth__main:has(.public-auth-shell--wide) { justify-content: flex-start; padding-top: max(16px, 4vh); }
  .vx-auth__panel:has(.public-auth-shell--wide) { margin: 0; }
  .vx-auth__panel:has(.public-auth-shell--wide) .vx-auth__logo { margin-bottom: 12px; }
  .vx-auth .public-auth-shell--wide .public-panel-head { margin-bottom: 10px; }
  .vx-auth .public-auth-shell--wide .row.g-3 { --bs-gutter-y: 0.6rem; }
  .vx-auth .public-auth-shell--wide .form-control { height: 42px; }
  .vx-auth .public-auth-shell--wide .public-primary-btn { height: 46px; }
  .vx-auth .public-auth-shell--wide .public-link-row { margin-top: 10px; padding-top: 10px; }
}

/* ═══ CRM landing (vxl-*), same format as the other VixBooks.com product pages ═══ */
.vxl { color: #0b1433; }
.vxl-wrap { max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.vxl-hero { padding: 48px 0 64px; background: radial-gradient(900px 480px at 10% -5%, rgba(124, 77, 255, 0.09), transparent 60%), radial-gradient(900px 480px at 100% 0%, rgba(47, 91, 255, 0.08), transparent 55%); }
.vxl-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.vxl-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 14px 7px 11px; border-radius: 999px; background: #fff; border: 1px solid #e4e8f1; box-shadow: 0 4px 14px -8px rgba(11, 20, 51, 0.25); font-size: 13.5px; font-weight: 600; }
.vxl-h1 { margin: 22px 0 0; font-size: clamp(2.4rem, 5vw, 3.9rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; }
.vxl-grad { display: block; background: linear-gradient(90deg, #7c4dff, #2f5bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vxl-lead { margin: 22px 0 0; max-width: 560px; font-size: 18px; line-height: 1.6; color: #3d4865; }
.vxl-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.vxl-btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 24px; border-radius: 12px; font-weight: 700; font-size: 15.5px; text-decoration: none; }
.vxl-btn--primary { color: #fff; background: linear-gradient(135deg, #2f5bff, #5a3df0); box-shadow: 0 12px 24px -12px rgba(47, 91, 255, 0.75); }
.vxl-btn--primary:hover { color: #fff; filter: brightness(1.06); }
.vxl-btn--ghost { color: #0b1433; background: #fff; border: 1px solid #e4e8f1; }
.vxl-btn--ghost:hover { color: #0b1433; background: #f5f7fc; }
.vxl-checks { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 14.5px; font-weight: 600; }
.vxl-checks i { color: #059669; margin-right: 7px; }

.vxl-preview { border-radius: 20px; border: 1px solid #e4e8f1; background: #fff; padding: 20px; box-shadow: 0 1px 2px rgba(11, 20, 51, 0.05), 0 30px 60px -30px rgba(11, 20, 51, 0.35); }
.vxl-preview__bar { display: flex; align-items: center; gap: 7px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid #e4e8f1; }
.vxl-preview__bar span { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; }
.vxl-preview__bar em { margin-left: 8px; font-style: normal; font-size: 13px; font-weight: 600; color: #66708a; }
.vxl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vxl-stats div { padding: 12px; border: 1px solid #e4e8f1; border-radius: 12px; background: #fafbff; }
.vxl-stats small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #66708a; }
.vxl-stats b { display: block; margin-top: 4px; font-size: 19px; font-weight: 800; }
.vxl-stats s { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; text-decoration: none; color: #66708a; }
.vxl-stats s.up { color: #047857; }
.vxl-stats s.down { color: #b45309; }
.vxl-chart { margin-top: 14px; padding: 14px 16px 10px; border: 1px solid #e4e8f1; border-radius: 14px; }
.vxl-chart__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; }
.vxl-chart__head strong { font-weight: 700; color: #1b2440; }
.vxl-chart__head span { font-size: 12px; color: #66708a; }
.vxl-chart__key { display: inline-flex; align-items: center; gap: 5px; }
.vxl-chart__key em { width: 9px; height: 9px; margin-left: 7px; border-radius: 3px; background: #e2e8f0; }
.vxl-chart__key em.is-sold { background: #7c4dff; }
.vxl-chart__key em.is-booked { background: #c4b5fd; }
.vxl-blocks { display: grid; gap: 11px; margin-top: 14px; }
.vxl-blocks div { display: grid; grid-template-columns: 58px 1fr 56px; align-items: center; gap: 10px; font-size: 12.5px; color: #3d4865; }
.vxl-blocks p { display: flex; height: 12px; margin: 0; overflow: hidden; border-radius: 999px; background: #e2e8f0; }
.vxl-blocks i.is-sold { background: linear-gradient(90deg, #6231e8, #7c4dff); }
.vxl-blocks i.is-booked { background: #c4b5fd; }
.vxl-blocks b { text-align: right; font-weight: 700; color: #1b2440; }
.vxl-rows { display: grid; gap: 8px; margin-top: 16px; }
.vxl-rows div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e4e8f1; border-radius: 12px; font-size: 14px; color: #3d4865; }
.vxl-rows em { font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #f1f5f9; color: #475569; white-space: nowrap; }
.vxl-rows em.ok { background: #ecfdf5; color: #047857; }
.vxl-rows em.warn { background: #fffbeb; color: #b45309; }

.vxl-section { padding: 72px 0; scroll-margin-top: 90px; }
.vxl-section--soft { background: #f8faff; }
.vxl-section--tight { padding: 48px 0; }
.vxl-head { max-width: 680px; margin: 0 auto 40px; text-align: center; }
.vxl-eyebrow { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #6231e8; }
.vxl-eyebrow--blue { color: #2446d8; }
.vxl-head h2, .vxl-cta h2 { margin: 8px 0 0; font-size: clamp(1.75rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -0.025em; }
.vxl-head p:not(.vxl-eyebrow) { margin: 12px 0 0; font-size: 16px; color: #3d4865; }

.vxl-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vxl-stage { padding: 26px; border-radius: 18px; border: 1px solid #e4e8f1; background: #fff; }
.vxl-stage h3 { margin: 16px 0 8px; font-size: 19px; font-weight: 800; }
.vxl-stage p { margin: 0; font-size: 15px; line-height: 1.55; color: #3d4865; }
.vxl-stage ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.vxl-stage li { position: relative; padding-left: 24px; font-size: 14.5px; font-weight: 600; }
.vxl-stage li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 1px; font-size: 12px; color: #7c4dff; }
.vxl-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; font-size: 19px; color: #6231e8; background: rgba(124, 77, 255, 0.12); }
.vxl-ico--sm { width: 40px; height: 40px; font-size: 16px; border-radius: 11px; }
.vxl-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.vxl-features > div { padding: 22px; border-radius: 16px; border: 1px solid #e4e8f1; background: #fff; }
.vxl-features h4 { margin: 14px 0 6px; font-size: 16px; font-weight: 700; }
.vxl-features p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #3d4865; }

.vxl-ops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vxl-ops > div { padding: 22px; border-radius: 16px; border: 1px solid #e4e8f1; border-top: 4px solid #7c4dff; }
.vxl-ops h4 { margin: 0 0 14px; font-size: 16px; font-weight: 800; }
.vxl-ops h4 i { color: #6231e8; margin-right: 6px; }
.vxl-ops ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14.5px; color: #3d4865; }
.vxl-roles { margin-top: 48px; padding: 30px; border-radius: 22px; border: 1px solid #e4e8f1; background: #f8faff; }
.vxl-roles h3 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.vxl-roles > p { margin: 6px 0 0; color: #3d4865; }
.vxl-roles__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.vxl-roles__grid div { padding: 16px; border-radius: 14px; border: 1px solid #e4e8f1; background: #fff; }
.vxl-roles__grid h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.vxl-roles__grid p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #3d4865; }

.vxl-cta { padding: 56px 24px; border-radius: 26px; text-align: center; color: #fff; background: radial-gradient(70% 120% at 100% 0%, rgba(124, 77, 255, 0.45), transparent 60%), linear-gradient(135deg, #0a1530, #1b2a66); }
.vxl-cta h2 { color: #fff; }
.vxl-cta p { margin: 12px 0 0; color: #c9d2ea; }
.vxl-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.vxl-btn--white { color: #2446d8; background: #fff; }
.vxl-btn--white:hover { color: #1d3fd6; background: #eef2ff; }
.vxl-btn--outline-white { color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); }
.vxl-btn--outline-white:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.vx-public--site .vx-footer { margin-top: 24px; }

@media (max-width: 980px) {
  .vxl-hero__grid, .vxl-stages { grid-template-columns: 1fr; }
  .vxl-features, .vxl-ops, .vxl-roles__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .vxl-hero { padding: 28px 0 40px; }
  .vxl-features, .vxl-ops, .vxl-roles__grid, .vxl-stats { grid-template-columns: 1fr; }
  .vxl-section { padding: 48px 0; }
}

/* "More details" opens across the full width, its fields in two columns */
.vx-auth .col-md-6:has(> .vx-optional[open]) { width: 100%; }
.vx-auth .vx-optional[open] { position: static; box-shadow: none; background: #fafbff; padding: 12px 14px 14px; }
.vx-auth .vx-optional[open] summary { margin-bottom: 2px; }
.vxl-badge { font-size: 15px; padding: 9px 16px 9px 13px; gap: 10px; }
.vxl-badge i { width: 1px; height: 16px; background: #d5dbea; }
.vxl-badge strong { font-size: 16px; font-weight: 800; color: #6231e8; }
.vxl-badge__by { color: #66708a; font-weight: 600; }
@media (max-width: 520px) { .vxl-badge__by { display: none; } }
/* Hero headline: slightly smaller; "Sell plots and units" always on one line */
.vxl-h1 { font-size: clamp(2rem, 3.4vw, 3rem); }
.vxl-h1__lead { white-space: nowrap; }
@media (max-width: 380px) { .vxl-h1__lead { white-space: normal; } }