/* ============================================================
   c-header — site header
   States:
     .c-header--dark           dark-hero routes: transparent bar, white text
     .is-scrolled              set by /js/site.js past 8px → bright bar
                               (or while a [data-header-bright] section is
                               under the bar, on pages that mark them)
     html.nav-open             mobile menu open → bright bar
     :hover on --has-menu item → mega panel open (180ms close delay) + bright
   The dark→bright swap is driven by custom properties so every
   sub-element transitions with one selector.
   ============================================================ */

.c-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  animation: c-header-in 0.32s var(--ease-out-expo) both;

  /* Bright (default) palette */
  --hdr-link: var(--color-black);
  --hdr-link-hover-bg: rgba(0, 0, 0, 0.04);
  --hdr-chevron: rgba(0, 0, 0, 0.6);
  --hdr-toggle-border: rgba(235, 236, 239, 0.7);   /* border-light/70 */
  --hdr-toggle-color: var(--color-foreground);
  --hdr-toggle-hover-bg: rgba(58, 62, 75, 0.04);   /* foreground/4% */
  --hdr-logo-filter: none;
  --hdr-bar-border: rgba(235, 236, 239, 0.7);
  --hdr-bar-bg: rgba(255, 255, 255, 0.995);        /* white/99.5 (Sofia 2026-08-17: full white,
                                                       no off-white) — visually solid so
                                                       dark text scrolling under stays legible */
  --hdr-bar-shadow: none; /* no shadows site-wide (Sofia 2026-08-17) */
  --hdr-bar-blur: blur(24px);
  /* Ask-anything plate: BRIGHT over bright bars (Sofia, 2026-07-30) — a
     white card on the light bar; the dark state flips it to white glass */
  --hdr-ask-bg: var(--color-white);
  --hdr-ask-bg-hover: var(--color-white);
  --hdr-ask-border: var(--color-border-light);
  --hdr-ask-border-hover: rgba(0, 106, 255, 0.4);
}

