/* ═══════════════════════════════════════════════════════════
   UPLIFT DESIGN SYSTEM — shared across all pages
   Warm beige-paper theme, navy ink, blue accent, hand-drawn feel
   ═══════════════════════════════════════════════════════════ */

/* Tiny scroll-aware header — add .scrolled class via a small inline script */
/* (applied via earlybird.js or a page snippet) */

/* Safety net: if anything snaps to blue-mode via earlybird.js, still apply our palette */
:root.blue-mode {
  --bg: #E8DCBD !important;
  --text: #0A1F36 !important;
}
:root.blue-mode body,
body.blue-mode { background: #E8DCBD !important; color: #0A1F36 !important; }

:root.light-mode {
  --c-cream: #E8DCBD;
  --c-cream-2: #DCCCA4;
  --c-paper: #F2E8CF;
  --c-ink: #11294A;          /* main text — slightly lightened warm navy */
  --c-ink-2: #2A4868;         /* secondary text — brighter medium */
  --c-dim: #5D7297;           /* dim labels — much brighter slate */
  --c-line: #CEC3A8;
  --c-line-soft: #DED4BC;
  --c-sage: #4A98DE;          /* PRIMARY BLUE — noticeably brighter */
  --c-sage-deep: #2F7DCB;     /* old primary moved to "deep" for hovers */
  --c-sage-soft: #BDD5F0;     /* lighter soft blue */
  --c-sage-tint: #E3ECF8;     /* lightest tint */
  --c-terra: #C9632F;
  --c-terra-deep: #974020;
  --c-terra-soft: #F3C5A9;
  --c-terra-tint: #FADFC9;
  --c-mustard: #E8A934;
  --c-mustard-deep: #B17A14;
  --c-mustard-tint: #F8E3B0;
  --c-plum: #5B2E79;
  --c-plum-soft: #E2C8ED;
  --c-coffee: #1A3555;
  --c-dark: #0F2742;
  --c-dark-2: #1A3555;
  --c-dark-edge: rgba(220,237,249,.09);
  --c-dark-edge-2: rgba(220,237,249,.18);
  --c-dark-text: #E8F0F9;
  --c-dark-dim: #8DA8C7;
}

/* ── Safety net: hide any theme toggle that slips through ── */
.theme-toggle, #themeToggle, button.theme-toggle { display: none !important; }

/* ── Global body/paper setup ──
   Body IS the cream paper. The dark "desk" only shows in the absolute-positioned
   top strip (.c-desk-strip). This way every page is cream regardless of its
   inner wrap structure. */
.light-mode body {
  background: var(--c-cream) !important;
  padding-top: 74px;
  color: var(--c-ink);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  overflow-x: hidden;
}
.light-mode html { background: var(--c-cream) !important; }
.light-mode .wrap,
.light-mode main.site-main,
.light-mode main#main,
.light-mode main {
  background: transparent;
  position: relative;
  z-index: 1;
}

/* Kill inherited dark-theme overlays */
#particles, canvas#particles { display: none !important; }
.noise { display: none !important; }

/* ── Header styling — match home page exactly; sticky on scroll ── */
.light-mode .header {
  position: sticky;
  top: 0;
  z-index: 80;
  margin-top: 30px;
  background: rgba(242, 232, 207, .92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(10,31,54,.12);
  box-shadow: 0 2px 0 rgba(10,31,54,.04);
  transition: box-shadow .25s;
}
.light-mode .header.scrolled { box-shadow: 0 4px 12px rgba(10,31,54,.1); }

/* Nav — match home's inline defaults (small & tight) */
.light-mode .header-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
@media (max-width: 900px) {
  .light-mode .header-nav { display: none; }
}
.light-mode .header-nav a {
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.light-mode .header-nav a:hover {
  background: rgba(10,31,54,.05);
}
.light-mode .header-nav a {
  color: var(--c-ink-2) !important;
  font-weight: 700;
}
.light-mode .header-nav a:hover,
.light-mode .header-nav a.active {
  color: var(--c-sage) !important;
  background: transparent !important;
}
.light-mode .header-nav a.active {
  position: relative;
}
.light-mode .header-nav a.active::after {
  content: "";
  position: absolute;
  bottom: -4px; left: 1rem; right: 1rem;
  height: 3px;
  background: var(--c-terra);
  border-radius: 2px;
}
.light-mode .logo {
  color: var(--c-ink) !important;
  font-weight: 900;
}
.light-mode .btn-cta {
  background: var(--c-ink) !important;
  color: var(--c-cream) !important;
  border: none;
  font-weight: 700;
  padding: .65rem 1.1rem;
  border-radius: 10px;
  box-shadow: none;
  transition: all .2s;
}
.light-mode .btn-cta:hover {
  background: var(--c-sage-deep) !important;
  transform: translateY(-1px);
}

/* ── DARK DESK STRIP (torn-paper top) ── */
.c-desk-strip {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 74px;
  z-index: 55;
  pointer-events: none;
  background:
    repeating-linear-gradient(92deg,
      rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px,
      transparent 1px, transparent 4px),
    radial-gradient(ellipse at 22% 40%, rgba(78,164,228,.11), transparent 55%),
    radial-gradient(ellipse at 78% 55%, rgba(232,169,52,.09), transparent 55%),
    linear-gradient(180deg, #060F1D 0%, #0E2036 80%, #142A44 100%);
  box-shadow: inset 0 -12px 28px rgba(0,0,0,0.55);
}

.c-tear {
  position: absolute;
  top: 54px;
  left: 0; right: 0;
  width: 100%;
  height: 56px;
  z-index: 58;
  pointer-events: none;
}
.c-tear svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter:
    drop-shadow(0 4px 2px rgba(0,0,0,0.45))
    drop-shadow(-2px 9px 14px rgba(0,0,0,0.38));
}
.c-tear-bits {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 54px;
  z-index: 57;
  pointer-events: none;
  overflow: hidden;
}
.c-tear-bits svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}

/* ── REALISTIC CURLED PAPER CORNER (top-right) ── */
.c-fold {
  position: fixed;
  top: 0; right: 0;
  width: 120px; height: 120px;
  z-index: 70;
  display: block;
  transition: transform .55s cubic-bezier(.3, 1.4, .5, 1), opacity .45s ease;
  transform-origin: 100% 0;
  cursor: pointer;
  text-decoration: none;
  overflow: visible;
}
/* Fade the fold gracefully when the page scrolls so the sticky header
   doesn't crop through it. Uses :has() against the scroll-tracked header. */
.light-mode body:has(.header.scrolled) .c-fold,
.light-mode .scrolled ~ .c-fold,
body.is-scrolled .c-fold {
  opacity: 0;
  transform: translate(24px, -28px) rotate(-14deg) scale(.92);
  pointer-events: none;
}
.light-mode body:has(.header.scrolled) .c-fold-label,
body.is-scrolled .c-fold-label {
  opacity: 0;
}
.c-fold svg {
  display: block;
  width: 100%; height: 100%;
  transition: filter .4s, transform .5s cubic-bezier(.3, 1.4, .5, 1);
  overflow: visible;
}
.c-fold:hover { transform: scale(1.06); }
.c-fold:hover svg { transform: rotate(-1.5deg); filter: brightness(1.04); }
.c-fold-label {
  position: absolute;
  top: 34px; right: 18px;
  transform: rotate(-38deg);
  transform-origin: center;
  font-family: "Caveat", "Outfit", cursive;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -.005em;
  pointer-events: none;
  opacity: .78;
  transition: opacity .3s, transform .4s cubic-bezier(.3, 1.4, .5, 1);
  text-shadow: 0 1px 0 rgba(255,248,225,.6);
  white-space: nowrap;
}
.c-fold:hover .c-fold-label { opacity: 1; transform: rotate(-38deg) scale(1.04); }
@media (max-width: 900px) {
  .c-fold { width: 92px; height: 92px; }
  .c-fold-label { top: 26px; right: 13px; font-size: .92rem; }
}
@media (max-width: 480px) {
  .c-fold { width: 72px; height: 72px; }
  .c-fold-label { font-size: .72rem; top: 20px; right: 10px; }
}

/* ── Kill dark-theme body background modifiers from earlybird.css ── */
.light-mode .morph-blob { display: none; }
.light-mode .orb, .light-mode .orb-1, .light-mode .orb-2, .light-mode .orb-3 { display: none; }

/* ── Generic card/glass overrides — cream paper cards with ink borders ── */
.light-mode .card,
.light-mode .bento-card,
.light-mode .compare-card,
.light-mode .int-card,
.light-mode .stack-card,
.light-mode .op-card,
.light-mode .pillar,
.light-mode .step-card,
.light-mode .res-card,
.light-mode .faq-item,
.light-mode .stat-card,
.light-mode .ch-card,
.light-mode .dl-card,
.light-mode .trust-card,
.light-mode .pricing-card,
.light-mode .contact-card,
.light-mode .admin-card {
  background: var(--c-paper) !important;
  border: 1px solid var(--c-line) !important;
  backdrop-filter: none !important;
  box-shadow: 0 2px 0 rgba(10,31,54,.04) !important;
}
.light-mode .card:hover,
.light-mode .bento-card:hover,
.light-mode .compare-card:hover,
.light-mode .int-card:hover,
.light-mode .stack-card:hover,
.light-mode .op-card:hover,
.light-mode .pillar:hover,
.light-mode .res-card:hover,
.light-mode .stat-card:hover {
  border-color: var(--c-ink) !important;
  transform: translateY(-4px);
  box-shadow: 0 8px 0 rgba(10,31,54,.08), 0 12px 24px -10px rgba(10,31,54,.15) !important;
}

/* Typography overrides */
.light-mode h1, .light-mode h2, .light-mode h3, .light-mode h4, .light-mode h5 {
  color: var(--c-ink);
  font-family: "Outfit", sans-serif;
  letter-spacing: -.02em;
}
.light-mode .acc { color: var(--c-sage) !important; }
.light-mode .glow,
.light-mode .shimmer-text {
  background: none !important;
  -webkit-text-fill-color: var(--c-sage) !important;
  color: var(--c-sage) !important;
  filter: none !important;
  animation: none !important;
}
.light-mode p, .light-mode li, .light-mode span, .light-mode div { color: inherit; }
.light-mode main p { color: var(--c-ink-2); }
.light-mode main .dim, .light-mode main [class*="dim"] { color: var(--c-dim); }
.light-mode main a:not(.btn-cta):not(.btn-ghost):not(.c-fold):not(.header-nav a) {
  color: var(--c-sage);
}

/* Link/ghost button */
.light-mode .btn-ghost,
.light-mode a.btn-ghost {
  background: transparent !important;
  color: var(--c-ink) !important;
  border: 1px solid var(--c-line) !important;
  font-weight: 700;
  padding: .75rem 1.25rem;
  border-radius: 10px;
  transition: all .25s;
}
.light-mode .btn-ghost:hover {
  border-color: var(--c-ink) !important;
  background: var(--c-paper) !important;
}
.light-mode .btn-cta-lg {
  background: var(--c-ink) !important;
  color: var(--c-cream) !important;
  font-weight: 800;
  padding: .85rem 1.6rem !important;
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--c-terra) !important;
  transition: all .25s;
}
.light-mode .btn-cta-lg:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--c-terra) !important;
}

