/* ==========================================================================
   Syentrix Platform Design System — LIGHT
   --------------------------------------------------------------------------
   Structural language borrowed from Optimizely's platform site (oversized
   tight display type, floating pill nav, large rounded cards, mono eyebrows,
   full-bleed panel breaks, a single accent CTA block, generous vertical
   rhythm) on a light bone canvas in Syentrix's violet / bone / ink palette.

   Surface logic, and why the accent splits by role:
     Optimizely's lime is a LIGHT colour, so it cannot be text on a light
     canvas — #B6F24A on bone is 1.23:1, effectively invisible.
       fill  (button, CTA block)  -> lime #B6F24A + near-black label, 14.88:1
       text on the bone canvas    -> deep green #3F6212, 6.54:1
       text on a dark break panel -> lime #B6F24A, 13.96:1
   Every rule picks its accent from the surface it sits on, never globally.

   Loaded LAST on every page. It overrides styles.css, homepage.css,
   industry.css, about.css, compliance.css and the Tailwind utilities used in
   the shared header and footer, so no page markup has to be rewritten.
   ========================================================================== */

:root {
  /* Surfaces */
  --p-canvas:      #F7F6F2;   /* bone: the dominant surface */
  --p-raised:      #FFFFFF;   /* cards on canvas */
  --p-canvas-2:    #EEECE4;   /* subtle inset */
  --p-dark:        #14121A;   /* the break panel, footer, system bar */
  --p-dark-2:      #1C1926;   /* raised surface on dark */

  /* Accent — Optimizely-style lime, split by role because lime is a LIGHT
     colour: it is unreadable as text on bone (1.23:1) and brilliant as a
     fill with a near-black label (14.88:1), which is how Optimizely uses it. */
  --p-accent:        #B6F24A;   /* fills: buttons, CTA block, accent on dark */
  --p-accent-hover:  #A5E332;
  --p-accent-text:   #3F6212;   /* accent TEXT on light (6.54:1 on bone) */
  --p-accent-ondark: #B6F24A;   /* accent TEXT on dark  (13.96:1 on panel) */
  --p-accent-ink:    #0A0A0B;   /* label on a lime fill */
  --p-accent-haze:   rgba(63, 98, 18, 0.09);
  --p-accent-haze-d: rgba(182, 242, 74, 0.16);

  /* Text */
  --p-on-light:     #14121A;  /* 17.2:1 on bone */
  --p-on-light-dim: #57536B;  /* 6.8:1  on bone */
  --p-on-dark:      #EDEBF2;  /* 15.7:1 on dark panel */
  --p-on-dark-dim:  #A8A3B8;  /* 7.6:1  on dark panel */

  /* Form */
  --p-r-card:  28px;
  --p-r-panel: 36px;
  --p-r-pill:  999px;
  --p-gap:     clamp(72px, 9vw, 140px);
  --p-shell:   1320px;
  --p-lift:    0 1px 2px rgba(20,18,26,0.04), 0 8px 24px rgba(20,18,26,0.06);
  --p-lift-hi: 0 2px 4px rgba(20,18,26,0.05), 0 14px 38px rgba(90,130,30,0.16);
}

/* --------------------------------------------------------------------------
   1. Canvas
   -------------------------------------------------------------------------- */
html { background: var(--p-canvas); }