@keyframes c-header-in {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dark-hero start state: applies only while none of the "bright"
   conditions hold (scrolled / mega menu open / mobile nav open). */
html:not(.nav-open)
  .c-header--dark:not(.is-scrolled):not(:has(.c-header__item--has-menu:hover, .c-header__mega:hover)) {
  --hdr-link: var(--color-white);
  --hdr-link-hover-bg: rgba(255, 255, 255, 0.08);
  --hdr-chevron: rgba(255, 255, 255, 0.7);
  --hdr-toggle-border: rgba(255, 255, 255, 0.15);
  --hdr-toggle-color: var(--color-white);
  --hdr-toggle-hover-bg: rgba(255, 255, 255, 0.10);
  --hdr-logo-filter: brightness(0) invert(1);
  --hdr-bar-border: transparent;
  --hdr-bar-bg: transparent;
  --hdr-bar-shadow: none;
  --hdr-bar-blur: none;
  --hdr-ask-bg: rgba(255, 255, 255, 0.1);
  --hdr-ask-bg-hover: rgba(255, 255, 255, 0.16);
  --hdr-ask-border: rgba(255, 255, 255, 0.4);
  --hdr-ask-border-hover: rgba(255, 255, 255, 0.6);
}

/* Dark state past the top of the page (mid-page dark bands): the bar can't
   stay transparent — section content scrolls under it and overlaps the
   logo/links. Same white-text state, but on a visually solid ink bar. */
html:not(.nav-open)
  .c-header--dark.is-past-top:not(.is-scrolled):not(:has(.c-header__item--has-menu:hover, .c-header__mega:hover)) {
  --hdr-bar-bg: color-mix(in oklab, var(--color-black) 99%, transparent);
  --hdr-bar-border: rgba(255, 255, 255, 0.08);
  --hdr-bar-blur: blur(24px);
}

/* Card-hero routes: while the hero CARD itself is still under the bar,
   the bar stays transparent — the card is the backdrop, so there is
   nothing to shield the links from. Without this, the first pixel of
   scroll flips is-past-top and the bar flashes to ink between the
   framed first look and the first bright section (Nacim, 2026-07-30).
   .is-over-hero is toggled by initHeaderScroll() in /js/site.js while
   the page's first section overlaps the bar. Mid-page dark bands keep
   the ink treatment above — is-over-hero is only ever true over the
   hero. Placed after the ink rule: equal specificity, order decides. */
html:not(.nav-open)
  .c-header--card.is-over-hero:not(.is-scrolled):not(:has(.c-header__item--has-menu:hover, .c-header__mega:hover)) {
  --hdr-bar-bg: transparent;
  --hdr-bar-border: transparent;
  --hdr-bar-shadow: none;
  --hdr-bar-blur: none;
}

/* Card-hero routes (the module/capability full-screen rounded card):
   while the page sits at its top the bar rides INSIDE the card — offset
   from the viewport by the card's gutter plus breathing room, and inset
   inline so the logo clears the card's corner radius. The offset holds
   while a mega menu is open (moving the bar mid-hover shifts the links
   out from under the cursor and the menu flickers — Sofia: "the nav
   breaks a bit"); it only snaps back to the full-width top-0 bar once
   the page scrolls. Keep the 12px in sync with --hero-gutter in
   styles/pages/module.css. */
.c-header--card {
  transition: top 0.25s var(--ease-out-expo), padding 0.25s var(--ease-out-expo);
}
html:not(.nav-open)
  .c-header--card:not(.is-scrolled):not(.is-past-top) {
  top: calc(12px + 6px);
  padding-inline: calc(12px + 16px);
}
/* While the bar rides inside the card, the bright surface it shows on
   hover (bar + open mega panel) runs FULL-BLEED — side to side AND up to
   the viewport's top edge (Sofia, 2026-07-28 ×2: the inset floating block
   read wonky, then "I shouldn't see this space above the main nav").
   The bar's BOX is always full-bleed in this state (invisible while the
   bar is transparent) and the links stay seated via matching padding, so
   nothing moves on hover — ROUND 11's rule stands: never move the bar
   content mid-hover. The mega panel stretches to the same edges. */
html:not(.nav-open)
  .c-header--card:not(.is-scrolled):not(.is-past-top) .c-header__bar {
  margin-top: calc(-1 * (12px + 6px));
  padding-top: calc(12px + 6px);
  margin-inline: calc(-1 * (12px + 16px));
  padding-inline: calc(12px + 16px);
}
/* (the mega panel needs no override: its left/right 0 resolve against the
   bar's padding box, which is already full-bleed here) */

.c-header__bar {
  position: relative;
  border-bottom: 1px solid var(--hdr-bar-border);
  background: var(--hdr-bar-bg);
  -webkit-backdrop-filter: var(--hdr-bar-blur);
  backdrop-filter: var(--hdr-bar-blur);
  box-shadow: var(--hdr-bar-shadow);
  transition:
    background-color 0.3s ease-out,
    border-color 0.3s ease-out,
    box-shadow 0.3s ease-out,
    margin 0.25s var(--ease-out-expo),
    padding 0.25s var(--ease-out-expo);
}

.c-header__inner {
  margin-inline: auto;
  display: flex;
  max-width: var(--container-large);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 20px;
}
@media (min-width: 1024px) {
  .c-header__inner { padding: 16px 24px; }
}

/* ---------- Logo ---------- */
.c-header__logo {
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.c-header__logo:hover { opacity: 0.8; }
.c-header__logo img {
  height: 28px;
  width: auto;
  filter: var(--hdr-logo-filter);
  transition: filter 0.3s ease-out;
}

/* ---------- Desktop nav ---------- */
.c-header__nav { display: none; }
@media (min-width: 1024px) {
  .c-header__nav {
    display: flex;
    align-items: center;
    gap: 2px;
  }
}

.c-header__item { display: inline-flex; }

.c-header__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-md);
  padding: 6px 14px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--hdr-link);
  transition: color 0.2s, background-color 0.2s;
}
.c-header__link:hover,
.c-header__item--has-menu:hover .c-header__link {
  background: var(--hdr-link-hover-bg);
}

.c-header__chevron {
  color: var(--hdr-chevron);
  transition: transform 0.2s ease-out, color 0.2s;
}
.c-header__item--has-menu:hover .c-header__chevron { transform: rotate(180deg); }