/* Eyebrow/badge */
.light-mode .badge-live,
.light-mode [class*="eyebrow"] {
  background: var(--c-sage-tint) !important;
  color: var(--c-sage) !important;
  border-color: var(--c-sage-soft) !important;
}

/* Footer */
.light-mode .eb-footer,
.light-mode .site-footer,
.light-mode .u-foot {
  color: var(--c-dim);
  border-top: 1px solid var(--c-line);
  padding: 2rem 0;
}
.light-mode .eb-footer a,
.light-mode .site-footer a {
  color: var(--c-sage);
}

/* Hero-style section heads */
.light-mode .sec-head h2,
.light-mode .sec-head h1 { color: var(--c-ink) !important; }
.light-mode .sec-head p { color: var(--c-ink-2) !important; }

/* Code blocks */
.light-mode pre,
.light-mode .code-block,
.light-mode .term-mock,
.light-mode .dl-cmd {
  background: var(--c-dark) !important;
  color: var(--c-dark-text) !important;
  border: 1px solid var(--c-ink) !important;
  box-shadow: 3px 3px 0 var(--c-terra);
}

/* Section bridges */
.light-mode .section-bridge { color: var(--c-terra); }

/* Force forms to be readable */
.light-mode input,
.light-mode textarea,
.light-mode select {
  background: var(--c-paper) !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-ink) !important;
}
.light-mode input:focus,
.light-mode textarea:focus,
.light-mode select:focus {
  border-color: var(--c-sage) !important;
  outline: none;
}