body,
body.bg-bone {
  background: var(--p-canvas) !important;
  color: var(--p-on-light) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Decorative blobs from the original theme read as smudges under the flat
   platform surfaces. */
.blob, .floating-shapes, .float-shape { display: none !important; }

/* --------------------------------------------------------------------------
   2. Display typography
   -------------------------------------------------------------------------- */
/* Optimizely sets display type in VC Henrietta Condensed and body in Die
   Grotesk B. Both are licensed commercial faces and cannot be reused, so the
   character is matched with Archivo — a variable grotesque with a real width
   axis, so the headline can actually be condensed rather than faked. */
h1, h2, h3, h4,
.hero h1, .hero h2,
.section-header h2 {
  font-family: 'Archivo', 'Inter', -apple-system, sans-serif !important;
  font-variation-settings: 'wdth' 84 !important;
  font-stretch: 84% !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance;
}

.hero h1, h1 {
  font-size: clamp(3rem, 7vw, 6rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.025em !important;
  color: var(--p-on-light) !important;
  margin-bottom: 28px;
}

.section-header h2, h2 {
  font-size: clamp(2.4rem, 4.8vw, 4rem) !important;
  line-height: 0.98 !important;
  color: inherit;
  margin-bottom: 20px;
}

h3 { font-size: 1.2rem !important; line-height: 1.25 !important; letter-spacing: -0.012em !important;
     font-variation-settings: 'wdth' 92 !important; font-stretch: 92% !important; }

/* Accent half of a two-line hero headline */
.gradient-text {
  background: none !important;
  -webkit-text-fill-color: var(--p-accent-text) !important;
  color: var(--p-accent-text) !important;
}

/* Mono uppercase eyebrow */
.overline, .hero-badge, .sys-bar, .breadcrumb, .card-metric {
  font-family: 'Roboto Mono', ui-monospace, monospace !important;
}

.overline {
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--p-accent-text) !important;
  margin-bottom: 18px;
}

.hero-subtitle, .section-header p {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem) !important;
  line-height: 1.55 !important;
  color: var(--p-on-light-dim) !important;
  max-width: 62ch;
  letter-spacing: -0.01em;
}
.section-header p { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   3. System bar + floating pill navigation
   The thin bar and the footer stay dark: they bookend the light page.
   -------------------------------------------------------------------------- */
/* No black strip: Optimizely has no utility bar — the nav floats straight on
   the page. Blend it into the canvas so the contact line survives as quiet
   text instead of a hard black band. */
#sys-bar-top {
  background: var(--p-canvas) !important;
  border-bottom: none !important;
  color: var(--p-on-light-dim) !important;
}
#sys-bar-top .sys-bar { font-size: 0.68rem; letter-spacing: 0.14em; }
#sys-bar-top a, #sys-bar-top span { color: var(--p-on-light-dim) !important; }
#sys-bar-top a:hover { color: var(--p-accent-text) !important; }

#main-nav {
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 14px 0;
  z-index: 60;
}

/* The pill. Solid, not translucent: the nav is sticky and travels over both
   the bone canvas and the dark break panels. */
#main-nav > div {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(20, 18, 26, 0.09);
  border-radius: var(--p-r-pill);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--p-lift);
  padding: 10px 12px 10px 24px !important;
  max-width: var(--p-shell);
}

#main-nav a { color: var(--p-on-light) !important; }
#main-nav a:hover { color: var(--p-accent-text) !important; }

/* Dropdown panels */
#main-nav .absolute > div,
#main-nav [class*="shadow"] {
  background: var(--p-raised) !important;
  border: 1px solid rgba(20,18,26,0.10) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 60px rgba(20,18,26,0.14) !important;
}
#main-nav .absolute a { color: var(--p-on-light-dim) !important; }
#main-nav .absolute a:hover { color: var(--p-accent-text) !important; }
#main-nav .absolute .text-violet-500,
#main-nav .absolute .text-violet-600 { color: var(--p-accent-text) !important; }

/* --------------------------------------------------------------------------
   4. Buttons — full pills
   -------------------------------------------------------------------------- */
.btn, .btn-primary, .btn-secondary, .btn-ghost, .nav-cta {
  border-radius: var(--p-r-pill) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  border: 1px solid transparent;
}