/* ---------- Actions group (Ask anything + demo CTA) ---------- */
.c-header__actions {
  display: flex;
  align-items: center;
}

/* ---------- Ask anything (glass button beside the CTA) ----------
   Sofia, 2026-07-30 round 3: white stroke + greyish transparent
   glassmorph plate, sized exactly like the demo CTA. The glass tint and
   stroke ride --hdr-link so the same recipe reads white-glass on dark
   bars and ink-glass on bright ones; the halo blends blue → the bar's
   link color so it never sinks into the plate. The 1px border trades
   against the CTA's padding (7/15 vs 8/16) to keep both buttons the
   same rendered size. */
.c-header__ask { display: none; }
@media (min-width: 1024px) {
  .c-header__ask {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--hdr-ask-border);
    background: var(--hdr-ask-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    /* padding gives a >=24px tall tap target (WCAG 2.5.8) */
    padding: 7px 15px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--hdr-link);
    white-space: nowrap;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  }
  .c-header__ask:hover {
    background: var(--hdr-ask-bg-hover);
    border-color: var(--hdr-ask-border-hover);
  }
  .c-header__ask-halo {
    width: 15px;
    height: 15px;
    background-color: transparent;
    background-image: linear-gradient(to bottom right, var(--color-blue-500) 15%, var(--hdr-link) 95%);
  }
}

/* ---------- Desktop CTA ---------- */
.c-header__cta { display: none; }
@media (min-width: 1024px) {
  .c-header__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius-sm);
    /* solid blue at rest; hover slides a blue → ink gradient through the
       plate (background-position, one buttery eased move). The flat
       background-color under the image is the a11y-tool fallback — static
       contrast checkers can't resolve gradient images (2026-07-29 audit). */
    background-color: var(--color-blue);
    background-image: linear-gradient(115deg, var(--color-blue) 0%, var(--color-blue) 48%, var(--color-black) 100%);
    background-size: 230% 100%;
    background-position: 0% 0;
    padding: 8px 16px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-white);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0);
    transition: background-position 0.5s var(--ease-out-expo), box-shadow 0.3s ease-out;
  }
  /* hairline white ring on hover: keeps the button's edge crisp while the
     plate darkens toward ink over dark grounds (Sofia, 2026-07-22) */
  .c-header__cta:hover {
    background-position: 100% 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  }
  .c-header__cta-icon { transition: transform 0.2s; }
  .c-header__cta:hover .c-header__cta-icon { transform: translate(2px, -2px); }
}

/* ---------- Mobile toggle ---------- */
.c-header__toggle {
  display: inline-flex;
  height: 36px;
  width: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hdr-toggle-border);
  color: var(--hdr-toggle-color);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.c-header__toggle:hover { background: var(--hdr-toggle-hover-bg); }
@media (min-width: 1024px) {
  .c-header__toggle { display: none; }
}
.c-header__icon-close { display: none; }
.c-header__toggle.is-open .c-header__icon-menu { display: none; }
.c-header__toggle.is-open .c-header__icon-close { display: block; }

/* ---------- Mega menu (desktop, pure CSS hover) ---------- */
.c-header__mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
}
@media (min-width: 1024px) {
  .c-header__mega {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    border-top: 1px solid rgba(235, 236, 239, 0.7);
    /* visually solid — page content ghosting through compromises legibility */
    background: rgba(249, 249, 249, 0.995);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: none;
    /* Close: 180ms grace delay (mirrors scheduleClose), then fade out.
       visibility flips only after the fade so the panel stays hoverable
       while the pointer travels from the nav link into the panel. */
    transition:
      opacity 0.2s ease 0.18s,
      transform 0.2s ease 0.18s,
      visibility 0s linear 0.38s;
  }
  .c-header__item--has-menu:hover .c-header__mega,
  .c-header__mega:hover {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 0.32s var(--ease-out-expo),
      transform 0.32s var(--ease-out-expo),
      visibility 0s;
  }
}

