/* Scoped restyle for the public-facing entry pages (sign-in, request
   access) to match the vemuri-financial-services.vercel.app marketing
   site's visual language: Space Grotesk headings, Inter body, an
   indigo→blue gradient accent, pill buttons with a tinted shadow, and
   soft rounded cards. Applied only via the .vfs-marketing-theme class
   on <body> — every other page in the app is untouched. */

.vfs-marketing-theme {
  --mkt-indigo: #4f46e5;
  --mkt-blue: #3b82f6;
  --mkt-ink: #111827;
  --mkt-muted: #4b5563;
  --mkt-hairline: #e5e7eb;
  --mkt-chip-bg: #f9fafb;
  font-family: "Inter", system-ui, sans-serif;
  background:
    radial-gradient(720px 420px at 12% -8%, rgba(79, 70, 229, 0.10), transparent 60%),
    radial-gradient(640px 420px at 108% 12%, rgba(59, 130, 246, 0.10), transparent 55%),
    var(--page-bg);
}
/* Dark variant — this class redeclares --mkt-* on <body>, which sits
   closer to every element than tokens.css's :root-level [data-theme]
   blocks, so it silently wins the inheritance and shadows them
   entirely without its own override here (found the hard way: index.php's
   dark-mode toggle correctly flipped tokens.css's --color-* variables,
   but every --mkt-* consumer — headings, cards, borders — stayed stuck
   on the light values). Same palette as every signed-in page's dark
   theme (tokens.css's own [data-theme="dark"] block), so this reads as
   the same product rather than a different, unrelated dark mode. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vfs-marketing-theme {
    --mkt-indigo: #7c86f0;
    --mkt-ink: #e7e9f7;
    --mkt-muted: #a8adc9;
    --mkt-hairline: #ffffff26;
    --mkt-chip-bg: #232849;
  }
}
html[data-theme="dark"] .vfs-marketing-theme {
  --mkt-indigo: #7c86f0;
  --mkt-ink: #e7e9f7;
  --mkt-muted: #a8adc9;
  --mkt-hairline: #ffffff26;
  --mkt-chip-bg: #232849;
}

.vfs-marketing-theme .bo-login-card {
  border-radius: 24px;
  box-shadow: 0 20px 25px -5px rgba(79, 70, 229, 0.12), 0 8px 10px -6px rgba(79, 70, 229, 0.10);
  border-color: var(--mkt-hairline);
}

.vfs-marketing-theme .mkt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mkt-indigo);
  background: rgba(79, 70, 229, 0.08);
  border-radius: 9999px;
  padding: 5px 12px;
  margin: 0 0 14px;
}

.vfs-marketing-theme .bo-login-title,
.vfs-marketing-theme h1 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mkt-ink);
  background: linear-gradient(to right, var(--mkt-indigo), var(--mkt-blue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vfs-marketing-theme .bo-login-sub,
.vfs-marketing-theme p {
  color: var(--mkt-muted);
}

.vfs-marketing-theme label {
  color: var(--mkt-muted);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.vfs-marketing-theme .input {
  border-radius: 12px;
  border-color: var(--mkt-hairline);
}
.vfs-marketing-theme .input:focus {
  border-color: var(--mkt-indigo);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.vfs-marketing-theme .btn-primary {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--mkt-indigo), var(--mkt-blue));
  border: 0;
  box-shadow: 0 20px 25px -5px rgba(79, 70, 229, 0.25), 0 8px 10px -6px rgba(79, 70, 229, 0.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.vfs-marketing-theme .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 28px -5px rgba(79, 70, 229, 0.32), 0 10px 12px -6px rgba(79, 70, 229, 0.3);
}

.vfs-marketing-theme .bo-meta a {
  color: var(--mkt-indigo);
  font-weight: 600;
}

/* — request-access.php's plan cards — */
.vfs-marketing-theme .signup-plan-card {
  border-radius: 16px;
  border-color: var(--mkt-hairline);
  background: #fff;
}
.vfs-marketing-theme .signup-plan-card:has(input:checked) {
  border-color: var(--mkt-indigo);
  box-shadow: 0 0 0 2px var(--mkt-indigo) inset, 0 10px 20px -8px rgba(79, 70, 229, 0.25);
}
.vfs-marketing-theme .signup-plan-card--popular {
  border-color: var(--mkt-blue);
}
.vfs-marketing-theme .signup-plan-card__popular-tag {
  background: linear-gradient(to right, var(--mkt-indigo), var(--mkt-blue));
  color: #fff;
  border: 0;
  border-radius: 9999px;
}