/* ─────────────────────────────────────────────────────────────────────────────
   SafeMinds Design System — V6
   BCG-direction editorial system. All-sans, monochrome + one accent,
   display-scale typography, ruthless whitespace.

   Class namespace: .v6-* (will be promoted to canonical at archive time)
   Loads after V4 (tokens.css, base.css, components.css, hero-variants.css)
   so its rules win where selectors collide.
   ───────────────────────────────────────────────────────────────────────────── */


/* ─── Tokens ─────────────────────────────────────────────────────────────── */

.v6 {
  /* Type stack — system fonts only, no web-font loading */
  --v6-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Type scale — display-led */
  --v6-display:        clamp(2.75rem,   6.5vw,  6rem);      /* section H2: 44 → 96 */
  --v6-numeral-size:   clamp(5rem,      14vw,   13rem);     /* big numerals: 80 → 208 */
  --v6-quote-size:     clamp(1.5rem,    2.5vw,  2.25rem);   /* pull quote: 24 → 36 */
  --v6-lead-size:      clamp(1.1875rem, 1.4vw,  1.5rem);    /* body lead: 19 → 24 */
  --v6-body-size:      clamp(1.0625rem, 1.05vw, 1.1875rem); /* body: 17 → 19 */
  --v6-meta-size:      0.8125rem;                            /* eyebrow: 13 */

  /* Spacing — generous editorial */
  --v6-block-gap:      clamp(4rem,  9vw,  9rem);   /* between blocks within a section */
  --v6-section-pad:    clamp(6rem,  16vh, 13rem);  /* between sections */
  --v6-gutter:         clamp(1.5rem, 4vw, 3rem);   /* container side padding */

  /* Surface */
  font-family: var(--v6-font);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ─── Layout primitives ──────────────────────────────────────────────────── */

.v6-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--v6-gutter);
  padding-right: var(--v6-gutter);
}


/* ─── Meta strip ─────────────────────────────────────────────────────────── */
/* Hairline rule + uppercase label. Used as section eyebrows and figure labels. */

.v6-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  font-family: var(--v6-font);
  font-size: var(--v6-meta-size);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--smoke);
}
/* The eyebrow rule is the site's smallest coral moment. It echoes the dot
   on the "i" in the wordmark: one mark of colour, repeated as punctuation. */
.v6-meta-rule {
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--coral);
  flex: none;
}


/* ─── Display headline ───────────────────────────────────────────────────── */
/* Section H2: large, light weight, tight letter-spacing, narrow measure. */

.v6-display {
  font-family: var(--v6-font);
  font-size: var(--v6-display);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
  max-width: 16ch;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}


/* ─── Editorial split ────────────────────────────────────────────────────── */
/* Text + image, contained (no bleed). Reverse modifier flips columns. */

.v6-split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-top: var(--v6-block-gap);
  padding-right: 0;
}
.v6-split--reverse .v6-split-text   { order: 2; }
.v6-split--reverse .v6-split-visual { order: 1; }
.v6-split-text {
  max-width: 32rem;
  padding-bottom: clamp(1rem, 2vw, 2.5rem);
}
.v6-split-text p {
  margin: 0 0 1.25em;
}
.v6-split-text p:last-child {
  margin-bottom: 0;
}
.v6-lead {
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.v6-split-text p:not(.v6-lead) {
  font-size: var(--v6-body-size);
  color: var(--smoke);
  line-height: 1.6;
}
.v6-split-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}


/* ─── Product screenshot (.v6-shot) ──────────────────────────────────────── */
/* The rules above are tuned for editorial photography: a fixed 4/3 crop with
   object-fit: cover, and 3/4 portrait on mobile. A dashboard capture put
   through that loses most of its frame — a 2.28:1 screenshot renders 58% of
   its width, which cut the wordmark off one side and a whole panel off the
   other. Screenshots are not photographs: they keep their own ratio and sit
   inside a hairline so they read as an interface, not a picture. */

.v6-shot,
.v6-split-visual img.v6-shot,
.v6-method-visual img.v6-shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: fill;
  border: 1px solid rgba(var(--navy-rgb), 0.12);
  border-radius: 8px;
  background: var(--white);
}

/* Dashboards are wide. Give the visual column the extra room rather than
   shrinking the capture into a photo-shaped slot. */
.v6-split:has(.v6-shot) {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
}

@media (max-width: 768px) {
  /* :has() carries the specificity of its argument, so the two-column rule
     above outranks the plain .v6-split single-column rule in this block and
     survived into mobile, rendering the capture 181px wide. Reset it. */
  .v6-split:has(.v6-shot) {
    grid-template-columns: 1fr;
  }
  /* Keep the natural ratio, and do not bleed to the screen edge — a bordered
     UI frame running off the page reads as a rendering fault. */
  .v6-split-visual img.v6-shot {
    aspect-ratio: auto;
  }
  .v6-split-visual:has(.v6-shot) {
    margin-left: 0;
    margin-right: 0;
  }
}


/* ─── Numeral moment ─────────────────────────────────────────────────────── */
/* Centred figure unit: eyebrow → numeral → caption. */

.v6-numeral-block {
  margin: var(--v6-block-gap) auto 0;
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.v6-numeral-block .v6-meta {
  justify-content: center;
}
.v6-numeral-meta {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.v6-numeral {
  font-family: var(--v6-font);
  font-size: var(--v6-numeral-size);
  font-weight: 200;
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: var(--ink);
  margin: 0;
}
.v6-numeral-unit {
  font-weight: 200;
  font-size: 0.6em;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.v6-numeral-arrow {
  font-weight: 200;
  font-size: 0.55em;
  letter-spacing: 0;
  color: var(--smoke);
  vertical-align: 0.18em;
  margin: 0 0.06em;
  display: inline-block;
}
.v6-numeral-caption {
  font-size: var(--v6-lead-size);
  font-weight: 400;
  color: var(--smoke);
  line-height: 1.4;
  letter-spacing: -0.005em;
  max-width: 36ch;
  margin: clamp(1rem, 2vw, 1.75rem) 0 0;
}


/* ─── Pull quote ─────────────────────────────────────────────────────────── */
/* Editorial blockquote with hanging quotation marks and tracked uppercase byline. */

.v6-quote {
  margin: var(--v6-block-gap) 0 0;
  max-width: 56rem;
  padding: 0;
  border: none;
}
.v6-quote p {
  font-family: var(--v6-font);
  font-size: var(--v6-quote-size);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 1.75rem;
  text-indent: -0.4em;
}
.v6-quote p::before { content: "\201C"; }
.v6-quote p::after  { content: "\201D"; }
.v6-quote footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: baseline;
  font-size: var(--v6-meta-size);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--smoke);
  font-weight: 500;
}
.v6-quote cite {
  font-style: normal;
  color: var(--ink);
}


/* ─── Text link (replaces button chrome) ─────────────────────────────────── */

.v6-link {
  margin-top: var(--v6-block-gap);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--v6-font);
  font-size: var(--v6-lead-size);
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--ink);
  transition: color 250ms ease, border-color 250ms ease;
}
.v6-link svg {
  transition: transform 250ms ease;
}
.v6-link:hover {
  color: var(--teal);
  border-bottom-color: var(--teal);
}
.v6-link:hover svg {
  transform: translateX(0.4rem);
}
.v6-link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
  border-radius: 2px;
}
.v6-link--quiet {
  color: var(--smoke);
  border-bottom-color: var(--smoke);
}


/* ─── Section: outcome ───────────────────────────────────────────────────── */

.v6-outcome {
  padding-top: var(--v6-section-pad);
  padding-bottom: var(--v6-section-pad);
}


/* ─── Section: hero ──────────────────────────────────────────────────────── */
/* Display-scale typographic moment. White background. */

.v6-hero {
  padding-top: clamp(7rem, 14vh, 11rem);
  padding-bottom: clamp(4rem, 10vh, 8rem);
}
/* Split layout (opt-in via .v6-hero--split): text left, photograph right.
   BCG editorial pattern. Without modifier class, hero stays single-column. */