.c-header__mega-inner {
  margin-inline: auto;
  display: grid;
  max-width: var(--container-large);
  padding: 40px 32px;
  grid-template-columns: 1.7fr 1fr 1.05fr;
}
/* Two groups side by side (Solutions: Use cases · Industries): even
   halves, so the divider lands dead center and both two-column link
   blocks breathe the same (2026-07-28 nav-IA spacing pass — the legacy
   1.7fr/1fr split read lopsided). :where() keeps the :has() check from
   out-ranking the --feature/--indent templates below; each group holds
   ONE track (span2 was sized for the legacy 3-track template). */
.c-header__mega:not(.c-header__mega--feature):not(.c-header__mega--indent)
  .c-header__mega-inner:where(:has(.c-header__mega-col:nth-child(2)):not(:has(.c-header__mega-col:nth-child(3)))) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.c-header__mega:not(.c-header__mega--feature):not(.c-header__mega--indent)
  .c-header__mega-inner:where(:has(.c-header__mega-col:nth-child(2)):not(:has(.c-header__mega-col:nth-child(3))))
  .c-header__mega-col--span2 {
  grid-column: auto;
}
/* Three single-list columns (Resources): even tracks — the 1.7fr lead
   column was sized for a two-column link block it no longer has. */
.c-header__mega-inner:has(.c-header__mega-col:nth-child(3)) {
  grid-template-columns: repeat(3, 1fr);
}
/* Four single-list columns (Resources with the Company group) */
.c-header__mega-inner:has(.c-header__mega-col:nth-child(4)) {
  grid-template-columns: repeat(4, 1fr);
}

.c-header__mega-col + .c-header__mega-col {
  border-left: 1px solid var(--color-border-light);
  padding-left: 36px;
}
/* Feature menus whose columns stack two groups (Resources): the columns
   adopt the inner grid's two rows via subgrid so the SECOND groups share
   one line across columns — For developers | For partners on top,
   Company | Others aligned beneath (Sofia, 2026-08-04). */
.c-header__mega--feature .c-header__mega-inner:has(.c-header__mega-group + .c-header__mega-group) {
  grid-template-rows: auto auto;
}
.c-header__mega--feature .c-header__mega-inner:has(.c-header__mega-group + .c-header__mega-group) .c-header__mega-featurecol,
.c-header__mega--feature .c-header__mega-inner:has(.c-header__mega-group + .c-header__mega-group) .c-header__mega-col {
  /* every column gets a definite row — otherwise the grid placement
     algorithm seats the row-locked subgrid columns before the auto ones
     and the DOM order stops matching the visual order */
  grid-row: 1 / -1;
}
.c-header__mega--feature .c-header__mega-col:has(.c-header__mega-group + .c-header__mega-group) {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  align-items: start;
}
.c-header__mega-col:not(:last-child) { padding-right: 36px; }
.c-header__mega-col--span2 { grid-column: span 2; }

/* Small single-group menus (--indent, e.g. Products / Company): content
   starts under the nav links instead of the container's left edge —
   --hdr-nav-indent is measured by /js/site.js from the first nav label's
   x-position. Link columns get a bounded width so the pair stays a
   compact block instead of spreading across the freed panel width. */
.c-header__mega--indent .c-header__mega-inner {
  display: block;
  padding-left: var(--hdr-nav-indent, 32px);
}
.c-header__mega--feature .c-header__mega-links--three {
  /* Products' ten rows across three tracks (Sofia, 2026-08-04: "use three
     lines … instead of making it larger vertically") — same cap logic as
     the two-track block below, one step tighter so the trio fits the
     container beside the feature card */
  grid-template-columns: repeat(3, minmax(220px, 340px));
  column-gap: 36px;
}
.c-header__mega--indent .c-header__mega-links--two,
.c-header__mega--feature .c-header__mega-links--two {
  /* 300px caps left a third of the panel white right of the links
     (2026-07-28 spacing pass) — the pair now grows toward the container
     edge the way the Solutions halves do, capped so rows never float
     apart from their icons. */
  grid-template-columns: repeat(2, minmax(240px, 380px));
  column-gap: 40px;
}

