/* ============================================================================
   entomo — visual system 2026  ·  "Warm Precision"
   ----------------------------------------------------------------------------
   A presentation-layer redesign. Zero content changes.

   Brand law (unchanged, from entomo-styling-guide.md):
     Nunito Sans is the sole typeface · CG Red #e43d30 · CG Gold #f4b223
     Sunrise Yellow #ffda00 · Spanish Blue #0064bf · Sea Green #2c9942
     Ebony Clay #1a1f26 · radius 5/10/15/25 · lowercase nav + buttons
     gold→red gradient is the primary CTA · yellow <mark> highlight

   What this file changes: the craft layer only — type scale, spacing rhythm,
   depth, states, motion, and the browser surfaces the old sheet never themed.

   Loaded AFTER each page's inline <style>, so equal-specificity rules win.
   Deliberately NOT wrapped in @layer (unlayered CSS would outrank it).
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Ink scale — replaces ad-hoc rgba(26,31,38,.45/.55/.72).
     Every step below passes WCAG AA on white and on the brand tints. */
  --ink:        #1a1f26;   /* 16.6:1 on white */
  --ink-2:      #3d444d;   /*  9.9:1 */
  --ink-3:      #5a626c;   /*  6.2:1 */
  --ink-4:      #6b737e;   /*  4.8:1 — the floor for normal text.
                               Was #6f7782, measured 4.53:1: it passed, but a
                               0.03 margin is not a floor. */

  /* CG Red is 4.19:1 on white — fine as a fill, short of AA as text.
     Text uses this darkened sibling; fills keep the brand value. */
  --ink-line:      rgba(26, 31, 38, 0.11);
  --ink-line-soft: rgba(26, 31, 38, 0.065);

  /* Depth — warm-tinted, two-layer. Neutral black shadows are what make
     enterprise SaaS look cheap; these carry the brand's warm axis. */
  --sh-1:    0 1px 2px rgba(43, 29, 18, .05),  0 2px 6px rgba(43, 29, 18, .04);
  --sh-2:    0 2px 4px rgba(43, 29, 18, .05),  0 10px 24px rgba(43, 29, 18, .07);
  --sh-3:    0 4px 10px rgba(43, 29, 18, .06), 0 20px 44px rgba(43, 29, 18, .09);
  --sh-lift: 0 10px 20px rgba(43, 29, 18, .07), 0 30px 60px rgba(43, 29, 18, .11);
  --sh-cta:      0 2px 6px rgba(198, 74, 30, .22), 0 10px 26px rgba(198, 74, 30, .20);
  --sh-cta-lift: 0 4px 10px rgba(198, 74, 30, .26), 0 18px 40px rgba(198, 74, 30, .28);

  /* Motion — exponential ease-out; things arrive, they never bounce. */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 150ms;
  --t-mid:  260ms;
  --t-slow: 560ms;

  /* Rhythm */
  --sp-section: clamp(4.5rem, 3.1rem + 4.4vw, 8.5rem);
  --measure: 68ch;

  /* Fluid type scale (major-third), replacing the fixed px steps */
  --fs-display: clamp(2.02rem, 1.28rem + 4.0vw, 4.4rem); /* floor was 2.35rem: clipped at 320px */
  --fs-h2:      clamp(1.88rem, 1.34rem + 2.05vw, 2.85rem);
  --fs-h3:      clamp(1.28rem, 1.13rem + 0.62vw, 1.6rem);
  --fs-h4:      clamp(1.04rem, 1.0rem + 0.18vw, 1.14rem);
  --fs-lead:    clamp(1.04rem, 0.99rem + 0.33vw, 1.2rem);

  --brand-gradient: linear-gradient(96deg, #f4b223 0%, #ee7a2a 46%, #e43d30 100%);
}

/* ---------- 2. Browser surfaces ------------------------------------------
   The parts nobody draws. Themed, these are the cheapest signal that a page
   was built rather than assembled.                                         */

::selection { background: #ffda00; color: #1a1f26; text-shadow: none; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  caret-color: #e43d30;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

/* Anchors clear the sticky navbar instead of hiding under it */
:target, [id] { scroll-margin-top: 92px; }

/* Focus: one visible, branded ring everywhere — keyboard only */
/* Not :where(). That carries zero specificity, so all ten pages that set
   `outline: none` on form focus silently beat it and the branded ring never
   appeared exactly where keyboard users needed it most. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2.5px solid #e43d30 !important;
  outline-offset: 3px;
  border-radius: 6px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

/* Custom scrollbar, warm track */
* { scrollbar-width: thin; scrollbar-color: rgba(26,31,38,.28) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(26,31,38,.22);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(26,31,38,.36); background-clip: content-box; }

/* Numerals in stats align in columns */
.persona-simple-headline, .metric, .metric-large, .stat, .stats-grid,
.arch-col-header, .proof-chip, .orch-chip, .tech-chip {
  font-variant-numeric: tabular-nums;
}

img { max-width: 100%; }

/* ---------- 3. Typography ------------------------------------------------ */

body { font-size: 16px; line-height: 1.62; color: var(--ink); letter-spacing: -0.002em; }

h1, .sol-hero h1, .hero-tagline {
  font-size: var(--fs-display);
  line-height: 1.045;
  letter-spacing: -0.033em;
  font-weight: 700;
  text-wrap: balance;
  /* A long unbroken word in a display size still overflows a 320px screen
     even inside a clamp; this is the backstop, not the primary control. */
  overflow-wrap: break-word;
}

h2, .section-heading, .features-section h2, .bottom-cta h2, .final-cta-section h2 {
  font-size: var(--fs-h2);
  line-height: 1.11;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}

h3 { font-size: var(--fs-h3); line-height: 1.24; letter-spacing: -0.017em; font-weight: 700; }
h4 { font-size: var(--fs-h4); line-height: 1.34; letter-spacing: -0.009em; font-weight: 700; }

p { text-wrap: pretty; }

.section-subheading, .sol-hero-sub, .hero-subline, .agents-intro, .lede {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-3);
  letter-spacing: -0.004em;
  max-width: var(--measure);
}

/* The eyebrow: was a stock centered kicker. Now a measured label carrying a
   short gradient rule — it reads as drawn, not defaulted. */
.section-eyebrow {
  /* Deliberately NOT flex: a flex parent turns every text node and inline
     <span class="keep-case"> into its own flex item, which shatters the
     sentence across lines. Inline-block rule keeps the mark and the flow. */
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.15rem;
}
.section-eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--brand-gradient);
}
.section-eyebrow-white { color: rgba(255,255,255,.72); }

/* Yellow mark — brand signature, tuned so the pill hugs the word */
mark {
  background-color: #ffda00;
  color: #000;
  border-radius: 10px;
  padding: 0.06em 0.34em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Links inside prose get a real underline, offset properly */
p a:not(.btn-primary):not(.nav-mega-item) {
  color: #0064bf;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0,100,191,.38);
  transition: text-decoration-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
p a:not(.btn-primary):not(.nav-mega-item):hover { text-decoration-color: #0064bf; }

/* ---------- 4. Rhythm ---------------------------------------------------- */

section { padding: var(--sp-section) 0; }
.sol-hero { padding: clamp(3.5rem, 2.4rem + 3.4vw, 6rem) 0 clamp(2.5rem, 2rem + 2vw, 4rem); }

/* More air above a heading than below it */
.text-center > .section-heading,
.text-center > h2 { margin-bottom: 1.05rem; }
.section-subheading { margin-top: 0.35rem; }

/* ---------- 5. Surfaces & depth ------------------------------------------ */

/* Light-surface cards only. .security-item and .ww-card are DARK components
   (security-item has no background of its own and sits on .dark-section;
   .ww-card is ebony-clay with white text on a light section) — giving them a
   white ground made their own white type invisible. They are treated in 20. */
.pillar-card, .integration-card, .feature-card, .persona-simple-card, .card {
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--ink-line-soft);
  box-shadow: var(--sh-1);
  transition:
    transform var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease);
}
.pillar-card:hover, .integration-card:hover, .feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-3);
  border-color: rgba(228, 61, 48, .22);
}

/* Card headings carry the ink scale, not muted gray */
.pillar-name, .integration-card-title, .feature-card h4, .persona-simple-role {
  color: var(--ink);
  letter-spacing: -0.012em;
}
.pillar-desc, .feature-card p, .faq-a, .integration-card p, .security-desc {
  color: var(--ink-3);
  line-height: 1.62;
}
.pillar-tagline { color: var(--ink-4); }

/* Feature icon: warm tinted plate rather than a bare stroke */
.feature-card-icon {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(244,178,35,.16), rgba(228,61,48,.11));
  color: #c8401f;
  margin-bottom: 0.9rem;
  transition: transform var(--t-mid) var(--ease);
}
.feature-card-icon svg { width: 20px; height: 20px; stroke-width: 1.9; fill: none; stroke: currentColor; }
.feature-card:hover .feature-card-icon { transform: scale(1.06) rotate(-2deg); }