.v6-hero--split .v6-container {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.v6-hero-text {
  display: flex;
  flex-direction: column;
}
.v6-hero-meta {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.v6-hero-display {
  font-family: var(--v6-font);
  font-size: clamp(2.5rem, 5.5vw, 5rem);   /* 40 → 80px */
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}
.v6-hero-lead {
  font-family: var(--v6-font);
  font-size: clamp(1.25rem, 1.6vw, 1.625rem);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--smoke);
  max-width: 36ch;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}
.v6-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.v6-hero-actions .v6-link {
  margin-top: 0;
}
/* Right column: editorial photograph (or video). Stays inside container —
   normal padding around the visual, no viewport-edge bleed. */
.v6-hero-visual {
  position: relative;
}
.v6-hero-visual img,
.v6-hero-visual video {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .v6-hero--split .v6-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .v6-hero--split .v6-hero-visual {
    order: -1;
    margin-left: calc(var(--v6-gutter) * -1);
    margin-right: calc(var(--v6-gutter) * -1);
  }
  .v6-hero--split .v6-hero-visual img {
    aspect-ratio: 16 / 10;
  }
}

/* ─── Product hero (.v6-hero--product) ───────────────────────────────────
   Dark hero with per-product accent wash + grid motif. Centerpiece is the
   animated wordmark (.v6-product-wordmark) which replaces the static H1.
   No screenshots in this hero — body sections carry the product UI. */

.v6-hero--product {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
  --product-accent: var(--aqua); /* fallback */
  --product-accent-rgb: var(--aqua-rgb);
}

/* Per-product accent variants — wash colour + accent token.
   Index teal, Interventions aqua, Risk Intelligence coral. */
.v6-hero--product-index {
  --product-accent: var(--teal);
  --product-accent-rgb: var(--teal-rgb);
}
.v6-hero--product-interventions {
  --product-accent: var(--aqua);
  --product-accent-rgb: var(--aqua-rgb);
}
.v6-hero--product-risk {
  --product-accent: var(--coral);
  --product-accent-rgb: var(--coral-rgb);
}

/* Two radial washes in the product accent + grid motif */
.v6-hero--product::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 78% 22%, rgba(var(--product-accent-rgb), 0.42) 0%, transparent 55%),
    radial-gradient(ellipse 80% 70% at 12% 88%, rgba(var(--product-accent-rgb), 0.16) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Subtle grid motif over the wash — echoes industry hero language */
.v6-hero--product::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(var(--white-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--white-rgb), 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

.v6-hero--product .v6-container {
  position: relative;
  z-index: 1;
  display: block;
}
.v6-hero--product .v6-hero-text {
  max-width: 56rem;
}

/* Text colour overrides for dark hero */
.v6-hero--product .v6-hero-display { color: var(--white); }
.v6-hero--product .v6-hero-lead    { color: rgba(var(--white-rgb), 0.78); }
.v6-hero--product .v6-meta         { color: rgba(var(--white-rgb), 0.62); }
.v6-hero--product .v6-meta-rule    { background: rgba(var(--white-rgb), 0.5); }

/* Text-link CTAs on dark */
.v6-hero--product .v6-link {
  color: var(--white);
  border-bottom-color: rgba(var(--white-rgb), 0.5);
}
.v6-hero--product .v6-link:hover {
  color: var(--product-accent);
  border-bottom-color: var(--product-accent);
}
.v6-hero--product .v6-link--quiet {
  color: rgba(var(--white-rgb), 0.65);
  border-bottom-color: rgba(var(--white-rgb), 0.3);
}
.v6-hero--product .v6-link--quiet:hover {
  color: var(--product-accent);
  border-bottom-color: var(--product-accent);
}


/* ─── Product wordmark (animated) ────────────────────────────────────────
   Replaces the V6 display H1 on product hero. System font, weight 300,
   accent underline animates in. Animation triggered by adding .is-animated
   on DOMContentLoaded. Honours prefers-reduced-motion. */

.v6-product-wordmark {
  font-family: var(--v6-font);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--white);
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  gap: 0.22em;
  font-size: clamp(2.5rem, 8vw, 6.25rem);
  margin: 0;
  max-width: 100%;
}

.v6-product-wordmark__product {
  position: relative;
  display: inline-block;
}

/* Keeps "SafeMinds" and its superscript mark tight together, so the
   parent flex gap only separates the lead from the product name. */
.v6-product-wordmark__lead {
  display: inline-flex;
  align-items: baseline;
}

.v6-product-wordmark__underline {
  position: absolute;
  left: 0;
  bottom: -0.14em;
  height: 0.045em;
  min-height: 1.5px;
  border-radius: 1px;
  width: 100%;
  background: var(--product-accent);
  transform-origin: left center;
  transform: scaleX(0);
}

.v6-product-wordmark__r {
  font-size: 0.42em;
  font-weight: 400;
  color: rgba(var(--white-rgb), 0.55);
  position: relative;
  top: -0.55em;
  margin-left: 0.06em;
  opacity: 0;
  display: inline-block;
}

.v6-product-wordmark__text {
  opacity: 0;
  transform: translateY(0.32em);
  display: inline-block;
  transition: opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.v6-product-wordmark__text--delay-1 {
  transition-delay: 0.12s;
}

.v6-product-wordmark.is-animated .v6-product-wordmark__text {
  opacity: 1;
  transform: translateY(0);
}

.v6-product-wordmark.is-animated .v6-product-wordmark__underline {
  transform: scaleX(1);
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: 0.45s;
}

.v6-product-wordmark.is-animated .v6-product-wordmark__r {
  opacity: 1;
  transition: opacity 0.4s ease-out;
  transition-delay: 1.05s;
}

@media (prefers-reduced-motion: reduce) {
  .v6-product-wordmark__text,
  .v6-product-wordmark__underline,
  .v6-product-wordmark__r {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .v6-product-wordmark.is-animated .v6-product-wordmark__underline {
    transform: scaleX(1) !important;
  }
}

/* Wordmark wraps cleanly on small screens — gap collapses to support stacking */
@media (max-width: 540px) {
  .v6-product-wordmark {
    flex-wrap: wrap;
    gap: 0 0.18em;
    line-height: 1.05;
    font-size: clamp(2rem, 9vw, 3.5rem);
  }
}


/* ─── Industry hero (.v6-hero--industry) ─────────────────────────────────
   Dark teal gradient + grid motif backdrop preserved from V4
   (.hero-gradient-refined.grid-motif). Split layout: editorial text left,
   sector image right. Used on /solutions/industries/* pages. */

.v6-hero--industry {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(ellipse at top right, rgba(var(--teal-rgb), 0.42) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(var(--coral-rgb), 0.16) 0%, transparent 40%),
    linear-gradient(135deg, var(--navy) 0%, #1d2b3a 100%);
}

.v6-hero--industry::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--aqua) 1px, transparent 1px),
    linear-gradient(to bottom, var(--aqua) 1px, transparent 1px);
  background-size: 35px 35px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.v6-hero--industry::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(var(--navy-rgb), 0.25) 100%);
  pointer-events: none;
  z-index: 0;
}

.v6-hero--industry .v6-container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.v6-hero--industry .v6-hero-text {
  max-width: 32rem;
}

/* Breadcrumb on dark */
.v6-hero--industry-breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--v6-meta-size);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(var(--white-rgb), 0.55);
}
.v6-hero--industry-breadcrumb a {
  color: rgba(var(--white-rgb), 0.7);
  text-decoration: none;
  transition: color 250ms ease;
}
.v6-hero--industry-breadcrumb a:hover {
  color: var(--aqua);
}
.v6-hero--industry-breadcrumb [aria-current] {
  color: var(--white);
}
.v6-hero--industry-breadcrumb-sep {
  color: rgba(var(--white-rgb), 0.55);
}

/* Text colour overrides */
.v6-hero--industry .v6-hero-display { color: var(--white); }
.v6-hero--industry .v6-hero-lead    { color: rgba(var(--white-rgb), 0.78); }
.v6-hero--industry .v6-meta         { color: rgba(var(--white-rgb), 0.6); }
.v6-hero--industry .v6-meta-rule    { background: rgba(var(--white-rgb), 0.5); }

