/* Website Traffic — calm SaaS design system */
:root {
  --ink:#242B43 !important;
  --green:#44557E !important;
  --lime:#5268CC !important;
  --cream:#F8F9FC !important;
  --lavender:#EAEAFE !important;
  --purple:#EAEAFE !important;
  --orange:#F5B3A6 !important;
  --mint:#EFF3FA !important;
  --line:#E1E5EF !important;
  --muted:#626B80 !important;
  --shadow:0 12px 36px rgba(36,43,67,.075) !important;
}
html { color-scheme:light; }
body { background:#F8F9FC !important; color:#242B43 !important; }
a { text-underline-offset:3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {outline:3px solid #5268CC !important;outline-offset:3px}
button,.btn,.button { transition:background .2s, transform .2s, box-shadow .2s; }
button:hover,.btn:hover,.button:hover {filter:brightness(.96)}
.card,.panel,.toolbox,.tool,.library-card,.details,.wedge {border-color:#E1E5EF !important;box-shadow:0 12px 36px rgba(36,43,67,.06) !important}
input,select,textarea {border-color:#CCD3E2 !important;color:#242B43 !important}
.hero {background:linear-gradient(120deg,#EDEAFE 0%,#F3F2FD 55%,#F9F4F3 100%) !important}
.hero-art {background:linear-gradient(145deg,#CAD7FD,#EDEAFE 55%,#FBE7E1) !important}
.circle {background:#343C69 !important}
.orb {background:radial-gradient(circle at 35% 25%,#fff 0%,#DFD7FA 28%,#AAB7FB 60%,#6577CF 100%) !important;box-shadow:20px 32px 50px rgba(52,60,105,.24) !important}
.dashboard {box-shadow:0 24px 65px rgba(41,47,84,.21) !important}
.bars i {background:#BAC5F4 !important}
.bars i:nth-last-child(-n+3) {background:#6177D2 !important}
.sticker {background:#F6BDB1 !important; border-color:#343C69 !important;color:#242B43 !important}
.art.pink {background:#F9DBE1 !important}.art.blue {background:#DCE9FD !important}.art.green {background:#E4EAFB !important}.art.yellow {background:#F5E9DD !important}.art.purple {background:#E7E1FB !important}.art.orange {background:#F6DFD5 !important}
.banner {background:linear-gradient(120deg,#E7E9FC,#F3EEFC 58%,#FCEDE7) !important}
.banner-art {background:#38446F !important;color:#F8F9FF !important}
.dark,footer {background:#28324F !important}
.step,.next,.action {background:#35416B !important}
.featured {background:linear-gradient(125deg,#E7ECFF,#F2EDFF,#FBEDE8) !important}
.step b, .visual .sun {background:linear-gradient(135deg,#B8C5FB,#E4D9F9) !important;color:#303D70 !important}
.btn,button,.button {background:#485FC3 !important;color:#fff !important;border-color:transparent !important;box-shadow:0 8px 22px rgba(72,95,195,.14) !important}
.btn.light,.btn.lime,button.light,button.secondary,button.soft,.button.soft {background:#E8ECFE !important;color:#303F82 !important;border:1px solid #CBD4F8 !important;box-shadow:none !important}
.tag,.pill {background:#ECEEFD !important;color:#394883 !important;border-color:#D9DEF7 !important}
.result,.message {background:#F0F2FC !important;color:#303953 !important}
.progress div {background:#6579D2 !important}
.logo b,.brand em, .eyebrow {color:#4F62B1 !important}
.muted,.tool p,.cardcopy p {color:#626B80 !important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto !important;transition:none !important}}

/* cross-page surface consistency */
header.hero, header:not(.nav):not(.top) {color:#242B43}
.card h2,.panel h2,.toolbox h2 {color:#242B43}
.hero h1 {color:#242B43 !important}
.hero p {color:#505A75 !important}
a:hover {text-decoration-thickness:2px}
/* Contrast repair: light instructional cards, dark recommendation card. */
.steps .step, .step {background:#FFFFFF !important;color:#242B43 !important;border:1px solid #E1E5EF !important}
.steps .step h3,.step h3,.steps .step strong,.step strong {color:#242B43 !important}
.steps .step p,.step p {color:#535E75 !important}
.steps .step b,.step b {color:#34457F !important;background:#E3E7FC !important}
.next,.action {background:#35416B !important;color:#FFFFFF !important}
.next h1,.next h2,.next h3,.next h4,.next strong,.action h1,.action h2,.action h3,.action strong {color:#FFFFFF !important}
.next p,.next .muted,.action p,.action .muted {color:#E5EAF8 !important}
.next .tag,.action .tag {background:#E9ECFF !important;color:#34457F !important}
.next a.button,.action a.button {background:#F2F3FF !important;color:#303F82 !important;border-color:#D7DEFF !important}
/* Prevent dark-context label loss in any tool panel */
.dark h2,.dark h3,.dark strong,.dark .eyebrow {color:#FFFFFF !important}
.dark p,.dark li {color:#E5EAF8 !important}

/* Page-specific accessible contrast. Avoid applying dark card text rules to recommendations. */
#moveTitle,#moveWhy{color:#fff !important}
.next a.button,.next button,.action a.button,.action button{background:#f2f3ff !important;color:#303f82 !important}
/* Article pages: preserve legible white hero text on dark backgrounds, even with global theme. */
article p{color:#475268 !important}
:focus-visible{outline:3px solid #5268cc !important;outline-offset:3px}

#roadmap.dark .stepgrid .step{background:#FCFCFF!important;color:#242B43!important;border:1px solid #D8DEF1!important;box-shadow:0 10px 30px rgba(10,16,44,.12)!important}#roadmap.dark .stepgrid .step strong{color:#4559B0!important;opacity:1!important}#roadmap.dark .stepgrid .step h3{color:#242B43!important;opacity:1!important}#roadmap.dark .stepgrid .step p{color:#4F5970!important;opacity:1!important}