/* ============================================================
   ORBIT DASHBOARD - TEAL / LIGHT BRAND OVERRIDE (preview)
   Loaded AFTER tailwind.css + custom.css. Reskins the existing
   dark-first markup to the light/teal brand WITHOUT touching
   markup or copy. Inverts value (dark->light) + swaps hue
   (purple/cyan -> teal). Two teal moments kept + scoped for
   light text: the #navbar bar and the bottom CTA band.
   Matches the locked homepage preview design language.
   ============================================================ */

/* Display font for large headings. Loads on every page that links
   _brand.css. Pairs Sora (geometric display) with the existing
   Bricolage Grotesque (body). Operator-chosen display face. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap');

:root{
  --bg:#fcfcfd; --card:#ffffff; --text:#161820; --muted:#586072;
  --line:#e6e9ef; --line-soft:#eef1f5; --bg-side:#f4f6f9;
  --teal:#0e7c86; --teal-deep:#0a5f68; --teal-bright:#3aa6ae; --teal-pale:#8ad6d4;
  --on-teal:#f1fbfb; --on-teal-dim:#bfe4e4;
  --teal-tint:#eaf6f6;
  --ink-2:#2f3744; --ink-3:#5a6473;
  --shadow-card:0 1px 2px rgb(20 24 32/.04), 0 10px 28px -10px rgb(20 24 32/.12);
  --shadow-float:0 30px 80px -28px rgb(8 40 44/.45);
}

/* ---------- base ---------- */
body{background:var(--bg) !important;color:var(--text)}
::selection{background:rgba(14,124,134,.18);color:var(--text)}
html{scrollbar-width:thin;scrollbar-color:var(--teal) var(--bg)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--teal);border-radius:999px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--teal-deep)}

/* ---------- display font: Cabinet Grotesk for large headings ---------- */
/* h1/h2 get the display voice; h3/h4 (card titles) stay Bricolage for calm */
h1,h2{
  font-family:'Sora','Bricolage Grotesque',sans-serif !important;
  letter-spacing:-.02em;
}

/* Kill the dark-space star-field (white dots are invisible/wrong on light) */
#star-field,#star-field::before{display:none !important}

/* ---------- background utilities (dark -> light) ---------- */
.bg-orbit-dark{background-color:var(--bg)}
.bg-orbit-dark\/35{background-color:rgba(7,48,53,.30)}
.bg-orbit-deeper{background-color:var(--bg-side)}
.bg-orbit-deeper\/80{background-color:rgba(255,255,255,.9)}
.bg-orbit-deeper\/90{background-color:rgba(255,255,255,.94)}
.bg-orbit-deeper\/95{background-color:rgba(255,255,255,.96)}

/* accent fills (purple/cyan -> teal tints) */
.bg-orbit-purple{background-color:var(--teal)}
.bg-orbit-purple-light{background-color:var(--teal-bright)}
.bg-orbit-purple\/5{background-color:rgba(14,124,134,.05)}
.bg-orbit-purple\/10{background-color:rgba(14,124,134,.08)}
.bg-orbit-purple\/15{background-color:rgba(14,124,134,.1)}
.bg-orbit-purple\/40{background-color:rgba(14,124,134,.34)}
.bg-orbit-purple\/50{background-color:rgba(14,124,134,.42)}
.bg-orbit-purple-light\/5{background-color:rgba(58,166,174,.06)}
.bg-orbit-purple-light\/10{background-color:rgba(58,166,174,.1)}
.bg-orbit-purple-light\/15{background-color:rgba(58,166,174,.14)}
.bg-orbit-cyan\/10{background-color:rgba(58,166,174,.1)}
.bg-orbit-cyan\/15{background-color:rgba(58,166,174,.14)}
.bg-orbit-cyan\/50{background-color:rgba(58,166,174,.4)}