/* Text-link CTAs on dark */
.v6-hero--industry .v6-link {
  color: var(--white);
  border-bottom-color: rgba(var(--white-rgb), 0.5);
}
.v6-hero--industry .v6-link:hover {
  color: var(--aqua);
  border-bottom-color: var(--aqua);
}
.v6-hero--industry .v6-link--quiet {
  color: rgba(var(--white-rgb), 0.6);
  border-bottom-color: rgba(var(--white-rgb), 0.3);
}
.v6-hero--industry .v6-link--quiet:hover {
  color: var(--aqua);
  border-bottom-color: var(--aqua);
}

/* Right column: sector image */
.v6-hero--industry-image {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.2),
    0 24px 60px -20px rgba(0, 0, 0, 0.35);
}
.v6-hero--industry-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .v6-hero--industry .v6-container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .v6-hero--industry-image {
    order: -1;
    aspect-ratio: 16 / 10;
  }
}


/* ─── Section: logos ─────────────────────────────────────────────────────── */
/* Logos rest in a muted dark-azure tint (--dark-azure #1c4553) and recover
   their full colour on hover. Two layouts: full-width 8-column grid where the
   logos comfortably fit, otherwise a seamless infinite marquee. */

.v6-logos {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
}
.v6-logos-meta {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.v6-logos-row {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Soft fade at edges so logos appear to enter and leave the strip */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.v6-logos-marquee {
  display: flex;
  width: max-content;
  animation: v6-logos-marquee 42s linear infinite;
}

.v6-logos-row:hover .v6-logos-marquee {
  animation-play-state: paused;
}

.v6-logos-track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-right: clamp(2.5rem, 5vw, 4.5rem);
  flex-shrink: 0;
}

.v6-logos-track img {
  height: 2.5rem;
  width: auto;
  max-width: none;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  /* Muted navy/dark-azure tint at rest. The brightness(0) flattens any input
     colour to black, then the rest of the chain tints toward #1c4553. */
  filter: brightness(0) saturate(100%) invert(22%) sepia(40%) saturate(580%) hue-rotate(157deg) brightness(0.96) contrast(0.91);
  opacity: 0.7;
  transition: filter 350ms ease, opacity 350ms ease;
}

.v6-logos-track img:hover {
  filter: none;
  opacity: 1;
}

@keyframes v6-logos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Desktop: 8 logos fit comfortably across the container — switch to a static
   full-width grid and hide the duplicate track. */
@media (min-width: 1024px) {
  .v6-logos-row {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .v6-logos-marquee {
    width: 100%;
    display: block;
    animation: none;
  }
  .v6-logos-marquee .v6-logos-track[aria-hidden="true"] {
    display: none;
  }
  .v6-logos-marquee .v6-logos-track {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2.75rem);
    align-items: center;
    padding-right: 0;
  }
  .v6-logos-track img {
    width: 100%;
    height: auto;
    max-height: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v6-logos-marquee { animation: none; }
}


/* ─── Section: method ────────────────────────────────────────────────────── */
/* Display headline + lead + clean dashboard image with hairline border. */

.v6-method {
  padding-top: var(--v6-section-pad);
  padding-bottom: var(--v6-section-pad);
}
.v6-method-lead {
  font-family: var(--v6-font);
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--smoke);
  max-width: 36ch;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}
.v6-method-visual {
  margin: clamp(4rem, 7vw, 6.5rem) auto 0;
  max-width: 1100px;
  padding: 0 var(--v6-gutter);
}
.v6-method-visual img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(var(--navy-rgb), 0.08);
}
.v6-method-visual figcaption {
  font-family: var(--v6-font);
  font-size: var(--v6-meta-size);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--smoke);
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
}


/* ─── Section: closing CTA ───────────────────────────────────────────────── */
/* Centred final moment. */

.v6-cta {
  padding-top: var(--v6-section-pad);
  padding-bottom: var(--v6-section-pad);
  text-align: center;
}
.v6-cta .v6-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.v6-cta .v6-meta {
  justify-content: center;
}
.v6-cta-meta {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.v6-cta .v6-display {
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.v6-cta-lead {
  font-family: var(--v6-font);
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--smoke);
  max-width: 32ch;
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
}
.v6-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 3rem);
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.v6-cta-actions .v6-link {
  margin-top: 0;
}

/* ─── Primary CTA button (locked CTA pattern) ───────────────────────────── */
/* Pill button used in closing CTAs site-wide. Pairs with .v6-link--quiet
   secondary text link and an uppercase reassurance line below the actions
   row. See safeminds-design-system.md "CTA pattern (locked)". */

.v6-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--v6-font);
  font-size: var(--v6-lead-size);
  font-weight: 500;
  /* Coral fill carries ink text, not white. Ink on coral is 5.72:1;
     white on coral is 2.89:1 and fails. See the contrast table. */
  color: var(--ink);
  background: var(--coral);
  border: 1px solid var(--coral);
  border-radius: 999px;
  padding: 1rem 1.75rem;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.v6-btn-primary svg {
  transition: transform 250ms ease;
}
.v6-btn-primary:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(var(--navy-rgb), 0.18);
}
.v6-btn-primary:hover svg {
  transform: translateX(0.4rem);
}
.v6-btn-primary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}
/* On dark surfaces the focus ring needs aqua to clear 3:1. */
.section-dark .v6-btn-primary:focus-visible,
.v6-hero--product .v6-btn-primary:focus-visible,
.v6-hero--industry .v6-btn-primary:focus-visible {
  outline-color: var(--aqua);
}

.v6-cta-actions .v6-btn-primary {
  margin-top: 0;
}

/* Reassurance line below the actions row */
.v6-cta-reassurance {
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  font-family: var(--v6-font);
  font-size: var(--v6-meta-size);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--smoke);
  text-align: center;
}

@media (max-width: 640px) {
  .v6-btn-primary {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }
}


/* ─── Card grid ──────────────────────────────────────────────────────────── */
/* Three-column grid of editorial cards: hairline top rule + heading + body.
   Used for risk-pattern grids, feature lists, anything that's a set of
   short scannable items. Composes from existing V6 type tokens. */

.v6-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 3vw, 3rem);
  margin-top: var(--v6-block-gap);
}

.v6-card {
  border-top: 1px solid rgba(var(--navy-rgb), 0.18);
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  transition: border-top-color 200ms ease;
}
.v6-card:hover {
  border-top-color: var(--coral);
}

.v6-card h3 {
  font-family: var(--v6-font);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 0.85rem;
}

.v6-card p {
  font-size: var(--v6-body-size);
  color: var(--smoke);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 1024px) {
  .v6-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .v6-card-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* ─── Embedded animation ─────────────────────────────────────────────────── */
/* Self-contained animation bundles (the product video, the product mockups)
   embedded as iframes. Editorial frame + soft shadow, matching the home hero
   media treatment. A poster facade lets the global script inject the iframe so
   the animation autoplays on load, or hold it as a click-to-play under reduced
   motion. Set the aspect ratio per use with an inline style on .v6-embed
   (16 / 9 for the video, 1520 / 660 for a single mockup). */
.v6-embed {
  position: relative;
  margin: var(--v6-block-gap) auto 0;
  max-width: 75%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--navy);
  box-shadow:
    0 2px 6px rgba(var(--navy-rgb), 0.04),
    0 16px 40px rgba(var(--navy-rgb), 0.06),
    0 60px 140px -30px rgba(var(--navy-rgb), 0.14);
}

.v6-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.v6-embed-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 1.5rem;
  border: 0;
  cursor: pointer;
  background: var(--navy);
  color: var(--white);
  font-family: var(--v6-font);
}

.v6-embed-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 58% at 50% 44%, rgba(5, 174, 181, 0.22), transparent 70%);
  pointer-events: none;
}

.v6-embed-play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 6vw, 76px);
  height: clamp(56px, 6vw, 76px);
  border-radius: 999px;
  border: 1.5px solid rgba(var(--white-rgb), 0.7);
  color: var(--white);
  transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.v6-embed-play svg { transform: translateX(1px); }

.v6-embed-poster:hover .v6-embed-play,
.v6-embed-poster:focus-visible .v6-embed-play {
  transform: scale(1.06);
  border-color: var(--teal);
  background-color: rgba(5, 174, 181, 0.14);
}
.v6-embed-poster:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.v6-embed-label {
  position: relative;
  font-size: var(--v6-meta-size);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(var(--white-rgb), 0.66);
}

