/* Shared YetReply palette: keep every section visually connected to the hero. */
:root {
  --bg: #f2f7ff;
  --bg-soft: #ffffff;
  --text: #102044;
  --muted: #647796;
  --primary: #2378ee;
  --card: rgba(255, 255, 255, 0.84);
  --border: #d7e4f3;
  --shadow: rgba(31, 72, 139, 0.12);
  --v2-ink: #102044;
  --v2-muted: #647796;
  --v2-blue: #2378ee;
  --v2-blue-dark: #155fc9;
  --v2-green: #159566;
  --v2-sand: #f2f7ff;
  --v2-card: rgba(255, 255, 255, 0.84);
  --v2-line: #d7e4f3;
}

html,
body {
  background: #f2f7ff !important;
  color: #102044 !important;
}

.page-bg {
  background:
    radial-gradient(circle at 78% 36%, rgba(73, 145, 255, 0.16), transparent 31%),
    linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%) !important;
}

.page-bg::after {
  background-image: linear-gradient(rgba(35, 120, 238, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 120, 238, 0.055) 1px, transparent 1px) !important;
  opacity: 0.3;
}

.landing-v2 {
  background: transparent !important;
  color: #102044 !important;
}

.operating-system,
.product-gallery,
.pricing-section,
.commerce-section,
.quick-start-v2,
.use-cases {
  background: transparent !important;
  color: #102044;
}

.section-intro h2,
.pricing-copy h2,
.quick-start-v2 h2,
.section-intro > p,
.quick-start-v2 .quick-start-text,
.use-case-grid h3,
.use-case-grid p,
.commerce-grid h3,
.commerce-grid p {
  color: #102044 !important;
}

.section-intro > p,
.quick-start-v2 .quick-start-text,
.use-case-grid p,
.commerce-grid p {
  color: #647796 !important;
}

.capability-card,
.gallery-card,
.quick-start-v2 .quick-start-card,
.commerce-grid {
  background: rgba(255, 255, 255, 0.84) !important;
  border-color: #d7e4f3 !important;
  box-shadow: 0 16px 38px rgba(31, 72, 139, 0.1) !important;
}

.capability-card h3 {
  color: #102044;
}

.capability-card p {
  color: #647796;
}

.capability-icon,
.mini-flow span,
.mini-flow b {
  border-color: #d7e4f3;
  background: #f3f8ff;
  color: #2378ee;
}

.commerce-grid article {
  border-color: #d7e4f3 !important;
}

.final-cta {
  background: linear-gradient(145deg, #155fc9 0%, #2378ee 100%) !important;
  box-shadow: 0 22px 48px rgba(35, 120, 238, 0.2);
}

.legal-footer-inner {
  border-top-color: #d7e4f3 !important;
}

@media (max-width: 640px) {
  .page-bg {
    background:
      radial-gradient(circle at 82% 18%, rgba(73, 145, 255, 0.14), transparent 42%),
      linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%) !important;
  }
}