#xn-first-paint { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; color: #111827; }
#xn-first-paint a { text-decoration: none; }
#xn-first-paint .xn-fp-nav {
  display: flex; align-items: center; gap: 0.375rem;
  max-width: 80rem; margin: 0 auto; padding: 0.875rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}
#xn-first-paint .xn-fp-wordmark { font-size: 1.25rem; font-weight: 700; color: #111827; }
#xn-first-paint .xn-fp-hero { text-align: center; padding: 3rem 1rem 2rem; }
#xn-first-paint .xn-fp-hero h1 { font-size: 3rem; line-height: 1.1; font-weight: 800; margin: 0 auto 1.5rem; max-width: 64rem; }
#xn-first-paint .xn-fp-hero h1 span { color: #372091; }
@media (min-width: 768px) { #xn-first-paint .xn-fp-hero h1 { font-size: 3.75rem; } }
@media (min-width: 1024px) { #xn-first-paint .xn-fp-hero h1 { font-size: 4.5rem; } }
#xn-first-paint .xn-fp-hero > p { font-size: 1.25rem; color: #4b5563; max-width: 48rem; margin: 0 auto 2.5rem; font-weight: 300; line-height: 1.6; }
#xn-first-paint .xn-fp-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
#xn-first-paint .xn-fp-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.75rem; border-radius: 0.75rem;
  font-size: 0.9375rem; font-weight: 600;
}
#xn-first-paint .xn-fp-cta--primary { background: #372091; color: #fff; border: 1px solid transparent; }
#xn-first-paint .xn-fp-cta--secondary { background: rgb(255 255 255 / 0.5); color: #372091; border: 1px solid #372091; }
#xn-first-paint .xn-fp-hero-img {
  display: block; width: min(100%, 52rem); height: auto; margin: 2.5rem auto 1.5rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
  mask-composite: intersect;
}
@media (min-width: 640px) { #xn-first-paint .xn-fp-hero-img { margin-top: 3rem; margin-bottom: 2rem; } }
#xn-first-paint .xn-fp-ecosystem {
  position: relative; overflow: hidden; padding: 2.5rem 1rem 4.5rem; text-align: center;
}
#xn-first-paint .xn-fp-ecosystem-inner { position: relative; max-width: 80rem; margin: 0 auto; }
#xn-first-paint .xn-fp-ecosystem-accent { display: block; width: 3.5rem; height: 0.25rem; margin: 0 auto 3.25rem; border-radius: 999px; background: linear-gradient(90deg, #4c1dba, #a78bfa); }
#xn-first-paint .xn-fp-ecosystem h2 { margin: 0; color: #111827; font-size: 1.875rem; font-weight: 700; line-height: 1.1; text-wrap: balance; }
#xn-first-paint .xn-fp-ecosystem h2 span { color: #372091; }
@media (min-width: 640px) { #xn-first-paint .xn-fp-ecosystem h2 { font-size: 2.25rem; } }
@media (min-width: 768px) { #xn-first-paint .xn-fp-ecosystem h2 { font-size: 3rem; } }
@media (min-width: 1024px) { #xn-first-paint .xn-fp-ecosystem h2 { white-space: nowrap; } }
#xn-first-paint .xn-fp-ecosystem-subtitle { max-width: 48rem; margin: 1rem auto 3.5rem; color: #475569; font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.5; }
#xn-first-paint .xn-fp-ecosystem-scroll { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
#xn-first-paint .xn-fp-ecosystem-orbit { position: relative; width: 70rem; height: 11rem; margin: 0 auto; }
#xn-first-paint .xn-fp-ecosystem-arc { position: absolute; top: 0; left: 0; width: 100%; height: 9.375rem; overflow: visible; }
#xn-first-paint .xn-fp-ecosystem-arc path { fill: none; stroke: #a5b4fc; stroke-width: 1.5; stroke-dasharray: 4 5; }
#xn-first-paint .xn-fp-ecosystem-arc circle { fill: #4c1dba; }
#xn-first-paint .xn-fp-ecosystem ul { position: relative; z-index: 1; display: flex; flex-wrap: nowrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
#xn-first-paint .xn-fp-ecosystem li { position: relative; display: flex; flex: 0 0 6rem; flex-direction: column; align-items: center; gap: 0.55rem; color: #334155; font-size: 0.84rem; font-weight: 600; line-height: 1.2; }
#xn-first-paint .xn-fp-ecosystem li:nth-child(1), #xn-first-paint .xn-fp-ecosystem li:nth-child(11) { top: 3.5rem; }
#xn-first-paint .xn-fp-ecosystem li:nth-child(2), #xn-first-paint .xn-fp-ecosystem li:nth-child(10) { top: 2.5rem; }
#xn-first-paint .xn-fp-ecosystem li:nth-child(3), #xn-first-paint .xn-fp-ecosystem li:nth-child(9) { top: 1.75rem; }
#xn-first-paint .xn-fp-ecosystem li:nth-child(4), #xn-first-paint .xn-fp-ecosystem li:nth-child(8) { top: 1.25rem; }
#xn-first-paint .xn-fp-ecosystem li:nth-child(5), #xn-first-paint .xn-fp-ecosystem li:nth-child(7) { top: 1rem; }
#xn-first-paint .xn-fp-ecosystem li:nth-child(6) { top: 0.875rem; }
#xn-first-paint .xn-fp-ecosystem li span { display: grid; width: 3.75rem; height: 3.75rem; place-items: center; border: 1px solid #e7e5f5; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(55, 32, 145, 0.12); }
#xn-first-paint .xn-fp-ecosystem li img { width: 2.15rem; height: 2.15rem; object-fit: contain; }
#xn-first-paint .xn-fp-ecosystem-benefits { display: flex; justify-content: center; gap: 2rem; max-width: 48rem; margin: 0 auto; }
#xn-first-paint .xn-fp-ecosystem-benefit { display: flex; flex: 1 1 0; align-items: center; gap: 1rem; padding: 0.9rem 1.25rem; border-radius: 999px; text-align: left; }
#xn-first-paint .xn-fp-ecosystem-benefit--sync { background: #f3f0ff; }
#xn-first-paint .xn-fp-ecosystem-benefit--ready { background: #eef5ff; }
#xn-first-paint .xn-fp-ecosystem-benefit-icon { display: grid; flex: 0 0 3rem; width: 3rem; height: 3rem; place-items: center; color: #372091; }
#xn-first-paint .xn-fp-ecosystem-benefit--sync .xn-fp-ecosystem-benefit-icon { border-radius: 0.85rem; background: #e9e2fa; }
#xn-first-paint .xn-fp-ecosystem-benefit-icon svg { width: 1.9rem; height: 1.9rem; }
#xn-first-paint .xn-fp-ecosystem-benefit strong, #xn-first-paint .xn-fp-ecosystem-benefit small { display: block; }
#xn-first-paint .xn-fp-ecosystem-benefit strong { color: #111827; font-size: 0.98rem; font-weight: 700; }
#xn-first-paint .xn-fp-ecosystem-benefit small { margin-top: 0.2rem; color: #475569; font-size: 0.83rem; }
@media (max-width: 1279px) {
  #xn-first-paint .xn-fp-ecosystem-orbit { height: 7.5rem; }
  #xn-first-paint .xn-fp-ecosystem-orbit::before { content: ''; position: absolute; top: 1.875rem; right: 0; left: 0; border-top: 1.5px dashed #a5b4fc; }
  #xn-first-paint .xn-fp-ecosystem-arc { display: none; }
  #xn-first-paint .xn-fp-ecosystem li:nth-child(n) { top: 0; }
}
@media (max-width: 639px) {
  #xn-first-paint .xn-fp-hero { padding-top: 3rem; }
  #xn-first-paint .xn-fp-ecosystem { padding: 2.5rem 1rem 3.5rem; }
  #xn-first-paint .xn-fp-ecosystem-desktop-break { display: none; }
  #xn-first-paint .xn-fp-ecosystem-scroll { overflow: visible; }
  #xn-first-paint .xn-fp-ecosystem-orbit { width: min(100%, 24rem); height: auto; }
  #xn-first-paint .xn-fp-ecosystem-orbit::before { display: none; }
  #xn-first-paint .xn-fp-ecosystem ul { flex-wrap: wrap; justify-content: center; gap: 0.75rem 0.25rem; }
  #xn-first-paint .xn-fp-ecosystem li { flex: 0 0 calc((100% - 1.25rem) / 6); min-width: 0; gap: 0.3rem; font-size: 0.7rem; }
  #xn-first-paint .xn-fp-ecosystem li span { width: 2.5rem; height: 2.5rem; }
  #xn-first-paint .xn-fp-ecosystem li img { width: 1.5rem; height: 1.5rem; }
  #xn-first-paint .xn-fp-ecosystem-benefits { flex-direction: column; gap: 0.75rem; max-width: 22rem; margin-top: 4rem; }
}

/* Auth card used on Google callback.html and as /oauth/complete first paint */
#xn-oauth-complete-fp {
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #111827;
  background: linear-gradient(to bottom, #ebe4fa, #f6f2ff, #e8f0fb);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
}
#xn-oauth-complete-fp *,
#xn-oauth-complete-fp *::before,
#xn-oauth-complete-fp *::after { box-sizing: border-box; }
#xn-oauth-complete-fp .xn-oc-card {
  width: 100%;
  max-width: 28rem;
  background: #fff;
  border: 1px solid rgb(255 255 255 / 0.8);
  border-radius: 1.5rem;
  padding: 1.25rem 1.25rem 1.5rem;
  box-shadow: 0 20px 60px rgb(79 70 229 / 0.12);
  text-align: center;
}
#xn-oauth-complete-fp .xn-oc-logo {
  margin: 0 auto 0.75rem;
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  border: 1px solid rgb(55 32 145 / 0.1);
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
#xn-oauth-complete-fp .xn-oc-logo img { display: block; width: 2rem; height: 2rem; }
#xn-oauth-complete-fp h1 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #111827;
}
#xn-oauth-complete-fp .xn-oc-sub {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  color: #6b7280;
}
#xn-oauth-complete-fp .xn-oc-spin-wrap {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0 0.25rem;
}
#xn-oauth-complete-fp .xn-oc-spin {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 2px solid #372091;
  border-top-color: transparent;
  animation: xn-oc-spin 0.7s linear infinite;
}
@keyframes xn-oc-spin { to { transform: rotate(360deg); } }