.v6-embed-fallback {
  margin: var(--v6-block-gap) 0 0;
  font-size: var(--v6-body-size);
}

/* Mockup-led product showcase: a constrained caption above a full-width
   embedded mockup. Blocks are separated by the standard block gap; inside a
   block the embed hugs its caption rather than taking the full block gap. */
.v6-mockup-block { margin-top: var(--v6-block-gap); }
.v6-mockup-caption { max-width: 46rem; }
.v6-mockup-block .v6-embed,
.v6-mockup-block .v6-shot { margin-top: clamp(1.5rem, 3vw, 2.5rem); }


/* ─── Cascading captures (.v6-cascade) ──────────────────────────────────── */
/* Full-width screenshots dominate a page: three of them read as three
   separate moments rather than one sequence, and a dashboard at 1280px is
   louder than anything else on the site. At half width and stepped across
   the page they read as a set, and the copy stays the loudest element.
   No overlap — a dashboard hidden behind another dashboard is just a
   smaller dashboard. */

.v6-cascade { margin-top: clamp(2.5rem, 5vw, 4rem); }
.v6-cascade .v6-mockup-caption { max-width: 34rem; }

.v6-cascade .v6-shot {
  width: 52%;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  box-shadow: 0 20px 48px -26px rgba(var(--navy-rgb), 0.45);
}

/* The step. Explicit rather than nth-of-type, which would count every
   sibling div in the section, not just these blocks. */
.v6-cascade--1 .v6-shot { margin-left: 0; }
.v6-cascade--2 .v6-shot { margin-left: 24%; }
.v6-cascade--3 .v6-shot { margin-left: 48%; }

/* Captions follow their capture across, so each one sits with its screen. */
.v6-cascade--2 .v6-mockup-caption { margin-left: 24%; }
.v6-cascade--3 .v6-mockup-caption { margin-left: 48%; }

@media (max-width: 1024px) {
  /* Below the wide breakpoint the step eats the capture. Full width, no step. */
  .v6-cascade .v6-shot,
  .v6-cascade .v6-mockup-caption {
    width: auto;
    margin-left: 0;
  }
  .v6-cascade .v6-shot { width: 100%; }
}

/* Embeds sit at 75% on desktop; full width on mobile so the mockup UI stays legible. */
@media (max-width: 768px) {
  .v6-embed { max-width: 100%; }
}


/* ─── Two-column text grid ───────────────────────────────────────────────── */
/* Side-by-side prose blocks. Used for headed bullet lists and the
   "what we deliver" two-audience pattern on industry / outcome pages. */

.v6-cols-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: var(--v6-block-gap);
}

.v6-cols-2 h3 {
  font-family: var(--v6-font);
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 1.25rem;
}

@media (max-width: 768px) {
  .v6-cols-2 { grid-template-columns: 1fr; gap: 2.5rem; }
}


/* ─── Editorial list ─────────────────────────────────────────────────────── */
/* Bulleted list with V6 type. Marker is a short hairline rule, not a dot. */

.v6-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.v6-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.85rem;
  font-size: var(--v6-body-size);
  color: var(--smoke);
  line-height: 1.55;
}

.v6-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.65rem;
  height: 2px;
  background: var(--coral);
}

.v6-list li:last-child { margin-bottom: 0; }


/* ─── Image break ────────────────────────────────────────────────────────── */
/* Full-bleed editorial image between sections. */

.v6-image-break {
  width: 100%;
  height: clamp(18rem, 38vh, 28rem);
  overflow: hidden;
}

.v6-image-break img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ─── Testimonial grid ───────────────────────────────────────────────────── */
/* Multi-testimonial layout. Smaller scale than .v6-quote (which is reserved
   for solo pull-quote moments). */

.v6-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(2rem, 3vw, 3rem);
  margin-top: var(--v6-block-gap);
}

.v6-testimonial {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(var(--navy-rgb), 0.18);
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
}

.v6-testimonial-quote {
  font-family: var(--v6-font);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 1.5rem;
  flex: 1;
}

.v6-testimonial-quote::before { content: "\201C"; }
.v6-testimonial-quote::after  { content: "\201D"; }

.v6-testimonial-attribution {
  font-size: var(--v6-meta-size);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--smoke);
  font-weight: 500;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.v6-testimonial-attribution .name    { color: var(--ink); }
.v6-testimonial-attribution .role    { color: var(--smoke); }
.v6-testimonial-attribution .company { color: var(--smoke); }


/* ─── Stats row ──────────────────────────────────────────────────────────── */
/* Inline 4-up data points framed top and bottom by hairline rules. Used in
   case-study cards and key-stats moments where the .v6-numeral block would
   be too dramatic. */

.v6-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid rgba(var(--navy-rgb), 0.18);
  border-bottom: 1px solid rgba(var(--navy-rgb), 0.18);
  margin-top: var(--v6-block-gap);
}

.v6-stat-label {
  font-size: var(--v6-meta-size);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--smoke);
  margin: 0 0 0.5rem;
}

.v6-stat-value {
  font-family: var(--v6-font);
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}

@media (max-width: 768px) {
  .v6-stats-row { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}


/* ─── Logo grid ──────────────────────────────────────────────────────────── */
/* Partner / client logo strip. Greyscale, monochrome at rest, colour on hover. */

.v6-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.v6-logo-grid img {
  width: 100%;
  max-width: 8rem;
  max-height: 2.75rem;
  height: auto;
  margin: 0 auto;
  display: block;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 250ms ease, filter 250ms ease;
}

.v6-logo-grid img:hover {
  opacity: 1;
  filter: grayscale(0);
}


/* ─── Prose ──────────────────────────────────────────────────────────────── */
/* Long-form article body. Wraps MDX-rendered content. All children inherit
   V6 typography automatically. Used on insights articles and any page that
   renders markdown into the body. */

.v6-prose {
  font-family: var(--v6-font);
  color: var(--ink);
  font-size: var(--v6-body-size);
  line-height: 1.65;
  max-width: 38rem;
}

.v6-prose > * { margin: 0; }
.v6-prose > * + * { margin-top: 1.5em; }

.v6-prose h2 {
  font-family: var(--v6-font);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.v6-prose h2:first-child { margin-top: 0; }

.v6-prose h3 {
  font-family: var(--v6-font);
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-top: clamp(2rem, 3.5vw, 2.5rem);
}

.v6-prose p { color: var(--ink); line-height: 1.65; }
.v6-prose strong { font-weight: 600; color: var(--ink); }
.v6-prose em { font-style: italic; }

.v6-prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(var(--navy-rgb), 0.3);
  text-underline-offset: 4px;
  transition: text-decoration-color 220ms ease;
}
.v6-prose a:hover { text-decoration-color: var(--teal); }

.v6-prose ul, .v6-prose ol {
  padding-left: 0;
  color: var(--ink);
}

.v6-prose ol { padding-left: 1.5rem; }
.v6-prose ul { list-style: none; }

.v6-prose ul li, .v6-prose ol li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.v6-prose ul li {
  position: relative;
  padding-left: 1.5rem;
}
.v6-prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.65rem;
  height: 1px;
  background: var(--navy);
}

.v6-prose blockquote {
  border-left: 2px solid var(--ink);
  padding-left: 1.5rem;
  margin: clamp(2rem, 3vw, 2.5rem) 0;
  font-style: normal;
}

.v6-prose blockquote p {
  font-family: var(--v6-font);
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.v6-prose hr {
  border: none;
  border-top: 1px solid rgba(var(--navy-rgb), 0.18);
  margin: clamp(2.5rem, 5vw, 4rem) 0;
}

.v6-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  padding: 0.1em 0.4em;
  background: rgba(var(--navy-rgb), 0.06);
  border-radius: 4px;
}

.v6-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}


/* ─── Article card grid ──────────────────────────────────────────────────── */
/* Linked card grid for related articles, insights listings. */

.v6-article-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 3vw, 3rem);
  margin-top: var(--v6-block-gap);
}

.v6-article-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  text-decoration: none;
  border-top: 1px solid rgba(var(--navy-rgb), 0.18);
  padding-top: 1.25rem;
  transition: opacity 220ms ease;
}