/* ═══════════════════ LAYOUT UPLIFT PATTERNS ═══════════════════
   Editorial accents — apply via class or via the common section
   patterns the existing pages already use (.sec-head, .page-section).
   ═══════════════════════════════════════════════════════════════ */

/* Big sticker badge — reusable across all pages */
.light-mode .up-sticker {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .9rem;
  background: var(--c-mustard); color: var(--c-ink);
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  border: 2px solid var(--c-ink);
  box-shadow: 3px 3px 0 var(--c-ink);
  transform: rotate(-3deg);
  transition: transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.light-mode .up-sticker:hover { transform: rotate(0deg) scale(1.05); }
.light-mode .up-sticker.up-sticker-terra { background: var(--c-terra); color: #fff; }
.light-mode .up-sticker.up-sticker-sage { background: var(--c-sage); color: #fff; }

/* Mustard highlight marker on specific words */
.light-mode .up-mark {
  background: linear-gradient(180deg, transparent 62%, var(--c-mustard) 62%, var(--c-mustard) 92%, transparent 92%);
  padding: 0 .1em;
}

/* Squiggly hand-drawn underline — works on headings */
.light-mode .up-squiggle {
  position: relative;
  display: inline-block;
}
.light-mode .up-squiggle::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -.15em; height: .25em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12' preserveAspectRatio='none'%3E%3Cpath d='M 2 6 Q 14 2, 26 6 T 50 6 Q 62 10, 74 6 T 98 6 Q 110 2, 122 6 T 158 6' stroke='%23C9632F' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%; background-repeat: no-repeat;
  pointer-events: none;
}

/* Chapter number watermark — sits behind section heading */
.light-mode .up-chapter { position: relative; }
.light-mode .up-chapter::before {
  content: attr(data-ch);
  position: absolute;
  top: -.2em; left: -.5em;
  font-family: "Outfit", sans-serif;
  font-size: clamp(8rem, 18vw, 16rem);
  font-weight: 900;
  line-height: .75;
  color: transparent;
  -webkit-text-stroke: 2px var(--c-line);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.light-mode .up-chapter > * { position: relative; z-index: 1; }

/* CHUNKY SHADOW on all card-type elements on secondary pages */
.light-mode .bento-card,
.light-mode .compare-card,
.light-mode .int-card,
.light-mode .stack-card,
.light-mode .op-card,
.light-mode .pillar,
.light-mode .res-card,
.light-mode .ch-card,
.light-mode .stat-card,
.light-mode .trust-card {
  border: 2px solid var(--c-ink) !important;
  border-radius: 16px !important;
  box-shadow: 5px 5px 0 var(--c-ink) !important;
  transition: transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s !important;
}
.light-mode .bento-card:hover,
.light-mode .compare-card:hover,
.light-mode .int-card:hover,
.light-mode .stack-card:hover,
.light-mode .op-card:hover,
.light-mode .pillar:hover,
.light-mode .res-card:hover,
.light-mode .stat-card:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 8px 8px 0 var(--c-ink) !important;
}

/* Accent chunky shadows on specific highlight cards */
.light-mode .bento-card.b-big,
.light-mode .compare-card.cc-hot,
.light-mode .pillar.p-1 {
  box-shadow: 5px 5px 0 var(--c-sage) !important;
}
.light-mode .bento-card.b-big:hover,
.light-mode .compare-card.cc-hot:hover,
.light-mode .pillar.p-1:hover {
  box-shadow: 8px 8px 0 var(--c-sage) !important;
}
.light-mode .compare-card.cc-premium,
.light-mode .pillar.p-3 {
  box-shadow: 5px 5px 0 var(--c-terra) !important;
}
.light-mode .compare-card.cc-premium:hover,
.light-mode .pillar.p-3:hover {
  box-shadow: 8px 8px 0 var(--c-terra) !important;
}
.light-mode .compare-card.cc-trial,
.light-mode .pillar.p-2 {
  box-shadow: 5px 5px 0 var(--c-mustard) !important;
}
.light-mode .compare-card.cc-trial:hover,
.light-mode .pillar.p-2:hover {
  box-shadow: 8px 8px 0 var(--c-mustard) !important;
}

/* Section heading — bigger, bolder */
.light-mode .sec-head.centered h2,
.light-mode .sec-head h2 {
  font-size: clamp(2.2rem, 5vw, 4.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  line-height: .95 !important;
  margin-bottom: .8rem;
}
.light-mode .sec-head.centered p,
.light-mode .sec-head p {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 56ch;
  margin-left: auto; margin-right: auto;
  color: var(--c-ink-2) !important;
}
.light-mode .sec-head .acc { color: var(--c-sage) !important; }

/* CTA banner reskin */
.light-mode .cta-banner {
  background: var(--c-paper) !important;
  border: 2px solid var(--c-ink);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--c-terra);
  max-width: 1100px;
  margin: 4rem auto;
  padding: 3rem 2rem !important;
}
.light-mode .cta-banner h2 {
  color: var(--c-ink) !important;
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  font-weight: 800;
  letter-spacing: -.03em;
}
.light-mode .cta-banner p { color: var(--c-ink-2) !important; }

/* Tech pill chips */
.light-mode .tech-pill,
.light-mode .sc-pill,
.light-mode .u-chip {
  background: var(--c-paper) !important;
  border: 1.5px solid var(--c-ink) !important;
  color: var(--c-ink) !important;
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--c-ink);
  transition: transform .2s, box-shadow .2s;
}
.light-mode .tech-pill:hover,
.light-mode .sc-pill:hover,
.light-mode .u-chip:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--c-ink);
}

