:root {
  --surface: #ffffff;
  --surface-2: #ffffff;
}

html,
body,
.topbar,
.hero,
.method,
.diagram,
.map-return {
  background-color: #ffffff;
}

.topbar {
  background-color: rgba(255, 255, 255, .96);
}

                                                                             
:root {
  --arxn-violet: #7057e8;
  --arxn-violet-deep: #4f3bb8;
  --arxn-violet-wash: #f3f0ff;
}

.hero::after {
  content: "";
  position: absolute;
  right: -12vw;
  bottom: -18vw;
  width: min(52vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(112, 87, 232, .18) 0, rgba(112, 87, 232, .08) 36%, transparent 70%);
  pointer-events: none;
}

.blueprint-grid {
  background-image: linear-gradient(rgba(112, 87, 232, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(112, 87, 232, .1) 1px, transparent 1px);
}

.eyebrow span,
.step,
.route-card i,
.route-head b,
.diagram b,
.test-chart header i,
.test-chart footer em,
.risk-gate span,
.strategy-performance li b {
  color: var(--arxn-violet);
  border-color: var(--arxn-violet);
}

.hero h1 em,
.section-head h2 em,
.strategy-performance h2 em,
.map-return h2 em,
.accent-line {
  color: var(--arxn-violet);
}

.primary,
.top-cta {
  background: var(--arxn-violet);
}

.route-card {
  border-color: rgba(112, 87, 232, .48);
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(243, 240, 255, .78));
  box-shadow: 18px 18px 0 rgba(112, 87, 232, .14);
}

.diagram {
  border-color: rgba(112, 87, 232, .32);
  background: linear-gradient(135deg, #fff 0%, #fff 66%, var(--arxn-violet-wash) 100%);
}

.map-return {
  background: linear-gradient(115deg, #fff 0%, #fff 72%, var(--arxn-violet-wash) 100%);
}

.plan.ultimate {
  background: linear-gradient(145deg, #7057e8, #4936a9);
}

.process-card,
.strategy-performance {
  scroll-margin-top: 92px;
}

.route-card li {
  padding: 0;
}

.route-card li a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 20px;
  gap: 11px;
  align-items: center;
  padding: 13px 0;
  color: inherit;
  text-decoration: none;
  transition: color .18s ease, padding-left .18s ease;
}

.route-card li a:hover,
.route-card li a:focus-visible {
  color: var(--arxn-violet-deep);
  padding-left: 4px;
  outline: none;
}

.route-card .route-arrow {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  opacity: .68;
  transition: transform .18s ease, opacity .18s ease;
}

.route-card li a:hover .route-arrow,
.route-card li a:focus-visible .route-arrow {
  transform: translateX(3px);
  opacity: 1;
}