.v6-article-card:hover { opacity: 0.85; }

.v6-article-card-cat {
  font-size: var(--v6-meta-size);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--smoke);
}

.v6-article-card-title {
  font-family: var(--v6-font);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.v6-article-card-desc {
  font-size: var(--v6-body-size);
  color: var(--smoke);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 1024px) {
  .v6-article-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .v6-article-cards { grid-template-columns: 1fr; }
}


/* ─── V6 Three-pill floating nav (BCG pattern) ──────────────────────────── */
/* Overrides the V4 .mn-nav single-bar layout. Three independent pills float at
   the top of the viewport with whitespace between them: left (logo+hamburger),
   center (primary nav), right (Log in). */

.mn-header {
  position: fixed;
  top: clamp(1rem, 1.8vw, 1.5rem);
  left: clamp(1rem, 2vw, 1.75rem);
  right: clamp(1rem, 2vw, 1.75rem);
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  pointer-events: none; /* let clicks pass through gaps; pills re-enable below */
}

/* (Hide the V4 .mn-nav rules — we no longer use that single-bar wrapper) */

.mn-pill {
  background: rgba(var(--white-rgb), 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(var(--navy-rgb), 0.08);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(var(--navy-rgb), 0.06), 0 1px 2px rgba(var(--navy-rgb), 0.04);
  display: flex;
  align-items: center;
  pointer-events: auto;
}

/* Soften the pill where backdrop-filter is unsupported (older Safari/iOS).
   Without blur, an 0.85-opacity white pill on a white page reads as a hard
   white rectangle. Drop the fill so the border + shadow carry the shape. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mn-pill {
    background: rgba(var(--white-rgb), 0.65);
  }
}

/* Left pill — hamburger + logo */
.mn-pill-left {
  padding: 0.4rem 1rem 0.4rem 0.5rem;
  gap: 0.75rem;
}
.mn-pill-left .mn-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.mn-pill-left .mn-logo img {
  display: block;
  height: 22px;
  width: auto;
}

/* Hamburger inside the left pill (always visible — BCG pattern) */
.mn-pill-left .mn-hamburger {
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  align-items: center;
  transition: background 200ms ease;
}
.mn-pill-left .mn-hamburger:hover {
  background: rgba(var(--navy-rgb), 0.06);
}
.mn-pill-left .mn-hamburger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--navy);
  border-radius: 1px;
  transition: transform 200ms ease, opacity 200ms ease;
}
.mn-pill-left .mn-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.mn-pill-left .mn-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.mn-pill-left .mn-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* Center pill — primary nav with mega-menus */
.mn-pill-center {
  padding: 0 0.5rem;
}
.mn-pill-center .mn-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: auto;
  flex: none;
  gap: 0;
  align-items: stretch;
}
.mn-pill-center .mn-item {
  display: flex;
  align-items: center;
  position: relative;
}
.mn-pill-center .mn-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: auto;
  padding: 0.625rem 0.95rem;
  font-family: var(--v6-font);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--smoke);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease;
}
.mn-pill-center .mn-link:visited {
  color: var(--smoke);
}
.mn-pill-center .mn-link:hover,
.mn-pill-center .mn-item:hover > .mn-link,
.mn-pill-center .mn-link[aria-expanded="true"] {
  color: var(--ink);
  background: rgba(var(--navy-rgb), 0.05);
}

/* Right pill — Log in only */
.mn-pill-right {
  padding: 0.625rem 1.25rem;
}
.mn-utility-link,
.mn-utility-link:visited {
  font-family: var(--v6-font);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--smoke);
  text-decoration: none;
  transition: color 180ms ease;
  white-space: nowrap;
}
.mn-utility-link:hover {
  color: var(--teal);
}

/* Body offset for floating nav (overrides V4's 64px) */
body {
  padding-top: clamp(4.5rem, 7vh, 5.5rem);
}

/* Mega-menu panels — anchor below the pill, leave a small gap */
.mn-pill-center .mn-panel {
  top: calc(100% + 0.75rem);
}

/* Mobile chrome — hide center + right pills, show only logo + hamburger */
@media (max-width: 1024px) {
  .mn-pill-center,
  .mn-pill-right {
    display: none;
  }
  .mn-header {
    justify-content: flex-start;
  }
}

/* Logo variant swap — light lockup shows on dark drawer; dark lockup shows on white chrome.
   Selectors include .mn-pill-left .mn-logo to beat the base "img { display: block }" rule. */
.mn-pill-left .mn-logo .mn-logo-on-dark { display: none; }
.mn-header.mn-drawer-open .mn-pill-left .mn-logo .mn-logo-on-light { display: none; }
.mn-header.mn-drawer-open .mn-pill-left .mn-logo .mn-logo-on-dark { display: block; }

/* Drawer-only secondary section — hidden on desktop; appears in drawer */
.mn-drawer-extras {
  display: none;
}
.mn-drawer-extras-eyebrow {
  font-family: var(--v6-font);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(var(--white-rgb), 0.62);
  margin: 0 0 0.75rem;
}
.mn-drawer-link {
  display: block;
  padding: 0.55rem 0;
  font-family: var(--v6-font);
  font-size: 0.9375rem;
  font-weight: 400;
  color: rgba(var(--white-rgb), 0.8);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--white-rgb), 0.06);
  cursor: pointer;
  transition: color 200ms ease;
}
.mn-drawer-link:last-child {
  border-bottom: none;
}
.mn-drawer-link:hover {
  color: var(--aqua);
}
/* Accent variant (Partners, Academy): aqua on the dark drawer */
.mn-drawer-link--accent {
  color: var(--aqua);
  font-weight: 500;
}
.mn-drawer-link--accent:hover {
  color: var(--aqua);
}
.mn-drawer-link-icon {
  display: inline-block;
  margin-left: 0.4em;
  opacity: 0.7;
  pointer-events: none;
}

/* Explicit pointer cursor on drawer triggers + entries so the drawer rows
   read as tappable on all browsers (some default <button> to default cursor) */
.mn-header.mn-drawer-open .mn-link,
.mn-header.mn-drawer-open .mn-trigger,
.mn-header.mn-drawer-open .mn-entry,
.mn-header.mn-drawer-open .mn-utility-link {
  cursor: pointer;
}

/* ─── Hamburger drawer (works at all viewport sizes) ─────────────────────
   When .mn-drawer-open is on .mn-header, the header becomes a fullscreen
   dark sheet. Items render as a vertical accordion list (left-aligned),
   not as the desktop mega-menu chrome. BCG-pattern: hamburger = full site
   nav, always available regardless of viewport size. */

.mn-header.mn-drawer-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: var(--navy);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  gap: 0;
  overflow-y: auto;
}

/* .mn-pill carries backdrop-filter: saturate(1.4) for the glass chrome. The
   drawer makes the pills transparent but left the filter running, so they
   saturated the navy behind them: #2D3D52 * 1.4 saturation = #273E5B. The
   drawer read as two different navies. Drop the filter with the glass. */
.mn-header.mn-drawer-open .mn-pill {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Top bar inside drawer — logo left, X close button right (uses existing hamburger element which animates to X) */
.mn-header.mn-drawer-open .mn-pill-left {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  pointer-events: auto;
}
.mn-header.mn-drawer-open .mn-hamburger:hover {
  background: rgba(var(--white-rgb), 0.1);
}
.mn-header.mn-drawer-open .mn-hamburger span {
  background: var(--white);
}

/* Center pill becomes the drawer body — full-width, stacked, transparent */
.mn-header.mn-drawer-open .mn-pill-center {
  display: block;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 640px;
  flex: 1 1 auto;
}
.mn-header.mn-drawer-open .mn-links {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}
.mn-header.mn-drawer-open .mn-item {
  display: block;
  width: 100%;
  position: relative;
  border-bottom: 1px solid rgba(var(--white-rgb), 0.08);
}
.mn-header.mn-drawer-open .mn-link {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0;
  font-family: var(--v6-font);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--white);
  background: transparent;
  border-radius: 0;
  text-align: left;
  letter-spacing: -0.005em;
  height: auto;
}
.mn-header.mn-drawer-open .mn-link:hover,
.mn-header.mn-drawer-open .mn-link:focus-visible {
  color: var(--aqua);
  background: transparent;
}
.mn-header.mn-drawer-open .mn-caret {
  width: 18px;
  height: 18px;
  padding: 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem 1rem;
  border-radius: 999px;
  box-sizing: content-box;
  transition: transform 200ms ease, background 200ms ease;
}
/* Pointer devices only. On touch, :hover sticks after a tap, so the caret kept
   its highlight after the accordion had closed and read as still-selected.
   Expanded state is carried by [aria-expanded] below, which is accurate. */