/* Step track dots */
.light-mode .step-dot {
  background: var(--c-sage) !important;
  color: #fff !important;
  border: 2px solid var(--c-ink);
  box-shadow: 3px 3px 0 var(--c-ink) !important;
}
.light-mode .steps-track::before {
  background: linear-gradient(90deg, var(--c-sage), var(--c-terra), var(--c-mustard)) !important;
  opacity: .35 !important;
}

/* FAQ items */
.light-mode .faq-item {
  background: var(--c-paper) !important;
  border: 2px solid var(--c-ink) !important;
  border-radius: 14px !important;
}
.light-mode .faq-item summary {
  color: var(--c-ink);
  font-weight: 800;
}
.light-mode .faq-item summary::after {
  background: var(--c-sage-tint) !important;
  color: var(--c-sage) !important;
  border: 1.5px solid var(--c-sage) !important;
}
.light-mode .faq-body { color: var(--c-ink-2) !important; }

/* Chapter break ornament — reusable across pages, auto-injected via CSS */
.light-mode .page-section { position: relative; }
.light-mode .page-section + .page-section::before {
  content: "";
  display: block;
  width: 140px; height: 26px;
  margin: 0 auto 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 26'%3E%3Cg stroke='%230A1F36' stroke-linecap='round' fill='none'%3E%3Cpath d='M 4 13 L 42 13' stroke-width='2' stroke-dasharray='1 6'/%3E%3Cpath d='M 46 13 q 4 -7 10 -7 q 6 0 8 7' stroke-width='2.2'/%3E%3Cpath d='M 82 13 q 0 -7 8 -7 q 6 0 10 7' stroke-width='2.2'/%3E%3Cpath d='M 98 13 L 136 13' stroke-width='2' stroke-dasharray='1 6'/%3E%3C/g%3E%3Cg transform='translate(70,13)'%3E%3Cpath d='M 0 -7 L 7 0 L 0 7 L -7 0 Z' fill='%23C9632F' stroke='%230A1F36' stroke-width='2' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .7;
}