.btn-primary, a.btn-primary {
  background: var(--p-accent) !important;
  color: var(--p-accent-ink) !important;
  box-shadow: none !important;
}
.btn-primary:hover, a.btn-primary:hover {
  background: var(--p-accent-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(120,170,30,0.34) !important;
}

.btn-secondary, a.btn-secondary,
.btn-ghost, a.btn-ghost {
  background: transparent !important;
  color: var(--p-on-light) !important;
  border: 1px solid rgba(20,18,26,0.22) !important;
}
.btn-secondary:hover, .btn-ghost:hover {
  background: rgba(20,18,26,0.04) !important;
  border-color: rgba(20,18,26,0.42) !important;
  transform: translateY(-2px);
}

.hero .btn, .hero-ctas .btn { padding: 17px 34px !important; font-size: 1rem !important; }

/* --------------------------------------------------------------------------
   5. Section rhythm
   Canvas is bone. .section-gray / .section-dark become the dark break panels
   that punctuate the scroll — the inverse of the dark build.
   -------------------------------------------------------------------------- */
.hero,
.section-white,
.cta-section,
section {
  background: var(--p-canvas) !important;
  color: var(--p-on-light) !important;
  padding-top: var(--p-gap);
  padding-bottom: var(--p-gap);
}

.hero {
  padding-top: clamp(36px, 4.5vw, 78px);
  padding-bottom: clamp(70px, 9vw, 140px);
  min-height: 0 !important;
  text-align: left;
}
.hero .container, .hero-content { max-width: var(--p-shell); margin: 0 auto; text-align: left; }
.hero-content { max-width: 1180px; }
.hero-ctas { justify-content: flex-start !important; gap: 14px; }

.container { max-width: var(--p-shell) !important; padding-left: 28px; padding-right: 28px; }

.section-header { max-width: 820px; margin-bottom: clamp(44px, 5vw, 72px); }
.section-header, .section-header h2, .section-header p { text-align: left !important; }
.section-header p { margin-left: 0 !important; }

/* The dark break panel */
.section-gray,
.section-dark {
  background: var(--p-dark) !important;
  color: var(--p-on-dark) !important;
  border-radius: var(--p-r-panel);
  margin: 0 20px;
  padding-left: 8px; padding-right: 8px;
  padding-bottom: clamp(56px, 6vw, 96px);
}
.section-gray h2, .section-gray h3,
.section-dark h2, .section-dark h3 { color: var(--p-on-dark) !important; }
.section-gray p, .section-gray .section-header p,
.section-dark p, .section-dark .section-header p { color: var(--p-on-dark-dim) !important; }
.section-gray .overline, .section-dark .overline { color: var(--p-accent-ondark) !important; }
.section-gray .gradient-text, .section-dark .gradient-text {
  color: var(--p-accent-ondark) !important; -webkit-text-fill-color: var(--p-accent-ondark) !important;
}
.section-gray > .container, .section-dark > .container { padding-left: 28px; padding-right: 28px; }

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.card, .solution-card, .problem-card,
.auto-item, .industry-item, .step, .stat-item {
  background: var(--p-raised) !important;
  border: 1px solid rgba(20,18,26,0.08) !important;
  border-radius: var(--p-r-card) !important;
  box-shadow: var(--p-lift) !important;
  padding: 34px !important;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.card:hover, .solution-card:hover, .problem-card:hover,
.auto-item:hover, .industry-item:hover {
  border-color: rgba(93,140,26,0.50) !important;
  box-shadow: var(--p-lift-hi) !important;
  transform: translateY(-4px);
}

.card h3, .solution-card h3, .problem-card h3 { color: var(--p-on-light) !important; margin-bottom: 12px; }
.card p,  .solution-card p,  .problem-card p  { color: var(--p-on-light-dim) !important; font-size: 0.96rem; line-height: 1.65; }

/* Cards inside a dark break panel invert */
.section-gray .card, .section-dark .card,
.section-gray .solution-card, .section-dark .solution-card,
.section-gray .problem-card, .section-dark .problem-card,
.section-gray .auto-item, .section-dark .auto-item,
.section-gray .industry-item, .section-dark .industry-item,
.section-gray .step, .section-dark .step,
.section-gray .stat-item, .section-dark .stat-item {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  box-shadow: none !important;
}
.section-gray .card:hover, .section-dark .card:hover,
.section-gray .solution-card:hover, .section-dark .solution-card:hover,
.section-gray .industry-item:hover, .section-dark .industry-item:hover,
.section-gray .auto-item:hover, .section-dark .auto-item:hover {
  background: rgba(255,255,255,0.085) !important;
  border-color: rgba(182,242,74,0.48) !important;
  box-shadow: none !important;
}
.section-gray .card h3, .section-dark .card h3,
.section-gray .solution-card h3, .section-dark .solution-card h3,
.section-gray .problem-card h3, .section-dark .problem-card h3 { color: var(--p-on-dark) !important; }
.section-gray .card p, .section-dark .card p,
.section-gray .solution-card p, .section-dark .solution-card p,
.section-gray .problem-card p, .section-dark .problem-card p { color: var(--p-on-dark-dim) !important; }

.card-icon {
  width: 48px !important; height: 48px !important;
  border-radius: 14px !important;
  background: var(--p-accent-haze) !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; margin-bottom: 20px;
}
.section-gray .card-icon, .section-dark .card-icon { background: var(--p-accent-haze-d) !important; }

.card-metric {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(20,18,26,0.09);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--p-accent-text) !important;
}
.card-metric a { color: inherit !important; text-decoration: none; }
.section-gray .card-metric, .section-dark .card-metric {
  border-top-color: rgba(255,255,255,0.12); color: var(--p-accent-ondark) !important;
}

.grid-2, .grid-3, .grid-4 { gap: 20px !important; }

/* --------------------------------------------------------------------------
   7. Stats
   -------------------------------------------------------------------------- */
.stat-number {
  font-size: clamp(2.75rem, 5vw, 4.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: var(--p-accent-text) !important;
  line-height: 1;
}
.stat-label { color: var(--p-on-light-dim) !important; font-size: 0.85rem; letter-spacing: 0.04em; }
.section-gray .stat-number, .section-dark .stat-number { color: var(--p-accent-ondark) !important; }
.section-gray .stat-label,  .section-dark .stat-label  { color: var(--p-on-dark-dim) !important; }

/* --------------------------------------------------------------------------
   8. FAQ accordion
   -------------------------------------------------------------------------- */
.faq-item {
  background: var(--p-raised) !important;
  border: 1px solid rgba(20,18,26,0.09) !important;
  border-radius: 20px !important;
  margin-bottom: 12px;
  box-shadow: var(--p-lift) !important;
}
.faq-item.open { border-color: rgba(93,140,26,0.55) !important; box-shadow: var(--p-lift) !important; }
.faq-question { color: var(--p-on-light) !important; font-size: 1.02rem !important; padding: 24px 28px !important; }
.faq-question:hover, .faq-item.open .faq-question { color: var(--p-accent-text) !important; }
.faq-answer { padding: 0 28px !important; }
.faq-item.open .faq-answer { padding: 0 28px 24px !important; max-height: 480px !important; }
.faq-answer p { color: var(--p-on-light-dim) !important; }
.faq-arrow { background: rgba(20,18,26,0.06) !important; color: var(--p-on-light) !important; }
.faq-item.open .faq-arrow { background: var(--p-accent-haze) !important; color: var(--p-accent-text) !important; }

/* FAQ inside a dark panel */
.section-gray .faq-item, .section-dark .faq-item {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.11) !important; box-shadow: none !important;
}
.section-gray .faq-question, .section-dark .faq-question { color: var(--p-on-dark) !important; }
.section-gray .faq-answer p, .section-dark .faq-answer p { color: var(--p-on-dark-dim) !important; }
.section-gray .faq-arrow, .section-dark .faq-arrow { background: rgba(255,255,255,0.09) !important; color: var(--p-on-dark) !important; }

/* --------------------------------------------------------------------------
   9. Closing CTA — the one solid violet block
   -------------------------------------------------------------------------- */
.cta-section {
  background: var(--p-accent) !important;
  border-radius: var(--p-r-panel);
  margin: 0 20px var(--p-gap);
  color: var(--p-accent-ink) !important;
  text-align: left;
}
.cta-section h2 { color: var(--p-accent-ink) !important; }
.cta-section p  { color: rgba(10,10,11,0.78) !important; max-width: 60ch; }
.cta-section .overline { color: rgba(10,10,11,0.62) !important; }
.cta-section .btn-primary { background: var(--p-dark) !important; color: #fff !important; }
.cta-section .btn-primary:hover { background: #000 !important; box-shadow: none !important; }
.cta-section .btn-secondary { border-color: rgba(10,10,11,0.42) !important; color: var(--p-accent-ink) !important; }
.cta-section .btn-secondary:hover { background: rgba(10,10,11,0.09) !important; }
.cta-section .hero-ctas { justify-content: flex-start !important; }

/* --------------------------------------------------------------------------
   10. Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb, nav[role="navigation"].flex {
  color: var(--p-on-light-dim) !important;
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
}
nav[role="navigation"].flex a { color: var(--p-on-light-dim) !important; }
nav[role="navigation"].flex a:hover { color: var(--p-accent-text) !important; }

/* --------------------------------------------------------------------------
   11. Footer — dark, bookending the system bar
   -------------------------------------------------------------------------- */
#site-footer > footer, #site-footer footer,
footer.bg-ink, footer {
  background: var(--p-dark) !important;
  color: var(--p-on-dark) !important;
  border-top: none;
}
footer a { color: var(--p-on-dark-dim) !important; }
footer a:hover { color: var(--p-accent-ondark) !important; }
footer h3, footer h4, footer .font-semibold { color: var(--p-on-dark) !important; }
footer p, footer li, footer span, footer div { color: inherit; }

/* --------------------------------------------------------------------------
   12. Tailwind chrome overrides used by the header/footer markup
   -------------------------------------------------------------------------- */
.bg-bone  { background-color: var(--p-canvas) !important; }
.bg-ink   { background-color: var(--p-dark) !important; }
.text-ink { color: var(--p-on-light) !important; }
.text-bone{ color: var(--p-on-dark) !important; }
.text-ink\/80, .text-ink\/70, .text-ink\/65, .text-ink\/60, .text-ink\/50 { color: var(--p-on-light-dim) !important; }
.text-bone\/90, .text-bone\/80, .text-bone\/70, .text-bone\/60, .text-bone\/50 { color: var(--p-on-dark-dim) !important; }
.border-ink\/10 { border-color: rgba(20,18,26,0.10) !important; }
.border-white\/10 { border-color: rgba(255,255,255,0.10) !important; }
.text-violet-600, .text-violet-500, .text-violet-700 { color: var(--p-accent-text) !important; }
.hover\:text-violet-600:hover, .hover\:text-violet-700:hover { color: var(--p-accent-text) !important; }
.text-acid { color: var(--p-accent-text) !important; }
.hover\:text-acid:hover { color: var(--p-accent-ondark) !important; }
/* .text-acid appears inside dark blocks too */
footer .text-acid, .section-gray .text-acid, .section-dark .text-acid,
.glass-dark .text-acid { color: var(--p-accent-ondark) !important; }
.glass-dark { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.11) !important; }

/* Mobile menu drawer */
#mobile-menu > div { background: var(--p-raised) !important; color: var(--p-on-light) !important; }
#mobile-menu a, #mobile-menu button { color: var(--p-on-light) !important; }
#mobile-menu .mobile-nav-label { color: var(--p-accent-text) !important; }

/* --------------------------------------------------------------------------
   13. Reveal animation
   -------------------------------------------------------------------------- */
.card, .stat-item, .compliance-card, .compare-col, .faq-item, .reveal { transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) {
  .card, .stat-item, .compliance-card, .compare-col, .faq-item, .reveal {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   14. Fit & finish
   -------------------------------------------------------------------------- */
/* Breadcrumb wrapper carries Tailwind pt-28 sized for a fixed nav; nav is in
   flow here, so reclaim it. */
.max-w-7xl.pt-28, div.pt-28 { padding-top: 34px !important; padding-bottom: 0 !important; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--p-accent-haze) !important;
  border: 1px solid rgba(63,98,18,0.30);
  color: var(--p-accent-text) !important;
  padding: 9px 20px !important;
  border-radius: var(--p-r-pill) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  margin-bottom: 30px !important;
}

/* --------------------------------------------------------------------------
   15. Pages with their own chrome (terms, privacy, legacy templates)
   These carry an inline <style> block; platform.css loads after it, so
   equal-specificity rules win on source order.
   -------------------------------------------------------------------------- */
.nav-bar {
  background: rgba(255,255,255,0.94) !important;
  border-bottom: 1px solid rgba(20,18,26,0.09) !important;
  backdrop-filter: blur(18px);
}
.nav-bar .logo-name { color: var(--p-on-light) !important; }
.nav-bar .nav-links a { color: var(--p-on-light-dim) !important; }
.nav-bar .nav-links a:hover { color: var(--p-accent-text) !important; }

.nav {
  background: rgba(255,255,255,0.94) !important;
  border-bottom: 1px solid rgba(20,18,26,0.09) !important;
}
.nav-links a { color: var(--p-on-light-dim) !important; }
.nav-links a:hover, .nav-links a.active { color: var(--p-accent-text) !important; }

/* --------------------------------------------------------------------------
   16. Respect explicit alignment in markup
   -------------------------------------------------------------------------- */
.text-center,
.text-center h1, .text-center h2, .text-center h3, .text-center p,
.section-header.text-center, .section-header.text-center h2, .section-header.text-center p {
  text-align: center !important;
}
.text-center .hero-subtitle, .text-center p.mx-auto,
.text-center .max-w-2xl, .text-center .max-w-3xl { margin-left: auto !important; margin-right: auto !important; }

.pill {
  border-radius: var(--p-r-pill) !important;
  font-family: 'Roboto Mono', ui-monospace, monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  padding: 8px 18px !important;
  display: inline-block;
}
.pill-violet {
  background: var(--p-accent-haze) !important;
  border: 1px solid rgba(63,98,18,0.30) !important;
  color: var(--p-accent-text) !important;
}

/* Display headings adopt the platform voice; the wordmark keeps its serif */
h1.font-display, h2.font-display, h3.font-display, .font-display h1, .font-display h2 {
  font-family: 'Archivo', 'Inter', -apple-system, sans-serif !important;
  font-variation-settings: 'wdth' 84 !important;
  font-stretch: 84% !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
#main-nav .font-display, footer .font-display, a .font-display {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* Long-form body copy */
.prose p, .prose li, article p, article li { color: var(--p-on-light-dim) !important; }
.prose h2, .prose h3, article h2, article h3 { color: var(--p-on-light) !important; }
.prose a, article a { color: var(--p-accent-text) !important; }

/* --------------------------------------------------------------------------
   17. Entry-product band (homepage)
   -------------------------------------------------------------------------- */
.entry-card {
  margin-top: 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 28px;
  padding: 38px 40px;
  border-radius: var(--p-r-card);
  background: linear-gradient(120deg, rgba(122,170,40,0.13), rgba(122,170,40,0.04));
  border: 1px solid rgba(63,98,18,0.28);
}
.entry-card-body { flex: 1 1 460px; }
.entry-card .overline { margin-bottom: 12px; }
.entry-card h3 { font-size: 1.6rem !important; color: var(--p-on-light) !important; margin-bottom: 12px; }
.entry-card p  { color: var(--p-on-light-dim) !important; font-size: 1rem; line-height: 1.65; max-width: 62ch; margin: 0; }
.entry-card-cta { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }
.entry-card-cta .btn { padding: 15px 28px !important; }

.section-gray .entry-card, .section-dark .entry-card {
  background: linear-gradient(120deg, rgba(182,242,74,0.20), rgba(182,242,74,0.06));
  border-color: rgba(182,242,74,0.34);
}
.section-gray .entry-card h3, .section-dark .entry-card h3 { color: var(--p-on-dark) !important; }
.section-gray .entry-card p,  .section-dark .entry-card p  { color: var(--p-on-dark-dim) !important; }
.section-gray .entry-card .btn-secondary, .section-dark .entry-card .btn-secondary {
  color: var(--p-on-dark) !important; border-color: rgba(255,255,255,0.26) !important;
}

/* --------------------------------------------------------------------------
   18. Homepage word-rotator
   Words were centred in a box as wide as the longest option, which reads as
   a stray indent in a left-aligned hero.
   -------------------------------------------------------------------------- */
.word-rotator-inner span {
  justify-content: flex-start !important;
  background: none !important;
  -webkit-text-fill-color: var(--p-accent-text) !important;
  color: var(--p-accent-text) !important;
}
.hero-subtitle { margin-left: 0 !important; margin-right: 0 !important; }

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .section-gray, .section-dark, .cta-section { margin-left: 12px; margin-right: 12px; border-radius: 26px; }
  .container { padding-left: 20px; padding-right: 20px; }
  .card, .solution-card, .problem-card { padding: 26px !important; }
  #main-nav > div { padding: 10px 10px 10px 18px !important; border-radius: 26px; }
}
@media (max-width: 760px) {
  .entry-card { padding: 28px 24px; }
  .entry-card-cta { width: 100%; }
  .entry-card-cta .btn { flex: 1 1 auto; text-align: center; }
}


/* --------------------------------------------------------------------------
   20. Text inside dark break panels
   .auto-item, .industry-item and .step render their labels as plain divs
   coloured #343A40 by homepage.css / industry.css. On the dark panel that
   measures 1.43:1 — unreadable. Section 6 only covered h3/p, so cover the
   rest of the subtree here.
   -------------------------------------------------------------------------- */
.section-gray .auto-item, .section-dark .auto-item,
.section-gray .industry-item, .section-dark .industry-item,
.section-gray .step, .section-dark .step,
.section-gray .auto-item *, .section-dark .auto-item *,
.section-gray .industry-item *, .section-dark .industry-item *,
.section-gray .step *, .section-dark .step * {
  color: var(--p-on-dark) !important;   /* 13.95:1 */
}
.section-gray .auto-item p, .section-dark .auto-item p,
.section-gray .industry-item p, .section-dark .industry-item p,
.section-gray .step p, .section-dark .step p,
.section-gray .step-content p, .section-dark .step-content p {
  color: var(--p-on-dark-dim) !important;  /* 6.75:1 */
}
.section-gray .step-number, .section-dark .step-number {
  color: var(--p-accent-ondark) !important;
  border-color: rgba(182,242,74,0.45) !important;
}
/* and any generic copy that sits directly on a dark panel */
.section-gray li, .section-dark li,
.section-gray td, .section-dark td,
.section-gray .text-ink, .section-dark .text-ink { color: var(--p-on-dark-dim) !important; }

/* --------------------------------------------------------------------------
   21. Legacy --gray-400 text on the light canvas
   homepage.css uses #ADB5BD for these, which was sized for the old dark
   sections. On bone it lands at ~2:1. Re-point them at the light-surface
   text tokens (and the accent for the step numbers).
   -------------------------------------------------------------------------- */
.marquee-label,
.price-sub,
.price-note,
.pricing-card .price-sub {
  color: var(--p-on-light-dim) !important;   /* 6.8:1 on bone */
}

.step-number {
  color: var(--p-accent-text) !important;    /* 6.54:1 on bone */
  border-color: rgba(63,98,18,0.35) !important;
}

/* …and their counterparts when the block sits on a dark panel */
.section-gray .marquee-label, .section-dark .marquee-label,
.section-gray .price-sub, .section-dark .price-sub,
.section-gray .price-note, .section-dark .price-note {
  color: var(--p-on-dark-dim) !important;    /* 6.75:1 on panel */
}

/* --------------------------------------------------------------------------
   22. Legacy greyscale tokens
   --gray-600 (#6C757D) is the old theme's body-text grey and is used inline
   in several places. On bone it measures 4.34:1 — just under AA. Redefining
   the variable fixes every consumer at once rather than chasing selectors.
   -------------------------------------------------------------------------- */
:root {
  --gray-600: #57536B;   /* was #6C757D (4.34:1) -> 6.80:1 on bone */
  --gray-400: #6E6A80;   /* was #ADB5BD (1.92:1) -> 5.20:1 on bone */
}

/* --------------------------------------------------------------------------
   23. .bg-ink blocks
   Several pages build a dark card with the Tailwind .bg-ink utility rather
   than .section-dark, so the dark-surface accent rules in section 12 missed
   them and the deep-green accent landed at 2.62:1.
   -------------------------------------------------------------------------- */
.bg-ink .text-acid,
.bg-ink .overline,
.bg-ink .stat-number { color: var(--p-accent-ondark) !important; }

.bg-ink, .bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4 { color: var(--p-on-dark) !important; }
.bg-ink p, .bg-ink li, .bg-ink .text-ink, .bg-ink .stat-label { color: var(--p-on-dark-dim) !important; }
.bg-ink a:not(.btn):not(.btn-primary):not(.btn-secondary) { color: var(--p-accent-ondark) !important; }
.bg-ink .btn-secondary { color: var(--p-on-dark) !important; border-color: rgba(255,255,255,0.26) !important; }

/* --------------------------------------------------------------------------
   24. Before / after comparison lists
   industry.css distinguishes these with .compare-col.before / .after, and
   tints both the icon and the list text. The stock red (#DC2626) and green
   (#059669) each pass on one surface and fail on the other, and the list
   text is additionally set at 75-85% alpha.
   -------------------------------------------------------------------------- */
.compare-col.before .compare-icon { color: #B91C1C !important; background: rgba(185,28,28,0.10) !important; }
.compare-col.after  .compare-icon { color: #047857 !important; background: rgba(4,120,87,0.10) !important; }
.compare-col.before li { color: var(--p-on-light-dim) !important; }
.compare-col.after  li { color: var(--p-on-light-dim) !important; }
.p-icon { color: #B91C1C !important; }

/* on a dark break panel the same icons need the light-side variants */
.section-gray .compare-col.before .compare-icon,
.section-dark .compare-col.before .compare-icon,
.bg-ink .compare-col.before .compare-icon {
  color: #F87171 !important; background: rgba(248,113,113,0.14) !important;   /* 6.71:1 */
}
.section-gray .compare-col.after .compare-icon,
.section-dark .compare-col.after .compare-icon,
.bg-ink .compare-col.after .compare-icon {
  color: #34D399 !important; background: rgba(52,211,153,0.14) !important;    /* 9.66:1 */
}
.section-gray .compare-col li, .section-dark .compare-col li, .bg-ink .compare-col li,
.section-gray .p-icon, .section-dark .p-icon { color: var(--p-on-dark-dim) !important; }
.section-gray .p-icon, .section-dark .p-icon, .bg-ink .p-icon { color: #F87171 !important; }

/* --------------------------------------------------------------------------
   25. Mono fallback
   The older stylesheets still name JetBrains Mono, which is no longer loaded.
   Rather than edit six files, alias any remaining monospace usage onto the
   Roboto Mono that Optimizely itself uses.
   -------------------------------------------------------------------------- */
.font-mono, code, kbd, pre, samp,
[class*="mono"], [style*="JetBrains"] {
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, monospace !important;
}