@media (hover: hover) {
  .mn-header.mn-drawer-open .mn-trigger:hover .mn-caret {
    background: rgba(var(--white-rgb), 0.08);
  }
}
.mn-header.mn-drawer-open .mn-trigger[aria-expanded="true"] .mn-caret {
  transform: rotate(180deg);
  background: rgba(var(--white-rgb), 0.08);
}

/* Disable desktop hover-open behaviour while drawer is open. Use :not()
   so an explicitly-opened accordion (.mn-mobile-open) still shows. The
   previous version used :focus-within which created a specificity conflict
   that hid panels even when the user clicked-to-open them. */
.mn-header.mn-drawer-open .mn-item:hover > .mn-panel:not(.mn-mobile-open) {
  display: none;
}
.mn-header.mn-drawer-open .mn-item:hover::after {
  content: none;
}

/* Accordion panels — show inline when trigger is expanded, hide otherwise */
.mn-header.mn-drawer-open .mn-panel {
  display: none;
  position: static;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0 0 1rem;
  margin: 0 0 0.25rem;
  min-width: 0;
  grid-template-columns: 1fr !important;
  animation: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mn-header.mn-drawer-open .mn-panel.mn-mobile-open {
  display: block;
}
.mn-header.mn-drawer-open .mn-panel.mn-3col {
  grid-template-columns: 1fr !important;
  gap: 0.5rem;
  min-width: 0;
}
.mn-header.mn-drawer-open .mn-panel > div {
  margin-bottom: 0.5rem;
}
.mn-header.mn-drawer-open .mn-col-header {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(var(--white-rgb), 0.62);
  border-bottom: none;
  padding: 0.75rem 0 0.4rem;
  margin: 0;
}
.mn-header.mn-drawer-open .mn-entry {
  display: block;
  padding: 0.6rem 0;
  background: transparent;
  border-radius: 0;
  margin: 0;
}
.mn-header.mn-drawer-open .mn-entry:hover {
  background: rgba(var(--white-rgb), 0.04);
}
.mn-header.mn-drawer-open .mn-entry-title {
  font-family: var(--v6-font);
  font-size: 1rem;
  font-weight: 400;
  color: var(--white);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.mn-header.mn-drawer-open .mn-entry-desc {
  color: rgba(var(--white-rgb), 0.55);
  font-size: 0.8125rem;
  line-height: 1.4;
  margin-top: 0.15rem;
}
/* Hide featured cards in drawer — not needed in vertical layout */
.mn-header.mn-drawer-open .mn-feature {
  display: none;
}

/* Right pill (Log in) — restyle inside drawer */
.mn-header.mn-drawer-open .mn-pill-right {
  display: block;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 1.5rem 0 0;
  margin-top: 1.5rem;
  width: 100%;
  max-width: 640px;
  border-top: 1px solid rgba(var(--white-rgb), 0.08);
}
.mn-header.mn-drawer-open .mn-utility-link,
.mn-header.mn-drawer-open .mn-utility-link:visited {
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 400;
  display: block;
  padding: 0.55rem 0;
}
.mn-header.mn-drawer-open .mn-utility-link:hover {
  color: var(--aqua);
}

/* Drawer-extras section (Partners + Academy) — visible only in drawer.
   Re-enable pointer-events here, since the parent .mn-header is set to
   pointer-events: none so desktop clicks pass through gaps between the
   floating pills. Without this, Partners/Academy links display but aren't
   clickable in the drawer. */
.mn-header.mn-drawer-open .mn-drawer-extras {
  display: block;
  width: 100%;
  max-width: 640px;
  padding: 1.5rem 0 0;
  margin-top: 1rem;
  border-top: 1px solid rgba(var(--white-rgb), 0.08);
  pointer-events: auto;
}


/* ─── Floating contact widget (bottom-right, icon-only with hover reveal) ─ */
/* Two actions: Chat + Book a call. Icons only at rest; hover expands the
   button horizontally and slides the text label in. Mirrors the floating-nav
   pill aesthetic. */

.v6-contact-widget {
  position: fixed;
  bottom: clamp(1.25rem, 2.5vw, 2rem);
  right: clamp(1.25rem, 2.5vw, 2rem);
  z-index: 90;
  display: flex;
  gap: 0.25rem;
  background: rgba(var(--white-rgb), 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(var(--navy-rgb), 0.08);
  border-radius: 999px;
  padding: 0.3rem;
  box-shadow: 0 4px 16px rgba(var(--navy-rgb), 0.08), 0 1px 3px rgba(var(--navy-rgb), 0.04);
}
.v6-contact-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  font-family: var(--v6-font);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: 999px;
  overflow: hidden;
  white-space: nowrap;
  transition: width 240ms cubic-bezier(0.16, 1, 0.3, 1),
              padding 240ms cubic-bezier(0.16, 1, 0.3, 1),
              background 200ms ease,
              color 200ms ease;
}
.v6-contact-action svg {
  flex: none;
  display: block;
}
.v6-contact-action span {
  margin-left: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 240ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 180ms ease,
              margin-left 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.v6-contact-action:hover {
  width: auto;
  padding: 0 1rem;
  background: var(--navy);
  color: var(--white);
}
.v6-contact-action:hover span {
  max-width: 200px;
  opacity: 1;
  margin-left: 0.6rem;
}
.v6-contact-action:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .v6-contact-widget {
    bottom: 1rem;
    right: 1rem;
  }
  .v6-contact-action {
    width: 44px;
    height: 44px;
  }
  .v6-contact-action:hover {
    /* On touch devices, hover doesn't fire normally — keep icon-only */
    width: 44px;
    padding: 0;
    background: transparent;
    color: var(--ink);
  }
  .v6-contact-action:hover span {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
  }
}


/* ─── Footer overrides (apply globally — replaces V4 teal accents) ──────── */
/* Footer remains dark on V4 ink background; V6 swaps the teal accents
   for navy + aqua on hover. */

.footer-enterprise {
  font-family: var(--v6-font);
  background-color: var(--navy);
}
/* Column headings were --smoke on a dark ground: 1.9:1, and worse against
   navy. White at 0.62 is 5.4:1 and reads as the same quiet label. */
.footer-column h6 {
  color: rgba(var(--white-rgb), 0.62);
  font-family: var(--v6-font);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.footer-links a {
  color: var(--white);
  opacity: 0.7;
  font-weight: 400;
  transition: opacity 200ms ease, color 200ms ease;
}
.footer-links a:hover {
  color: var(--aqua);
  opacity: 1;
}
.footer-brand-description {
  font-family: var(--v6-font);
  font-weight: 400;
  opacity: 0.65;
  line-height: 1.55;
}
.footer-contact {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  font-family: var(--v6-font);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.footer-contact li {
  margin: 0;
}
.footer-contact a {
  color: var(--white);
  text-decoration: none;
  opacity: 0.85;
  transition: color 200ms ease, opacity 200ms ease;
}
.footer-contact a:hover {
  color: var(--aqua);
  opacity: 1;
}
.footer-contact span {
  color: var(--white);
  opacity: 0.55;
}
.footer-bottom p,
.footer-legal a {
  font-family: var(--v6-font);
  color: var(--white);
  opacity: 0.55;
  font-weight: 400;
}
.footer-legal a:hover {
  color: var(--aqua);
  opacity: 1;
}
/* components.css:1507 lays this out as a six-item flex row with no wrap.
   That is 456px of content, so on a 390px viewport it pushed the whole page
   25px wide and gave every page a horizontal scroll. Locked file, wrap here. */
.footer-legal {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 0.75rem;
}
@media (max-width: 640px) {
  .footer-legal { gap: 0.75rem 1.25rem; }
}


/* ─────────────────────────────────────────────────────────────────────────
   V6 GLOBAL OVERRIDES — neutralise V4 chrome on all pages
   Forces system font, drops mint/fog/aqua accents, flattens hero gradients,
   quietens buttons. Every V4-styled page (products, industries, compliance,
   insights, etc.) gets a V6-direction lift without page-by-page rewrite.
   Targeted hand-tuning still possible per page; this is the floor.
   ─────────────────────────────────────────────────────────────────────── */

/* Force system font on all body content. */
body,
h1, h2, h3, h4, h5, h6,
p, li, a, button, input, textarea, select, blockquote, cite, figcaption {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Headings: drop Georgia weight defaults; let V6 utility classes override
   where needed (.v6-display, .v6-hero-display, etc. always win). */
.v4-page h1, .v4-page h2, .v4-page h3, .v4-page h4, .v4-page h5, .v4-page h6 {
  letter-spacing: -0.015em;
}

/* V4 .hl heading accent — neutralise. Coral is a fill, never text:
   coral on white is 2.89:1. */
.hl { color: inherit; }

/* components.css:48 paints .grid-motif-image with /assets/incheq-icon.png,
   a file that has never existed. The class is unused in src/, but the rule
   lives in a locked stylesheet, so neutralise it here rather than leave a
   404 waiting for whoever uses the class next. */
.grid-motif-image::before,
.grid-motif-bottom-left::before { background-image: none; }

/* ─── V4 section backgrounds: oat carries the warmth ─── */
.section-alternate {
  background: var(--oat);
  border-top: 1px solid rgba(var(--navy-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--navy-rgb), 0.1);
}
.section-mint { background: var(--mint); }
.section-light { background: var(--oat); }

/* Card callouts — mint band with a navy rule */
.card-callout {
  background: var(--mint);
  border-left: 3px solid var(--navy);
}

/* ─── V4 hero variants: drop gradient backgrounds, use white + ink ─── */
.hero,
.hero-gradient,
.hero-gradient-refined,
.hero-bottom-band,
.hero-split-accent,
.hero-offset-column {
  background: var(--white) !important;
  color: var(--ink) !important;
}
.hero h1,
.hero h2,
.hero .hero-text h1 {
  color: var(--ink) !important;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.hero .lead,
.hero p.lead {
  color: var(--smoke) !important;
}
.hero-logo { filter: none; }
.hero-logo[src*="light"] { display: none; } /* light-on-dark logo no longer matches */

/* Disable V4 decorative motifs */
.grid-motif::before,
.grid-motif::after,
.hero-accent-panel,
.hero-accent-panel-content,
.hero-bottom-glow,
.gradient-orb,
.section-cta-enhanced::before,
.section-cta-enhanced::after {
  display: none !important;
}

/* ─── V4 buttons: quieten + match V6 palette ─── */
.btn {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
  border-radius: 999px;
}
.btn-primary,
.btn-primary-dark {
  background: var(--coral);
  color: var(--ink);
  border: 1px solid var(--coral);
}
.btn-primary:hover,
.btn-primary-dark:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.btn-ghost,
.btn-ghost-dark,
.btn-secondary,
.btn-outline-cta {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
}
.btn-ghost:hover,
.btn-ghost-dark:hover,
.btn-secondary:hover,
.btn-outline-cta:hover {
  background: var(--navy);
  color: var(--white);
}

/* Section dark — navy surface, white headings */
.section-dark {
  background: var(--navy);
}
.section-dark h1,
.section-dark h2,
.section-dark h3 {
  color: var(--white);
}
.section-dark p,
.section-dark .lead {
  color: rgba(var(--white-rgb), 0.8);
}

/* ─── V4 cards: less chrome, more editorial ─── */
.card {
  background: var(--white);
  border: 1px solid rgba(var(--navy-rgb), 0.08);
  box-shadow: none;
  border-radius: 8px;
}
/* A card sitting on oat inverts: white card, oat page. */
.section-light .card,
.section-alternate .card {
  background: var(--white);
}
.card:hover {
  border-color: rgba(var(--navy-rgb), 0.16);
  box-shadow: 0 8px 20px rgba(var(--navy-rgb), 0.06);
  transform: none;
}
.card-title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.card-accent { border-left: 3px solid var(--ink); }
.card-label {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: transparent;
  color: var(--smoke);
  padding: 0;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* List bullet accent: coral */
.list-accent li::before {
  background: var(--navy);
}

/* Dashboard frame — drop the 3D tilt + heavy shadow on V4 pages */
.dashboard-frame,
.screenshot-showcase {
  transform: none !important;
  box-shadow: none !important;
  border: 1px solid rgba(var(--navy-rgb), 0.08);
  border-radius: 8px;
}

/* ─── Feature scroll (sticky-image walkthrough) ─────────────────────────── */
/* Two-column scroll experience: text panels scroll on the left, product
   screenshot is pinned on the right and crossfades as the active panel
   changes. Used on product detail pages. */

.v6-feature-scroll {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: var(--v6-block-gap);
  align-items: start;
}

.v6-feature-text-col {
  display: flex;
  flex-direction: column;
}

.v6-feature-panel {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 0;
  max-width: 34rem;
}

.v6-feature-panel:first-child { padding-top: 0; }
.v6-feature-panel:last-child  { padding-bottom: 0; }

.v6-feature-panel .v6-meta {
  margin-bottom: 1.5rem;
}

.v6-feature-panel-title {
  font-family: var(--v6-font);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 1.5rem;
}

.v6-feature-panel p {
  font-size: var(--v6-body-size);
  color: var(--smoke);
  line-height: 1.6;
  margin: 0 0 1.25em;
}

.v6-feature-panel p.v6-lead {
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  font-weight: 300;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.v6-feature-panel p:last-child { margin-bottom: 0; }

.v6-feature-visual-col {
  height: 100%;
}

.v6-feature-visual-sticky {
  position: sticky;
  top: 12vh;
  height: 76vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Soft radial halo behind the active screenshot — creates the sense that the
   image is lit from within the page rather than dropped onto it. */
.v6-feature-visual-sticky::before {
  content: "";
  position: absolute;
  inset: -8% -6%;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--navy-rgb), 0.05) 0%,
    rgba(var(--navy-rgb), 0.02) 35%,
    transparent 65%
  );
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}

.v6-feature-image {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.985) translateY(8px);
  transition: opacity 550ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}

.v6-feature-image.is-active {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.v6-feature-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border: none;
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 2px 6px rgba(var(--navy-rgb), 0.04),
    0 16px 40px rgba(var(--navy-rgb), 0.06),
    0 60px 140px -30px rgba(var(--navy-rgb), 0.14);
}

.v6-feature-image-inline { display: none; }


/* ─── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .v6-split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: stretch;
  }
  .v6-split--reverse .v6-split-text   { order: 1; }
  .v6-split--reverse .v6-split-visual { order: 2; }
  .v6-split-text {
    padding-bottom: 0;
  }
  /* Bleed the visual to both edges. .v6-split zeroes its own padding-right,
     so a negative right margin has nothing to pull back against and simply
     overhangs the viewport by one gutter. Left margin cancels the padding
     that is actually there; the right edge is already flush. */
  .v6-split-visual {
    margin-left: calc(var(--v6-gutter) * -1);
    margin-right: 0;
  }
  .v6-split-visual img {
    aspect-ratio: 3 / 4;
  }
  .v6-numeral-caption {
    max-width: none;
  }
  .v6-display {
    max-width: none;
  }

  .v6-feature-scroll {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .v6-feature-visual-col { display: none; }
  .v6-feature-panel {
    min-height: auto;
    padding: 2.25rem 0;
    max-width: none;
    border-top: 1px solid rgba(var(--navy-rgb), 0.08);
  }
  .v6-feature-panel:first-child { border-top: none; padding-top: 1rem; }
  .v6-feature-image-inline {
    display: block;
    margin-top: 1.5rem;
  }
  .v6-feature-image-inline img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid rgba(var(--navy-rgb), 0.08);
    border-radius: 8px;
  }
}


/* ─── V6 form ─────────────────────────────────────────────────────────────── */
/* Editorial form: hairline borders, ink focus, system font. Originally lived
   inside contact.astro; promoted here so accreditation, course-interest, and
   partnership pages can share the same pattern. */

.v6-form {
  max-width: 44rem;
  margin-top: var(--v6-block-gap);
}

.v6-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}
.v6-form-grid + .v6-form-field { margin-top: clamp(1rem, 2vw, 1.5rem); }
@media (max-width: 720px) {
  .v6-form-grid { grid-template-columns: 1fr; }
}

/* Inside a .v6-form-grid, each field becomes a subgrid so labels share row 1
   and inputs share row 2 across both columns. Without subgrid the columns
   compute heights independently and can drift out of alignment. */
.v6-form-grid > .v6-form-field {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0.5rem;
}

/* Standalone fields (outside .v6-form-grid) still need their own flex column. */
.v6-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.v6-form-field + .v6-form-field { margin-top: clamp(1rem, 2vw, 1.5rem); }
.v6-form-fieldset + .v6-form-field,
.v6-form-field + .v6-form-fieldset,
.v6-form-grid + .v6-form-fieldset,
.v6-form-fieldset + .v6-form-fieldset {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.v6-form-label {
  font-family: var(--v6-font);
  font-size: var(--v6-meta-size);
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--smoke);
  display: block;
  margin: 0;
}
/* Inside the two-column subgrid, anchor the label to the bottom of its row
   so labels sit right above their inputs regardless of micro height differences
   between adjacent labels. Not applied to standalone fields (which use flex
   column, where align-self would mean right-align in LTR). */
.v6-form-grid > .v6-form-field > .v6-form-label {
  align-self: end;
}
.v6-form-required { color: var(--teal); }

.v6-form-help {
  font-size: 0.875rem;
  color: var(--smoke);
  line-height: 1.5;
  margin: 0;
}

.v6-form-input {
  display: block;
  font-family: var(--v6-font);
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.9rem 1rem;
  background: var(--white);
  border: 1px solid rgba(var(--navy-rgb), 0.22);
  border-radius: 4px;
  color: var(--ink);
  transition: border-color 220ms ease, box-shadow 220ms ease;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.v6-form-input:hover {
  border-color: rgba(var(--navy-rgb), 0.42);
}
.v6-form-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

/* Native select needs the caret painted back in once appearance is reset. */
select.v6-form-input {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231b1d26' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px 14px;
  cursor: pointer;
}

.v6-form-textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.55;
}

/* Fieldset for radio/checkbox groups. The legend acts as the field label. */
.v6-form-fieldset {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.v6-form-legend {
  font-family: var(--v6-font);
  font-size: var(--v6-meta-size);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--smoke);
  padding: 0;
  margin: 0 0 0.25rem;
}

/* Individual choice tile: the input is hidden but accessible; the label is
   the visual target so the entire row is clickable. */
.v6-form-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(var(--navy-rgb), 0.18);
  border-radius: 6px;
  cursor: pointer;
  background: var(--white);
  transition: border-color 200ms ease, background 200ms ease;
}
.v6-form-choice:hover {
  border-color: rgba(var(--navy-rgb), 0.5);
}
.v6-form-choice input[type="radio"],
.v6-form-choice input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.1rem 0 0;
  flex-shrink: 0;
  border: 1.5px solid rgba(var(--navy-rgb), 0.35);
  background: var(--white);
  cursor: pointer;
  position: relative;
  transition: border-color 200ms ease, background 200ms ease;
}
.v6-form-choice input[type="radio"] {
  border-radius: 999px;
}
.v6-form-choice input[type="checkbox"] {
  border-radius: 3px;
}
.v6-form-choice input[type="radio"]:checked {
  border-color: var(--ink);
  background: var(--navy);
  box-shadow: inset 0 0 0 3px var(--white);
}
.v6-form-choice input[type="checkbox"]:checked {
  border-color: var(--ink);
  background: var(--navy);
}
.v6-form-choice input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>") center / 70% no-repeat;
}
.v6-form-choice input[type="radio"]:focus-visible,
.v6-form-choice input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.v6-form-choice:has(input:checked) {
  border-color: var(--ink);
  background: rgba(var(--navy-rgb), 0.025);
}
.v6-form-choice-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: var(--ink);
  font-family: var(--v6-font);
  font-size: var(--v6-body-size);
  line-height: 1.4;
}
.v6-form-choice-title {
  font-weight: 500;
}
.v6-form-choice-desc {
  font-size: 0.875rem;
  color: var(--smoke);
  line-height: 1.45;
}