/* Pricing tier card — category label (mono, small caps) that divides feature groups */
.light-mode .cc-cat {
  list-style: none;
  padding: .7rem 0 .3rem 0 !important;
  margin-top: .3rem;
  border-top: 1px solid var(--c-line);
  font-family: "JetBrains Mono", monospace !important;
  font-size: .58rem !important;
  font-weight: 800 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  color: var(--c-dim) !important;
  display: block !important;
}
.light-mode .cc-cat:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* First "Everything in X, plus:" item — make it a hero divider */
.light-mode .cc-plus {
  list-style: none;
  display: block !important;
  padding: .6rem .9rem !important;
  margin: .3rem 0 .5rem !important;
  background: var(--c-paper) !important;
  border: 2px dashed var(--c-ink);
  border-radius: 10px;
  font-family: "Outfit", sans-serif !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  color: var(--c-ink) !important;
  text-align: center;
}
.light-mode .compare-card.cc-premium .cc-plus { border-color: var(--c-terra); }
.light-mode .compare-card.cc-hot .cc-plus { border-color: var(--c-sage); }

/* Tier card in light-mode: remove blur glass, give it 2px ink border + chunky shadow */
.light-mode .compare-card {
  background: var(--c-paper) !important;
  border: 2px solid var(--c-ink) !important;
  border-radius: 18px !important;
  backdrop-filter: none !important;
  box-shadow: 6px 6px 0 var(--c-ink) !important;
  padding: 2rem 1.6rem !important;
  transition: transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s !important;
}
.light-mode .compare-card:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 9px 9px 0 var(--c-ink) !important;
}
.light-mode .compare-card.cc-hot {
  box-shadow: 6px 6px 0 var(--c-sage) !important;
}
.light-mode .compare-card.cc-hot:hover {
  box-shadow: 9px 9px 0 var(--c-sage) !important;
}
.light-mode .compare-card.cc-premium {
  box-shadow: 6px 6px 0 var(--c-terra) !important;
}
.light-mode .compare-card.cc-premium:hover {
  box-shadow: 9px 9px 0 var(--c-terra) !important;
}
.light-mode .compare-card.cc-trial {
  box-shadow: 6px 6px 0 var(--c-mustard) !important;
}
.light-mode .compare-card.cc-trial:hover {
  box-shadow: 9px 9px 0 var(--c-mustard) !important;
}