/* Chips & pills */
.integration-pill, .ptag, .tech-chip, .orch-chip, .proof-chip {
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  background: #fff;
  color: var(--ink-2);
  font-weight: 600;
  letter-spacing: -0.004em;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.tech-chip:hover, .orch-chip:hover { border-color: rgba(228,61,48,.32); color: var(--ink); }

/* The from/to contrast pair, given real semantic weight */
.integration-card.shift-good {
  border-color: rgba(44,153,66,.34) !important;
  background:
    linear-gradient(180deg, rgba(44,153,66,.055), rgba(44,153,66,.015)) !important;
}
.integration-card.shift-good .integration-pill { border-color: rgba(44,153,66,.30); }

/* Dark sections: lift text off pure black-on-dark mud */
.dark-section { background: #14181e; }
.dark-section .section-heading, .dark-section h2, .dark-section h3 { color: #fff; }
.dark-section p, .dark-section .agents-intro { color: rgba(255,255,255,.70); }

/* ---------- 6. Primary CTA ----------------------------------------------- */

.btn-primary {
  background-image: var(--brand-gradient);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.92em 1.85em;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.006em;
  text-transform: lowercase;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  cursor: pointer;
  box-shadow: var(--sh-cta);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
/* A brighter gradient cross-fades in on hover — no color jump */
.btn-primary::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(96deg, #f7bd3d 0%, #f2882f 46%, #e8503f 100%);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--sh-cta-lift); }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: translateY(0); box-shadow: var(--sh-cta); }
.btn-primary-lg { padding: 1.02em 2.2em; font-size: 1.1rem; }

/* ---------- 7. Navigation ------------------------------------------------ */

.navbar {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ink-line-soft);
  transition: box-shadow var(--t-mid) var(--ease), background var(--t-mid) var(--ease);
}
.nav-links > li > a {
  color: var(--ink-2);
  font-weight: 600;
  letter-spacing: -0.006em;
  transition: color var(--t-fast) var(--ease);
}
.nav-links > li > a:hover { color: var(--ink); }

.nav-mega {
  border-radius: 18px;
  border: 1px solid var(--ink-line-soft);
  box-shadow: var(--sh-3);
  overflow: hidden;
  /* The markup hard-codes style="width:720px" in 108 places, which pushed
     54px off-screen at 1024px. Inline styles only yield to !important. */
  width: min(720px, calc(100vw - 2.5rem)) !important;
  max-width: calc(100vw - 2.5rem);
}
.nav-mega-item {
  border-radius: 12px;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav-mega-item:hover { background: rgba(228,61,48,.05); transform: translateX(2px); }
.nav-mega-name { color: var(--ink); font-weight: 700; letter-spacing: -0.012em; }
.nav-mega-logo { height: 1.25em; width: auto; display: block; margin: 0.05em 0 0.12em; }
.nav-mega-desc { color: var(--ink-4); }
.nav-mega-icon { color: #c8401f; }

/* ---------- 8. Hero & breadcrumb ----------------------------------------- */

.sol-breadcrumb { color: var(--ink-4); font-weight: 600; letter-spacing: 0.005em; }
.sol-breadcrumb a { color: var(--ink-3); transition: color var(--t-fast) var(--ease); }
.sol-breadcrumb a:hover { color: #e43d30; }

.hero-badge {
  border-radius: 999px;
  border: 1px solid rgba(228,61,48,.22);
  background: rgba(244,178,35,.10);
  color: var(--ink-2);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ---------- 9. Process diagram (arch) ------------------------------------ */

.arch-col {
  transition: background var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
  border-radius: 14px;
}
.arch-col:hover { background: rgba(244,178,35,.055); }
.arch-col-header { letter-spacing: -0.01em; font-weight: 700; }
.arch-col-desc { color: var(--ink-3); }
.arch-col-arrow { color: rgba(228,61,48,.5); }
.arch-tooltip {
  border-radius: 12px;
  box-shadow: var(--sh-3);
  border: 1px solid var(--ink-line-soft);
  line-height: 1.55;
}

/* ---------- 10. Marquees ------------------------------------------------- */

.marquee-logo { filter: grayscale(100%); opacity: .48; transition: opacity var(--t-mid) var(--ease), filter var(--t-mid) var(--ease); }
.marquee-logo:hover { opacity: 1; filter: grayscale(0%); }
.marquee-logo.marquee-logo--lg { height: 58px; max-width: 170px; }   /* logos whose artwork is compact (a seal beside a short word) read too small at the shared height */
.marquee-track:hover, .perf-mq-track:hover, .agent-marquee-track:hover { animation-play-state: paused; }

.perf-mq-card, .agent-mq-card {
  border-radius: 16px;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.perf-mq-card:hover, .agent-mq-card:hover { transform: translateY(-4px); }
.perf-mq-name, .agent-mq-name { letter-spacing: -0.014em; }
.perf-mq-role, .agent-mq-role { color: #c8401f; font-weight: 700; letter-spacing: 0.04em; }

/* ---------- 11. Stat cards ----------------------------------------------- */

.persona-simple-card { overflow: hidden; }
.persona-simple-top { border-bottom: 1px solid var(--ink-line-soft); }
.persona-simple-headline { letter-spacing: -0.022em; line-height: 1.16; color: var(--ink); }
.persona-simple-role { color: var(--ink-4); letter-spacing: 0.08em; }

/* ---------- 12. Story quote ---------------------------------------------- */

.story-quote {
  letter-spacing: -0.021em;
  line-height: 1.4;
  text-wrap: balance;
  color: var(--ink);
}
.story-attr { color: var(--ink-4); letter-spacing: 0.01em; }

/* ---------- 13. Closing CTA band ----------------------------------------- */

.bottom-cta, .final-cta-section {
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(244,178,35,.13) 0%, rgba(244,178,35,0) 58%),
    #14181e;
  color: #fff;
}
.bottom-cta h2, .final-cta-section h2 { color: #fff; }
.bottom-cta p, .final-cta-supporting { color: rgba(255,255,255,.72); max-width: 62ch; margin-inline: auto; }

/* ---------- 14. Footer --------------------------------------------------- */

.footer { border-top: 1px solid var(--ink-line-soft); }
.footer a { transition: color var(--t-fast) var(--ease); }
.footer a:hover { color: #e43d30; }

/* ---------- 15. Motion ---------------------------------------------------
   One authored arrival, not a different effect per section. Content is
   visible by default; JS only opts elements into the entrance.            */

[data-reveal], .reveal, .stagger-child {
  transition:
    opacity var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease),
    filter var(--t-slow) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  /* Freeze, do not crush. The previous rule set every duration to 0.001ms,
     which snapped each keyframe to an arbitrary position — the chat demos'
     "agent is thinking" dots ended up stuck invisible, so a reduced-motion
     user could not tell a loading panel from a broken one. Pausing holds
     frame 0, the resting state: the indicator is present, it just doesn't move. */
  *, *::before, *::after {
    animation-play-state: paused !important;
    animation-delay: 0ms !important;
  }
  html { scroll-behavior: auto !important; }

  /* Marquees carry no state, so stop them outright rather than freezing a
     partial offset mid-track. */
  .marquee-track, .perf-mq-track, .agent-marquee-track { animation: none !important; }

  /* Entrance reveals must resolve to visible — their frame 0 is the hidden one. */
  [data-reveal], .reveal, .stagger-child {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  /* Transitions are kept, only shortened. Reduced motion does not mean zero
     motion; a 120ms colour or opacity change on hover and focus is affordance
     information, and deleting it made every control feel dead. */
  *, *::before, *::after { transition-duration: 120ms !important; }
}

/* ---------- 16. Responsive ----------------------------------------------- */

@media (max-width: 900px) {
  :root { --sp-section: clamp(3.4rem, 2.4rem + 3.2vw, 4.6rem); }
  .section-subheading, .sol-hero-sub, .hero-subline { font-size: 1.02rem; }
}

@media (max-width: 640px) {
  h1, .sol-hero h1, .hero-tagline { letter-spacing: -0.026em; line-height: 1.08; }
  h2, .section-heading { letter-spacing: -0.019em; line-height: 1.16; }
  .btn-primary { width: 100%; justify-content: center; padding: 1.02em 1.4em; }
  .sol-hero .btn-primary, .bottom-cta .btn-primary, .final-cta-buttons .btn-primary { max-width: 26rem; }
  /* Touch targets clear 44px */
  .nav-links > li > a, .nav-mega-item, .footer a { min-height: 44px; display: flex; align-items: center; }
  /* a flex link drops the space between an acronym span and the words after it ("AI lab" read "AIlab"):
     put the space back as a gap (2026-10-19) */
  .nav-links > li > a:has(> .keep-case), .footer a:has(> .keep-case) { column-gap: 0.27em; }
  .tech-chip, .orch-chip, .ptag, .integration-pill { padding-block: 0.5em; }
  :target, [id] { scroll-margin-top: 76px; }
}

/* ============================================================================
   18. CORRECTIONS — driven by measured audit findings
   Every selector below was named by a contrast/overflow/tap-target measurement,
   not by taste. Ratios in comments are computed against the real surface.
   ========================================================================== */

/* --- 18a. Legibility -------------------------------------------------------
   The system leaned on rgba(26,31,38,α) ramps. Everything at α≤0.60 fell under
   4.5:1. These are re-pinned to the ink scale, which is AA by construction.  */

.section-subheading, .hero-sub, .hero-subline, .sol-hero-sub,
.arch-col-desc, .metric-label, .agent-mq-desc, .perf-mq-desc,
.agents-intro, .integration-card p, .pillar-desc, .feature-card p,
.faq-a, .story-attr, .nav-mega-desc, .coach-chip,
.pww-form-label, .dia-phase-pill {
  color: var(--ink-3);                    /* 6.18:1 on white */
}

/* Small text needs the darker step to clear AA at its size */
.agent-mq-role, .perf-mq-role, .pillar-tagline, .persona-simple-role,
.integration-pill, .ptag, .tech-chip, .orch-chip, .proof-chip,
.sol-breadcrumb {
  color: var(--ink-2);                    /* 9.85:1 on white */
}

/* Gold as a text colour is 1.87:1 — never legible. Route to the deep amber. */
.pillar-tagline, .agent-area-pill, .perf-mq-role, .agent-mq-role {
  color: #9a5a06;                         /* 4.9:1 on white, same hue family */
}

/* Footer sat at 4.34:1 on #fafbfb */
.footer a, .footer li, .footer p { color: var(--ink-3); }
.footer a:hover { color: #c8401f; }

/* Accent red on tinted surfaces bottomed out at 3.63:1. The deepened tone
   reads identically at a glance and clears AA on every brand tint. */
.section-eyebrow, .feature-card-icon, .nav-mega-icon,
.arch-col-arrow, .sol-breadcrumb a:hover { color: #c8401f; }

/* Dark surfaces: 0.40 white was 3.77:1 */
.dark-section .agent-mq-role, .dark-section .agent-mq-desc,
.dark-section .agent-compact-desc, .dark-section .section-eyebrow {
  color: rgba(255, 255, 255, .78);
}

/* 10px UI labels are below the legible floor */
.pww-form-label, .goal-col-label, .metric-label, .agent-mq-role, .perf-mq-role {
  font-size: max(11.5px, 0.72rem);
}

/* 0.12em tracking on body-length text hurts word shape */
.pillar-desc, .feature-card p, .integration-card p, .faq-a, .arch-col-desc {
  letter-spacing: -0.003em;
}

/* --- 18b. Primary CTA -------------------------------------------------------
   The brand's gold→red ramp, exactly as it shipped. The shadow reinforces the
   label over the light end rather than replacing the identity.
   Known and accepted: white on the gold stop measures 2.03:1 against a 4.5:1
   AA requirement. Gold cannot reach AA without becoming bronze, so this is a
   brand decision taken by the brand owner. A narrowed deep-orange ramp was
   trialled and reverted as off-brand. */
.btn-primary {
  background-image: linear-gradient(96deg, #f0a81c 0%, #e5701f 38%, #d8402a 100%);
  text-shadow: 0 1px 1.5px rgba(120, 42, 6, .38);
}
.btn-primary::after {
  background: linear-gradient(96deg, #f7b52c 0%, #ef7d27 38%, #e24a33 100%);
}

/* --- 18c. Mobile overflow --------------------------------------------------
   Root cause: grid/flex children default to min-width:auto, so nowrap chat
   widgets inside .persona-sec-inner forced a 590px track into a 342px column.
   Measured: performance-intelligence 615px -> 390px, dia 557px -> 390px.     */
.persona-sec-inner > *, .workwise-inner > *, .difference-inner > *,
.hero-platform-content > *, .features-grid > *, .pillars-grid > *,
.integrations-grid > *, .persona-simple-grid > *, .arch-diagram > * {
  min-width: 0;
}
.coach-demo, .ww-demo, .dia-demo, .ww-card, .coach-panel, .dia-chat {
  max-width: 100%;
}
@media (max-width: 900px) {
  .coach-input-text, .coach-think-title, .dia-phase-pill {
    white-space: normal !important;
    word-break: break-word;
  }
  /* prompt chips stay whole pills; the row wraps instead of the words (2026-09-08) */
  .ww-chips, .coach-chips, .dia-prompt-chips { flex-wrap: wrap; overflow-x: visible; }
  .ww-chip, .coach-chip, .dia-prompt-chip { white-space: nowrap !important; }
}
html, body { overflow-x: clip; }

/* --- 18d. Tap targets ------------------------------------------------------
   Measured 80–96% of interactive elements under 44x44 at 390px.             */
@media (pointer: coarse), (max-width: 900px) {
  .nav-toggle, .coach-send-btn, .testimonials-nav, .awards-nav,
  .footer-socials a, .dia-send-btn,
  .form-consent input[type="checkbox"] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .logo, .nav-cta, .persona-tab, .features-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Carousel dots: keep the small visual mark, enlarge the hit area */
  .testimonials-dot, .awards-dot {
    position: relative;
  }
  .testimonials-dot::after, .awards-dot::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }
  .footer a { min-height: 40px; }
}

/* --- 18e. Depth hygiene ----------------------------------------------------
   Zero-offset chromatic halos read as decoration; give them offset and blur. */
.dark-section [class*="glow"], .pulse-dot {
  box-shadow: 0 2px 10px rgba(0, 100, 191, .28);
}

/* --- 18e2. Inline accent spans -------------------------------------------
   Brand hues used as small text on white all sat under AA. Each is deepened
   within its own hue family: the colour still reads as gold / red / green.  */
.hl-gold  { color: #b8860b; }
.hl-red, .solution-link, .eai-inline,
.difference-list li::before { color: #c8401f; }  /* was #e43d30 4.19:1 -> 4.99:1 */
.hl-green { color: #217a33; }   /* was #2c9942 3.66:1 -> 5.39:1 */

/* Links that carry meaning get a hover affordance, not just colour */
.solution-link { text-underline-offset: 3px; }
.solution-link:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }

/* Footer rows need a real touch height */
@media (pointer: coarse), (max-width: 900px) {
  .footer a { min-height: 44px; }
}

/* --- 18g. Headline marks must not paint over the line above -----------------
   Measured overlap before this rule: 24.1px (axon h1), 19.7px (home h1).
   Display line-heights are deliberately tight, so any headline that actually
   contains a mark opens up just enough to seat the highlight box.            */
/* !important is load-bearing here: :has(mark) carries only type-level
   specificity (0,0,2), so it loses to page rules like `.hero h1` (0,1,1).
   The headline containers differ per page, so raising specificity by hand
   would mean chasing selectors on 36 pages. */
h1:has(mark), h2:has(mark), h3:has(mark),
.section-heading:has(mark), .hero-tagline:has(mark) {
  line-height: 1.36 !important;
}
/* Zero vertical padding: the highlight takes its height from the line box,
   so it can never grow taller than the line it sits on. */
mark { padding: 0 0.3em !important; line-height: 1.1 !important; }

/* --- 18h. Keyboard reachability of the mega-menus ---------------------------
   The menus opened on :hover only, so no product or solution page could be
   reached by keyboard at all. Focus now opens them on the same terms.        */
.nav-dropdown-wrap:focus-within > .nav-mega,
.nav-dropdown-wrap:focus-within .nav-mega {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(8px) !important;
  /* Zero DURATION, not just zero delay. The panel animates visibility over
     200ms, so a keyboard user tabbing faster than that reached the next
     control before the links inside became focusable — measured 2 of 33 items
     reachable with no pause between Tab presses, against 20 at a 60ms gap.
     Key autorepeat and switch scanning both land in the failing band. The
     mouse reveal keeps its fade; only the focus path is instant. */
  transition-delay: 0s !important;
  transition-duration: 0s !important;
}

/* --- 18i. Flex containers that hold inline sentences ------------------------
   Same failure mode as the eyebrow: a nowrap flex parent splits a sentence
   into one item per text node, so "AI-generated goal KPIs and sheets" breaks
   into columns. Restore normal inline flow wherever a keep-case span sits in
   running text.                                                              */
.persona-tags li:has(.keep-case),
.difference-list li:has(.keep-case), .ww-msg p:has(.keep-case) {
  display: block;
}
.keep-case { display: inline; white-space: normal; }

/* --- 18f. Skip link (added for keyboard users; no visible content change) -- */
.eq-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: #14181e;
  color: #fff;
  padding: 0.8em 1.2em;
  border-radius: 0 0 10px 0;
  font-weight: 700;
}
.eq-skip:focus {
  left: 0;
  outline: 2.5px solid #f4b223;
  outline-offset: 2px;
}

/* --- 18j. Mobile navigation panel ------------------------------------------
   The markup shipped with a .nav-toggle button and no handler, so the menu was
   unopenable on every page. entomo-2026.js toggles .eq-nav-open on <html>;
   this is the panel it reveals.                                              */
@media (max-width: 900px) {
  .eq-nav-open .nav-links {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    padding: 0.5rem 1.1rem 2rem;
    border-top: 1px solid var(--ink-line-soft);
    box-shadow: var(--sh-3);
    z-index: 120;
    animation: eq-nav-in 300ms var(--ease) both;
  }
  @keyframes eq-nav-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }
  .eq-nav-open { overflow: hidden; }
  .eq-nav-open .nav-links > li {
    width: 100%;
    border-bottom: 1px solid var(--ink-line-soft);
  }
  .eq-nav-open .nav-links > li:last-child { border-bottom: none; }
  .eq-nav-open .nav-links > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
  }
  /* Submenus are collapsed until their parent row is tapped */
  .eq-nav-open .nav-mega {
    display: none;
    position: static !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none;
    border: none;
    padding: 0 0 0.75rem;
  }
  .eq-nav-open .nav-dropdown-wrap.eq-sub-open .nav-mega { display: block; }
  .eq-nav-open .nav-mega-grid { grid-template-columns: 1fr !important; gap: 0; }
  .eq-nav-open .nav-mega-item { min-height: 52px; padding: 0.5rem 0.25rem; }
  .eq-nav-open .nav-dropdown-wrap > a::after {
    content: "";
    width: 8px; height: 8px;
    border-right: 2px solid var(--ink-4);
    border-bottom: 2px solid var(--ink-4);
    transform: rotate(45deg);
    transition: transform var(--t-mid) var(--ease);
    flex: none;
    margin-left: 0.75rem;
  }
  .eq-nav-open .nav-dropdown-wrap.eq-sub-open > a::after { transform: rotate(-135deg); }
  .nav-toggle {
    background: transparent;
    border: 1px solid var(--ink-line);
    border-radius: 10px;
    color: var(--ink);
  }
}

/* Marquees stop when the tab is not visible */
.eq-hidden .marquee-track,
.eq-hidden .perf-mq-track,
.eq-hidden .agent-marquee-track { animation-play-state: paused; }

/* ============================================================================
   19. THE AXON GRAPH — signature component
   Role -> Responsibility -> Task -> KPI -> Skill, drawn as an actual connected
   graph with a worked example. The crossings are the argument: a flat skills
   list cannot produce them. Connector geometry is computed from real node
   positions in entomo-2026.js, so it survives reflow and text wrapping.
   ========================================================================== */

.axon-graph {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 0 clamp(0.5rem, 2.2vw, 2.6rem);
  align-items: start;
  overflow: visible !important;
  margin-top: 3rem;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

.axon-graph .sg-mesh {
  /* ambient neural field: painted by JS, bleeds past the diagram so the
     visible sample reads as a window onto a much larger model */
  position: absolute;
  inset: -44px -20px;
  width: calc(100% + 40px);
  height: calc(100% + 88px);
  pointer-events: none;
  z-index: 0;
}
.axon-graph .sg-impulse {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  pointer-events: none;
  opacity: 0;
}
.axon-graph .sg-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.axon-graph .sg-link {
  fill: none;
  stroke: rgba(43, 29, 18, .30);
  stroke-width: 1.8;
  stroke-linecap: round;
  transition: stroke var(--t-mid) var(--ease), stroke-width var(--t-mid) var(--ease),
              opacity var(--t-mid) var(--ease);
}
.axon-graph .sg-link.is-lit {
  stroke: #e0721c;
  stroke-width: 2.6;
}
.axon-graph.is-focused .sg-link:not(.is-lit) { opacity: 0.22; }

/* Columns inherit the grid; DOM order is header -> desc -> arrow -> tooltip ->
   nodes, and explicit rows put the nodes between header and description
   without moving a single word in the markup. */
.axon-graph .sg-col {
  display: contents;
}
.axon-graph .arch-col-header {
  grid-row: 1;
  position: relative;
  z-index: 2;
  /* The KPI header shipped as gradient text (-webkit-text-fill-color:
     transparent + background-clip: text). Giving the pill its own background
     clipped that text to white and it vanished. Emphasis here comes from
     weight and the pill, not from a gradient fill. */
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  text-align: center;
  padding: 0.55rem 0.4rem;
  margin-bottom: 1.6rem;
  border-radius: 999px;
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #fff;
  border: 1px solid var(--ink-line);
  color: var(--ink-2);
}
.axon-graph .sg-nodes {
  grid-row: 2;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.7rem;
  min-height: 260px;
}
.axon-graph .arch-col-desc {
  grid-row: 3;
  margin-top: 1.7rem;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-4);
  text-align: center;
  padding: 0 0.2rem;
}
/* Real curves replace the placeholder arrow glyphs */
.axon-graph .arch-col-arrow { display: none !important; }
.axon-graph .arch-tooltip { display: none !important; }

.axon-graph .sg-node {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  padding: 0.7em 0.85em;
  font-size: clamp(12px, 1.05vw, 13.5px);
  font-weight: 600;
  line-height: 1.32;
  color: var(--ink);
  text-align: center;
  cursor: default;
  box-shadow: var(--sh-1);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
.axon-graph .sg-node:hover,
.axon-graph .sg-node:focus-visible,
.axon-graph .sg-node.is-lit {
  border-color: rgba(224, 114, 28, .55);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.axon-graph.is-focused .sg-node:not(.is-lit) { opacity: 0.4; }

/* The origin node anchors the example */
.axon-graph .sg-col[data-layer="0"] .sg-node {
  background: linear-gradient(180deg, #fff, #fffaf0);
  border-color: rgba(224, 114, 28, .4);
  font-weight: 700;
}

/* Entrance: nodes settle, then the connectors draw themselves */
.axon-graph .sg-node { opacity: 0; transform: translateY(10px); }
.axon-graph.is-drawn .sg-node {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  transition-delay: calc(var(--sg-i, 0) * 45ms);
}
.axon-graph .sg-link { stroke-dasharray: var(--len, 0); stroke-dashoffset: var(--len, 0); }
.axon-graph.is-drawn .sg-link {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 900ms var(--ease-soft) 260ms,
              stroke var(--t-mid) var(--ease), stroke-width var(--t-mid) var(--ease),
              opacity var(--t-mid) var(--ease);
}

/* alternate layers sit off the shared baseline, so five columns read as a
   woven field rather than a staircase */
.axon-graph .sg-col[data-layer="1"] .sg-nodes,
.axon-graph .sg-col[data-layer="3"] .sg-nodes { transform: translateY(26px); }

@media (max-width: 900px) {
  /* Five columns cannot survive a phone. Stack the layers; each becomes a
     labelled row of chips and the connector layer steps aside. */
  .axon-graph .sg-col[data-layer="1"] .sg-nodes,
  .axon-graph .sg-col[data-layer="3"] .sg-nodes { transform: none; }
  .axon-graph { grid-template-columns: 1fr; grid-template-rows: none; gap: 0; }
  .axon-graph .sg-links { display: none; }
  .axon-graph .sg-node { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .axon-graph .sg-mesh { display: none; }
  .axon-graph .sg-col { display: block; padding: 1.15rem 0; border-bottom: 1px solid var(--ink-line-soft); }
  .axon-graph .sg-col:last-child { border-bottom: none; }
  .axon-graph .arch-col-header { display: inline-block; margin-bottom: 0.9rem; }
  .axon-graph .sg-nodes {
    min-height: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
  }
  .axon-graph .sg-node { opacity: 1; transform: none; padding: 0.55em 0.8em; }
  .axon-graph .arch-col-desc { margin-top: 0.9rem; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .axon-graph .sg-node { opacity: 1 !important; transform: none !important; }
  .axon-graph .sg-link { stroke-dashoffset: 0 !important; }
}

/* ============================================================================
   20. DARK-SURFACE COMPONENTS
   These carry their own dark ground and white type. They must never inherit
   the light card treatment; craft is applied in kind instead.
   ========================================================================== */

/* The enzo / axon chat card — ebony-clay on a light section */
.ww-card {
  background: var(--ebony-clay) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 12px rgba(43, 29, 18, .18), 0 22px 48px rgba(43, 29, 18, .26) !important;
  transform: none !important;
}
.ww-card .ww-name, .ww-card .ww-msg p { color: #fff; }
.ww-msg-sub { color: rgba(255, 255, 255, .58) !important; }
.ww-status { color: rgba(255, 255, 255, .5); }
.ww-msg { background: rgba(255, 255, 255, .07); border-radius: 12px; }
.ww-card .ww-chip {
  background: rgba(244, 178, 35, .14);
  border: 1px solid rgba(244, 178, 35, .3);
  color: #f7c65a;
  border-radius: 999px;
}
/* The same chip also appears OUTSIDE the dark card (homepage, product pages),
   where light gold on white washes out to 1.5:1. On light ground it takes the
   deep amber instead. */
.ww-chip:not(.ww-card .ww-chip) {
  background: rgba(244, 178, 35, .12);
  border: 1px solid rgba(244, 178, 35, .38);
  color: #8a5005;
  border-radius: 999px;
}

/* Compact agent list sits on the dark band */
.agent-compact-name { color: #fff; }
.dark-section .agent-compact-name { color: #fff; }
.agent-compact-desc { color: rgba(255, 255, 255, .68); }

/* Security grid: transparent items on the dark band, not white cards */
.dark-section .security-item, .security-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transform: none !important;
}
.security-title { color: #fff !important; }
.security-desc { color: rgba(255, 255, 255, .68) !important; }
.security-icon-wrap {
  background: rgba(255, 255, 255, .09) !important;
  color: #f7c65a;
  border-radius: 12px;
}

/* Pre-existing: the blog's meta separator sat at 0.3 alpha (2.6:1) */
.meta-dot { color: var(--ink-4); }

/* Anything else living on a dark band keeps light type */
.dark-section .pillar-desc, .dark-section .integration-card p,
.dark-section .feature-card p, .dark-section .arch-col-desc {
  color: rgba(255, 255, 255, .68);
}

/* ============================================================================
   21. MATERIALS — the product mockups as glass
   Explicitly requested: Apple-style translucency on the demo widgets.
   Translucency only reads if there is light behind it, so each demo shell
   first gets a quiet brand-tinted backdrop; the chrome then blurs THAT.
   Glass here is a material doing a job (separating chrome from content),
   not decoration sprayed across the page.
   ========================================================================== */

:root {
  --mat-blur:     saturate(185%) blur(22px);
  --mat-light:    rgba(255, 255, 255, .58);
  --mat-lighter:  rgba(255, 255, 255, .74);
  --mat-hairline: rgba(255, 255, 255, .72);
  --mat-edge:     rgba(26, 31, 38, .085);
  --mat-shadow:
      0 1px 2px rgba(43, 29, 18, .06),
      0 10px 26px rgba(43, 29, 18, .09),
      0 34px 68px rgba(43, 29, 18, .11);
}

/* ---- 21a. Liquid Glass tokens ---------------------------------------------
   Modelled on Apple's Liquid Glass (2025), which is not frosted glass: it
   REFRACTS. The signature is edge lensing, a travelling specular rim, and
   chromatic fringing where the lens splits light. Technique adapted from the
   open CSS/SVG recreations (dpawlikowski/liquid-glass, kube.io) - the SVG
   feDisplacementMap backdrop pass is Chrome-only, so everything that carries
   the look is done in plain CSS and the displacement is a bonus on top.     */
:root {
  --lg-blur:       20px;
  --lg-saturate:   190%;
  --lg-radius:     30px;
  --lg-tint:       255 255 255;
  --lg-edge-warm:  rgb(255 146 96 / .40);   /* brand-side fringe */
  --lg-edge-cool:  rgb(96 186 255 / .34);
  --lg-rim:        rgba(255, 255, 255, .95);
  --lg-rim-soft:   rgba(255, 255, 255, .38);
}

/* ---- 21b. The window shell ------------------------------------------------ */
.coach-demo, .ww-demo, .dia-demo {
  position: relative;
  isolation: isolate;            /* contains the ::after screen blend */
  overflow: hidden;
  border-radius: var(--lg-radius) !important;
  border: 1px solid rgba(255, 255, 255, .55);
  background:
    radial-gradient(120% 82% at 6% 0%,   rgba(244, 178, 35, .20), transparent 58%),
    radial-gradient(115% 92% at 100% 8%, rgba(0, 100, 191, .16),  transparent 60%),
    radial-gradient(95% 75% at 55% 104%, rgba(228, 61, 48, .12),  transparent 62%),
    #fbfcfe !important;
  box-shadow:
    /* edge lensing: a bright band just inside the perimeter */
    inset 0 0 14px -4px rgba(255, 255, 255, .95),
    inset 0 1px 0 var(--lg-rim),
    inset 0 0 0 1px var(--lg-rim-soft),
    inset 0 -14px 26px -20px rgba(43, 29, 18, .30),
    /* contact + ambient */
    0 1px 2px rgba(43, 29, 18, .07),
    0 12px 30px rgba(43, 29, 18, .10),
    0 40px 80px rgba(43, 29, 18, .12) !important;
}

/* Surface sheen — the diagonal light travelling across the pane */
.coach-demo::before, .ww-demo::before, .dia-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    138deg,
    rgb(var(--lg-tint) / .58) 0%,
    rgb(var(--lg-tint) / .10) 34%,
    rgb(var(--lg-tint) / 0)   52%,
    rgb(var(--lg-tint) / .22) 100%);
}

/* Chromatic fringing — the lens splitting light at opposing edges */
.coach-demo::after, .ww-demo::after, .dia-demo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
  opacity: .75;
  background:
    linear-gradient(90deg,  var(--lg-edge-warm) 0, transparent 5%),
    linear-gradient(270deg, var(--lg-edge-cool) 0, transparent 5%),
    linear-gradient(180deg, rgb(255 255 255 / .30) 0, transparent 3%);
}
.coach-demo > *, .ww-demo > *, .dia-demo > * { position: relative; z-index: 1; }

/* ---- 21b2. The title bar as a lens ---------------------------------------- */
.coach-topbar, .ww-topbar, .dia-topbar {
  position: relative;
  z-index: 2;
  background: rgb(var(--lg-tint) / .34) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border-bottom: none !important;
  padding: 14px 22px !important;
  box-shadow:
    inset 0 1px 0 var(--lg-rim),
    inset 0 -10px 18px -14px rgba(43, 29, 18, .28);
}
/* Fading hairline + a cool fringe along the lens exit edge */
.coach-topbar::after, .ww-topbar::after, .dia-topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(26,31,38,0), rgba(26,31,38,.14) 16%,
                                     rgba(26,31,38,.14) 84%, rgba(26,31,38,0));
}
.coach-topbar::before, .ww-topbar::before, .dia-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .8;
  background: linear-gradient(92deg, var(--lg-edge-warm) 0, transparent 4%),
              linear-gradient(268deg, var(--lg-edge-cool) 0, transparent 4%);
}

/* Chrome alone can run an SVG displacement over live backdrop. Where it can,
   the lens actually bends what is behind it; elsewhere the rules above still
   carry the look. Declared separately so an invalid value cannot take the
   blur down with it. */
@supports (backdrop-filter: url("#eq-liquid")) {
  .coach-topbar, .ww-topbar, .dia-topbar {
    -webkit-backdrop-filter: blur(16px) saturate(var(--lg-saturate)) url("#eq-liquid");
    backdrop-filter: blur(16px) saturate(var(--lg-saturate)) url("#eq-liquid");
  }
}

/* Avatars sit like app icons: soft ring, slight lift */
.coach-avatar, .ww-avatar, .dia-avatar {
  border-radius: 30% !important;
  box-shadow: 0 1px 2px rgba(43,29,18,.16), 0 4px 10px rgba(43,29,18,.14),
              inset 0 0 0 1px rgba(255,255,255,.5);
}

/* ---- 21b3. The ask / shape / scale mockups --------------------------------
   These three are drawn as inline SVG with flat hardcoded fills, so none of
   the CSS material above could reach them. CSS DOES win over SVG presentation
   attributes, so the fills are repointed at injected gradients and the frame
   gets the same lens treatment as the HTML widgets.                        */
.sss-svg {
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(43, 29, 18, .07),
    0 10px 26px rgba(43, 29, 18, .10),
    0 30px 60px rgba(43, 29, 18, .11) !important;
}
/* Safety net only: the mockups now set Nunito Sans on each text node
   directly. Kept so any future SVG dropped in here cannot regress. */
.sss-svg text {
  font-family: "Nunito Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: -0.2px;
}

/* ---- 21c. Surfaces inside the window -------------------------------------- */
.coach-panel, .dia-chat, .ww-stage, .coach-stage { background: transparent !important; }

/* Deliberately NOT glassed: .dia-msg, .coach-answer, .coach-question and
   .ww-msg carry no background of their own — they are animation wrappers, so
   giving them a fill produces empty boxes mid-cycle. .dia-outcome is a
   gradient card with white type; a white fill erased it entirely. */

/* The outcome card keeps its own gradient and gains the material's edge work */
.dia-outcome {
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow:
    0 2px 6px rgba(43, 29, 18, .16),
    0 16px 36px rgba(43, 29, 18, .20),
    inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}

.coach-chip, .dia-prompt-chip {
  background: rgb(var(--lg-tint) / .55) !important;
  -webkit-backdrop-filter: saturate(170%) blur(10px);
  backdrop-filter: saturate(170%) blur(10px);
  border: 1px solid rgba(26,31,38,.09) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 0 8px -2px rgba(255,255,255,.95),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.4),
    0 1px 2px rgba(43,29,18,.07);
  color: var(--ink-2) !important;   /* was rgba(26,31,38,.45) = 2.8:1 */
}

.dia-input-row, .coach-input-row {
  background: rgba(255,255,255,.6) !important;
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  backdrop-filter: saturate(170%) blur(14px);
  border-radius: 999px !important;
  border: 1px solid rgba(26,31,38,.09);
  box-shadow: inset 0 1px 2px rgba(43,29,18,.06);
}

/* ---- 21d. Dark glass ------------------------------------------------------ */
.ww-card {
  background:
    radial-gradient(120% 80% at 8% 0%,  rgba(244,178,35,.14), transparent 58%),
    radial-gradient(110% 90% at 100% 6%, rgba(0,100,191,.16), transparent 60%),
    var(--ebony-clay) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow: 0 2px 6px rgba(15,12,8,.28), 0 22px 52px rgba(15,12,8,.34),
              inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.ww-card .ww-msg {
  background: rgba(255,255,255,.085) !important;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.ww-card .ww-card-header { border-bottom-color: rgba(255,255,255,.1) !important; }

/* ---- 21e. Graceful degradation --------------------------------------------
   Without backdrop-filter these translucent fills would read as washed-out
   flats, so they go solid. Same for anyone who asks for less transparency. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .coach-topbar, .ww-topbar, .dia-topbar { background: #f4f7fb !important; }
  .coach-chip, .dia-prompt-chip,
  .dia-input-row, .coach-input-row { background: #fff !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .coach-topbar, .ww-topbar, .dia-topbar {
    background: #f4f7fb !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .coach-chip, .dia-prompt-chip,
  .dia-input-row, .coach-input-row {
    background: #fff !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .coach-demo::before, .ww-demo::before, .dia-demo::before { display: none; }
}

/* ---------- 17. Print ---------------------------------------------------- */

@media print {
  .navbar, .marquee-wrapper, .perf-mq-wrapper, .bottom-cta, .final-cta-section { display: none !important; }
  body { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}

/* ============================================================================
   22. Audit remediation — nav chrome at narrow widths
   These are additions, not corrections to rules above; the corrections were
   made at source. Measured at 390x844 and 320x568.
   ========================================================================== */

/* The 44px tap target added for .nav-toggle is correct, but the page sets
   .nav-right-group { flex-wrap: nowrap; gap: 1.5rem }, so below 414px the
   toggle overlapped the primary CTA and stole 100% of a 13px strip. Tighten
   the gap and let the CTA yield rather than the two collide. */
@media (max-width: 460px) {
  .nav-right-group { gap: 0.5rem !important; min-width: 0; }
  .nav-cta {
    min-width: 0;
    padding-left: 0.8rem !important;
    padding-right: 0.8rem !important;
    font-size: 0.82rem !important;
    white-space: nowrap;
  }
  .nav-toggle { flex: none; margin-left: 0.25rem; }
  /* At 390px the logo ended at x=174 and the CTA began at x=174 — no overlap,
     but no gap either, so the wordmark read as if it were tucked under the
     button. The logo yields the space. */
  .navbar .logo, .navbar .logo img, .navbar > a img {
    max-width: 118px;
    height: auto;
  }
  .navbar { padding-left: 0.9rem !important; padding-right: 0.9rem !important; }
}
@media (max-width: 400px) {
  /* Below this the wordmark, the CTA label and the toggle genuinely cannot
     coexist: measured a 3px CTA/toggle overlap at 375px, which is an ordinary
     iPhone width. The CTA is reachable from the drawer and from the closing
     band on every page, so the duplicate in the bar is what gives way. */
  .navbar .nav-cta { display: none; }
}

/* Carousel dots keep their slim mark on phones; the ::after above gives each a 44px hit area
   (the min-size and padding versions turned the active dot into a large red square, 2026-10-19). */

/* A span with cursor:pointer that does nothing is a false affordance. */
.coach-action-btn { cursor: default; }

/* ============================================================================
   24. Carousel pause control
   Required by WCAG 2.2.2 and injected by the carousel scripts. Styled as a
   glass pill so it reads as chrome rather than as a new piece of UI.
   ========================================================================== */
.eq-carousel-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 0.75rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(26, 31, 38, .10);
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 1px 2px rgba(43,29,18,.06);
  color: var(--ink-3);
  cursor: pointer;
  vertical-align: middle;
  transition: color 160ms var(--ease), border-color 160ms var(--ease),
              background 160ms var(--ease), transform 160ms var(--ease);
}
.eq-carousel-pause svg { width: 13px; height: 13px; display: block; }
.eq-carousel-pause:hover {
  color: var(--ink);
  border-color: rgba(228, 61, 48, .34);
  background: rgba(255, 255, 255, .82);
}
.eq-carousel-pause:active { transform: scale(0.94); }

/* Dark bands invert the pill rather than punching a white hole in them. */
.dark-section .eq-carousel-pause,
.bottom-cta .eq-carousel-pause {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  color: rgba(255, 255, 255, .82);
}
.dark-section .eq-carousel-pause:hover,
.bottom-cta .eq-carousel-pause:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

@media (pointer: coarse), (max-width: 900px) {
  .eq-carousel-pause { width: 44px; height: 44px; }
  .eq-carousel-pause svg { width: 15px; height: 15px; }
}

/* ============================================================================
   25. Release the compositor layers after the reveal
   35 pages declare `will-change: opacity, transform` on .anim and .stagger > *
   and never withdraw it, so every reveal element holds a GPU layer for the
   lifetime of the page — measured up to 24MB on the homepage. The reveal is a
   one-shot, so the hint is only useful until it has played. Both selectors
   below are (0,2,0) and beat the (0,1,0) rules that set it.
   ========================================================================== */
.anim.is-visible,
.stagger.is-visible > * { will-change: auto; }









/* ============================================================================
   27. Hero flow
   Canvas ribbons behind the headline. It sits at z-index 0 while
   .hero .container is already z-index 1, so the copy needs no change to stay
   on top, and pointer-events:none guarantees it can never swallow a click on
   the CTA — the hero section listens for the cursor instead.
   ========================================================================== */
.hero-flow {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
  pointer-events: none;
  /* Fade at the edges so the ribbons resolve into the section rather than
     being cut off by it, and stay clear of the headline's centre. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
    radial-gradient(ellipse 46% 52% at 50% 46%,
      transparent 0%, rgba(0,0,0,.28) 55%, #000 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
    radial-gradient(ellipse 46% 52% at 50% 46%,
      transparent 0%, rgba(0,0,0,.28) 55%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: 0.9;
}

/* The hero already paints a tinted wash and a gold bloom; with ribbons over
   it the wash competes, so it steps back to let them read. */
.hero:has(.hero-flow) {
  background: linear-gradient(135deg,
    rgba(234, 245, 237, 0.34) 0%,
    rgba(230, 240, 249, 0.30) 40%,
    rgba(254, 251, 244, 0.40) 100%);
}

@media (prefers-reduced-transparency: reduce) {
  .hero-flow { opacity: 0.5; }
}

/* On a narrow hero the copy fills most of the frame, so the centre clearing
   that keeps the desktop headline calm leaves almost no ribbon visible. The
   clearing tightens and the field brightens to compensate. */
@media (max-width: 820px) {
  .hero-flow {
    opacity: 1;
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%),
      radial-gradient(ellipse 62% 34% at 50% 44%,
        transparent 0%, rgba(0,0,0,.45) 62%, #000 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%),
      radial-gradient(ellipse 62% 34% at 50% 44%,
        transparent 0%, rgba(0,0,0,.45) 62%, #000 100%);
  }
}

/* ============================================================================
   28. Brand lockups
   The enzo and entomo axon logos, used in place of the words where the
   mention is a brand statement rather than prose. Every one carries alt text
   with the exact words it replaces, so the copy still reaches screen readers
   and search engines — the change is presentational only.

   Source note: both logos arrived as PNG data embedded inside an SVG wrapper
   (478KB and 4.5MB). They are served here as WebP with a PNG fallback at
   1200px wide — 19KB and 82KB. True vector files would render sharper at the
   hero size and should replace these when available.
   ========================================================================== */
.brand-lockup { display: block; }
.brand-lockup img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hero scale. Capped in px so it never outgrows the headline it introduces,
   and in % so it never touches the edges on a phone. */
.brand-lockup--hero {
  width: min(540px, 86%);
  /* Centred by default: both heroes that use it centre their content, and a
     left-aligned lockup under a centred headline reads as a mistake. */
  margin: 0 auto 1.4rem;
}
.text-left .brand-lockup--hero { margin-left: 0; }

.brand-lockup--axon { width: min(500px, 88%); }

/* Inline mention, set to the size of the text it sits in. The negative
   vertical-align seats the wordmark on the baseline rather than hanging it
   from the line box. */
.brand-inline {
  display: inline-block;
  vertical-align: baseline;
  line-height: 0;
}
/* Sized to the letterforms, not to the image box. The replacement artwork
   carries noticeably more padding than the first version — same wordmark,
   taller frame — so matching 1em left "entomo" at roughly half the height of
   the type beside it. */
/* Both numbers are solved, not eyeballed. Measured in the artwork: the
   "entomo" ink occupies 46.96% of the image height and its baseline sits at
   90.72% from the top. Measured in Nunito Sans at the paragraph's weight:
   "entomo" inks 0.65em tall. So the image must be 0.65 / 0.4696 = 1.384em for
   the wordmark to match the text exactly, and its bottom must fall
   (1 - 0.9072) x 1.384 = 0.128em below the text baseline for the two
   baselines to coincide. */
.brand-inline img {
  /* entomo.ai artwork v2 (2026-08-26, from entomo-ai-source.svg): letterforms
     ink 66.2% of image height, baseline on the bottom edge ->
     0.6459 / 0.662 = 0.976em, zero baseline offset */
  display: inline-block;
  height: 0.976em;
  width: auto;
  vertical-align: 0;
}

@media (max-width: 640px) {
  .brand-lockup--hero { width: min(320px, 92%); }
}

/* The axon wordmark set inline in a headline. It needs more height than the
   entomo.ai lockup at the same font size: the artwork carries a sparkle
   flourish above the letterforms, so a large share of its box is empty air
   and matching 1em would leave the letters visibly small next to the type.
   Sized to the letters, not to the box. */
/* Solved the same way as the entomo.ai lockup. Measured in the artwork: the
   letterforms occupy 79.74% of the image height with the baseline at 99.49%
   from the top — the wordmark sits almost flush with the bottom edge, and the
   sparkle flourish accounts for the space above it. Measured in the page
   font: "axon" inks 0.65em. So 0.65 / 0.7974 = 0.815em, and the baseline
   offset is effectively nil.

   The previous values were guessed against the image box and rendered the
   letters at roughly 1.9x the surrounding type. */
.brand-inline--axon img {
  /* axon artwork v4 (2026-08-27): letterform band 75.0% of image height,
     baseline at 84.3% from top; calibrated against the previous art's
     shipped 0.875em / -0.072em using the same measurement */
  height: 0.882em;
  vertical-align: -0.139em;
  margin: 0 0.04em;
}

/* enzo, the co-worker (2026-09-08). Trimmed lockup: the wordmark's x-height band
   is 51% of the image height with its baseline 81% from the top. An x-height of
   0.6em therefore needs 1.18em of image, and -0.22em seats that baseline on the
   text baseline. */
.brand-inline--enzo img { height: 1.18em; vertical-align: -0.22em; margin: 0 0.06em; }
.brand-lockup--enzo { width: min(420px, 80%); }
.nav-mega-icon--enzo img { width: 32px; height: auto; display: block; }
.nav-mega-logo--enzo { height: 1.05em; margin: 0.14em 0 0.22em; }
/* product brands in the menu: colour symbol in the tile, wordmark, then 'by entomo'.
   Bottom-aligned geometrically, not by baseline: the two wordmarks sit in different
   wrappers (TMRW is a bare img, enzo is inside a picture), so synthesized baselines
   disagree by ~3px. flex-end aligns the boxes, and the margins below correct for the
   empty space each artwork carries under its letterforms (measured 2026-09-08:
   tmrw.svg 20.0% of its height, enzo-wordmark 2.0%, axon-wordmark 18.0%).
   Recalibrated 2026-09-08 when the menu label grew to 15.5px. Residual under
   half a pixel on all three. */
.nav-mega-name--brand { display: flex; align-items: flex-end; gap: 0.42em; }
.nav-mega-name--brand > picture { display: block; }
.nav-mega-name--brand .nav-mega-logo { margin: 0 0 -0.071em; }
.nav-mega-name--brand .nav-mega-logo--enzo { margin: 0 0 0.17em; }
.nav-mega-name--brand .nav-mega-logo--axon { margin: 0 0 -0.065em; }
.nav-mega-logo--axon { height: 1.35em; }
.nav-mega-icon--axon img { width: 30px; height: auto; display: block; }
.nav-mega-pre { line-height: 1; }
.nav-mega-by { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; line-height: 1; }
.nav-mega-icon--tmrw img { width: 26px; height: auto; display: block; }

/* ---------- 19. Mega menu -------------------------------------------------
   The panels shipped one grey plate and one grey glyph for every entry, and
   nine of the thirty-one glyphs were duplicates, so two entries three columns
   apart could look identical. Every entry now carries its own drawn glyph and
   its own hue from the brand set. The hue lives on the row as a pair of
   tokens, so the plate wash, the glyph, the label and the row hover all read
   from one source, and the glyph always takes the deepened variant, per the
   Legible Hue Rule. The plate scale-and-tilt is the menu's one authored
   moment, borrowed from the feature-card icon plate.                       */

.navbar .nav-mega {
  width: min(1180px, calc(100vw - 2.5rem)) !important;
  padding: 1.6rem;
  border-radius: 20px;
  transition: opacity 200ms ease, visibility 200ms ease,
              transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.navbar .nav-mega-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 10px; }
.navbar .nav-mega:has(a[data-page="enzo"]) { width: min(740px, calc(100vw - 2.5rem)) !important; }
.navbar .nav-mega:has(a[data-page="enzo"]) .nav-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.navbar .nav-mega:has(a[data-page="blog"]) { width: min(960px, calc(100vw - 2.5rem)) !important; }
.navbar .nav-mega:has(a[data-page="blog"]) .nav-mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.navbar .nav-mega-item {
  --nm: 228, 61, 48;
  --nm-ink: #c8401f;
  gap: 15px;
  padding: 13px 14px;
  border-radius: 16px;
  transition: background 180ms ease, transform 180ms ease;
}
.navbar .nav-mega-item:hover { background: rgba(var(--nm), 0.06); }
.navbar .nav-mega-item:hover .nav-mega-name,
.navbar .nav-mega-item:hover .nav-mega-pre { color: var(--nm-ink); }
.navbar .nav-mega-icon {
  width: 50px; height: 50px; border-radius: 15px; flex-shrink: 0;
  background: rgba(var(--nm), 0.11);
  color: var(--nm-ink);
  display: flex; align-items: center; justify-content: center;
  transition: background 180ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.navbar .nav-mega-item:hover .nav-mega-icon { background: rgba(var(--nm), 0.19); transform: scale(1.07) rotate(-3deg); }
.navbar .nav-mega-icon svg,
.navbar .nav-mega-item:hover .nav-mega-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; }
.navbar .nav-mega-name { font-size: 15.5px; line-height: 1.3; margin-bottom: 3px; }
.navbar .nav-mega-desc { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.navbar .nav-mega-by, .navbar .nav-mega-pre { font-size: 13.3px; }
.navbar .nav-mega-icon--tmrw img { width: 32px; }
.navbar .nav-mega-icon--axon img { width: 34px; }
.navbar .nav-mega-icon--enzo img { width: 36px; }
@media (prefers-reduced-motion: reduce) {
  .navbar .nav-mega-item:hover .nav-mega-icon { transform: none; }
}

.navbar .nav-mega-item[data-page="performance-management"] { --nm: 228, 61, 48; --nm-ink: #c8401f; }
.navbar .nav-mega-item[data-page="talent-development"] { --nm: 244, 178, 35; --nm-ink: #8a6508; }
.navbar .nav-mega-item[data-page="employee-engagement"] { --nm: 186, 123, 174; --nm-ink: #8a4f80; }
.navbar .nav-mega-item[data-page="people-analytics"] { --nm: 0, 100, 191; --nm-ink: #0064bf; }
.navbar .nav-mega-item[data-page="employee-wellbeing"] { --nm: 44, 153, 66; --nm-ink: #217a33; }
.navbar .nav-mega-item[data-page="strategic-workforce-planning"] { --nm: 44, 155, 187; --nm-ink: #1b6f88; }
.navbar .nav-mega-item[data-page="core-hr"] { --nm: 228, 61, 48; --nm-ink: #c8401f; }
.navbar .nav-mega-item[data-page="tmrw"] { --nm: 244, 178, 35; --nm-ink: #8a6508; }
.navbar .nav-mega-item[data-page="competency-framework"] { --nm: 0, 100, 191; --nm-ink: #0064bf; }
.navbar .nav-mega-item[data-page="skills-assessments"] { --nm: 44, 155, 187; --nm-ink: #1b6f88; }
.navbar .nav-mega-item[data-page="enterprise-performance-management-office"] { --nm: 228, 61, 48; --nm-ink: #c8401f; }
.navbar .nav-mega-item[data-page="strategic-performance-management-office"] { --nm: 244, 178, 35; --nm-ink: #8a6508; }
.navbar .nav-mega-item[data-page="internal-mobility"] { --nm: 44, 153, 66; --nm-ink: #217a33; }
.navbar .nav-mega-item[data-page="succession-planning"] { --nm: 186, 123, 174; --nm-ink: #8a4f80; }
.navbar .nav-mega-item[data-page="workforce-planning"] { --nm: 44, 155, 187; --nm-ink: #1b6f88; }
.navbar .nav-mega-item[data-page="data-intelligence-assistant"] { --nm: 0, 100, 191; --nm-ink: #0064bf; }
.navbar .nav-mega-item[data-page="workforce-analytics"] { --nm: 228, 61, 48; --nm-ink: #c8401f; }
.navbar .nav-mega-item[data-page="employee-retention"] { --nm: 44, 153, 66; --nm-ink: #217a33; }
.navbar .nav-mega-item[data-page="learning-roi"] { --nm: 244, 178, 35; --nm-ink: #8a6508; }
.navbar .nav-mega-item[data-page="blog"] { --nm: 0, 100, 191; --nm-ink: #0064bf; }
.navbar .nav-mega-item[data-page="resources"] { --nm: 244, 178, 35; --nm-ink: #8a6508; }
.navbar .nav-mega-item[data-page="case-studies"] { --nm: 228, 61, 48; --nm-ink: #c8401f; }
.navbar .nav-mega-item[data-page="community"] { --nm: 44, 153, 66; --nm-ink: #217a33; }
.navbar .nav-mega-item[data-page="templates"] { --nm: 44, 155, 187; --nm-ink: #1b6f88; }
.navbar .nav-mega-item[data-page="about"] { --nm: 228, 61, 48; --nm-ink: #c8401f; }
.navbar .nav-mega-item[data-page="life-at-entomo"] { --nm: 44, 153, 66; --nm-ink: #217a33; }
.navbar .nav-mega-item[data-page="team"] { --nm: 186, 123, 174; --nm-ink: #8a4f80; }
.navbar .nav-mega-item[data-page="security"] { --nm: 0, 100, 191; --nm-ink: #0064bf; }
.navbar .nav-mega-item[data-page="news"] { --nm: 244, 178, 35; --nm-ink: #8a6508; }
.navbar .nav-mega-item[data-page="careers"] { --nm: 44, 155, 187; --nm-ink: #1b6f88; }
.navbar .nav-mega-item[data-page="partners"] { --nm: 228, 61, 48; --nm-ink: #c8401f; }
.navbar .nav-mega-item[data-page="axon"] { --nm: 0, 100, 191; --nm-ink: #0064bf; }
.navbar .nav-mega-item[data-page="enzo"] { --nm: 186, 123, 174; --nm-ink: #8a4f80; }

/* The drawer reuses the same panels, so the desktop sizing above has to stand
   down inside it. The label fix is separate: the trigger was justified
   space-between, which split "AI lab" into "AI" and "lab" at opposite ends. */
@media (max-width: 900px) {
  /* The keyboard rule .nav-dropdown-wrap:focus-within .nav-mega carries
     transform: translateX(-50%) !important at three classes, so it outranked
     the drawer's own reset: tapping a row focused the trigger and slid the
     panel half its width off the left edge. Matching that specificity fixes
     the tap, and desktop keeps its centred panel. */
  .eq-nav-open .nav-dropdown-wrap .nav-mega,
  .eq-nav-open .nav-dropdown-wrap:focus-within .nav-mega {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 0 0.75rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .eq-nav-open .nav-mega-item { padding: 0.5rem 0.25rem; }
  .eq-nav-open .nav-links > li > a { justify-content: flex-start; }
  .eq-nav-open .nav-dropdown-wrap > a::after { margin-left: auto; }
}

@media (max-width: 640px) { .brand-lockup--enzo { width: min(300px, 86%); } }


/* An inline lockup is an inline-block, so a line can break between it and the
   punctuation that follows — which left "why [axon]" on one line and
   ", not another copilot" starting with an orphaned comma on the next.
   Binding the lockup to its trailing punctuation moves the break after it. */
.eq-nowrap { white-space: nowrap; }


/* ============================================================================
   29. "axon" set as text
   Where the word appears in copy rather than as the lockup, it takes the
   lockup's own gradient. The stops are sampled from the artwork itself,
   below the sparkle overlay so they are the letter colours and not the
   flourish: pink at the s, through mauve and blue, to gold on the final a.
   ========================================================================== */
:root {
  --axon-gradient: linear-gradient(90deg, #00e8fc 0%, #09bbfa 28%, #0380f9 55%, #0453f7 78%, #0616f6 100%);
}

.axon-text {
  background-image: var(--axon-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #b8608f;              /* fallback where background-clip:text is absent */
  font-weight: 700;
  /* The gradient is painted across the word's own box, so each instance runs
     the full ramp rather than sampling a slice of a page-wide gradient. */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* Inside an already-gradient-clipped heading the nested clip would collapse;
   let the outer treatment own those. */
.eq-gradient-text .axon-text,
[style*="text-fill-color: transparent"] .axon-text {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: inherit;
}

@media (prefers-reduced-transparency: reduce) {
  .axon-text { background-image: none; -webkit-text-fill-color: #b8608f; color: #b8608f; }
}

/* --- one button shape (2026-09-16) -------------------------------------------
   Every call to action takes the pill of .btn-primary, the homepage's button.
   Deliberately excluded: the chat mock-ups' icon squares (.coach-send-btn,
   .ww-send-btn, .dia-send-btn) and their in-product buttons (.coach-action-btn),
   which illustrate the product rather than being site chrome. This sheet loads
   after each page's own <style>, so the pages need no edit. */
.nav-cta,
.btn-secondary,
.btn-ghost,
.btn-link,
.hero-cta,
.tabbar-btn,
.videos-cta a,
.life-callout .btn-life,
.newsletter-form button,
.talent-form button,
.lead-form button,
.job-cta,
.role-apply,
.form-submit,
.culture-link,
.job-hs-form input[type="submit"] {
  border-radius: 999px !important;
}
/* --- /one button shape ------------------------------------------------------ */

/* --- 18j. Site audit fixes (2026-10-19) ---------------------------------------
   Each rule answers a defect seen in the rendered audit of all pages at 1440 and 390px. */
/* an acronym span inside a styled bubble, chip or breadcrumb took that styling too (a bubble in a bubble,
   a pill in a pill, gaps around a country name) */
.cs-crumb > .keep-case, .alt-chips span .keep-case, .dia-user-q span .keep-case, .ww-user-q span .keep-case,
.coach-user-q span .keep-case, .measure-chips span .keep-case {
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
  border-radius: 0 !important; box-shadow: none !important; font: inherit; color: inherit;
}
/* consent checkbox: page input styles (flex:1, min-width:240px, padding) also hit the checkbox */
form[data-hs-form] .hs-consent input[type="checkbox"] {
  flex: none !important; width: 1rem !important; min-width: 0 !important; max-width: 1rem !important; height: 1rem !important;
  padding: 0 !important; margin: .2rem 0 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
}
/* inline subscribe forms: email and button share the first row, the consent line sits under them */
@media (min-width: 641px) {
  form[data-hs-form].talent-form button, form[data-hs-form].subscribe-form button, form[data-hs-form].newsletter-form button { order: 1; }
  form[data-hs-form].talent-form .hs-consent, form[data-hs-form].subscribe-form .hs-consent,
  form[data-hs-form].newsletter-form .hs-consent { order: 2; flex: 1 1 100%; margin: .35rem 0 0; }
  form[data-hs-form].talent-form .hs-turnstile, form[data-hs-form].subscribe-form .hs-turnstile,
  form[data-hs-form].newsletter-form .hs-turnstile { order: 3; }
}
/* consent text and policy links on the dark form bands */
/* (.lead-form is a white card on the resource pages and the hub; only the templates page, #download, sets it straight on the dark band) */
form[data-hs-form].subscribe-form .hs-consent, form[data-hs-form].newsletter-form .hs-consent, #download.lead-section form[data-hs-form].lead-form .hs-consent { color: rgba(255,255,255,.78); }
form[data-hs-form].subscribe-form .hs-consent a, form[data-hs-form].newsletter-form .hs-consent a, #download.lead-section form[data-hs-form].lead-form .hs-consent a { color: #fff; }
.subscribe-disclaimer a, .newsletter-note a, .lead-fineprint a { color: #9ccbff; }
/* forms in a one-column grid on phones: let the column shrink below its widest select option */
.apply-grid > *, .join-grid > * { min-width: 0; }
form[data-hs-form] .form-row > *, form[data-hs-form] .form-field, form[data-hs-form] .form-group { min-width: 0; }
form[data-hs-form] select, form[data-hs-form] input:not([type="checkbox"]), form[data-hs-form] textarea { max-width: 100%; }
/* home Forrester cards: the 58% text column is a desktop layout */
@media (max-width: 768px) { .proof-content { max-width: 100%; } }
/* workforce analytics chart labels stay on one line on narrow bars */
.wa-bar span { white-space: nowrap; }
@media (max-width: 480px) { .wa-bar span { font-size: 10px; } .wa-bars { margin-top: 1.7rem; } }
/* news and blog: the related-articles band had no top padding */
.pr-more { padding-top: 3.5rem; }
section.bl-more { padding-top: 3.5rem; }
/* case studies */
.cs-quote2 cite i { flex-shrink: 0; }
/* the template's own phone rules were written as ".cs .cs-…", but no page has a .cs wrapper, so they never applied */
@media (max-width: 600px) { .cs-quote2, .cs-quote2.alt { padding: 1.5rem 1.4rem 1.4rem; } .cs-quote2 .ic { position: static; margin-bottom: .6rem; } }
@media (min-width: 961px) { .cs-hero2 .cs-metrics { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.cs-visual .cs-badge { background: rgba(20, 24, 30, .55); }
.cs-showing { display: block; }
.cs-tag { display: inline-block; }
/* answer tables keep readable columns on phones and scroll sideways inside their frame */
@media (max-width: 600px) { .sol-answer table { min-width: 520px; } }
/* buttons take the page font (browsers default them to the system font; the resource-page submit showed in Arial) */
button { font-family: inherit; }