:root {
  /* DESIGN-LANGUAGE PHASE 2b (2026-07-03): the reskin palette INHERITS the
   * cross-surface single source (platform-surfaces/shared/design-language.css
   * --xv-dl-*), with a literal fallback so this static /reskin/ asset still
   * renders if ever loaded without the shared file. Verbatim -> zero visual
   * change; a brand/look edit is now a one-file change. */
  --pure-black: var(--xv-dl-navy, #020617);
  --surface: var(--xv-dl-surface, #07122b);
  --surface-low: #030d26;
  --surface-card: var(--xv-dl-surface-card, rgba(16, 27, 52, 0.88));
  --surface-card-2: var(--xv-dl-surface-card-2, rgba(7, 18, 43, 0.78));
  --blue: var(--xv-dl-blue, #0367f6);
  --cyan: var(--xv-dl-cyan, #0ea5e9);
  --purple: #a855f7;
  --text: #dae2ff;
  --muted: #c2c6d8;
  --dim: #8c90a1;
  --line: var(--xv-dl-line, rgba(148, 163, 184, 0.18));
  --max: 1440px;
}
* { box-sizing: border-box; letter-spacing: 0 !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: #020617;
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  isolation: isolate;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}
body::before {
  /* shared --xv-dl-glow over the navy base — verbatim */
  background:
    var(--xv-dl-glow),
    linear-gradient(180deg, var(--pure-black) 0%, var(--surface) 42%, var(--pure-black) 100%);
}
body::after {
  z-index: -1;
  background: var(--xv-dl-graphics);  /* shared field-nodes/field-explode imagery — verbatim */
  opacity: 0.16;
  filter: var(--xv-dl-graphics-filter);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(120% 112% at 50% 34%, #000 0 24%, rgba(0,0,0,.48) 54%, transparent 96%);
          mask-image: radial-gradient(120% 112% at 50% 34%, #000 0 24%, rgba(0,0,0,.48) 54%, transparent 96%);
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  margin: 0;
  color: #f3f8ff;
  font-family: Sora, Inter, sans-serif;
  line-height: 1.08;
}
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 80px; }
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 80px;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.94), rgba(2, 6, 23, 0.78));
  border-bottom: 1px solid rgba(14, 165, 233, 0.14);
  backdrop-filter: blur(22px);
  box-shadow: 0 0 48px rgba(14, 165, 233, 0.13), inset 0 -1px 0 rgba(255,255,255,.03);
}
.nav-inner {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 58px; width: auto; object-fit: contain; }
.nav-left, .nav-links, .nav-actions { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .16s ease;
}
.nav-links a:hover, .nav-links a.active { color: #f3f8ff; }
.nav-links a.active::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(14, 165, 233, 0.9);
}
.login-btn, .signup-btn, .btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 800;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.login-btn {
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.04);
  color: #dae2ff;
}
.signup-btn, .btn.primary {
  border: 1px solid rgba(14, 165, 233, 0.2);
  color: #f5f5ff;
  background: linear-gradient(135deg, #0367f6 0%, #0ea5e9 100%);
  box-shadow: 0 0 26px rgba(3, 103, 246, 0.42), 0 18px 42px -28px rgba(14, 165, 233, 0.82);
}
.btn.secondary {
  border: 1px solid rgba(148, 163, 184, 0.24);
  color: #dae2ff;
  background: rgba(255,255,255,0.035);
}
.login-btn:hover, .signup-btn:hover, .btn:hover { transform: translateY(-1px); border-color: rgba(14, 165, 233, 0.55); box-shadow: 0 0 34px rgba(14, 165, 233, 0.18); }
main { padding-top: 80px; }
.hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: 88px 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 74% 28%, rgba(3, 103, 246, 0.32), transparent 34%),
    radial-gradient(ellipse at 18% 22%, rgba(14, 165, 233, 0.16), transparent 36%),
    radial-gradient(circle at 50% -20%, rgba(3, 103, 246, 0.26) 0%, rgba(2, 6, 23, 1) 70%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(14, 165, 233, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.1) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .14;
  -webkit-mask-image: radial-gradient(90% 80% at 50% 18%, #000, transparent 72%);
          mask-image: radial-gradient(90% 80% at 50% 18%, #000, transparent 72%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(14, 165, 233, 0.32);
  background: rgba(14, 165, 233, 0.06);
  color: var(--cyan);
  border-radius: 999px;
  padding: 6px 11px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(14, 165, 233, 0.85);
}
.hero h1 { margin-top: 22px; font-size: clamp(38px, 5.4vw, 65px); font-weight: 800; letter-spacing: 0; max-width: 820px; }
.accent { color: var(--cyan); text-shadow: 0 0 14px rgba(14, 165, 233, 0.78), 0 0 52px rgba(3, 103, 246, 0.45); }
.hero-copy { margin-top: 24px; display: grid; gap: 14px; max-width: 680px; color: var(--muted); font-size: 18px; }
.hero-copy strong { color: #f3f8ff; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero-panel, .card, .cta, .visual-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--surface-card), var(--surface-card-2));
  box-shadow: 0 28px 76px -42px rgba(2, 6, 23, 0.98), 0 0 86px -58px rgba(14, 165, 233, 0.62), inset 0 1px 0 rgba(255,255,255,.05);
}
.hero-panel::before, .card::before, .cta::before, .visual-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 0%, rgba(14, 165, 233, 0.16), transparent 28%),
    radial-gradient(circle at 100% 26%, rgba(3, 103, 246, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 42%);
  mix-blend-mode: screen;
}
.hero-panel > *, .card > *, .cta > *, .visual-panel > * { position: relative; z-index: 1; }
.hero-panel { padding: clamp(28px, 4vw, 54px); min-height: 380px; display: grid; align-content: center; gap: 20px; }
.visual-panel { min-height: 430px; padding: 24px; display: grid; place-items: center; }
.visual-panel img { width: 100%; max-width: 520px; border-radius: 12px; border: 1px solid rgba(14, 165, 233, 0.18); filter: saturate(1.35) contrast(1.12) brightness(1.02) drop-shadow(0 0 54px rgba(14,165,233,.45)); }
.visual-orb img { max-width: 360px; border: 0; }
.visual-transparent {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}
.visual-transparent::before { display: none; }
.visual-transparent img {
  border: 0;
  border-radius: 0;
  background: transparent;
  mix-blend-mode: screen;
  filter: saturate(1.45) contrast(1.18) brightness(1.06) drop-shadow(0 0 68px rgba(14,165,233,.5));
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 48%, rgba(0,0,0,.86) 66%, transparent 100%);
          mask-image: radial-gradient(ellipse at center, #000 0 48%, rgba(0,0,0,.86) 66%, transparent 100%);
}
.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mini { border: 1px solid rgba(148,163,184,.16); border-radius: 10px; background: rgba(3,13,38,.42); padding: 14px; }
.mini strong { display: block; color: #f3f8ff; margin-bottom: 4px; }
.mini span { color: var(--muted); font-size: 13px; }
.section { position: relative; padding: 92px 0; overflow: hidden; }
.section.band { background: linear-gradient(180deg, rgba(7,18,43,.78), rgba(3,13,38,.92)); }
.section-head { max-width: 760px; margin-bottom: 34px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section h1, .section h2 { font-size: clamp(29px, 3.6vw, 47px); }
.section-head p { margin-top: 14px; color: var(--muted); font-size: 17px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { padding: 26px; }
.card h3 { font-size: 22px; margin-bottom: 10px; }
.card p, .card li { color: var(--muted); }
.card .label, .label { color: var(--cyan); font-family: "JetBrains Mono", monospace; font-size: 12px; text-transform: uppercase; font-weight: 800; margin-bottom: 12px; }
ul.clean { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; }
ul.clean li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; }
ul.clean li::before { content: ""; width: 7px; height: 7px; margin-top: 9px; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 12px rgba(14,165,233,.75); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tier { padding: 24px; border: 1px solid rgba(148,163,184,.18); border-radius: 12px; background: rgba(3,13,38,.46); }
.tier.popular { border-color: rgba(14,165,233,.5); box-shadow: 0 0 40px -22px rgba(14,165,233,.9); }
.tier .price { font-size: 40px; color: #f3f8ff; font-family: Sora, sans-serif; font-weight: 800; line-height: 1; margin-top: 14px; }
.tier .price span { font-size: 15px; color: var(--dim); font-weight: 500; }
table { width: 100%; border-collapse: collapse; }
td { border-bottom: 1px solid rgba(148,163,184,.12); padding: 13px 0; vertical-align: top; color: var(--muted); }
td:first-child { color: #f3f8ff; font-weight: 800; padding-right: 18px; white-space: nowrap; }
.legal-doc { max-width: 980px; }
.legal-section { padding: 24px 0; border-bottom: 1px solid rgba(148,163,184,.12); }
.legal-section h3 { font-size: 22px; margin-bottom: 12px; }
.legal-section p { color: var(--muted); margin: 0 0 10px; }
.legal-section ul { color: var(--muted); margin: 0; padding-left: 20px; }
.badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.badge { display: inline-flex; border: 1px solid rgba(14,165,233,.28); border-radius: 999px; padding: 6px 10px; color: var(--cyan); background: rgba(14,165,233,.06); font-family: "JetBrains Mono", monospace; font-size: 12px; }
/* Install-guide + legal card grids (#19 / #27-#31) — reuse the shared
   .cards/.card marketing-card look; these rules only tune the content that
   the plain .legal-section render didn't have (brand-icon label, in-card
   badges/email spacing). Vertical flow so read-order stays natural. */
.legal-cards .card, .install-cards .card { align-content: start; }
.legal-card .badges, .install-card .badges { margin-top: 16px; }
.legal-card > p + p, .install-card > p + p { margin-top: 10px; }
.legal-card .btn.secondary, .install-card .btn.secondary { margin-top: 4px; }
.install-card-label { display: inline-flex; align-items: center; gap: 8px; }
.install-card-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(14,165,233,.26);
  background: rgba(14,165,233,.1);
  box-shadow: 0 0 16px -8px rgba(14,165,233,.8);
}
.install-card-logo svg { width: 18px; height: 18px; display: block; filter: drop-shadow(0 0 8px rgba(14,165,233,.34)); }
.cta { padding: clamp(34px, 5vw, 70px); display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.cta h2 { font-size: clamp(27px, 3.6vw, 43px); }
.cta p { color: var(--muted); max-width: 720px; margin-top: 12px; }
.footer { border-top: 1px solid rgba(148,163,184,.14); background: #020617; padding: 48px 0; }
.footer-grid { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 34px; }
.footer img { height: 32px; width: auto; margin-bottom: 14px; }
.footer p, .footer a { color: var(--dim); font-size: 14px; }
.footer h4 { color: #f3f8ff; font-family: "JetBrains Mono", monospace; font-size: 12px; text-transform: uppercase; margin-bottom: 12px; }
.footer a { display: block; margin: 0 0 8px; }
.footer a:hover { color: #f3f8ff; }
/* Footer social logos — SHARED source for both the marketing site AND the account
   portal (was marketing-only in design-language.css, which the portal doesn't load
   → the portal social row rendered unstyled/stacked). */
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: rgba(255,255,255,.66); transition: color .18s, border-color .18s, background .18s, transform .18s; }
.footer-social a:hover { color: #0ea5e9; border-color: #0ea5e9; background: rgba(14,165,233,.10); transform: translateY(-2px); }
.footer-social svg { display: block; }
.page-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.platform-card {
  position: relative;
  z-index: 3;
  margin: 40px auto 64px;
  max-width: 1120px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(14,165,233,.24);
  border-radius: 16px;
  background:
    radial-gradient(circle at 84% 12%, rgba(14,165,233,.14), transparent 30%),
    linear-gradient(145deg, rgba(16, 27, 52, 0.92), rgba(7, 18, 43, 0.84));
  box-shadow: 0 24px 76px -42px rgba(14,165,233,.48), inset 0 1px 0 rgba(255,255,255,.05);
}
.platform-card h2 { font-size: clamp(22px, 2.7vw, 31px); margin: 10px 0 8px; }
.platform-card p { color: var(--muted); }
.platform-strip, .browser-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.platform-tile, .browser-tile {
  min-width: 142px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 12px;
  background: rgba(3,13,38,.5);
  padding: 12px 14px;
  color: #f3f8ff;
  font-weight: 800;
}
.platform-logo, .browser-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(14,165,233,.26);
  background: rgba(14,165,233,.1);
  color: var(--cyan);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  box-shadow: 0 0 18px -8px rgba(14,165,233,.8);
}
.platform-logo img {
  width: 21px;
  height: 21px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(14,165,233,.34));
}
.browser-icon svg {
  width: 30px;
  height: 30px;
  display: block;
  filter: drop-shadow(0 0 10px rgba(14,165,233,.28));
}
.browser-tile > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--dim);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}
.browser-tile strong { color: #f3f8ff; font-size: 13px; line-height: 1.3; }
.browser-tile > span:last-child span { display: block; }
.login-btn.active {
  color: #f3f8ff;
  border-color: rgba(14, 165, 233, 0.54);
  box-shadow: 0 0 24px rgba(14, 165, 233, 0.16);
}
.signup-btn.active {
  box-shadow: 0 0 34px rgba(14, 165, 233, 0.28), 0 18px 42px -28px rgba(14, 165, 233, 0.86);
}
.auth-hero {
  position: relative;
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  padding: 82px 0 96px;
  overflow: hidden;
  isolation: isolate;
}
.auth-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(820px 560px at 72% 22%, rgba(14, 165, 233, 0.24), transparent 62%),
    radial-gradient(760px 520px at 18% 74%, rgba(3, 103, 246, 0.22), transparent 66%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.2), rgba(3, 13, 38, 0.96));
}
.auth-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1.08fr);
  gap: clamp(34px, 5vw, 80px);
  align-items: center;
}
.auth-copy h1 {
  max-width: 720px;
  margin-top: 20px;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 800;
}
.auth-copy p {
  max-width: 600px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 18px;
}
.auth-visual {
  width: min(420px, 74%);
  margin-top: 42px;
  opacity: 0.9;
  filter: drop-shadow(0 0 80px rgba(14, 165, 233, 0.46));
  mix-blend-mode: screen;
}
.auth-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 86% 0%, rgba(14, 165, 233, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(16, 27, 52, 0.92), rgba(3, 13, 38, 0.88));
  box-shadow: 0 34px 92px -48px rgba(14, 165, 233, 0.72), inset 0 1px 0 rgba(255,255,255,.06);
}
.auth-card-inner { padding: clamp(26px, 4vw, 42px); }
.auth-card h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  margin-bottom: 10px;
}
.auth-kicker {
  color: var(--dim);
  font-size: 14px;
  margin-bottom: 24px;
}
.auth-form {
  display: grid;
  gap: 16px;
}
.auth-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.auth-field {
  display: grid;
  gap: 7px;
}
.auth-field span {
  color: #f3f8ff;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.auth-field input,
.auth-field select,
.auth-field textarea {
  min-height: 48px;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.54);
  color: #f3f8ff;
  padding: 12px 14px;
  font: inherit;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.auth-field textarea { min-height: 118px; resize: vertical; }
.auth-field input::placeholder,
.auth-field textarea::placeholder { color: rgba(194, 198, 216, 0.5); }
.auth-field small,
.auth-footnote {
  color: var(--dim);
  font-size: 13px;
}
.auth-field a,
.auth-footnote a,
.auth-link {
  color: var(--cyan);
  font-weight: 800;
}
.auth-field input:focus,
.auth-field select:focus,
.auth-field textarea:focus {
  border-color: rgba(14, 165, 233, 0.72);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12), inset 0 1px 0 rgba(255,255,255,.04);
}
.auth-submit {
  width: 100%;
  border: 1px solid rgba(14, 165, 233, 0.26);
  border-radius: 10px;
  min-height: 50px;
  background: linear-gradient(135deg, #0367f6 0%, #0ea5e9 100%);
  color: #f5f5ff;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 0 26px rgba(3, 103, 246, 0.42), 0 18px 42px -28px rgba(14, 165, 233, 0.82);
}
.auth-secondary-action {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  min-height: 46px;
  background: rgba(255,255,255,.035);
  color: #dae2ff;
  font-weight: 800;
}
.auth-divider {
  height: 1px;
  background: rgba(148, 163, 184, 0.14);
  margin: 6px 0;
}
.auth-status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid rgba(14, 165, 233, 0.24);
  border-radius: 14px;
  background: rgba(14, 165, 233, 0.07);
  padding: 14px;
  color: var(--muted);
  font-size: 14px;
}
.auth-status::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(14, 165, 233, 0.85);
}
.auth-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 24px;
}
.auth-stepper span {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.44);
  color: var(--dim);
  padding: 8px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.auth-stepper .active {
  border-color: rgba(14, 165, 233, 0.54);
  color: #f3f8ff;
  background: rgba(14, 165, 233, 0.12);
  box-shadow: 0 0 24px rgba(14, 165, 233, 0.14);
}
.auth-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.auth-plan {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 12px;
  background: rgba(3, 13, 38, 0.5);
  padding: 12px;
}
.auth-plan strong {
  display: block;
  color: #f3f8ff;
  font-size: 14px;
}
.auth-plan span {
  display: block;
  color: var(--dim);
  font-size: 12px;
  margin-top: 4px;
}
.payment-mock {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.44);
  padding: 14px;
}
.payment-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.payment-tabs span {
  border: 1px solid rgba(14, 165, 233, 0.28);
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.08);
  color: var(--cyan);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
}
.payment-line {
  height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 9px;
  background: rgba(255,255,255,.03);
  margin-top: 9px;
}
.auth-side-panel {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.auth-mini-card {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(3, 13, 38, 0.46);
  padding: 16px;
}
.auth-mini-card strong {
  display: block;
  color: #f3f8ff;
}
.auth-mini-card span {
  display: block;
  color: var(--dim);
  margin-top: 4px;
  font-size: 13px;
}
@media (max-width: 1050px) {
  .wrap { padding: 0 28px; }
  .nav-links { display: none; }
  .hero-grid, .cta, .auth-grid, .auth-row, .auth-plan-grid { grid-template-columns: 1fr; }
  .cards, .cards.two, .cards.four, .tiers, .page-index, .footer-grid { grid-template-columns: 1fr; }
  .visual-panel { min-height: 280px; }
  .auth-visual { display: none; }
  .auth-stepper { grid-template-columns: 1fr; }
}