/* Featured menus (--feature, e.g. Platform / Products): the area left of the
   nav indent — empty in plain --indent menus — hosts a visual feature card.
   Column math keeps the link columns starting exactly at --hdr-nav-indent:
   32px inner padding + card column + 52px gap = indent. */
.c-header__mega--feature .c-header__mega-inner {
  display: grid;
  grid-template-columns:
    minmax(230px, calc(var(--hdr-nav-indent, 400px) - 84px))
    minmax(0, max-content);
  column-gap: 52px;
  align-items: start;
}
/* Feature menu carrying a second link group (Products: All products +
   Featured modules): a third track joins the card + lead columns, and the
   two-col link block tightens so the trio fits from the 1024px nav on.
   Declared after the :nth-child(3) grid rules above so it wins for
   feature menus. */
.c-header__mega--feature .c-header__mega-inner:has(.c-header__mega-col:nth-child(3)) {
  grid-template-columns:
    minmax(230px, calc(var(--hdr-nav-indent, 400px) - 84px))
    minmax(0, max-content)
    minmax(0, max-content);
}
.c-header__mega--feature .c-header__mega-inner:has(.c-header__mega-col:nth-child(3)) .c-header__mega-links--two {
  grid-template-columns: repeat(2, minmax(210px, 280px));
}
/* Feature menu carrying three link groups (Resources, 2026-08-03 IA): the
   card + three even tracks — declared after the two-group rules so it wins. */
.c-header__mega--feature .c-header__mega-inner:has(.c-header__mega-col:nth-child(4)) {
  grid-template-columns:
    minmax(230px, calc(var(--hdr-nav-indent, 400px) - 84px))
    repeat(3, minmax(0, 1fr));
  /* no column-gap override: the base 52px keeps the first link column
     starting exactly at --hdr-nav-indent like every other feature menu
     (Sofia, 2026-08-04: "be consistent … same first column") */
}

.c-header__mega-feature {
  margin-top: 20px; /* sits below the grey label; label-less cards (2026-08-03 IA) top-align with the column headings instead */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(235, 236, 239, 0.7);
  background: var(--color-white);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.c-header__mega-feature:hover {
  /* no stroke on hover — the glow alone carries it (Sofia, 2026-08-07:
     "remove the stroke, just keep the glow behind it"); the ~2px ring
     from 2026-08-06 is retired */
  box-shadow: none;
}
.c-header__mega-featurecol > .c-header__mega-feature:first-child { margin-top: 0; }

.c-header__mega-feature-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 2.75 / 1;
  /* canonical blue→black (base.css .grad-brand recipe) behind the cover:
     if the image is missing or still loading, the box reads as an
     on-brand panel instead of the browser's broken-image glyph — site.js
     initHeaderFeatureFallback() hides the failed <img> */
  background-image: linear-gradient(105deg, var(--color-blue) 12%, var(--color-black) 100%);
}
.c-header__mega-feature-media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: var(--feature-pos, center);
  transition: transform 0.5s var(--ease-out-expo);
}
.c-header__mega-feature:hover .c-header__mega-feature-media img {
  transform: scale(1.04);
}

.c-header__mega-feature-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 16px 15px;
}
.c-header__mega-feature-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-foreground);
  transition: color 0.2s;
}
.c-header__mega-feature:hover .c-header__mega-feature-title {
  color: var(--color-blue);
}
.c-header__mega-feature-arrow {
  flex-shrink: 0;
  color: rgba(110, 117, 140, 0.8);
  transition: transform 0.2s, color 0.2s;
}
.c-header__mega-feature:hover .c-header__mega-feature-arrow {
  transform: translate(1px, -1px);
  color: var(--color-blue);
}
.c-header__mega-feature-sub {
  font-size: var(--fs-xs);
  line-height: 1.375;
  color: var(--color-grey-on-white);
  text-wrap: balance; /* spans miss base.css's p-only pretty rule — no widows */
}

.c-header__mega-heading {
  font-size: var(--fs-xs);
  line-height: 16px;
  font-weight: 500;
  color: rgba(110, 117, 140, 0.8); /* grey-on-white/80 */
}
/* stacked groups inside one column (Solutions trust pillars): a linked
   heading, groups separated vertically */