/* Tier card lists — tighter spacing, cleaner check */
.light-mode .cc-list li:not(.cc-cat):not(.cc-plus) {
  font-size: .84rem !important;
  padding: .1rem 0 !important;
  line-height: 1.4 !important;
  color: var(--c-ink-2) !important;
  font-weight: 500 !important;
}
.light-mode .cc-list li b,
.light-mode .cc-list li strong {
  color: var(--c-ink) !important;
  font-weight: 700 !important;
}
.light-mode .cc-check {
  background: var(--c-sage-tint) !important;
  color: var(--c-sage) !important;
  width: 16px !important;
  height: 16px !important;
  border: 1px solid var(--c-sage) !important;
  font-size: .5rem !important;
}
.light-mode .cc-premium .cc-check { background: var(--c-terra-tint) !important; color: var(--c-terra) !important; border-color: var(--c-terra) !important; }
.light-mode .cc-trial .cc-check { background: var(--c-mustard-tint) !important; color: var(--c-mustard-deep) !important; border-color: var(--c-mustard-deep) !important; }

/* Tier name + price block */
.light-mode .cc-name {
  color: var(--c-ink) !important;
  font-family: "Outfit", sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.2rem !important;
  letter-spacing: -.01em;
}
.light-mode .cc-period {
  color: var(--c-dim) !important;
  font-family: "JetBrains Mono", monospace;
  font-size: .72rem;
  letter-spacing: .05em;
  margin-top: .4rem;
}

/* Tier description block (the grey tagline before the divider) */
.light-mode .compare-card > div[style*="color:var(--c-ink-2)"] {
  color: var(--c-ink-2) !important;
  line-height: 1.5 !important;
}

/* Divider becomes cleaner hand-ink line */
.light-mode .cc-divider {
  background: var(--c-line) !important;
  margin: 1.4rem 0 .8rem !important;
  height: 1px;
  position: relative;
}
.light-mode .cc-divider::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  background: var(--c-paper);
  border: 2px solid var(--c-ink);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Price numbers on pricing tiers — bigger, more dramatic */
.light-mode .cc-price {
  font-size: 4.5rem !important;
  font-weight: 900 !important;
  letter-spacing: -.05em !important;
  line-height: 1 !important;
  color: var(--c-ink) !important;
  background: none !important;
  -webkit-text-fill-color: var(--c-ink) !important;
  filter: none !important;
}
.light-mode .compare-card.cc-hot .cc-price { color: var(--c-sage) !important; -webkit-text-fill-color: var(--c-sage) !important; }
.light-mode .compare-card.cc-premium .cc-price { color: var(--c-terra) !important; -webkit-text-fill-color: var(--c-terra) !important; }
.light-mode .compare-card.cc-trial .cc-price { color: var(--c-mustard-deep) !important; -webkit-text-fill-color: var(--c-mustard-deep) !important; }

/* Pricing badges */
.light-mode .cc-badge {
  background: var(--c-ink) !important;
  color: var(--c-cream) !important;
  font-family: "JetBrains Mono", monospace;
  box-shadow: 2px 2px 0 var(--c-ink);
  transform: rotate(-4deg);
  border: 1.5px solid var(--c-ink);
}