.v6-form-disclaimer {
  font-size: 0.875rem;
  color: var(--smoke);
  line-height: 1.5;
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 clamp(1.5rem, 3vw, 2rem);
}
.v6-form-disclaimer a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(var(--navy-rgb), 0.3);
  text-underline-offset: 3px;
}

.v6-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--v6-font);
  font-size: var(--v6-lead-size);
  font-weight: 400;
  color: var(--white);
  background: var(--navy);
  padding: 0.95rem 1.75rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 220ms ease;
}
.v6-form-submit:hover {
  background: var(--navy);
}
.v6-form-submit svg {
  transition: transform 250ms ease;
}
.v6-form-submit:hover svg {
  transform: translateX(0.4rem);
}


/* ─── Product overview — layered showcase + animated wordmark heading ────── */
/* Used on /products. Each product section pairs a full-bleed product UI
   screenshot (background) with a smaller "popout" image of a specific
   feature, plus an animated SMIL lockup wordmark in place of the plain H2. */

.product-display {
  display: block;
  margin: 0;
  min-height: clamp(3rem, 6vw, 5rem);
  line-height: 1;
}
.product-display .sr-only,
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.product-wordmark-mount {
  display: inline-block;
  width: clamp(380px, 48vw, 720px);
  max-width: 100%;
  vertical-align: top;
}
/* CTA-level wordmark sits on its own line, centred, sized larger as a
   closing display moment. */