.c-header__mega-group + .c-header__mega-group { margin-top: 22px; }
a.c-header__mega-heading--link {
  /* block, not inline-block: on a line box the anchor picks up the
     parent's 19px strut and sits ~5px below the feature card's label
     (Sofia, 2026-08-04: "align the subtitle height on the featured and
     the pages"); fit-content keeps the hover target on the text */
  display: block;
  width: fit-content;
  text-decoration: none;
  transition: color 0.2s;
}
a.c-header__mega-heading--link:hover { color: var(--color-blue); }
.c-header__mega-links {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 24px;
}
.c-header__mega-links--sub { row-gap: 16px; }
/* title-only lists (no taglines — Technology / Platform / Resources):
   the row pitch is Solutions' 8px everywhere (Sofia 2026-08-07 unifying
   pass); the hover plate keeps the trimmed edges so plates don't stack */
.c-header__mega-links:not(.c-header__mega-links--sub) { row-gap: 14px; margin-top: 14px; }
.c-header__mega-links:not(.c-header__mega-links--sub) .c-header__mega-link {
  padding-block: 6px;
  margin-block: -6px;
}
.c-header__mega-links--two { grid-template-columns: 1fr 1fr; }
.c-header__mega-links--three { grid-template-columns: repeat(3, 1fr); }

/* umbrella lead row (All products: Incode Platform): one full-width link
   between the heading and the grid, set apart by a hairline below it */
.c-header__mega-lead {
  margin-top: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-light);
}
.c-header__mega-lead + .c-header__mega-links { margin-top: 16px; }

.c-header__mega-link {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--radius-md);
  padding: 8px;
  margin: -8px;
  transition: background-color 0.2s;
}
.c-header__mega-link--sub { align-items: flex-start; }
.c-header__mega-link:hover { background: rgba(58, 62, 75, 0.025); }

.c-header__mega-iconbox {
  display: inline-flex;
  height: 36px;
  width: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid rgba(235, 236, 239, 0.7);
  background: rgba(235, 236, 239, 0.7); /* off-white/70 */
  color: rgba(58, 62, 75, 0.7);         /* foreground/70 */
  transition: border-color 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.c-header__mega-link:hover .c-header__mega-iconbox {
  border-color: rgba(0, 106, 255, 0.3);
  background: rgba(0, 106, 255, 0.08);
  color: var(--color-blue);
  box-shadow: none;
}

.c-header__menu-icon { width: 16px; height: 16px; }
/* Self-colored brand emblem (the Incode halo on the Incode Platform lead):
   the black→blue brand gradient paints through the ds-icon mask in every
   state instead of the currentColor tint. */
.c-header__menu-icon--emblem {
  background-color: transparent;
  background-image: linear-gradient(to top right, var(--color-black), var(--color-blue-500));
}

.c-header__mega-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.c-header__mega-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-foreground);
  transition: color 0.2s;
}
.c-header__mega-link:hover .c-header__mega-title { color: var(--color-blue); }
.c-header__mega-sub {
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.375;
  color: var(--color-grey-on-white);
}

/* card tiles (`cards: true` groups — the Solutions trust pillars):
   2-up grid, each card led by a visual panel (tinted gradient + ring
   motif + large glyph) instead of the 36px icon row */
.c-header__mega-links--cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
}
.c-header__mega-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-md);
  padding: 8px;
  margin: -8px;
  transition: background-color 0.2s;
}
.c-header__mega-card:hover { background: rgba(58, 62, 75, 0.025); }
.c-header__mega-card-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid rgba(235, 236, 239, 0.7);
  border-radius: var(--radius-md);
  background:
    radial-gradient(130% 150% at 16% -10%, color-mix(in oklab, var(--color-blue-100) 75%, transparent), transparent 72%),
    var(--color-grey-50);
  transition: border-color 0.2s;
}
/* concentric ring motif behind the glyph (radii sized to the 56px panel) */
.c-header__mega-card-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 20px,
      color-mix(in oklab, var(--color-blue) 12%, transparent) 20px 21px,
      transparent 21px 32px,
      color-mix(in oklab, var(--color-blue) 7%, transparent) 32px 33px,
      transparent 33px 44px,
      color-mix(in oklab, var(--color-blue) 4%, transparent) 44px 45px,
      transparent 45px);
}
.c-header__mega-card-glyph {
  position: relative;
  width: 24px;
  height: 24px;
  color: var(--color-blue);
  transition: transform 0.2s;
}
.c-header__mega-card:hover .c-header__mega-card-visual { border-color: var(--color-blue-200); }
.c-header__mega-card:hover .c-header__mega-card-glyph { transform: scale(1.08); }
.c-header__mega-card:hover .c-header__mega-title { color: var(--color-blue); }
.c-header__mega-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 9999px;
  background: var(--color-blue);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  line-height: var(--leading-snug);
  color: var(--color-white);
  vertical-align: 2px;
}

