/* CaravelIQ site theme: the "Arctic Paper" aura behind every page.
   Markup (added straight after <body> on every page):
     <div class="aura-page">
       <div class="aura" aria-hidden="true"> three layers </div>
       <div class="aura-content"> the page </div>
     </div>
   The layers span the whole page, so full-page captures show the same
   light from top to bottom. */

html, body { background: #faf8f2; }

.aura-page {
  position: relative;
  min-height: 100vh;
  background: transparent;
  overflow: hidden;
  overflow: clip;            /* clip, not hidden, so sticky navs keep sticking */
}
.aura {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  transform: translateZ(0);
}
.aura > div {
  position: absolute; inset: 0;
  pointer-events: none;
  transform: translateZ(0);
}
.aura-l1 { background: linear-gradient(145deg, #f8fafc 0%, #e0f2fe 38%, #bae6fd 68%, #dbeafe 100%); }
.aura-l2 {
  background: radial-gradient(ellipse 50% 40% at 35% 42%, rgba(125, 211, 252, 0.22) 0%, transparent 60%);
  mix-blend-mode: multiply;
  filter: blur(88px);
}
@media (min-width: 1024px) { .aura-l2 { filter: blur(126px); } }
.aura-grain { mix-blend-mode: overlay; opacity: 0.85; }
.aura-grain svg { display: block; width: 100%; height: 100%; }
.aura-content { position: relative; z-index: 1; display: flow-root; }   /* flow-root keeps the last section's bottom margin inside the aura */

/* Content is always visible, even to full-page screenshots and crawlers
   that never scroll it into view. */
.fade-in { opacity: 1; transform: none; }

/* ── Inner pages (Tailwind) ──────────────────────────────────────────
   Light sections let the aura show through; cards inside them stay white. */
.aura-content > section.bg-white,
.aura-content > section.bg-slate-50,
.aura-content > section.bg-brand-light,
.aura-content > div.bg-white,
.aura-content > div.bg-slate-50,
.aura-content > main.bg-white,
.aura-content > main.bg-slate-50 { background-color: transparent; }
/* Pastel hero gradients (from-teal-50 via-white …) give way to the aura too. */
.aura-content > header[class*="from-"][class*="-50"]:not(.aura-band),
.aura-content > section[class*="from-"][class*="-50"]:not(.aura-band) { background-image: none; background-color: transparent; }
.aura-content > nav.bg-white\/95,
.aura-content > nav[class*="bg-white"] { background-color: rgba(255, 255, 255, 0.72); }

/* Bands that used to be dark navy (heroes, call-to-action strips, footers)
   become frosted paper with navy text. */
.aura-content > .aura-band,
.aura-content .aura-band {
  background-color: rgba(255, 255, 255, 0.42);
  background-image: none;
  color: #001A44;
  border-top: 1px solid rgba(0, 26, 68, 0.08);
  border-bottom: 1px solid rgba(0, 26, 68, 0.08);
}
.aura-band .text-white:not([class*="bg-"]) { color: #001A44; }
.aura-band .text-slate-300,
.aura-band .text-slate-400,
.aura-band .text-slate-200,
.aura-band [class*="text-white/"] { color: #475569; }
.aura-band .text-brand-cyan { color: #0056D2; }
.aura-band .text-amber-300 { color: #b45309; }
.aura-band a:not([class*="bg-"]):hover { color: #0056D2; }
.aura-band [class*="bg-white/"] { background-color: rgba(255, 255, 255, 0.72); }
.aura-band [class*="border-white"] { border-color: rgba(0, 26, 68, 0.14); }
.aura-band [style*="rgba(255,255,255,0.1) 1px"],
.aura-band [style*="rgba(255,255,255,0.15) 1px"] { display: none; }
.aura-band svg[stroke="white"], .aura-band svg [stroke="white"] { stroke: #001A44; }
.aura-band svg[fill="white"], .aura-band svg [fill="white"] { fill: #001A44; }
/* White buttons would vanish on paper: they become the brand blue. */
.aura-band a.bg-white, .aura-band button.bg-white { background-color: #0056D2; color: #fff; }
.aura-band a.bg-white:hover, .aura-band button.bg-white:hover { background-color: #001A44; color: #fff; }
/* Dark cards that sit inside a band keep their own white text. */
.aura-band [class*="bg-brand-navy"] .text-white,
.aura-band [class*="bg-brand-blue"] .text-white { color: #fff; }