/* Tilt card — disable the hover tilt that's too cluttered with chunky shadows */
.light-mode .tilt-card { transform: none !important; }

/* Section-bridge icons (arrows between sections) */
.light-mode .section-bridge { display: none; }

/* Gradient-border decorations — remove (too busy with new palette) */
.light-mode .gradient-border::before { display: none; }
.light-mode .glow-card { box-shadow: 5px 5px 0 var(--c-ink) !important; }

/* Service icons in cards — add an ink circle background */
.light-mode .b-icon,
.light-mode .p-icon,
.light-mode .ic-logo,
.light-mode .r-icon,
.light-mode .op-icon {
  font-size: 1.6rem !important;
  margin-bottom: .9rem;
  display: block;
  width: 48px; height: 48px;
  background: var(--c-mustard-tint);
  border: 1.5px solid var(--c-ink);
  border-radius: 12px;
  line-height: 44px;
  text-align: center;
  box-shadow: 2px 2px 0 var(--c-ink);
}

/* Section subheading/eyebrow labels */
.light-mode [class*="-eyebrow"],
.light-mode .tech-strip-label {
  color: var(--c-sage) !important;
  font-family: "JetBrains Mono", monospace;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
}

/* Page-level hero enhancements */
.light-mode .about-hero,
.light-mode .int-hero,
.light-mode .contact-hero {
  position: relative;
  padding-top: 5rem !important;
}
.light-mode .about-hero h1,
.light-mode .int-hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em;
  line-height: .95;
}
.light-mode .about-hero .lead,
.light-mode .int-hero p {
  color: var(--c-ink-2) !important;
  font-size: 1.15rem;
  line-height: 1.65;
}

/* Timeline decorations (about page) */
.light-mode .timeline::before { background: linear-gradient(180deg, var(--c-sage), var(--c-terra)) !important; opacity: .3 !important; }
.light-mode .tl-content {
  background: var(--c-paper) !important;
  border: 2px solid var(--c-ink) !important;
  box-shadow: 4px 4px 0 var(--c-ink) !important;
}
.light-mode .tl-dot {
  background: var(--c-paper) !important;
  border: 2px solid var(--c-sage) !important;
  color: var(--c-sage) !important;
  box-shadow: 2px 2px 0 var(--c-ink) !important;
}

/* story-next — page nav footers */
.light-mode .story-next {
  background: var(--c-paper);
  border: 2px solid var(--c-ink);
  border-radius: 16px;
  padding: 1.2rem 1.8rem;
  max-width: 520px;
  margin: 3rem auto;
  box-shadow: 4px 4px 0 var(--c-sage);
  transition: all .25s cubic-bezier(.3,1.4,.5,1);
}
.light-mode .story-next:hover {
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 var(--c-sage);
}

/* ═══════════════════════════════════════════════════════════
   DARK CARD TEXT-COLOR SAFETY NET
   Anything inside a dark-bg card MUST be light. Flips all the
   inherited dark (ink/navy/slate) text colors to cream — while
   leaving intentional bright accents (teal/purple/cyan/amber) alone.
   ═══════════════════════════════════════════════════════════ */