/* ---------- Sections variant (Solutions; 2026-08-04 round-4 IA) ----------
   Two labelled zones (Use cases · Industries) of flat iconbox rows —
   content-sized columns (use cases 6+5, industries 6+5+5), so every
   label holds one line at the 1440 container. */
.c-header__mega--sections .c-header__mega-inner {
  display: flex;
  align-items: flex-start;
  max-height: calc(100vh - 76px); /* short viewports: panel scrolls, never clips */
  overflow-y: auto;
}
.c-header__mega-section {
  flex: 0 1 auto; /* zones size to their content — tracks are sized for one-line labels */
  min-width: 0;
}
.c-header__mega-section + .c-header__mega-section {
  /* wider gutter between the zones (Sofia, 2026-08-04: "add a separation
     … by moving industries a bit more to the right") */
  margin-left: 48px;
  border-left: 1px solid var(--color-border-light);
  padding-left: 48px;
}
.c-header__mega-seccols {
  margin-top: 20px;
  display: grid;
  /* max-content tracks: each column is exactly as wide as its longest
     label, so every name holds one line at the 1440 container (Sofia,
     2026-08-03 round 3); under pressure minmax lets them shrink and the
     labels wrap balanced instead of overflowing. */
  grid-template-columns: repeat(var(--sec-cols, 1), minmax(0, max-content));
  column-gap: 32px;
  align-items: start;
}
/* Flat rows (2026-08-04 round 4: the sub-groups are gone — every entry
   is an iconbox + label row). Rows keep the group markup, so the gap
   below is the list pitch; the padding/negative-margin pair gives each
   row the standard menu hover plate without shifting the flush grid. */
.c-header__mega--sections .c-header__mega-group + .c-header__mega-group { margin-top: 8px; }
.c-header__mega-grouptitle {
  display: flex;
  align-items: center;
  /* unified nav rows (Sofia 2026-08-07): the standard 36px iconbox +
     12px gap everywhere — the 28px --sm variant is retired */
  gap: 12px;
  padding: 6px 8px;
  margin: -6px -8px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-foreground);
}
.c-header__mega-grouptitle-text { text-wrap: balance; }
a.c-header__mega-grouptitle { transition: color 0.2s, background-color 0.2s; }
a.c-header__mega-grouptitle:hover {
  color: var(--color-blue);
  background: rgba(58, 62, 75, 0.025);
}
a.c-header__mega-grouptitle:hover .c-header__mega-iconbox {
  border-color: rgba(0, 106, 255, 0.3);
  background: rgba(0, 106, 255, 0.08);
  color: var(--color-blue);
  box-shadow: none;
}
.c-header__mega-plainlinks {
  margin-top: 12px;
  padding-left: 38px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.c-header__mega-plainlink {
  font-size: 13px; /* between --fs-xs and --fs-sm — 57 links need the denser step, and it sharpens the title/child hierarchy */
  line-height: 1.4;
  color: var(--color-grey-on-white);
  text-wrap: balance; /* two-line labels split evenly — no widow word */
  transition: color 0.2s;
}
.c-header__mega-plainlink:hover { color: var(--color-blue); }
/* ---------- Mobile menu ([data-nav], .is-open via /js/site.js) ---------- */
.c-header__mobile {
  display: none;
  overflow: hidden;
  border-top: 1px solid rgba(235, 236, 239, 0.7);
  background: rgba(249, 249, 249, 0.95);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  padding: 0 16px 20px;
  max-height: calc(100dvh - 65px);
  overflow-y: auto;
  /* scrolling the sheet must never scroll the page behind it */
  overscroll-behavior: contain;
}
.c-header__mobile.is-open {
  display: block;
  animation: fadeIn 0.25s var(--ease-out-expo);
}
@media (min-width: 1024px) {
  .c-header__mobile,
  .c-header__mobile.is-open { display: none; }
}

.c-header__mobile-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
}