.product-display--cta {
  text-align: center;
}
.product-wordmark-mount--cta {
  display: block;
  /* The 420px floor is wider than a 375px viewport, which pushed the whole
     page sideways once this mount actually had a wordmark in it to render. */
  width: clamp(240px, 56vw, 820px);
  max-width: 100%;
  margin: clamp(0.25rem, 1vw, 0.85rem) auto 0;
}
.product-wordmark-mount svg {
  width: 100%;
  height: auto;
  display: block;
}
/* Superscript trademark mark for product headings rendered as text
   (rather than an injected lockup), sized against the display type. */
.product-wordmark-tm {
  font-size: 0.4em;
  vertical-align: 0.75em;
  font-weight: 400;
  line-height: 0;
}

.product-showcase {
  position: relative;
  width: 100%;
  margin-top: var(--v6-block-gap);
  padding-bottom: clamp(2rem, 5vw, 5rem); /* clearance for the popout overhang */
}
.product-showcase-bg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(var(--navy-rgb), 0.08);
  background: var(--white);
  box-shadow:
    0 2px 6px rgba(var(--navy-rgb), 0.04),
    0 16px 40px rgba(var(--navy-rgb), 0.06),
    0 60px 140px -30px rgba(var(--navy-rgb), 0.14);
}
.product-showcase-popout {
  position: absolute;
  width: clamp(280px, 48%, 580px);
  height: auto;
  bottom: -6%;
  right: -4%;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid rgba(var(--navy-rgb), 0.1);
  box-shadow:
    0 4px 12px rgba(var(--navy-rgb), 0.08),
    0 24px 60px -10px rgba(var(--navy-rgb), 0.18);
}
.product-showcase--reverse .product-showcase-popout {
  right: auto;
  left: -4%;
}

/* Layered reveal: bg uses the existing .reveal pattern; popout slides + fades
   in 200ms behind the background for a natural staggered entrance. */
.product-showcase-popout {
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition:
    opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1) 200ms,
    transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1) 200ms;
}
.product-showcase.is-visible .product-showcase-popout {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 768px) {
  .product-showcase { padding-bottom: 0; }
  .product-showcase-popout {
    position: static;
    width: 78%;
    margin: -1.5rem auto 0;
    left: auto;
    right: auto;
    transform: translateY(20px) scale(0.96);
  }
  .product-showcase.is-visible .product-showcase-popout {
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-showcase-popout {
    transition: none;
    transform: none;
    opacity: 1;
  }
}