.c-stack-card,
.c-stack-card *,
.c-t-pro,
.c-t-pro *,
.c-tile-dark,
.c-tile.c-tile-dark,
.c-tile-dark *,
.c-band.b-dark,
.c-band.b-dark *,
.c-closing,
.c-closing *,
.c-visual,
.c-visual *,
.c-dash,
.c-dash *,
.dark-card,
.dark-card *,
[data-dark="true"],
[data-dark="true"] * {
  /* default: everything inherits a cream text color */
}
.c-stack-card,
.c-t-pro,
.c-tile-dark,
.c-tile.c-tile-dark,
.c-band.b-dark,
.c-closing,
.c-visual,
.c-dash,
.dark-card,
[data-dark="true"] {
  color: var(--c-dark-text, #E8F0F9) !important;
}
/* Force every heading, paragraph, and span-like text inside dark cards to cream —
   but allow deliberate accent classes to keep their color */
.c-stack-card :is(h1,h2,h3,h4,h5,h6,p,li,strong,em,a,label,td,th,dt,dd,blockquote):not([class*="-accent"]):not([data-keep]),
.c-t-pro    :is(h1,h2,h3,h4,h5,h6,p,li,strong,em,a,label,td,th,dt,dd,blockquote):not([class*="-accent"]):not([data-keep]),
.c-tile-dark :is(h1,h2,h3,h4,h5,h6,p,li,strong,em,a,label,td,th,dt,dd,blockquote):not([class*="-accent"]):not([data-keep]),
.c-band.b-dark :is(h1,h2,h3,h4,h5,h6,p,li,strong,em,a,label,td,th,dt,dd,blockquote):not([class*="-accent"]):not([data-keep]),
.c-closing :is(h1,h2,h3,h4,h5,h6,p,li,strong,em,a,label,td,th,dt,dd,blockquote):not([class*="-accent"]):not([data-keep]),
.c-visual  :is(h1,h2,h3,h4,h5,h6,p,li,strong,em,a,label,td,th,dt,dd,blockquote):not([class*="-accent"]):not([data-keep]),
.c-dash    :is(h1,h2,h3,h4,h5,h6,p,li,strong,em,a,label,td,th,dt,dd,blockquote):not([class*="-accent"]):not([data-keep]),
.dark-card :is(h1,h2,h3,h4,h5,h6,p,li,strong,em,a,label,td,th,dt,dd,blockquote):not([class*="-accent"]):not([data-keep]),
[data-dark="true"] :is(h1,h2,h3,h4,h5,h6,p,li,strong,em,a,label,td,th,dt,dd,blockquote):not([class*="-accent"]):not([data-keep]) {
  color: var(--c-dark-text, #E8F0F9) !important;
}
/* Generic divs and spans inside dark cards — only override the ones actually styled
   with an ink/navy/slate tone. Accent spans (teal/cyan/purple dots, pills, stat values)
   use their own classes with specific colors — leave them alone. Also exclude decorative
   watermarks (.c-wm) and floating deco SVGs. */
.c-stack-card :is(div,span):not([class*="-accent"]):not([data-keep]):not(.cs-live):not(.cs-flow-n):not(.cs-flow-a):not([class*="stat-v"]):not([class*="hc-amt"]):not([class*="hc-dot"]):not(.cs-mem-d):not(.cs-mem-g):not([class*="pill"]):not(.cs-bar):not(.cs-bar *):not([class*="route-pill"]):not([class*="agent-st"]):not([class*="wm-"]):not(.c-wm):not(.c-deco):not(.c-deco *),
.c-t-pro :is(div,span):not([class*="-accent"]):not([data-keep]):not([class*="pill"]):not([class*="wm-"]):not(.c-wm):not(.c-deco):not(.c-deco *),
.c-tile-dark :is(div,span):not([class*="-accent"]):not([data-keep]):not([class*="pill"]):not([class*="wm-"]):not(.c-wm):not(.c-deco):not(.c-deco *),
.c-band.b-dark > *:is(h1,h2,p,span,div):not([class*="-accent"]):not([data-keep]):not(.c-visual):not(.c-visual *):not([class*="wm-"]):not(.c-wm):not(.c-deco):not(.c-deco *),
.c-closing :is(div,span):not([class*="-accent"]):not([data-keep]):not([class*="pill"]):not([class*="eyebrow"]):not([class*="wm-"]):not(.c-wm):not(.c-deco):not(.c-deco *),
.c-dash :is(div,span):not([class*="-accent"]):not([data-keep]):not([class*="pill"]):not([class*="status"]):not([class*="badge"]):not([class*="wm-"]):not(.c-wm):not(.c-deco):not(.c-deco *),
.dark-card :is(div,span):not([class*="-accent"]):not([data-keep]):not([class*="pill"]):not([class*="wm-"]):not(.c-wm):not(.c-deco):not(.c-deco *) {
  color: var(--c-dark-text, #E8F0F9) !important;
}
/* Links inside dark cards — keep them readable, but let ones with explicit accent classes win */
.c-stack-card a:not([class*="-accent"]):not([data-keep]):hover,
.c-t-pro a:not([class*="-accent"]):not([data-keep]):hover,
.c-tile-dark a:not([class*="-accent"]):not([data-keep]):hover,
.c-band.b-dark a:not([class*="-accent"]):not([data-keep]):hover,
.c-closing a:not([class*="-accent"]):not([data-keep]):hover,
.dark-card a:not([class*="-accent"]):not([data-keep]):hover {
  color: #fff !important;
}