.c-header__m-link,
.c-header__m-summary {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-black);
  transition: background-color 0.2s;
}
.c-header__m-link:hover,
.c-header__m-summary:hover { background: rgba(0, 0, 0, 0.04); }

.c-header__m-summary {
  cursor: pointer;
  list-style: none;
}
.c-header__m-summary::-webkit-details-marker { display: none; }

.c-header__m-chevron {
  color: rgba(0, 0, 0, 0.6);
  transition: transform 0.2s;
}
.c-header__m-item[open] > .c-header__m-summary .c-header__m-chevron {
  transform: rotate(180deg);
}
.c-header__m-item[open] > .c-header__m-summary { background: rgba(0, 0, 0, 0.04); }

.c-header__m-sub {
  margin: 4px 0 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-left: 1px solid var(--color-border-light);
  padding-left: 16px;
}
/* details snaps open; easing the content in makes the accordion read
   smooth on touch (Sofia, 2026-08-07 mobile pass) */
.c-header__m-item[open] .c-header__m-sub {
  animation: m-sub-in 0.3s var(--ease-out-expo);
}
@keyframes m-sub-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.c-header__m-group { display: flex; flex-direction: column; }

.c-header__m-heading {
  padding: 4px 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(110, 117, 140, 0.8);
}

.c-header__m-links { display: flex; flex-direction: column; }

/* sectioned menus (Solutions): zone label keeps the grey heading look
   (linked to its hub page), group titles are the tappable parents, plain
   child links indent one step under them */
.c-header__m-section { display: flex; flex-direction: column; }
.c-header__m-section + .c-header__m-section { margin-top: 16px; }
a.c-header__m-heading--link { transition: color 0.2s; }
a.c-header__m-heading--link:hover { color: var(--color-blue); }
.c-header__m-section .c-header__m-group { margin-top: 8px; }
.c-header__m-grouptitle {
  display: flex;
  align-items: center;
  gap: 12px;
  /* same row box as .c-header__m-mega-link so every menu's rows share
     one left edge and one pitch (Sofia, 2026-08-07 mobile pass) */
  padding: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-black);
}
a.c-header__m-grouptitle { border-radius: var(--radius-md); transition: background-color 0.2s; }
a.c-header__m-grouptitle:hover { background: rgba(0, 0, 0, 0.04); }
/* children hang under the title text (4px pad + 28px box + 12px gap) */
.c-header__m-links--plain { margin-left: 48px; }
.c-header__m-mega-link--plain { padding: 6px 8px; color: var(--color-foreground); }

.c-header__m-mega-link {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--radius-md);
  padding: 8px;
  font-size: var(--fs-sm);
  color: var(--color-black);
  transition: background-color 0.2s;
}
.c-header__m-mega-link:hover { background: rgba(0, 0, 0, 0.04); }

.c-header__m-iconbox {
  display: inline-flex;
  height: 28px;
  width: 28px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(235, 236, 239, 0.7);
  background: rgba(235, 236, 239, 0.7);
  color: rgba(58, 62, 75, 0.7);
}

.c-header__m-cta { margin-top: 12px; }
.c-header__m-ask {
  margin-top: 16px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-foreground);
}
.c-header__m-ask .c-header__ask-halo {
  width: 15px;
  height: 15px;
  background-color: transparent;
  background-image: linear-gradient(to bottom right, var(--color-blue-500) 15%, var(--color-black) 95%);
}
.c-header__m-ask .c-header__ask-label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
}

/* Reduced motion: no entrance slide */
@media (prefers-reduced-motion: reduce) {
  .c-header { animation: none; }
}