/* white-tint surfaces used as dark glass -> light */
.bg-white\/\[0\.03\]{background-color:#fff}
.bg-white\/5{background-color:var(--bg-side)}
.bg-white\/10{background-color:var(--line-soft)}

/* ---------- text utilities (light -> ink) ---------- */
.text-white{color:var(--text)}
.text-gray-200{color:var(--ink-2)}
.text-gray-300{color:var(--ink-2)}
.text-gray-400{color:var(--muted)}
.text-gray-500{color:var(--ink-3)}
.text-gray-600{color:#5f6878}
.text-orbit-cyan{color:var(--teal)}
.text-orbit-purple{color:var(--teal)}
.text-orbit-purple-light{color:var(--teal)}
.text-orbit-deeper{color:var(--teal-deep)}

/* hovers: light-theme links go teal on hover */
.hover\:text-white:hover{color:var(--teal)}
.hover\:text-orbit-purple-light:hover{color:var(--teal)}
.hover\:text-orbit-cyan:hover{color:var(--teal-deep)}

/* ---------- borders ---------- */
.border-white\/5{border-color:var(--line-soft)}
.border-white\/10{border-color:var(--line)}
.border-white\/20,.border-white\/30{border-color:var(--line)}
.border-orbit-purple{border-color:var(--teal)}
.border-orbit-purple\/10{border-color:rgba(14,124,134,.12)}
.border-orbit-purple\/20{border-color:rgba(14,124,134,.18)}
.border-orbit-purple\/30{border-color:rgba(14,124,134,.26)}
.border-orbit-purple\/40{border-color:rgba(14,124,134,.34)}
.border-orbit-purple\/50{border-color:rgba(14,124,134,.42)}
.border-orbit-purple-light\/10{border-color:rgba(58,166,174,.14)}
.border-orbit-purple-light\/20{border-color:rgba(58,166,174,.2)}
.border-orbit-purple-light\/30{border-color:rgba(58,166,174,.28)}
.border-orbit-cyan\/10{border-color:rgba(58,166,174,.14)}
.border-orbit-cyan\/20{border-color:rgba(58,166,174,.2)}
.border-orbit-cyan\/30{border-color:rgba(58,166,174,.28)}
.border-orbit-cyan\/40{border-color:rgba(58,166,174,.36)}
.hover\:border-orbit-cyan\/50:hover,.hover\:border-orbit-purple\/50:hover{border-color:rgba(14,124,134,.45)}

/* ---------- gradient stops (buttons -> teal gradient) ---------- */
.from-orbit-purple{--tw-gradient-from:var(--teal) var(--tw-gradient-from-position);--tw-gradient-to:rgba(14,124,134,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-orbit-purple-light{--tw-gradient-from:var(--teal-bright) var(--tw-gradient-from-position);--tw-gradient-to:rgba(58,166,174,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.via-orbit-purple-light{--tw-gradient-to:rgba(58,166,174,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--teal-bright) var(--tw-gradient-via-position),var(--tw-gradient-to)}
.via-orbit-deeper{--tw-gradient-to:rgba(10,95,104,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--teal-deep) var(--tw-gradient-via-position),var(--tw-gradient-to)}
.to-orbit-cyan{--tw-gradient-to:var(--teal-deep) var(--tw-gradient-to-position)}
.to-orbit-cyan\/80{--tw-gradient-to:rgba(58,166,174,.85) var(--tw-gradient-to-position)}
.to-orbit-cyan\/50{--tw-gradient-to:rgba(58,166,174,.5) var(--tw-gradient-to-position)}
.to-orbit-purple{--tw-gradient-to:var(--teal) var(--tw-gradient-to-position)}
.from-orbit-purple\/70{--tw-gradient-from:rgba(14,124,134,.7) var(--tw-gradient-from-position);--tw-gradient-to:rgba(14,124,134,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-orbit-purple\/10,.from-orbit-purple\/15,.from-orbit-purple\/30,.from-orbit-purple\/40,.from-orbit-purple\/50{--tw-gradient-from:rgba(14,124,134,.12) var(--tw-gradient-from-position);--tw-gradient-to:rgba(14,124,134,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.via-orbit-purple\/20{--tw-gradient-to:rgba(14,124,134,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(14,124,134,.2) var(--tw-gradient-via-position),var(--tw-gradient-to)}

/* hero dark-fade overlays (from-transparent via-orbit-dark/30 to-orbit-dark) -> fade to light,
   so every page hero flips light. NOTE: the CTA band uses via-orbit-deeper (kept teal-deep above),
   NOT these, so it is unaffected. */
.from-orbit-dark,.from-orbit-deeper{--tw-gradient-from:var(--bg) var(--tw-gradient-from-position);--tw-gradient-to:rgba(252,252,253,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-orbit-dark{--tw-gradient-to:var(--bg) var(--tw-gradient-to-position)}
.to-orbit-deeper{--tw-gradient-to:var(--bg-side) var(--tw-gradient-to-position)}
.via-orbit-dark{--tw-gradient-to:rgba(252,252,253,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--bg) var(--tw-gradient-via-position),var(--tw-gradient-to)}
.via-orbit-dark\/30{--tw-gradient-to:rgba(252,252,253,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(252,252,253,.3) var(--tw-gradient-via-position),var(--tw-gradient-to)}

/* ---------- KILL gradient text (Impeccable ban) -> solid teal ---------- */
.bg-clip-text.text-transparent,
h1 .bg-gradient-to-r,h2 .bg-gradient-to-r,.gradient-text{
  -webkit-text-fill-color:var(--teal) !important;
  color:var(--teal) !important;
  background-image:none !important;
  animation:none !important;
}

/* ---------- glass cards -> solid white cards ---------- */
.glass-card{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;  /* was dark-theme #fff in custom.css: un-classed headings inherited white-on-white */
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  box-shadow:var(--shadow-card);
  transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease,border-color .18s ease;
}
.glass-card:hover{
  background:var(--card) !important;
  border-color:rgba(14,124,134,.32) !important;
  box-shadow:0 18px 44px -18px rgba(8,40,44,.22) !important;
}

/* ghost button -> teal outline + faint teal-tint fill (light), so the
   secondary action keeps presence on white instead of vanishing */
.ghost-btn{
  border:1.5px solid var(--teal) !important;
  background-image:none !important;background:var(--teal-tint) !important;
  color:var(--teal-deep) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  animation:none !important;
  transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease,background-color .18s ease,color .18s ease;
}
.ghost-btn:hover{
  background:var(--teal) !important;color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 12px 30px -12px rgba(14,124,134,.6) !important;
}
.ghost-btn span{color:inherit !important}

/* inputs -> light */
.tool-input,input[type="email"],input[type="text"],input[type="search"],textarea{
  background:#fff !important;border:1px solid var(--line) !important;color:var(--text) !important;
}
input::placeholder,textarea::placeholder,.placeholder-gray-500::placeholder{color:#6a7283 !important}

/* the orbit-logo wordmark span (where used) -> teal */
.orbit-logo .orbit-O,.orbit-logo .orbit-dot,.orbit-logo .orbit-i::after{
  background:none !important;-webkit-text-fill-color:var(--teal) !important;color:var(--teal) !important;animation:none !important;
}
.orbit-logo .orbit-i::before{-webkit-text-fill-color:var(--text) !important}
.orbit-logo-suffix{color:var(--text) !important}

/* ============================================================
   TEAL MOMENT 1 - NAVBAR (solid teal, light text, white logo)
   ============================================================ */
/* Nav is solid teal on EVERY page (not transparent-at-top): subpages like blog,
   dispatches and legal have white tops, where light nav text would vanish at scroll 0. */
#navbar{background:var(--teal) !important;border-bottom:1px solid rgba(255,255,255,.1)}
#navbar.scrolled{background:var(--teal-deep) !important;backdrop-filter:none !important;box-shadow:0 8px 26px -14px rgba(0,0,0,.35);border-bottom-color:rgba(255,255,255,.12)}
/* logo -> solid white on the teal bar (kills the purple/cyan gradient mark).
   href$= so subpages in tools/ + blog/ (../index.html) match too, not just root. */
#navbar a[href$="index.html"] img{filter:brightness(0) invert(1) !important}
#navbar .nav-link,#navbar .nav-dropdown-toggle{color:#eef9f9 !important}
#navbar .nav-link:hover,#navbar .nav-dropdown-toggle:hover{color:#fff !important;background-image:none !important;-webkit-text-fill-color:#fff !important;text-decoration:underline;text-underline-offset:4px}
#navbar a[data-app-cta="login"]{color:#eef9f9 !important;font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
#navbar a[data-app-cta="login"]:hover{color:#fff !important}
.hamburger-line{background:#fff !important}
/* nav CTA "Get started" -> white pill, teal text */
#navbar a[data-app-cta="signup"]{background:var(--on-teal) !important;background-image:none !important;color:var(--teal-deep) !important}
#navbar a[data-app-cta="signup"]:hover{background:#fff !important;box-shadow:0 10px 26px -10px rgba(0,0,0,.35) !important}
/* nav "View demo" ghost -> white outline on teal (raised fill for presence) */
#navbar .ghost-btn{border-color:rgba(255,255,255,.6) !important;background:rgba(255,255,255,.16) !important;color:#fff !important}
#navbar .ghost-btn:hover{background:rgba(255,255,255,.26) !important;border-color:#fff !important;color:#fff !important;box-shadow:0 10px 24px -12px rgba(0,0,0,.4) !important}
/* dropdown panels stay light cards: their .text-white/.text-gray-* fall through to global ink.
   nav-link hover-gradient inside custom.css would re-introduce gradient text - neutralize it: */
nav .nav-link:hover,.nav-dropdown-item:hover span.flex-1 > span:first-child,.logo-item:hover{
  background-image:none !important;-webkit-text-fill-color:currentColor !important;color:var(--teal-deep) !important;animation:none !important;
}
#navbar .nav-link:hover{color:#fff !important}
.nav-dropdown-item:hover{background:var(--teal-tint) !important}
/* mobile menu -> deep teal panel, light text */
#mobile-menu{background:var(--teal-deep) !important}
#mobile-menu .text-gray-300,#mobile-menu .text-gray-400,#mobile-menu .mobile-nav-link,#mobile-menu .mobile-dropdown-toggle{color:var(--on-teal-dim) !important}
#mobile-menu .text-gray-500{color:var(--teal-pale) !important}
#mobile-menu .hover\:text-white:hover{color:#fff !important}
#mobile-menu .border-white\/5{border-color:rgba(255,255,255,.12) !important}

/* ============================================================
   TEAL MOMENT 2 - BOTTOM CTA BAND (#contact gradient band)
   identified by .via-orbit-deeper on the band div.
   ============================================================ */
/* Band bg was `from-orbit-purple via-orbit-deeper to-orbit-cyan/80`: the
   teal-bright corner washed out light text (eyebrow 1.75, body 2.7). Force a
   deep, even teal so on-teal / teal-pale / white all clear AA. */
.via-orbit-deeper{position:relative;
  background:radial-gradient(120% 130% at 85% 8%, rgba(58,166,174,.16), transparent 55%),
    linear-gradient(150deg, var(--teal-deep), #064a52) !important}
.via-orbit-deeper h1,.via-orbit-deeper h2,.via-orbit-deeper h3{color:var(--on-teal) !important}
.via-orbit-deeper p{color:#eef9f9 !important}
.via-orbit-deeper .text-white{color:var(--on-teal) !important}
.via-orbit-deeper .text-gray-300,.via-orbit-deeper .text-gray-300\/80{color:#eef9f9 !important}
.via-orbit-deeper .text-orbit-cyan,.via-orbit-deeper .text-orbit-purple-light,.via-orbit-deeper .text-orbit-purple{color:var(--on-teal-dim) !important}
.via-orbit-deeper .bg-clip-text.text-transparent{-webkit-text-fill-color:var(--teal-pale) !important;color:var(--teal-pale) !important}
.via-orbit-deeper .border-white\/30{border-color:rgba(255,255,255,.32) !important}
.via-orbit-deeper a[href="pricing.html"]{color:#fff !important}
.via-orbit-deeper .bg-white{background:#fff !important}
.via-orbit-deeper .text-orbit-deeper{color:var(--teal-deep) !important}

/* ---------- orbital system recolor (rings/planets -> teal, sun stays gold) ---------- */
.orbit-ring-1{border-color:rgba(138,214,212,.55) !important;box-shadow:0 0 20px rgba(138,214,212,.14),inset 0 0 20px rgba(138,214,212,.14) !important}
.orbit-ring-2{border-color:rgba(241,251,251,.5) !important;box-shadow:0 0 24px rgba(241,251,251,.12),inset 0 0 24px rgba(241,251,251,.12) !important}
.orbit-ring-3{border-color:rgba(58,166,174,.5) !important;box-shadow:0 0 28px rgba(58,166,174,.12),inset 0 0 28px rgba(58,166,174,.12) !important}
.orbit-ring-4{border-color:rgba(191,228,228,.5) !important;box-shadow:0 0 22px rgba(191,228,228,.12),inset 0 0 22px rgba(191,228,228,.12) !important}
.orbit-ring-5{border-color:rgba(138,214,212,.46) !important;box-shadow:0 0 28px rgba(138,214,212,.1),inset 0 0 28px rgba(138,214,212,.1) !important}
.planet-1{background:radial-gradient(circle at 32% 26%,#fff,#8ad6d4 40%,#2f8f94) !important;box-shadow:0 0 16px rgba(138,214,212,.6),inset -2px -2px 5px rgba(6,40,44,.4) !important}
.planet-2{background:radial-gradient(circle at 32% 26%,#eafcfb,#3aa6ae 42%,#1d6b70) !important;box-shadow:0 0 16px rgba(58,166,174,.6),inset -2px -2px 5px rgba(6,40,44,.4) !important}
.planet-3{background:radial-gradient(circle at 30% 26%,#fff,#bfe4e4 42%,#3aa6ae) !important;box-shadow:0 0 14px rgba(191,228,228,.6),inset -2px -2px 4px rgba(6,40,44,.4) !important}
.planet-4{background:radial-gradient(circle at 32% 26%,#fff,#8ad6d4 42%,#0e7c86) !important;box-shadow:0 0 14px rgba(138,214,212,.6),inset -2px -2px 4px rgba(6,40,44,.4) !important}
.planet-5{background:radial-gradient(circle at 30% 26%,#eafcfb,#3aa6ae 42%,#0a5f68) !important;box-shadow:0 0 12px rgba(58,166,174,.6),inset -2px -2px 4px rgba(6,40,44,.4) !important}

/* footer logo sits on a light surface now: recolor the gradient PNG to solid
   teal (icon + wordmark) so it reads + drops the purple/cyan gradient. */
footer a[href$="index.html"] img{filter:brightness(0) saturate(100%) invert(33%) sepia(94%) saturate(360%) hue-rotate(140deg) brightness(96%) contrast(90%) !important}
/* form controls -> teal accent (kills leftover purple checkbox/radio/range ticks) */
input[type="checkbox"],input[type="radio"],.tool-checkbox,input[type="range"]{accent-color:var(--teal) !important}

/* footer decorative rings -> teal (already via border remaps, ensure) */
footer .border-orbit-purple\/10,footer .border-orbit-cyan\/10,footer .border-orbit-purple-light\/10{border-color:rgba(14,124,134,.12) !important}

/* ============================================================
   TEAL MOMENT 3 - EVERY PAGE HERO (first <section> after #main)
   So every page opens on teal, matching the homepage.
   ============================================================ */
#main + section{
  position:relative;
  background:
    radial-gradient(120% 130% at 92% 4%, rgba(138,214,212,.16), transparent 52%),
    radial-gradient(90% 130% at -6% 106%, rgba(10,95,104,.55), transparent 60%),
    linear-gradient(152deg, #0d7480 0%, var(--teal-deep) 100%) !important;
  background-color:var(--teal-deep) !important;
}
/* faint grid texture like the home hero */
#main + section::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;mask-image:radial-gradient(85% 80% at 72% 22%,#000,transparent 78%);opacity:.3}
/* hide the dark/light decorative overlays inside the hero (star-field, fade, blur blobs) */
#main + section > .absolute,#main + section > #star-field{display:none !important}
#main + section > .relative{z-index:1}
/* hero text -> light (AA-readable on the teal hero) */
#main + section h1,#main + section h2{color:#fff !important;-webkit-text-fill-color:#fff !important}
#main + section p{color:#eef9f9 !important}
#main + section .text-gray-300,#main + section .text-gray-400,#main + section .text-gray-500{color:#eef9f9 !important}
#main + section .text-orbit-cyan,#main + section .text-orbit-purple-light,#main + section .text-orbit-purple{color:var(--on-teal) !important}
/* hide the redundant hero eyebrow kicker (teal uppercase label that just
   repeats the headline) - the AI-grammar tell, removed site-wide */
#main + section .text-orbit-cyan.uppercase{display:none !important}
/* hero headline accent: unify to clean white (no low-contrast pale, no italic) */
#main + section .bg-clip-text.text-transparent{-webkit-text-fill-color:#fff !important;color:#fff !important;background-image:none !important}
/* hero buttons -> white pill + white outline (match home hero) */
#main + section a[class*="from-orbit-purple"],#main + section button[class*="from-orbit-purple"]{background:#fff !important;background-image:none !important;color:var(--teal-deep) !important;box-shadow:0 12px 30px -12px rgba(0,0,0,.3) !important}
#main + section .ghost-btn{border-color:rgba(255,255,255,.6) !important;background:rgba(255,255,255,.16) !important;color:#fff !important}
#main + section .ghost-btn:hover{background:rgba(255,255,255,.26) !important;border-color:#fff !important;box-shadow:0 12px 28px -14px rgba(0,0,0,.4) !important}
#main + section .border-white\/10,#main + section .border-white\/20,#main + section .border-white\/30{border-color:rgba(255,255,255,.3) !important}

/* ============================================================
   TEAL MOMENT 4 - subpage CTA band -> bold teal band (match home)
   inner card = .rounded-[23px] (the bg-orbit-deeper panel that
   holds the orbital + shooting stars). Was flipped white; force teal.
   ============================================================ */
.rounded-\[23px\]{
  background:
    radial-gradient(130% 130% at 86% 8%, rgba(138,214,212,.2), transparent 55%),
    linear-gradient(160deg, var(--teal), var(--teal-deep)) !important;
  color:var(--on-teal) !important;backdrop-filter:none !important;
}
.rounded-\[23px\] h1,.rounded-\[23px\] h2,.rounded-\[23px\] h3{color:#fff !important;-webkit-text-fill-color:#fff !important}
.rounded-\[23px\] p{color:#eef9f9 !important}
.rounded-\[23px\] .text-gray-300,.rounded-\[23px\] .text-gray-400{color:#eef9f9 !important}
.rounded-\[23px\] .bg-clip-text.text-transparent{-webkit-text-fill-color:var(--teal-pale) !important;color:var(--teal-pale) !important;background-image:none !important}
.rounded-\[23px\] a[class*="from-orbit-purple"]{background:#fff !important;background-image:none !important;color:var(--teal-deep) !important}

/* ============================================================
   HEADLINE ACCENT WORDS - solid teal-deep, NOT italic (de-slop).
   Italic-on-every-headline read as a band-aid tell; teal carries
   the accent now. teal-deep (#0a5f68) = 7.4:1 on white. Hero + CTA
   scopes above override to white/pale (higher specificity wins).
   ============================================================ */
h1 .bg-clip-text.text-transparent,h2 .bg-clip-text.text-transparent,h3 .bg-clip-text.text-transparent{
  font-style:normal !important;
  -webkit-text-fill-color:var(--teal-deep) !important;color:var(--teal-deep) !important;
}

/* ============================================================
   LONG-FORM PROSE (blog dispatches / docs) - flip dark prose to light.
   prose-mission was built for a dark bg; on white its body text vanishes.
   ============================================================ */
.prose-mission{color:var(--ink-2)}
.prose-mission p,.prose-mission li{color:var(--ink-2)}
.prose-mission h2{color:var(--text);border-bottom-color:var(--line)}
.prose-mission h3{color:var(--text)}
.prose-mission h4{color:var(--ink-2)}
.prose-mission strong{color:var(--text)}
.prose-mission em{color:var(--ink-2)}
.prose-mission a{color:var(--teal);text-decoration-color:rgba(14,124,134,.4)}
.prose-mission a:hover{color:var(--teal-deep);text-decoration-color:var(--teal)}
.prose-mission li::marker{color:var(--teal)}
.prose-mission blockquote{border-left-color:var(--teal);background:var(--teal-tint);color:var(--ink-2)}
.prose-mission code{background:rgba(14,124,134,.08);border-color:rgba(14,124,134,.2);color:var(--teal-deep)}
.prose-mission thead{background:rgba(14,124,134,.08)}
.prose-mission th{color:var(--text)}
.prose-mission table{border-color:var(--line)}
.prose-mission th,.prose-mission td{border-bottom-color:var(--line)}
.prose-mission hr{border-top-color:var(--line)}
.prose-mission img{border-color:var(--line)}
/* code blocks (pre) stay dark on purpose - readable + conventional on a light page */
/* Tailwind typography prose-invert (used on About mission) -> light roles */
.prose-invert{--tw-prose-body:var(--ink-2);--tw-prose-headings:var(--text);--tw-prose-bold:var(--text);--tw-prose-links:var(--teal);--tw-prose-bullets:var(--teal);--tw-prose-quotes:var(--ink-2)}
/* mission-log TOC + glossary links -> teal/ink */
.mission-log-toc .toc-link:hover{color:var(--text);border-left-color:rgba(14,124,134,.4)}
.mission-log-toc .toc-link.is-active{color:var(--teal-deep);border-left-color:var(--teal)}
.glossary-term{color:var(--teal-deep);border-bottom-color:rgba(14,124,134,.5)}
.glossary-term:hover{color:var(--teal);border-bottom-color:var(--teal)}

/* ============================================================
   SEMANTIC STATUS COLORS ON LIGHT SURFACES (a11y contrast)
   The Tailwind *-400/300 semantic shades were tuned for the old
   DARK bg; on the new white cards they washed out (green 1.74:1,
   amber 1.67:1, orange 2.26, sky 2.14, emerald 1.92, red 2.77 -
   all fail AA). Remap the TEXT to darker counterparts that clear
   >=4.5:1 on white AND on the matching bg-*-400/10 tint pills.
   The pale tint FILLS stay; the teal/dark-surface scopes above
   force light text at higher specificity, so they are unaffected.
   No !important: loaded after tailwind, source-order wins. */
.text-green-400{color:#15803d}            /* green-700  ~5.0:1 */
.text-emerald-400,.text-emerald-300,.text-emerald-400\/80{color:#047857}  /* emerald-700 ~5.5:1 */
.text-amber-400{color:#b45309}            /* amber-700  ~5.0:1 */
.text-orange-400{color:#c2410c}           /* orange-700 ~5.2:1 */
.text-red-400,.text-red-400\/80{color:#dc2626}   /* red-600    ~4.8:1 */
.text-sky-400{color:#0369a1}              /* sky-700    ~5.9:1 */

/* ============================================================
   FOCUS-VISIBLE RINGS (a11y) - keyboard focus was invisible.
   Teal ring on light surfaces; white ring on teal surfaces.
   ============================================================ */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--teal) !important;outline-offset:2px !important;border-radius:6px;
}
#navbar a:focus-visible,#navbar button:focus-visible,
#main + section a:focus-visible,#main + section button:focus-visible,
.via-orbit-deeper a:focus-visible,.via-orbit-deeper button:focus-visible,
.rounded-\[23px\] a:focus-visible,.rounded-\[23px\] button:focus-visible,
#mobile-menu a:focus-visible,#mobile-menu button:focus-visible{
  outline-color:#fff !important;
}

/* ============================================================
   SOLID GRADIENT SURFACES (CTA buttons, badge pills, avatar circles)
   keep WHITE labels. The fill is the teal gradient (from-orbit-purple to cyan,
   remapped); the global .text-white to ink rule otherwise darkens labels to ink
   (~2.4:1 on teal). :not(text-transparent) skips gradient-TEXT headings;
   :not(.dispatch-card) skips the blog feature card (white inner, handled below).
   Hero/CTA-band button scopes (#id) win over this. */
/* Single :not(list) keeps specificity at (0,2,0): enough to beat .text-white
   (0,1,0) so solid teal buttons get white labels, but LOW enough that the
   white-pill CTA-band rule (.rounded-[23px] a[...], 0,2,1) and hero rule
   (#main + section ..., has id) still win and keep their teal-deep labels.
   The list excludes gradient-TEXT, faint /NN tint panels, and dispatch frames. */
[class*="from-orbit-purple"]:not([class*="text-transparent"],[class*="orbit-purple/"],[class*="orbit-cyan/"],.dispatch-card),
[class*="from-orbit-cyan"]:not([class*="text-transparent"],[class*="orbit-cyan/"],[class*="orbit-purple/"],.dispatch-card){color:#fff !important}

/* Blog dispatch cards: outer = teal gradient frame, inner = white glass-card.
   custom.css .dispatch-card sets white text (dark-theme); purged Tailwind meta
   classes (text-gray-500 etc) don't override it -> white-on-white. Force dark. */
.dispatch-card{color:var(--ink-2) !important}
.dispatch-card .text-orbit-purple-light,.dispatch-card .text-orbit-purple,.dispatch-card .text-orbit-cyan{color:var(--teal-deep) !important;-webkit-text-fill-color:var(--teal-deep) !important}
.dispatch-card .text-gray-500,.dispatch-card .text-gray-700{color:var(--muted) !important}
.dispatch-card .text-white{color:var(--text) !important;-webkit-text-fill-color:var(--text) !important}

/* Ghost buttons that sit ON a teal hero/section keep white text+outline
   (the light-section ghost-btn rule gives teal text, which vanishes on teal). */
#main + section .ghost-btn,#dash-hero .ghost-btn{
  color:#fff !important;border-color:rgba(255,255,255,.55) !important;background:rgba(255,255,255,.12) !important}
#main + section .ghost-btn span,#dash-hero .ghost-btn span{color:#fff !important;-webkit-text-fill-color:#fff !important}

/* ============================================================
   DASHBOARD HERO MOCKUP (#dash-hero) -> white app-window on the teal hero.
   Global text-white->ink + the hero light-text scope otherwise render the
   mockup white-on-white (numbers/labels) or dark-on-teal (agent names).
   Specificity (#id + 2 classes) intentionally beats `#main + section .x`.
   ============================================================ */
#dash-hero .inline-flex.rounded-full span{color:var(--teal-deep) !important;-webkit-text-fill-color:var(--teal-deep) !important}
#dash-hero .rounded-2xl{background:#fff !important;border-color:var(--line) !important;box-shadow:0 30px 80px -30px rgba(8,40,44,.45) !important}
#dash-hero .rounded-2xl .border-b{border-bottom-color:var(--line-soft) !important}
#dash-hero .rounded-2xl .text-gray-500{color:var(--ink-3) !important}
/* stat cells -> uniform light teal-tint */
#dash-hero .rounded-2xl .grid > div{background:var(--teal-tint) !important;border-color:rgba(14,124,134,.18) !important}
/* stat numbers (orbit accents) -> teal-deep; green System-Health stays green-700 via the semantic rule.
   Scoped under .rounded-2xl so specificity beats `#main + section .text-orbit-cyan` (the 847 cell). */
#dash-hero .rounded-2xl .text-orbit-purple,#dash-hero .rounded-2xl .text-orbit-cyan,#dash-hero .rounded-2xl .text-orbit-purple-light{
  color:var(--teal-deep) !important;-webkit-text-fill-color:var(--teal-deep) !important}
/* agent rows -> light cards, ink names */
#dash-hero .rounded-2xl .space-y-3 > div{background:var(--bg-side) !important;border-color:var(--line) !important}
#dash-hero .rounded-2xl .font-medium{color:var(--text) !important}
#dash-hero .rounded-2xl .bg-white\/5{background:var(--line) !important}