/* ===========================================================================
   THE INSIGHTS FAMILY — WEBSITE DESIGN SYSTEM (v2)
   A dark, atmospheric, editorial system. Foundations (colour, type, motion,
   the signal motifs) come from ../styles.css; this file defines the website's
   atmosphere layer and the reusable component library every page reuses:
     tokens · utilities · nav · buttons · hero · marquee · features · stats
     · split feature · audience cards · proof · case · resources · newsletter
     · compliance · end CTA · footer · cookie · responsive
   Brand palette only. Open Sauce One only. WCAG AA aware (see button notes).
   =========================================================================== */

/* ---- Website tokens (atmosphere) ------------------------------------------ */
:root {
  --w-abyss:   #080B1E;            /* deepest canvas */
  --w-abyss-2: #0C1130;            /* raised panel on abyss */
  --w-ink-grad: linear-gradient(180deg, #0A0E24 0%, #0E1638 50%, #0A0E26 100%);

  /* Glassmorphism */
  --glass-bg:     rgba(255,255,255,0.055);
  --glass-bg-2:   rgba(255,255,255,0.085);
  --glass-bd:     rgba(255,255,255,0.12);
  --glass-bd-2:   rgba(255,255,255,0.20);
  --glass-blur:   blur(14px) saturate(140%);

  /* Ambient glows (brand hues, low opacity) */
  --glow-core: radial-gradient(circle, color-mix(in srgb, var(--core-blue) 70%, transparent) 0%, transparent 70%);
  --glow-lime: radial-gradient(circle, color-mix(in srgb, var(--lime) 55%, transparent) 0%, transparent 70%);
  --glow-coral: radial-gradient(circle, color-mix(in srgb, var(--coral) 55%, transparent) 0%, transparent 70%);

  --w-maxw: 1240px;
  --w-edge: 32px;
  --seam: #0A0E26;            /* shared edge colour so dark sections blend */
}

/* ---- Layout primitives ---------------------------------------------------- */
body { background: var(--seam, #0A0E26); }
.wrap { width: 100%; max-width: var(--w-maxw); margin: 0 auto; padding-inline: var(--w-edge); }
.section { padding-block: clamp(72px, 10vw, 148px); position: relative; overflow: clip; }
.section--tight { padding-block: clamp(44px, 6vw, 80px); }
.section__inner { position: relative; z-index: 2; }

/* Section atmospheres. Dark sections share one seam colour at their top/bottom
   edges (--seam) so consecutive blue sections blend instead of hard-cutting. */
.atmos-deep {
  background: linear-gradient(180deg, var(--seam) 0%, #0E1638 50%, var(--seam) 100%);
  color: #fff;
}
.atmos-core {
  background:
    radial-gradient(116% 80% at 78% 6%, color-mix(in srgb, var(--core-blue) 60%, transparent) 0%, transparent 56%),
    linear-gradient(180deg, var(--seam) 0%, var(--core-blue) 52%, var(--seam) 100%);
  color: #fff;
}
/* Headings inherit dark --text-title from base; force light on dark sections. */
.atmos-deep :is(h1,h2,h3,.h1,.h2,.h3),
.atmos-core :is(h1,h2,h3,.h1,.h2,.h3) { color: #fff; }
.atmos-light {
  background:
    radial-gradient(100% 80% at 100% 0%, color-mix(in srgb, var(--core-blue) 7%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, #fff 0%, var(--light-blue) 100%);
}
.atmos-paper {
  background:
    radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--coral) 5%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, var(--light-blue) 0%, #fff 100%);
}

/* Ambient glow blob — drop inside a section, position via inline style */
.glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(40px); opacity: 0.5; pointer-events: none; }
.glow--core { background: var(--glow-core); }
.glow--lime { background: var(--glow-lime); opacity: 0.32; }
.glow--coral { background: var(--glow-coral); opacity: 0.34; }

/* Geometry layers (reuse motifs from styles.css) sit behind content */
.layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Universal soft seam fades — every dark section eases to --seam at its top and
   bottom edges, so all component/section transitions blend smoothly (no stark
   colour line between the navy and blue sections). Sit behind content + waves. */
.atmos-core::before, .atmos-deep::before,
.atmos-core::after, .atmos-deep::after {
  content: ""; position: absolute; left: 0; right: 0; height: 160px; z-index: 0; pointer-events: none;
}
.atmos-core::before, .atmos-deep::before { top: 0; background: linear-gradient(180deg, var(--seam), transparent); }
.atmos-core::after, .atmos-deep::after { bottom: 0; background: linear-gradient(0deg, var(--seam), transparent); }

/* ---- Typography roles ------------------------------------------------------ */
.eyebrow {
  --pulse-c: var(--coral);
  display: inline-flex; align-items: center; gap: 13px; margin: 0 0 22px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey-blue);
}
/* Live pulse dot (replaces the old dash) — a real-time heartbeat. */
.eyebrow::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--pulse-c); flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .eyebrow::before { animation: eyebrow-pulse 1.7s var(--ease-out, ease-out) infinite; }
}
@keyframes eyebrow-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pulse-c) 60%, transparent); }
  70%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.atmos-deep .eyebrow, .atmos-core .eyebrow, .hero .eyebrow { color: rgba(255,255,255,0.82); --pulse-c: var(--coral); }

.h-display { font-weight: 900; font-size: clamp(44px, 7vw, 96px); line-height: 0.94; letter-spacing: -0.04em; margin: 0; }
.h1 { font-weight: 800; font-size: clamp(33px, 4.6vw, 58px); line-height: 1.02; letter-spacing: -0.028em; margin: 0; }
.h2 { font-weight: 800; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -0.022em; margin: 0; }
.h3 { font-weight: 700; font-size: clamp(20px, 1.6vw, 25px); line-height: 1.16; letter-spacing: -0.01em; margin: 0; }
.lede { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; color: var(--text-muted); max-width: 56ch; }
.atmos-deep .lede, .atmos-core .lede { color: var(--pastel-grey); }
.measure { max-width: 60ch; }
.accent-lime { color: var(--lime); }

/* ---- Buttons (AA-safe: lime/white/core fills, never small coral text) ------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-size: 16px; font-weight: 700; line-height: 1;
  padding: 16px 28px; border-radius: var(--radius-md); border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap; position: relative;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-base);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--core-blue); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); box-shadow: var(--shadow-md); }
.btn--lime, a.btn--lime, a.btn--lime:visited, .btn--lime:hover, .btn--lime:focus { background: var(--lime); color: var(--dark-blue); }
.btn--lime:hover { background: color-mix(in srgb, var(--lime) 86%, #000); box-shadow: 0 8px 28px color-mix(in srgb, var(--lime) 28%, transparent); }
.btn--onlight-ghost { background: transparent; color: var(--core-blue); border-color: var(--hairline-strong); }
.btn--onlight-ghost:hover { background: var(--core-blue-06); border-color: var(--core-blue); }
.btn--ondark-ghost { background: rgba(255,255,255,0.04); color: #fff; border-color: var(--glass-bd-2); backdrop-filter: var(--glass-blur); }
.btn--ondark-ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.55); }
.btn--lime-outline { background: transparent; color: var(--lime); border-color: color-mix(in srgb, var(--lime) 55%, transparent); }
.btn--lime-outline:hover { background: var(--lime); color: var(--dark-blue); border-color: var(--lime); box-shadow: 0 8px 28px color-mix(in srgb, var(--lime) 28%, transparent); }
.btn .arr { background: transparent; color: inherit; transition: transform var(--dur-base) var(--ease-emphasis); }
.btn:hover .arr { transform: translateX(4px); }
.btn, .btn:hover, .btn:focus, .btn:focus-visible { text-decoration: none; }

.textlink { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--core-blue); text-decoration: none; position: relative; padding-bottom: 3px; }
.atmos-deep .textlink, .atmos-core .textlink { color: var(--lime); }
.textlink::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-emphasis); }
.textlink .arr { transition: transform var(--dur-base) var(--ease-emphasis); }
.textlink:hover .arr { transform: translateX(5px); }
.textlink:hover::after { transform: scaleX(1); }

/* ---- Skip link ------------------------------------------------------------- */
.skip { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--lime); color: var(--dark-blue);
  padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 700; transition: top var(--dur-base); }
.skip:focus { top: 16px; }

/* ---- Header / nav (glass) -------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky); transition: background var(--dur-base), border-color var(--dur-base), backdrop-filter var(--dur-base); border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--core-blue) 65%, transparent) 0%, color-mix(in srgb, var(--core-blue) 22%, transparent) 55%, transparent 100%); }
.site-header.is-scrolled { background: rgba(10,14,38,0.72); backdrop-filter: var(--glass-blur); border-bottom-color: var(--glass-bd); }
.nav { display: flex; align-items: center; gap: 26px; height: 76px; }
.nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.nav__logo img { height: 36px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.nav__links a { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.82); text-decoration: none; padding: 9px 14px; border-radius: var(--radius-sm); transition: background var(--dur-fast), color var(--dur-fast); }
.nav__links a:hover { background: rgba(255,255,255,0.10); color: #fff; }
.nav__spacer { flex: 1; }
.nav__item--has-menu { position: relative; display: inline-flex; align-items: center; }
.nav__menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: rgba(10,14,38,0.97); border: 1px solid var(--glass-bd); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); backdrop-filter: var(--glass-blur);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.18s var(--ease-standard), transform 0.18s var(--ease-standard), visibility 0.18s; z-index: var(--z-dropdown); }
.nav__menu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.nav__item--has-menu:hover .nav__menu, .nav__item--has-menu:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__menu a { padding: 9px 12px; border-radius: 8px; font-size: 14px; white-space: nowrap; color: rgba(255,255,255,0.82); }
.nav__menu a:hover { background: rgba(255,255,255,0.10); color: #fff; }
/* Mega-panel dropdown: caret + underline on parent, two-column panel */
.nav__item--has-menu > a { white-space: nowrap; }
.nav__item--has-menu > a::after { content: "\2192"; display: inline-block; margin-left: 8px; font-size: 0.92em; line-height: 1;
  transform: rotate(90deg); opacity: 1; color: var(--lime); transition: transform 0.2s var(--ease-standard), opacity 0.2s, color 0.2s; }
.nav__item--has-menu:hover > a::after, .nav__item--has-menu:focus-within > a::after { transform: rotate(-90deg); opacity: 1; color: var(--lime); }
.nav__item--has-menu > a::before { content: ""; position: absolute; left: 14px; right: 30px; bottom: 6px; height: 2px; background: var(--lime); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.2s var(--ease-standard); }
.nav__item--has-menu:hover > a::before, .nav__item--has-menu:focus-within > a::before { transform: scaleX(1); }
.nav__menu--mega { display: flex; flex-direction: row !important; padding: 0 !important; min-width: 460px; }
.nav__feature { flex: 0 0 208px; display: flex; flex-direction: column; gap: 7px; padding: 18px 18px 16px !important; border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
  background: linear-gradient(165deg, color-mix(in srgb, var(--core-blue) 34%, transparent), transparent 90%); border-right: 1px solid var(--glass-bd); }
.nav__feature:hover { background: linear-gradient(165deg, color-mix(in srgb, var(--lime) 16%, transparent), color-mix(in srgb, var(--core-blue) 22%, transparent)) !important; }
.nav__feature-name { color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.nav__feature-desc { color: var(--pastel-grey); font-size: 12.5px; line-height: 1.45; font-weight: 400; white-space: normal; }
.nav__feature-go { margin-top: auto; color: var(--lime); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.nav__feature-go .arr { display: inline-block; transition: transform 0.2s var(--ease-standard); }
.nav__feature:hover .nav__feature-go .arr { transform: translateX(3px); }
.nav__sublinks { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px 10px; flex: 1; }
.nav__sublinks::before { content: "In this section"; display: block; padding: 0 12px 7px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pastel-grey); opacity: 0.7; }
.nav__sublinks a { padding: 9px 12px; border-radius: 8px; font-size: 14px; white-space: nowrap; color: rgba(255,255,255,0.82); }
.nav__sublinks a:hover { background: rgba(255,255,255,0.10); color: #fff; }
.nav__cta { display: flex; align-items: center; gap: 10px; }
.nav__toggle { display: none; }

/* ---- Hero ------------------------------------------------------------------ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: clip;
  background: var(--w-ink-grad); color: #fff; padding-top: 76px; margin-top: -76px; }
.hero__layers { position: absolute; inset: 0; z-index: 0; }
.hero__radar { position: absolute; inset: -10% -10% -10% -10%; --rx: 88%; --ry: 22%;
  -webkit-mask-image: radial-gradient(circle at 88% 22%, #000 0, #000 36%, transparent 72%);
          mask-image: radial-gradient(circle at 88% 22%, #000 0, #000 36%, transparent 72%); }
.hero__dots { position: absolute; inset: 0; opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%); mask-image: linear-gradient(180deg, transparent, #000 60%); }
.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 48px; align-items: center; width: 100%; padding-block: clamp(40px, 6vw, 80px); }
.hero__copy { max-width: 600px; }
.hero__title { margin: 20px 0 0; color: #fff; }
.hero__title .ln { display: block; }
.hero__lede { margin: 28px 0 0; color: var(--pastel-grey); font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* Hero media: glass-framed floating image + parallax stat chips */
.hero__media { position: relative; align-self: center; height: min(72vh, 620px); }
.hero__frame { position: absolute; inset: 0; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--glass-bd); box-shadow: var(--shadow-xl); }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 56% center; }
.hero__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--dark-blue) 70%, transparent)); }
.chip { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 3px;
  background: var(--glass-bg-2); border: 1px solid var(--glass-bd); backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-md); padding: 14px 16px; box-shadow: var(--shadow-lg); }
.chip__k { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pastel-grey); display: flex; align-items: center; gap: 7px; }
.chip__v { font-weight: 900; font-size: 26px; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.chip__v .u { color: var(--lime); }
.chip--a { top: 8%; left: -7%; }
.chip--b { bottom: 12%; left: -4%; }
.chip--c { top: 30%; right: -6%; }

/* ---- Marquee / trust bar --------------------------------------------------- */
.marquee { background: var(--seam); overflow: hidden; padding-block: 44px; position: relative; }
.marquee::before, .marquee::after { display: none; }
.marquee__row { display: flex; align-items: center; gap: 28px; padding-block: 22px; flex-wrap: wrap; }
.marquee__label { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.marquee__logos { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Auto-scrolling logo carousel */
.logo-carousel { overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logo-track { display: flex; align-items: center; gap: 56px; width: max-content; margin: 0; padding: 0; list-style: none; }
.logo-track li { flex-shrink: 0; width: 168px; height: 118px; display: grid; place-items: center; }
.logo-track img { width: auto; height: auto; max-height: 52px; max-width: 150px; object-fit: contain; opacity: 1; transition: opacity var(--dur-base); }
.logo-track li:hover img { opacity: 1; }
/* All logos trimmed to content bounds and normalised to a common box for consistent visual size */
/* Compact badge/shield marks need extra height to match the visual mass of the wordmarks */
.logo-track .lg-wbd      { max-height: 62px; }
.logo-track .lg-mattel   { max-height: 70px; }
.logo-track .lg-nhl      { max-height: 70px; }
.logo-track .lg-paramount{ max-height: 68px; }
.logo-track .lg-amazon   { max-height: 64px; }
@media (prefers-reduced-motion: no-preference) {
  .logo-track { animation: logo-scroll 46s linear infinite; }
  .logo-carousel:hover .logo-track { animation-play-state: paused; }
}
@keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Placeholder logo plates — swap each for the real client SVG when cleared. */
.marquee__logos span { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px;
  border: 1px solid var(--glass-bd); border-radius: var(--radius-sm); background: rgba(255,255,255,0.05);
  font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: rgba(255,255,255,0.66); white-space: nowrap; }

/* ---- Section heading block ------------------------------------------------- */
.head { max-width: 760px; margin-bottom: 8px; }
section[aria-labelledby="scale-title"] .head { max-width: 960px; }
.head .lede { margin-top: 18px; }

/* ---- Feature cards (glass on dark) ----------------------------------------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.feat { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-bd); border-radius: var(--radius-lg);
  padding: 28px 26px 30px; backdrop-filter: var(--glass-blur); overflow: hidden;
  transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base), background var(--dur-base); }
.feat:hover { transform: translateY(-4px); border-color: var(--glass-bd-2); background: var(--glass-bg-2); }
.feat {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,0.06) 0%, transparent 46%),
    var(--glass-bg);
}
/* glowing top edge that fills in on hover — elevates the flat card */
.feat::after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px;
  background: var(--lime); box-shadow: 0 0 14px color-mix(in srgb, var(--lime) 70%, transparent);
  transition: width var(--dur-slow) var(--ease-emphasis); }
.feat:hover::after { width: 100%; }
.feat__icon { display: inline-flex; margin-bottom: 20px; }
.feat__icon span { width: 12px; height: 12px; border-radius: 50%; background: var(--lime); position: relative; }
.feat__icon span::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--lime) 60%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .feat__icon span::after { animation: tif-pulse 1.7s ease-out infinite; }
}
.feat__bar { width: 28px; height: 3px; background: var(--lime); border-radius: 2px; margin: 13px 0 18px; opacity: 0.9; }
.feat h3 { margin: 0 0 10px; color: #fff; }
.feat p { margin: 0; color: var(--pastel-grey); font-size: 15.5px; line-height: 1.55; }
.feat--wide { grid-column: span 1; }
.feat--cta { display: flex; flex-direction: column; justify-content: center; background: transparent; border-style: dashed; }
.feat--cta:hover { transform: none; }

/* Vertical scan band — the Features section's distinct motif (not waves) */
.scan { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, transparent 0 47%, color-mix(in srgb, var(--lime) 13%, transparent) 49.5% 50.5%, transparent 53% 100%);
  background-size: 100% 280%; opacity: 0.7; }
@media (prefers-reduced-motion: no-preference) {
  .scan { animation: scan-down 9s linear infinite; }
}
@keyframes scan-down { 0% { background-position: 0 -90%; } 100% { background-position: 0 190%; } }

/* ---- Stat / figure module -------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 52px; }
.stat__num { font-weight: 900; font-size: clamp(36px, 4vw, 50px); line-height: 1; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.stat__num .u { color: var(--lime); font-weight: 500; font-size: 0.6em; letter-spacing: 0.005em; line-height: 1.1; }
.stat__cap { margin-top: 12px; color: var(--pastel-grey); font-size: 15px; line-height: 1.45; max-width: 24ch; }
.live-tag { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime); }

/* ---- Split feature (image + copy) ------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 76px); align-items: center; }
.split--flip .split__media { order: -1; }
.split__media { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-lg); border: 1px solid var(--glass-bd); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* The Data: method pipeline (connected pulse dots) */
.method { list-style: none; margin: 28px 0 30px; padding: 0; display: grid; gap: 22px; position: relative; }
.method::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 1.5px;
  background: linear-gradient(180deg, var(--lime), color-mix(in srgb, var(--lime) 8%, transparent)); opacity: 0.5; }
.method li { display: flex; gap: 16px; align-items: flex-start; position: relative; }
.method__dot { width: 13px; height: 13px; border-radius: 50%; background: var(--lime); flex-shrink: 0; margin-top: 3px; position: relative; z-index: 1; }
.method__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--lime) 55%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .method__dot::after { animation: tif-pulse 3.2s var(--ease-out, ease-out) infinite; }
  .method li:nth-child(2) .method__dot::after { animation-delay: 1s; }
  .method li:nth-child(3) .method__dot::after { animation-delay: 2s; }
}
.method li b { display: block; color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .method__dot { --pulse-c: var(--lime); animation: eyebrow-pulse 2.4s var(--ease-out, ease-out) infinite; }
  .method li:nth-child(2) .method__dot { animation-delay: 0.8s; }
  .method li:nth-child(3) .method__dot { animation-delay: 1.6s; }
}

.product__go { display: block; margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--lime); }
a.product { text-decoration: none; color: inherit; display: block; }
/* Core data products — wide card row in the centred Data section */
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; max-width: none; margin: 10px auto 0; text-align: left; }
.product { position: relative; background: color-mix(in srgb, var(--core-blue) 26%, transparent); border: 1px solid color-mix(in srgb, #fff 10%, transparent); border-radius: var(--radius-lg); padding: 28px 26px 30px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow: hidden; transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base), background var(--dur-base); }
.product:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--lime) 45%, transparent); background: color-mix(in srgb, var(--core-blue) 34%, transparent); }
.product::after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: var(--lime); box-shadow: 0 0 14px color-mix(in srgb, var(--lime) 70%, transparent); transition: width var(--dur-slow) var(--ease-emphasis); }
.product:hover::after { width: 100%; }
.product__dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--lime); --pulse-c: var(--lime); }
.product__name { margin: 16px 0 2px; color: #fff; font-weight: 800; font-size: 24px; letter-spacing: -0.01em; }
.product__age { margin: 0 0 12px; color: var(--lime); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.product__desc { margin: 0; color: var(--pastel-grey); font-size: 15px; line-height: 1.55; }
.product .spec { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--glass-bd); display: flex; flex-direction: column; gap: 8px; }
.product .spec li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.product .spec span { color: var(--pastel-grey); }
.product .spec b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.statcard { background: var(--glass-bg); border: 1px solid var(--glass-bd); border-radius: var(--radius-lg); padding: 26px 24px; }
.statcard__n { font-weight: 900; font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: -0.03em; color: var(--lime); }
.statcard__n .u { font-size: 0.42em; font-weight: 800; margin-left: 2px; }
.statcard__l { margin-top: 12px; color: var(--pastel-grey); font-size: 14px; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .product__dot { animation: eyebrow-pulse 2.4s var(--ease-out, ease-out) infinite; }
  .product:nth-child(2) .product__dot { animation-delay: 0.8s; }
  .product:nth-child(3) .product__dot { animation-delay: 1.6s; }
}
@media (max-width: 760px) { .products { grid-template-columns: 1fr; max-width: 460px; } }

/* Family-economy statement band — kid-in-the-driving-seat image on brand coral */
.drive { position: relative; overflow: hidden; text-align: left; display: flex; align-items: center;
  min-height: clamp(420px, 42vw, 560px); padding-block: clamp(48px, 6vw, 80px);
  background-color: var(--coral);
  background-image: linear-gradient(90deg, rgba(255,107,107,0) 22%, var(--coral) 50%), url("../img/driving-seat.jpg");
  background-size: cover; background-position: left center; background-repeat: no-repeat; }
.drive .wrap { position: relative; z-index: 1; display: flex; justify-content: flex-end; width: 100%; }
.drive__text { max-width: 600px; text-align: left; }
.drive .eyebrow { color: var(--dark-blue); justify-content: flex-start; gap: 9px; }
.drive .eyebrow::before { display: none; }
.drive .eyebrow .tif-pulse-dot { width: 10px; height: 10px; background: var(--dark-blue); }
.drive .eyebrow .tif-pulse-dot::after { inset: -4px; border: 1.5px solid var(--dark-blue); animation: drive-pulse 1.8s var(--ease-out, ease-out) infinite; }
@keyframes drive-pulse { 0% { transform: scale(0.5); opacity: 0.85; } 75% { transform: scale(2.8); opacity: 0; } 100% { transform: scale(2.8); opacity: 0; } }
.drive__line { color: var(--dark-blue); font-weight: 800; font-size: clamp(30px, 4.4vw, 58px); line-height: 1.04; letter-spacing: -0.02em; margin: 14px 0 0; text-wrap: balance; perspective: 900px; }
.drive__fig { color: #fff; white-space: nowrap; display: inline-block; }
.drive__dollar { display: inline-block; }
.drive .lede { color: var(--dark-blue); font-weight: 500; margin: 22px 0 0; max-width: 46ch; }
.drive__inline-pct { color: #fff; font-weight: 800; font-size: 1.4em; letter-spacing: -0.01em; }
@media (max-width: 1024px) {
  .drive { min-height: auto; text-align: center; background-size: 100% auto; background-position: center top;
    background-image: url("../img/driving-seat.jpg"); padding: clamp(210px, 42vw, 330px) 0 clamp(36px, 8vw, 56px); }
  .drive .wrap { justify-content: center; }
  .drive__text { max-width: 560px; text-align: center; }
  .drive .eyebrow { justify-content: center; }
}
.method li p { margin: 0; color: var(--pastel-grey); font-size: 15px; line-height: 1.5; }

/* The Data: framed image with lime accent + floating metric chips */
.data-viz-frame { position: relative; }
.data-frame { position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--glass-bd); box-shadow: var(--shadow-xl); }
.data-frame::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--lime), transparent); }
.data-frame img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.data-frame, .case__media, .split__media { overflow: clip; }
.chip--df1 { top: 20px; left: -24px; }
.chip--df2 { bottom: 24px; right: -20px; }
.split__list { --pulse-c: var(--coral); margin: 22px 0 28px; padding: 0; list-style: none; display: grid; gap: 14px; }
.split__list li { display: flex; gap: 13px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
.split__list .b { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); margin-top: 6px; flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .split__list .b { animation: eyebrow-pulse 2.8s var(--ease-out, ease-out) infinite; }
  .split__list li:nth-child(2) .b { animation-delay: 0.9s; }
  .split__list li:nth-child(3) .b { animation-delay: 1.8s; }
}

/* ---- Audience cards (glass) ------------------------------------------------ */
.aud-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 52px; }
.aud { display: flex; flex-direction: column; gap: 13px; background: var(--glass-bg); border: 1px solid var(--glass-bd);
  border-radius: var(--radius-lg); padding: 32px; text-decoration: none; color: inherit; backdrop-filter: var(--glass-blur);
  position: relative; overflow: hidden; transition: transform var(--dur-base), border-color var(--dur-base), background var(--dur-base); }
.aud:hover { transform: translateY(-4px); border-color: var(--glass-bd-2); background: var(--glass-bg-2); text-decoration: none; }
.aud:hover, .aud:hover .textlink, .aud .textlink:hover { text-decoration: none; }
.aud::after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: var(--lime);
  box-shadow: 0 0 14px color-mix(in srgb, var(--lime) 70%, transparent); transition: width var(--dur-slow) var(--ease-emphasis); }
.aud:hover::after { width: 100%; }
/* "Signal channel" chip — a live, on-theme label instead of plain caps text */
.aud__tag { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  padding: 7px 15px 7px 12px; border-radius: 999px; margin-bottom: 2px;
  background: color-mix(in srgb, var(--lime) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--lime) 32%, transparent);
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); }
.aud__tag .d { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); flex-shrink: 0; position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .aud__tag .d { animation: eyebrow-pulse 2.8s var(--ease-out, ease-out) infinite; --pulse-c: var(--lime); }
  .aud:nth-child(2) .aud__tag .d { animation-delay: 0.7s; }
  .aud:nth-child(3) .aud__tag .d { animation-delay: 1.4s; }
  .aud:nth-child(4) .aud__tag .d { animation-delay: 2.1s; }
}
.aud h3 { margin: 0; color: #fff; }
.aud p { margin: 0; color: var(--pastel-grey); font-size: 15.5px; line-height: 1.55; }
.aud .textlink { margin-top: auto; }

/* ---- Proof: quote + data viz ----------------------------------------------- */
.proof { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.quote__mark { font-weight: 900; font-size: 96px; line-height: 0.4; color: var(--lime); display: block; height: 42px; }
.quote blockquote { margin: 0; font-weight: 800; font-size: clamp(25px, 2.7vw, 38px); line-height: 1.22; letter-spacing: -0.018em; color: #fff; max-width: 17ch; }
.quote .hl { color: var(--lime); }
.quote figcaption { margin-top: 26px; color: var(--pastel-grey); font-size: 15px; }
.quote figcaption b { color: #fff; display: block; font-size: 16px; }

.viz { background: var(--glass-bg-2); border: 1px solid var(--glass-bd); border-radius: var(--radius-xl); padding: 28px; backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-lg); }
.viz__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 12px; }
.viz__title { font-weight: 700; font-size: 15px; color: #fff; }
.viz__foot { margin: 18px 0 0; font-size: 12.5px; color: var(--pastel-grey); }

/* Live attention monitor — animated multi-stream area/line chart */
.livechart { position: relative; }
.livechart svg { width: 100%; height: auto; display: block; overflow: visible; }
.lc-grid { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
.lc-base { stroke: rgba(255,255,255,0.18); stroke-width: 1; }
.lc-area { fill: var(--lime); opacity: 0.15; }
.lc-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lc-line--lime { stroke: var(--lime); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--lime) 55%, transparent)); }
.lc-line--coral { stroke: var(--coral); }
.lc-line--white { stroke: rgba(255,255,255,0.8); }
.lc-dot--lime { fill: var(--lime); } .lc-dot--coral { fill: var(--coral); } .lc-dot--white { fill: #fff; }
.lc-ping { fill: none; stroke: var(--lime); stroke-width: 1.5; }
.lc-xaxis { display: flex; justify-content: space-between; margin-top: 8px; padding: 0 4px; }
.lc-xaxis span { font-size: 11px; color: var(--pastel-grey); font-variant-numeric: tabular-nums; }
.lc-legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; }
.lc-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--pastel-grey); font-weight: 600; }
.lc-legend i { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
.lc-legend b { color: #fff; font-variant-numeric: tabular-nums; }
  .lc-line { stroke-dasharray: 700; stroke-dashoffset: 700; }
@media (prefers-reduced-motion: no-preference) {
  .lc-ping { animation: lc-ping 2.6s ease-out infinite; }
}
@keyframes lc-draw { to { stroke-dashoffset: 0; } }
@keyframes lc-ping { 0% { r: 4; opacity: 0.8; } 70% { opacity: 0; } 100% { r: 17; opacity: 0; } }

/* Interactive 360° family-life donut (The Data) */
.donutviz { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.donut { width: 300px; max-width: 100%; height: auto; }
.donut__seg { fill: none; stroke-width: 24; transition: stroke-width var(--dur-base) var(--ease-standard), opacity var(--dur-base); cursor: pointer; }
.donut.has-active .donut__seg { opacity: 0.4; }
.donut__seg:hover, .donut__seg.is-active { stroke-width: 32; opacity: 1; }
.donut__c1 { font: 900 36px var(--font-sans); fill: #fff; text-anchor: middle; letter-spacing: -0.02em; }
.donut__c2 { font: 600 12px var(--font-sans); fill: var(--pastel-grey); text-anchor: middle; letter-spacing: 0.04em; }
.donut__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 24px; width: 100%; max-width: 360px; list-style: none; margin: 0; padding: 0; }
.donut__legend li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--pastel-grey); cursor: pointer; transition: color var(--dur-fast); }
.donut__legend li:hover { color: #fff; }
.donut__legend i { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.donut__legend b { color: #fff; margin-left: auto; font-variant-numeric: tabular-nums; }
.donut__hint { margin: 0; font-size: 12.5px; color: var(--pastel-grey); opacity: 0.8; }
@media (prefers-reduced-motion: no-preference) {
  .reveal.in .donut { animation: donut-in 0.9s var(--ease-out, ease) both; }
}
@keyframes donut-in { from { transform: scale(0.84) rotate(-14deg); } to { transform: none; } }

/* Option 3 — centred Data section: copy on top, large wheel below, labels rotate on scroll */
.data--center .split { grid-template-columns: 1fr; gap: clamp(20px,3vw,32px); justify-items: center; text-align: center; }
.data--center .split__copy { max-width: 900px; }
.data--center .split > .split__copy:first-child { justify-self: stretch; width: 100%; max-width: none; }
.data--center .split > .split__copy:last-child { justify-self: stretch; width: 100%; max-width: none; }
.data--center #data-title { max-width: none; white-space: nowrap; font-size: clamp(30px, 4.6vw, 60px); }
.data--center .split__copy:first-child .lede { max-width: 60ch; margin-left: auto; margin-right: auto; }
@media (max-width: 920px) { .data--center #data-title { white-space: normal; font-size: clamp(30px, 8vw, 46px); } }
.data--center .method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 940px; margin-inline: auto; text-align: left; }
.data--center .method::before { display: none; }
@media (max-width: 760px) { .data--center .method { grid-template-columns: 1fr; max-width: 460px; } }
.data--center .wheel { width: min(680px, 88vw, 74vh); }
.data--center .wheel__rot { transition: transform 0.15s linear; }

/* Option 2 — LEFT-ALIGNED Data variant. Overrides .data--center; remove the `data--left` class to revert to centred. */
.data--left .split { grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); justify-items: stretch; align-items: center; text-align: left; }
.data--left .split__copy { max-width: 620px; }
.data--left .split > .split__copy:first-child { display: flex; flex-direction: column; grid-column: 1; grid-row: 1; justify-self: start; width: auto; max-width: 620px; }
.data--left .split__copy:first-child .eyebrow { order: -1; margin-top: 0 !important; margin-bottom: 8px; }
.data--left .data-viz-frame { grid-column: 2; grid-row: 1; }
.data--left .split > .split__copy:last-child { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; max-width: none; margin-top: clamp(24px, 3vw, 48px); }
.data--left #data-title { white-space: normal; text-align: left; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.05; max-width: 15ch; margin: 12px 0 0; }
.data--left .eyebrow { justify-content: flex-start !important; padding-left: 0 !important; }
.data--left .split__copy:first-child .lede { margin: 18px 0 0 !important; text-align: left; max-width: 48ch; }
.data--left .wheel { width: min(480px, 100%, 70vh); margin: 0 auto; }
.data--left .products { max-width: none; text-align: left; }
.data--left .btn { margin-top: 28px !important; align-self: flex-start; }
.data--left .wheel__rot { transition: transform 0.15s linear; }
/* Scroll-revealed underline accent */
.ul-reveal { position: relative; white-space: nowrap; }
.ul-reveal::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.02em; height: 0.07em; background: var(--lime); border-radius: 2px; transform: scaleX(0); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) { .ul-reveal::after { transition: transform 0.7s var(--ease-out) 0.35s; } }
.reveal.in .ul-reveal::after { transform: scaleX(1); }
@media (max-width: 900px) {
  .data--left .split { grid-template-columns: 1fr; text-align: center; }
  .data--left .data-viz-frame { grid-column: 1; grid-row: auto; }
  .data--left .split > .split__copy:first-child { grid-column: 1; grid-row: auto; max-width: none; align-items: center; }
  .data--left .split > .split__copy:last-child { grid-row: auto; }
  .data--left #data-title { text-align: center; max-width: none; }
  .data--left .eyebrow { justify-content: center !important; }
  .data--left .split__copy:first-child .lede { margin-left: auto !important; margin-right: auto !important; text-align: center; }
  .data--left .btn { align-self: center; }
}

/* Signature 360° wheel */
.wheelviz { display: flex; flex-direction: column; align-items: center; gap: 18px; position: relative; }
.wheelviz::before { content: ""; position: absolute; left: 50%; top: 50%; width: 86%; aspect-ratio: 1; transform: translate(-50%,-50%);
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--core-blue) 65%, transparent) 0%, color-mix(in srgb, var(--lime) 10%, transparent) 45%, transparent 70%);
  filter: blur(46px); opacity: 0.65; z-index: 0; pointer-events: none; }
.wheel { width: min(460px, 100%); position: relative; z-index: 1; }
.wheel__svg { width: 100%; height: auto; display: block; overflow: visible; }
.wheel__seg { fill: var(--core-blue); stroke: var(--dark-blue); stroke-width: 1.5; cursor: pointer; transition: fill 0.25s var(--ease-standard), stroke 0.2s var(--ease-standard); }
.wheel__svg.has-active .wheel__seg { fill: color-mix(in srgb, var(--core-blue) 70%, var(--dark-blue)); }
.wheel__seg:hover, .wheel__seg.is-active { stroke: var(--lime); stroke-width: 2.5; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--lime) 80%, transparent)); }
.wheel__lbl { fill: #fff; font: 700 7px var(--font-sans); text-anchor: middle; dominant-baseline: middle; text-transform: uppercase; letter-spacing: 0.02em; pointer-events: none; }
.wheel__c1 { fill: #fff; font: 900 30px var(--font-sans); text-anchor: middle; dominant-baseline: middle; letter-spacing: -0.02em; transition: font-size 0.22s var(--ease-standard); }
.wheel__c1--cat { font-size: clamp(13px, 1.5vw, 17px); }
.wheel__c2 { fill: var(--pastel-grey); font: 600 11px var(--font-sans); text-anchor: middle; letter-spacing: 0.03em; }
@media (prefers-reduced-motion: no-preference) {
  .reveal.in .wheel__svg { animation: donut-in 0.9s var(--ease-out, ease) both; }
}

/* Animated vertical "attention monitor" column chart */
.colchart { position: relative; display: flex; align-items: flex-end; gap: 16px; height: 230px; margin-top: 6px; }
.colchart__grid { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.07); }
.colchart__grid:nth-of-type(1) { top: 25%; } .colchart__grid:nth-of-type(2) { top: 50%; } .colchart__grid:nth-of-type(3) { top: 75%; }
.col { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; height: 100%; }
.col__track { width: 100%; flex: 1; display: flex; align-items: flex-end; }
.col__bar { position: relative; width: 100%; height: 0; border-radius: 10px 10px 3px 3px; display: flex; justify-content: center; }
.js .col__bar { height: 0; }
@media (prefers-reduced-motion: no-preference) { .col__bar { transition: height 1.3s var(--ease-emphasis); } }
.col__bar--lime { background: linear-gradient(180deg, var(--lime), color-mix(in srgb, var(--lime) 32%, transparent)); box-shadow: 0 0 22px color-mix(in srgb, var(--lime) 38%, transparent); }
.col__bar--coral { background: linear-gradient(180deg, var(--coral), color-mix(in srgb, var(--coral) 32%, transparent)); }
.col__bar--white { background: linear-gradient(180deg, #fff, rgba(255,255,255,0.32)); }
.col__bar--mute { background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.12)); }
.col__bar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.9); }
.col__val { position: absolute; top: -28px; font-weight: 900; font-size: 19px; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.col__lbl { font-size: 12.5px; color: var(--pastel-grey); text-align: center; }

/* ---- Case study ------------------------------------------------------------ */
.case { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.case__media { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 5/4; box-shadow: var(--shadow-lg); border: 1px solid var(--glass-bd); }
.case__media img { width: 100%; height: 100%; object-fit: cover; }
.case__metrics { display: flex; gap: 40px; margin-top: 28px; flex-wrap: wrap; }
.case__metric .n { font-weight: 900; font-size: 42px; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.case__metric .n .u { color: var(--lime); }
.case__metric .l { font-size: 13.5px; color: var(--pastel-grey); margin-top: 4px; max-width: 16ch; }

/* ---- Resources ------------------------------------------------------------- */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.res { display: flex; flex-direction: column; background: var(--glass-bg); border: 1px solid var(--glass-bd); border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none; color: inherit; backdrop-filter: var(--glass-blur);
  transition: transform var(--dur-base), border-color var(--dur-base); }
.res:hover { transform: translateY(-4px); border-color: var(--glass-bd-2); }
.res__media { aspect-ratio: 16/10; overflow: hidden; position: relative; }
.res__media img { width: 100%; height: 100%; object-fit: cover; }
/* Trend-line chart media (webinar card) */
.res__media--chart { background: linear-gradient(160deg, var(--core-blue), var(--dark-blue)); }
.trendchart { width: 100%; height: 100%; display: block; }
.trendchart .tc-grid { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
.trendchart .tc-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.trendchart .tc-line--lime { stroke: var(--lime); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--lime) 55%, transparent)); }
.trendchart .tc-line--coral { stroke: var(--coral); opacity: 0.85; }
.trendchart .tc-area { fill: color-mix(in srgb, var(--lime) 14%, transparent); }
.trendchart .tc-dot { fill: #fff; stroke: var(--lime); stroke-width: 2.5; }
@media (prefers-reduced-motion: no-preference) {
  .trendchart .tc-line { stroke-dasharray: 520; stroke-dashoffset: 520; }
  .news__trend.trendchart .tc-line { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
  .res.in .trendchart .tc-line--lime { animation: tc-draw 1.4s var(--ease-out, ease) forwards; }
  .res.in .trendchart .tc-line--coral { animation: tc-draw 1.4s var(--ease-out, ease) 0.2s forwards; }
  .news.in .news__trend .tc-line--lime { animation: tc-draw 1.6s var(--ease-out, ease) forwards; }
  .news.in .news__trend .tc-line--coral { animation: tc-draw 1.6s var(--ease-out, ease) 0.2s forwards; }
}
@keyframes tc-draw { to { stroke-dashoffset: 0; } }
.res__kind { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; background: #fff; color: var(--core-blue); }
.res__kind--article { background: #C9CEDB; color: var(--core-blue); }
.res__kind--report { background: var(--lime); color: var(--dark-blue); }
.res__kind--webinar { background: var(--coral); color: #fff; }
.res__kind--case { background: var(--light-blue); color: var(--core-blue); }
.res__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.res__body h3 { margin: 0; font-size: 19px; color: #fff; }
.res__body p { margin: 0; color: var(--pastel-grey); font-size: 14.5px; line-height: 1.5; }
.res__body .textlink { margin-top: auto; }

/* ---- Newsletter ------------------------------------------------------------ */
.news { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--core-blue), var(--dark-blue)); border: 1px solid var(--glass-bd);
  border-radius: var(--radius-xl); padding: clamp(34px, 4vw, 60px); margin-top: 60px; }
.news__form { position: relative; display: flex; gap: 12px; flex-wrap: wrap; }
.news__form input { flex: 1; min-width: 220px; height: 54px; border-radius: var(--radius-md); border: 1.5px solid var(--glass-bd-2);
  background: #1a2150; color: #fff; padding: 0 18px; font-family: var(--font-sans); font-size: 16px; }
.news__form input::placeholder { color: rgba(255,255,255,0.6); }
.news__form input:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 30%, transparent); }
.news__form, .news h2, .news .eyebrow, .news p, .news small { position: relative; z-index: 1; }
.news small { display: block; margin-top: 14px; color: var(--pastel-grey); font-size: 13px; }
.news__trend { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.5; pointer-events: none; }
.news__trend path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.news__trend-dash { stroke: var(--coral); stroke-dasharray: 3 7; opacity: 0.55; }
.news__trend-line { stroke: var(--lime); opacity: 0.6; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--lime) 45%, transparent)); }
.news__trend-dot { fill: var(--lime); }

/* ---- Data page: coverage modules (audiences/stages, regions, topics) ------- */
.stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 28px; }
.stage { background: var(--glass-bg); border: 1px solid var(--glass-bd); border-radius: var(--radius-md); padding: 18px 16px; }
.stage__age { font-size: 13px; font-weight: 700; color: var(--lime); letter-spacing: 0.04em; }
.stage__name { font-size: 16px; font-weight: 700; color: #fff; margin: 4px 0 7px; }
.stage p { font-size: 13px; line-height: 1.5; color: var(--pastel-grey); margin: 0; }
@media (max-width: 980px) { .stages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stages { grid-template-columns: 1fr; } }

.regions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; align-items: start; }
.region__label { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); margin: 0 0 14px; }
.region__chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) { .regions { grid-template-columns: 1fr; gap: 30px; } }

/* ---- Markets region panels (final) ---- */
.regions--panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; align-items: start; }
.region { background: var(--glass-bg); border: 1px solid var(--glass-bd); border-radius: var(--radius-lg); padding: 22px 24px 24px; backdrop-filter: var(--glass-blur); }
.region__head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--glass-bd); }
.region__head .region__label { margin: 0; white-space: nowrap; letter-spacing: 0.06em; font-size: 12px; }
.region__list { list-style: none; margin: 0; padding: 0; }
.region__list li { color: #fff; font-size: 15px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, #fff 6%, transparent); }
.region__list li:last-child { border-bottom: 0; }
@media (max-width: 760px) { .regions--panel { grid-template-columns: 1fr; gap: 14px; } }

/* --- Mock: what you can do with the data (review) --- */
.mock-flag { margin: 48px 0 16px; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lime); opacity: 0.7; }
/* Option A: query line */
.askwrap { max-width: none; padding: clamp(8px, 2vw, 24px) 0 clamp(20px, 4vw, 48px); }
.ask { font-size: clamp(26px, 3.6vw, 46px); font-weight: 600; line-height: 1.4; color: var(--pastel-grey); letter-spacing: -0.01em; margin: clamp(28px, 5vw, 56px) auto 0; text-align: center; max-width: 900px; }
.ask__tok { display: inline-block; color: var(--dark-blue); background: var(--lime); border-radius: 8px; padding: 1px 12px; font-weight: 800; transition: opacity 0.26s var(--ease-out, ease), transform 0.26s var(--ease-out, ease); }
.ask__tok.is-swap { opacity: 0; transform: translateY(-6px); }
.ask__cap { margin: 28px 0 0; font-size: 16px; line-height: 1.6; color: var(--pastel-grey); max-width: 54ch; }
.ask__cap--lead { margin: 0; }
/* Option B: connect-the-dots flow line */
.flow { display: flex; gap: 28px; margin-top: 44px; position: relative; }
.flow__step { flex: 1; position: relative; padding-top: 30px; }
.flow__step::before { content: ""; position: absolute; top: 8px; left: 9px; right: -28px; height: 2px; background: color-mix(in srgb, var(--lime) 45%, transparent); }
.flow__step:last-child::before { display: none; }
.flow__dot { position: absolute; top: 2px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px var(--core-blue), 0 0 14px color-mix(in srgb, var(--lime) 65%, transparent); }
.flow__kicker { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); margin-bottom: 8px; }
.flow__step p { margin: 0; color: #fff; font-size: 16px; line-height: 1.5; }
.flow__cap { margin: 26px 0 0; color: var(--pastel-grey); font-size: 16px; }
@media (max-width: 760px) { .flow { flex-direction: column; gap: 26px; } .flow__step { padding-top: 0; padding-left: 34px; } .flow__step::before { top: 4px; left: 7px; right: auto; bottom: -26px; width: 2px; height: auto; } .flow__dot { top: 3px; } }
.globe-wrap { display: flex; justify-content: center; margin: 8px auto 44px; }
.globe { position: relative; width: min(560px, 88vw); aspect-ratio: 1; touch-action: none; }
.globe__svg { width: 100%; height: 100%; display: block; cursor: grab; opacity: 0; transition: opacity 0.6s var(--ease-out, ease); }
.globe.is-ready .globe__svg { opacity: 1; }
.globe__svg:active { cursor: grabbing; }
.globe__grat { fill: none; stroke: rgba(255,255,255,0.10); stroke-width: 0.5; }
.globe__land { fill: rgba(255,255,255,0.09); stroke: #0a1130; stroke-width: 0.4; }
.globe__land--on { fill: color-mix(in srgb, var(--lime) 30%, #14224f); }
.globe__pin { fill: var(--lime); stroke: #0a1130; stroke-width: 1.5; cursor: pointer; transition: r 0.15s var(--ease-out, ease); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--lime) 70%, transparent)); }
.globe__pin:hover, .globe__pin.is-active { r: 8; }
@media (prefers-reduced-motion: no-preference) { .globe__pin { animation: globe-pin-pulse 2.4s var(--ease-out, ease-out) infinite; } }
@keyframes globe-pin-pulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
.globe__hint { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pastel-grey); opacity: 0.6; pointer-events: none; }
.globe.is-ready .globe__hint { animation: globe-hint-fade 1s var(--ease-out, ease) 4s forwards; }
@keyframes globe-hint-fade { to { opacity: 0; } }
.globe__tip { position: absolute; transform: translate(-50%, calc(-100% - 16px)); background: rgba(10,17,48,0.96); border: 1px solid var(--glass-bd); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); backdrop-filter: var(--glass-blur); padding: 14px 16px; min-width: 300px; text-align: left; pointer-events: none; z-index: 3; }
.globe__tip::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: rgba(10,17,48,0.96); border-right: 1px solid var(--glass-bd); border-bottom: 1px solid var(--glass-bd); }
.globe__tip-name { display: block; color: #fff; font-weight: 700; font-size: 15px; }
.globe__tip-region { display: block; color: var(--lime); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }
.globe__tip-sample { display: block; color: var(--pastel-grey); font-size: 13px; margin-top: 6px; }
.globe__tip-tbl { width: 100%; border-collapse: collapse; margin-top: 10px; }
.globe__tip-tbl thead th { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pastel-grey); text-align: right; padding: 0 0 5px; }
.globe__tip-tbl thead th:first-child { text-align: left; }
.globe__tip-tbl tbody th { text-align: left; font-size: 12px; font-weight: 700; color: var(--lime); padding: 5px 0; }
.globe__tip-tbl td { text-align: right; font-size: 13px; color: #fff; font-variant-numeric: tabular-nums; padding: 5px 0 5px 14px; white-space: nowrap; }
.globe__tip-tbl td span { color: var(--pastel-grey); font-size: 10px; }
.globe__tip-tbl td.since { color: #fff; font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
#data-audiences, #data-topics, #data-markets { scroll-margin-top: 180px; }
.globe__tip-tbl thead th.since { text-align: right; }
.globe__tip-since { display: block; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--glass-bd); font-size: 11px; color: var(--pastel-grey); }

.topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 44px; }
.topic { background: var(--glass-bg); border: 1px solid var(--glass-bd); border-radius: var(--radius-lg); padding: 26px 24px; }
.topic h3 { color: #fff; font-size: 19px; margin: 0 0 6px; }
.topic > p { color: var(--pastel-grey); font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.topic__chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) { .topics { grid-template-columns: 1fr; } }

/* Life-stage journey — connected horizontal timeline (ages ascend L→R) */
.journey { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: 40px; }
.journey::before { content: ""; position: absolute; left: 6%; right: 6%; top: 42px; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--lime) 8%, transparent), var(--lime)); opacity: 0.55; }
.jstage { position: relative; padding-top: 70px; text-align: left; }
.jstage::before { content: ""; position: absolute; top: 34px; left: 14px; width: 18px; height: 18px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px var(--core-blue), 0 0 18px color-mix(in srgb, var(--lime) 65%, transparent); }
.jstage__age { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--lime); text-transform: uppercase; }
.jstage__name { font-size: 17px; font-weight: 700; color: #fff; margin: 3px 0 7px; }
.jstage p { font-size: 13px; line-height: 1.5; color: var(--pastel-grey); margin: 0; }
@media (max-width: 900px) { .journey { grid-template-columns: 1fr; gap: 0; } .journey::before { left: 21px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; } .jstage { padding: 0 0 28px 56px; } .jstage::before { top: 2px; left: 13px; } }

/* Topics as a bento grid — one wide feature tile, asymmetric */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.bento .topic { margin: 0; }
.bento .topic--wide { grid-column: span 2; }
@media (max-width: 860px) { .bento { grid-template-columns: 1fr; } .bento .topic--wide { grid-column: auto; } }

/* Markets — stat-anchored split */
.markets { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(32px, 5vw, 64px); align-items: start; margin-top: 8px; }
.markets__stat { position: relative; }
.markets__big { font-weight: 900; font-size: clamp(72px, 9vw, 120px); line-height: 0.9; letter-spacing: -0.04em; color: #fff; }
.markets__big .u { color: var(--lime); }
.markets__statlabel { color: var(--pastel-grey); font-size: 15px; line-height: 1.5; margin: 12px 0 0; max-width: 26ch; }
.markets__regions { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; }
@media (max-width: 860px) { .markets { grid-template-columns: 1fr; gap: 36px; } .markets__regions { grid-template-columns: 1fr; gap: 28px; } }

/* Solutions: decision-intelligence access model (self-serve → bespoke ladder) */
.spectrum { display: flex; align-items: center; gap: 12px; margin: 40px 0 0; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pastel-grey); }
.spectrum b { color: var(--lime); font-weight: 800; }
.spectrum .line { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--lime) 65%, transparent), color-mix(in srgb, var(--coral) 65%, transparent)); }
.ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 22px; }
.ladder { counter-reset: tier; }
.tier { position: relative; display: flex; flex-direction: column; background: var(--glass-bg); border: 1px solid var(--glass-bd); border-radius: var(--radius-lg); padding: 26px 20px 24px; overflow: hidden; transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base), background var(--dur-base); }
/* progress-tinted accent bar that fills on hover, warming lime -> coral across the row */
.tier::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--lime), color-mix(in srgb, var(--lime) 60%, var(--coral))); transition: transform var(--dur-slow) var(--ease-emphasis); }
.tier:nth-child(4)::before { background: linear-gradient(90deg, color-mix(in srgb, var(--lime) 40%, var(--coral)), var(--coral)); }
.tier--link::before { background: linear-gradient(90deg, color-mix(in srgb, var(--lime) 25%, var(--coral)), var(--coral)); }
.tier:hover { transform: translateY(-6px); border-color: var(--glass-bd-2); background: var(--glass-bg-2); }
.tier:hover::before { transform: scaleX(1); }
.tier__n { position: relative; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--lime); padding-left: 20px; }
.tier__n::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.tier:nth-child(4) .tier__n, .tier--link .tier__n { color: var(--coral); }
.tier:nth-child(4) .tier__n::before, .tier--link .tier__n::before { background: var(--coral); }
@media (prefers-reduced-motion: no-preference) {
  .tier:hover .tier__n::before { animation: eyebrow-pulse 1.6s var(--ease-out, ease-out) infinite; --pulse-c: currentColor; }
}
.tier__name { font-size: 18px; font-weight: 700; color: #fff; margin: 12px 0 10px; letter-spacing: -0.01em; }
.tier__mode { align-self: flex-start; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lime); border: 1px solid color-mix(in srgb, var(--lime) 40%, transparent); background: color-mix(in srgb, var(--lime) 8%, transparent); padding: 4px 9px; border-radius: var(--radius-pill); margin-bottom: 13px; }
.tier:nth-child(4) .tier__mode, .tier--link .tier__mode { color: var(--coral); border-color: color-mix(in srgb, var(--coral) 40%, transparent); background: color-mix(in srgb, var(--coral) 8%, transparent); }
.tier p { font-size: 13.5px; line-height: 1.5; color: var(--pastel-grey); margin: 0; }
@media (max-width: 1024px) { .ladder { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ladder { grid-template-columns: 1fr; } .spectrum { font-size: 11px; gap: 8px; } }
.tier--link { text-decoration: none; }
.tier--link:hover { border-color: color-mix(in srgb, var(--lime) 55%, transparent); }
.tier__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--lime); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.tier--link:hover .tier__cta .arr { transform: translateX(4px); }

/* ===== ICP page: brand narrative band ===== */
.narrative { position: relative; overflow: hidden; }
.narrative__fig { font-weight: 900; letter-spacing: -0.04em; line-height: 0.9; font-size: clamp(64px, 13vw, 190px); color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--lime) 55%, transparent); text-stroke: 1.5px color-mix(in srgb, var(--lime) 55%, transparent); margin: 0; }
.narrative__fig b { color: var(--lime); -webkit-text-stroke: 0; }
.narrative__lines { max-width: 30ch; margin-left: auto; }
.narrative__lines p { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.5; color: #fff; font-weight: 500; margin: 0 0 20px; }
.narrative__lines p.dim { color: var(--pastel-grey); font-weight: 400; font-size: clamp(16px,1.4vw,19px); }
.narrative__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px,5vw,80px); align-items: center; }
@media (max-width: 860px){ .narrative__grid { grid-template-columns: 1fr; gap: 32px; } .narrative__lines { margin-left: 0; } }

/* ===== ICP page: old-way vs TIF-way contrast ===== */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.vs__col { border-radius: var(--radius-lg); padding: clamp(24px,3vw,36px); border: 1px solid var(--glass-bd); }
.vs__col--old { background: color-mix(in srgb, #fff 3%, transparent); }
.vs__col--new { background: color-mix(in srgb, var(--core-blue) 30%, transparent); border-color: color-mix(in srgb, var(--lime) 30%, transparent); }
.vs__label { display:inline-flex; align-items:center; gap:8px; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 20px; }
.vs__col--old .vs__label { color: var(--pastel-grey); }
.vs__col--new .vs__label { color: var(--lime); }
.vs__item { display: flex; gap: 13px; padding: 14px 0; border-top: 1px solid color-mix(in srgb, #fff 8%, transparent); font-size: 15.5px; line-height: 1.5; }
.vs__item:first-of-type { border-top: 0; }
.vs__col--old .vs__item { color: var(--pastel-grey); }
.vs__col--new .vs__item { color: #fff; }
.vs__ic { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.vs__col--old .vs__ic { color: color-mix(in srgb, var(--coral) 80%, #fff); }
.vs__col--new .vs__ic { color: var(--lime); }
@media (max-width: 720px){ .vs { grid-template-columns: 1fr; } }

/* ===== ICP page: measurable gains strip ===== */
.gains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 72px; }
.gains__item { padding: 20px 0 0; border-top: 2px solid color-mix(in srgb, var(--lime) 55%, transparent); }
.gains__n { font-weight: 900; font-size: clamp(30px,3.4vw,42px); line-height: 1; letter-spacing: -0.03em; color: var(--lime); }
.gains__l { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--pastel-grey); }
@media (max-width: 900px){ .gains { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px){ .gains { grid-template-columns: 1fr; } }

/* Solutions: MOCK vertical layer layout (for review) */
.layers-mock { position: relative; margin-top: 56px; padding-left: 8px; }
.layers-mock__spine { position: absolute; left: 24px; top: 10px; bottom: 10px; width: 2px; background: color-mix(in srgb, #fff 12%, transparent); border-radius: 2px; }
.layers-mock__fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; border-radius: 2px; background: linear-gradient(180deg, var(--lime), color-mix(in srgb, var(--lime) 40%, var(--coral)) 65%, var(--coral)); box-shadow: 0 0 12px color-mix(in srgb, var(--lime) 45%, transparent); transition: height 0.6s var(--ease-standard); }
.layer-row { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(30px, 4vw, 56px) 0 clamp(30px, 4vw, 56px) 68px; }
.layer-row__node { position: absolute; left: 25px; margin-left: -17px; box-sizing: border-box; top: 40px; width: 18px; height: 18px; border-radius: 50%; background: var(--dark-blue); border: 2px solid color-mix(in srgb, #fff 22%, transparent); z-index: 2; transition: background 0.4s, border-color 0.4s, box-shadow 0.4s; }
.layer-row.is-active .layer-row__node { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 0 5px var(--dark-blue), 0 0 16px color-mix(in srgb, var(--lime) 70%, transparent); }
.layer-row.is-active .layer-row__node--end { background: var(--coral); border-color: var(--coral); box-shadow: 0 0 0 5px var(--dark-blue), 0 0 16px color-mix(in srgb, var(--coral) 70%, transparent); }
.layer-row--flip .layer-row__copy { order: 2; }
.layer-row__title { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; color: #fff; letter-spacing: -0.02em; margin: 14px 0 12px; }
.layer-row__copy p { color: var(--pastel-grey); font-size: 16px; line-height: 1.6; margin: 0; max-width: 44ch; }
.layer-row__media { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); border: 1px solid var(--glass-bd); background: var(--glass-bg); display: grid; place-items: center; overflow: hidden; }
.layer-row__ph { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, #fff 40%, transparent); }
.layer-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .layer-row { grid-template-columns: 1fr; gap: 22px; }
  .layer-row--flip .layer-row__copy { order: 0; }
  .layer-row__media { order: -1; }
}

/* ---- Compliance ------------------------------------------------------------ */
.compliance { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: space-between; }
.compliance__badges { display: flex; gap: 12px; flex-wrap: wrap; }
.cbadge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #fff;
  background: var(--glass-bg-2); border: 1px solid var(--glass-bd); border-radius: 999px; padding: 9px 16px; backdrop-filter: var(--glass-blur); }
.cbadge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }

/* ---- End CTA --------------------------------------------------------------- */
.endcta { position: relative; overflow: clip; text-align: center; }
.endcta__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.endcta h2 { max-width: 20ch; color: #fff; }
.endcta .lede { text-align: center; margin-inline: auto; }

/* ---- Footer ---------------------------------------------------------------- */
.site-footer { background: var(--w-abyss); color: var(--pastel-grey); padding-block: 72px 32px; position: relative; overflow: clip; }
.foot-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 2.2fr repeat(4, 1fr); gap: 12px; }
.foot-brand img { height: 44px; margin-bottom: 18px; }
.foot-brand p { font-size: 14px; line-height: 1.6; max-width: 30ch; color: var(--pastel-grey); }
.foot-col h4 { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.foot-col__head { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding-bottom: 10px; color: #fff !important; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; border-bottom: 1px solid var(--glass-bd); }
.foot-col__head .arr { display: inline-block; opacity: 0.55; color: var(--lime); transition: transform 0.2s var(--ease-standard), opacity 0.2s; }
.foot-col__head:hover { color: var(--lime) !important; }
.foot-col__head:hover .arr { opacity: 1; transform: translateX(3px); }
.foot-col a { display: block; font-size: 14px; color: var(--pastel-grey); text-decoration: none; padding: 5px 0; transition: color var(--dur-fast); }
.foot-col a:hover { color: var(--lime); }
.foot-bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 52px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); }
.foot-bottom p { font-size: 13px; color: rgba(255,255,255,0.55); }
.foot-bottom .links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-bottom .links a { font-size: 13px; color: rgba(255,255,255,0.7); text-decoration: none; }
.foot-bottom .links a:hover { color: #fff; }

/* ---- Inline body links (editorial, legal, prose) ------------------------- */
a { color: var(--lime); }
a:hover { color: var(--lime); text-decoration: underline; }
.editorial a, .pr-body a, .art-note a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: opacity var(--dur-fast); }
.editorial a:hover, .pr-body a:hover, .art-note a:hover { opacity: .78; }
/* Chrome elements keep their own colours */
.nav a, .nav__menu a, .nav__sublinks a, .foot-col a, .foot-col__head, .foot-bottom .links a, .doc__rail a, .site-header a, .site-footer a, .crumbs a, .skip { color: inherit; }
.nav__links a, .nav__menu a, .nav__sublinks a { color: rgba(255,255,255,0.82); }
.nav a:hover, .nav__menu a:hover, .nav__sublinks a:hover, .foot-col a:hover, .foot-col__head:hover, .foot-bottom .links a:hover, .doc__rail a:hover, .site-header a:hover, .site-footer a:hover, .crumbs a:hover { text-decoration: none; }
.foot-col a { color: var(--pastel-grey); }
/* Buttons own their colour in every context (chrome resets above must not win) */
a.btn--primary { color: #fff; }
a.btn--onlight-ghost { color: var(--core-blue); }
a.btn--ondark-ghost { color: #fff; }
a.btn--lime, a.btn--lime:visited, a.btn--lime:hover, a.btn--lime:focus, a.btn--lime .arr { color: var(--dark-blue); }
a.btn--lime-outline { color: var(--lime); }
a.btn--lime-outline:hover { color: var(--dark-blue); }
.foot-bottom .links a { color: rgba(255,255,255,0.7); }
.doc__rail a { color: var(--pastel-grey); }

/* ---- Cookie banner --------------------------------------------------------- */
.cookie { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: var(--z-toast); max-width: 560px; margin-inline: auto;
  background: rgba(12,17,48,0.92); border: 1px solid var(--glass-bd); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
  padding: 20px 38px 20px 22px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; backdrop-filter: var(--glass-blur); }
.cookie p { font-size: 13.5px; color: var(--pastel-grey); flex: 1; min-width: 220px; line-height: 1.5; margin: 0; }
.cookie a { color: var(--lime); font-weight: 600; }
.cookie__actions { display: flex; gap: 10px; }
.cookie.is-hidden { display: none; }
.cookie__x { position: absolute; top: 7px; right: 9px; width: 26px; height: 26px; border: 0; background: transparent; color: var(--pastel-grey); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 7px; display: grid; place-items: center; transition: color var(--dur-fast), background var(--dur-fast); }
.cookie__x:hover { color: #fff; background: color-mix(in srgb, #fff 10%, transparent); }

/* ---- Motion: orchestrated load + scroll reveal + parallax ------------------
   Transform-only (never opacity-hide alone) so frozen frames / no-JS / reduced
   motion all show content. Parallax handled in JS, reduced-motion gated. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal.in { animation: w-rise 0.78s var(--ease-out) both; }
  .js .reveal.in[data-delay="1"] { animation-delay: 0.10s; }
  .js .reveal.in[data-delay="2"] { animation-delay: 0.20s; }
  .js .reveal.in[data-delay="3"] { animation-delay: 0.30s; }
  .js .reveal.in[data-delay="4"] { animation-delay: 0.40s; }
  .js .reveal.in[data-delay="5"] { animation-delay: 0.50s; }
}
@keyframes w-rise { from { transform: translateY(26px); } to { transform: none; } }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav.is-open .nav__links { display: flex; position: absolute; left: 0; right: 0; top: 76px; flex-direction: column;
    background: rgba(10,14,38,0.96); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-bd); padding: 14px 20px; gap: 4px; box-shadow: var(--shadow-lg); }
  .nav.is-open .nav__links a { padding: 12px 14px; }
  .nav__item--has-menu { flex-direction: column; align-items: stretch; }
  .nav__menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; backdrop-filter: none; padding: 0 0 4px 14px; min-width: 0; }
  .nav__menu--mega { flex-direction: column !important; min-width: 0; }
  .nav__menu--mega .nav__feature { display: none; }
  .nav__sublinks { padding: 0; }
  .nav__sublinks::before { display: none; }
  .nav__item--has-menu > a::after, .nav__item--has-menu > a::before { display: none; }
  .nav__cta .btn--onlight-ghost, .nav__cta .btn--ondark-ghost { display: none; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
}
@media (max-width: 860px) {
  .hero { min-height: 0; padding-top: 96px; }
  .hero__grid, .split, .case, .news, .compliance, .proof { grid-template-columns: 1fr; }
  .hero__media { height: 56vw; max-height: 440px; order: -1; margin-bottom: 8px; }
  .chip--a { top: 6%; } .chip--c { right: 2%; } .chip--b { left: 2%; }
  .split--flip .split__media { order: 0; }
  .aud-grid { grid-template-columns: 1fr; }
  .news { text-align: left; }
}
@media (max-width: 560px) {
  :root { --w-edge: 20px; }
  .features, .res-grid, .stats, .foot-grid { grid-template-columns: 1fr; }
  .chip { display: none; }
  .marquee__row { gap: 16px; }
}

/* ---- Nav toggle ------------------------------------------------------------ */
.nav__toggle { width: 44px; height: 44px; border: 1px solid var(--glass-bd-2); border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.nav__toggle span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform var(--dur-base), opacity var(--dur-base); }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.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; }

/* ---- Inner-page hero (shorter than the home hero) ------------------------- */
.pagehero { min-height: 0; margin-top: calc(-1 * var(--topbar-h, 76px)); padding-top: clamp(140px, 18vh, 210px); padding-bottom: clamp(56px, 8vw, 104px); }

/* ---- Category / taxonomy chips -------------------------------------------- */
.cat-chip { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 999px;
  background: var(--glass-bg); border: 1px solid var(--glass-bd); color: #fff; font-size: 15px; font-weight: 600;
  backdrop-filter: var(--glass-blur); transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); }
.cat-chip:hover { border-color: color-mix(in srgb, var(--lime) 45%, transparent); background: var(--glass-bg-2); transform: translateY(-2px); }

/* ===========================================================================
   INNER-PAGE LAYOUT TOOLKIT — distinct compositions so sub-pages do NOT read
   like the homepage. Same tokens, components and motion; different structure.
   =========================================================================== */

/* Editorial split hero: oversized title left, glass "facts" panel right */
.lead { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.lead__title { margin: 18px 0 0; }
.lead__sub { margin: 22px 0 0; color: var(--pastel-grey); font-size: clamp(17px,1.4vw,20px); line-height: 1.55; max-width: 44ch; }
.factpanel { background: var(--glass-bg-2); border: 1px solid var(--glass-bd); border-radius: var(--radius-xl); padding: 28px; backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-lg); }
.pagehero .factpanel { margin-top: clamp(52px, 5.4vw, 82px); position: sticky; top: clamp(92px, 12vh, 120px); }

/* Methodology — horizontal principle rows (edge-to-edge, not cards) */
.principles { margin-top: 40px; border-top: 1px solid var(--glass-bd); }
.principle { display: grid; grid-template-columns: 52px 220px 1fr; gap: 30px; align-items: baseline; padding: 24px 6px; border-bottom: 1px solid var(--glass-bd); transition: background .3s var(--ease-standard); }
.principle:hover { background: var(--glass-bg); }
.principle__n { font-size: 14px; font-weight: 800; color: var(--lime); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.principle__t { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.principle__d { color: var(--pastel-grey); font-size: 15px; line-height: 1.55; margin: 0; max-width: 64ch; }
@media (max-width: 820px) { .principle { grid-template-columns: 40px 1fr; row-gap: 8px; } .principle__d { grid-column: 1 / -1; } }

/* Methodology — survey design image */
.design-figure { display: flex; }
.design-figure img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; border-radius: var(--radius-xl); border: 1px solid var(--glass-bd); }

/* Methodology — governance strip + protection columns */
.govstrip { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 42px auto 0; max-width: 900px; }
.govmark { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border: 1px solid var(--glass-bd); border-radius: var(--radius-pill); background: var(--glass-bg); font-weight: 700; font-size: 14px; color: #fff; }
.govmark__c { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px color-mix(in srgb, var(--lime) 70%, transparent); }
.protections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; max-width: 1000px; margin: 48px auto 0; }
.protection { border-top: 2px solid var(--lime); padding-top: 18px; }
.protection h3 { color: #fff; font-size: 17px; margin: 0 0 8px; font-weight: 700; }
.protection p { color: var(--pastel-grey); font-size: 14px; line-height: 1.55; margin: 0; }
@media (max-width: 760px) { .protections { grid-template-columns: 1fr; gap: 26px; } }
/* Methodology — credential cards (regulations / industry practices) */
.cc2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 40px auto 0; max-width: 1000px; }
.cccard { background: var(--glass-bg); border: 1px solid var(--glass-bd); border-radius: var(--radius-lg); padding: 26px 28px; }
.cccard__h { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.cccard__badge { width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--lime) 16%, transparent); border: 1px solid color-mix(in srgb, var(--lime) 40%, transparent); display: grid; place-items: center; color: var(--lime); flex: none; }
.cccard__t { font: 800 12px/1.2 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); }
.cccard__rows { display: flex; flex-direction: column; gap: 12px; }
.cccard__row { display: flex; align-items: center; gap: 11px; color: #fff; font-weight: 600; font-size: 15px; }
.cccard__row small { display: block; color: var(--pastel-grey); font-weight: 400; font-size: 12.5px; margin-top: 1px; }
.cccard .ck, .protections .ck { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--lime); color: var(--dark-blue); font-size: 11px; font-weight: 900; flex: none; }
@media (max-width: 760px) { .cc2 { grid-template-columns: 1fr; } }
.factpanel h2 { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime); margin: 0 0 18px; display: flex; align-items: center; gap: 9px; }
.factrow { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--glass-bd); }
.factrow:first-of-type { border-top: 0; }
.factrow .n { font-weight: 900; font-size: 30px; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto; }
.factrow .n .u { color: var(--lime); }
.factrow .n .pre { font-size: 0.55em; font-weight: 500; color: var(--lime); letter-spacing: 0.01em; margin-right: 7px; }
.factrow .n .suf { font-size: 0.55em; font-weight: 500; color: var(--lime); letter-spacing: 0.01em; margin-left: 7px; }
.factrow .l { font-size: 13.5px; color: var(--pastel-grey); text-align: right; max-width: 18ch; }
@media (min-width: 901px) and (max-width: 1150px) { .factrow { flex-direction: column; align-items: flex-start; gap: 4px; } .factrow .l { text-align: left; max-width: none; } }

/* Journey snake (animated mock) — vertical zig-zag spine, scroll-drawn */
.jsnake { position: relative; max-width: 860px; margin: 44px auto 0; padding: 8px 0 20px; }
.jsnake__spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: color-mix(in srgb, #fff 12%, transparent); }
.jsnake__fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--lime); box-shadow: 0 0 12px color-mix(in srgb, var(--lime) 60%, transparent); transition: height 0.15s linear; }
.jnode { position: relative; width: 50%; box-sizing: border-box; padding: 16px 40px; margin: 6px 0; opacity: 0; transform: translateY(26px); transition: opacity 0.6s var(--ease-out, ease), transform 0.6s var(--ease-out, ease); }
.jnode.in { opacity: 1; transform: none; }
.jnode--l { left: 0; text-align: right; }
.jnode--r { left: 50%; text-align: left; }
.jnode__dot { position: absolute; top: 20px; width: 16px; height: 16px; border-radius: 50%; background: var(--core-blue); border: 2px solid color-mix(in srgb, #fff 25%, transparent); transition: background 0.4s, border-color 0.4s, box-shadow 0.4s; z-index: 1; }
.jnode--l .jnode__dot { right: -8px; }
.jnode--r .jnode__dot { left: -8px; }
.jnode.lit .jnode__dot { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 0 5px var(--core-blue), 0 0 16px color-mix(in srgb, var(--lime) 70%, transparent); }
.jnode__age { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--lime); text-transform: uppercase; }
.jnode__name { font-size: 18px; font-weight: 700; color: #fff; margin: 3px 0 6px; letter-spacing: -0.01em; }
.jnode p { font-size: 15px; line-height: 1.5; color: var(--pastel-grey); margin: 0; }
@media (max-width: 640px) {
  .jsnake { max-width: none; }
  .jsnake__spine { left: 11px; }
  .jnode, .jnode--l, .jnode--r { width: 100%; left: 0; text-align: left; padding: 12px 0 12px 40px; }
  .jnode--l .jnode__dot, .jnode--r .jnode__dot { left: 4px; right: auto; }
}

/* Dashboard coverage grid (portal dashboards) */
.dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin: 22px auto 0; max-width: 1080px; }
.dash { grid-column: span 3; position: relative; background: var(--glass-bg); border: 1px solid var(--glass-bd); border-radius: var(--radius-lg); padding: 24px 22px 26px; overflow: hidden; transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base), background var(--dur-base); }
.dash:nth-child(-n+3) { grid-column: span 4; }
.dash:nth-child(n+8) { grid-column: span 4; }
@media (max-width: 920px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } .dash, .dash:nth-child(-n+3), .dash:nth-child(n+8) { grid-column: auto; } }
@media (max-width: 560px) { .dash-grid { grid-template-columns: 1fr; } }
.dash:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--lime) 45%, transparent); background: var(--glass-bg-2); }
.dash::after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: var(--lime); box-shadow: 0 0 12px color-mix(in srgb, var(--lime) 70%, transparent); transition: width var(--dur-slow) var(--ease-emphasis); }
.dash:hover::after { width: 100%; }
.dash__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); margin-bottom: 14px; }
.dash .tif-pulse-dot { margin-bottom: 14px; }
.dash-eyebrow { display: flex; justify-content: flex-start; max-width: 1080px; margin: 52px auto 0; }
.dash__name { color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; margin: 0; }
.dash__desc { color: var(--pastel-grey); font-size: 13.5px; line-height: 1.5; margin: 6px 0 0; }

/* Numbered methodology timeline (vertical, connected) */
.timeline { position: relative; margin-top: 56px; display: grid; gap: 4px; }
.tl { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 28px; padding: 28px 0; border-top: 1px solid var(--glass-bd); align-items: start; }
.tl:first-child { border-top: 0; }
.tl__n { font-weight: 900; font-size: clamp(40px, 4vw, 58px); line-height: 1; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--lime) 70%, transparent); }
.tl__b { max-width: 60ch; }
.tl__b h3 { margin: 0 0 10px; color: #fff; }
.tl__b p { margin: 0; color: var(--pastel-grey); font-size: 16px; line-height: 1.55; }
.tl__tag { display: inline-block; margin-bottom: 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); }

/* Sticky two-column doc layout (side rail + content) */
.doc { display: grid; grid-template-columns: 240px 1fr; gap: clamp(32px,5vw,72px); align-items: start; }
.doc__rail { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 10px; }
.doc__rail a { font-size: 14px; font-weight: 600; color: var(--pastel-grey); text-decoration: none; padding: 8px 0; border-left: 2px solid transparent; padding-left: 14px; transition: color var(--dur-fast), border-color var(--dur-fast); }
.doc__rail a:hover, .doc__rail a.is-active { color: #fff; border-left-color: var(--lime); }

/* Magazine / editorial grid (resources, case studies) */
.mag { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 20px; }
.mag__feature { grid-row: span 2; }
.editorial { max-width: 760px; margin: 0 auto; }
.editorial p { font-size: 18px; line-height: 1.7; color: var(--text-body); margin: 0 0 22px; }
.editorial p.eyebrow { font-size: 13px; line-height: 1; }
.atmos-deep .editorial p, .atmos-core .editorial p { color: var(--pastel-grey); }
.editorial ul, .editorial ol { margin: 0 0 22px; padding-left: 22px; }
.editorial li { font-size: 18px; line-height: 1.7; color: var(--text-body); margin: 0 0 10px; }
.atmos-deep .editorial li, .atmos-core .editorial li { color: var(--pastel-grey); }
.editorial li::marker { color: var(--lime); }
.editorial h2 { margin: 40px 0 16px; }
.editorial .eyebrow + h2 { margin-top: 8px; }
.editorial blockquote { margin: 32px 0; padding-left: 24px; border-left: 3px solid var(--lime); font-size: 23px; font-weight: 700; line-height: 1.35; color: #fff; }

@media (max-width: 900px) {
  .lead, .doc, .mag { grid-template-columns: 1fr; }
  .doc__rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .mag__feature { grid-row: auto; }
  .tl { grid-template-columns: 64px 1fr; gap: 18px; }
}

/* Breadcrumbs */
.crumbs { font-size: 13px; color: var(--pastel-grey); margin-bottom: 26px; letter-spacing: 0.01em; }
.crumbs a { color: var(--lime); text-decoration: none; font-weight: 600; }
.crumbs a:last-of-type { color: var(--pastel-grey); }
.crumbs a:last-of-type:hover { color: var(--lime); }
.crumbs span { opacity: 0.6; margin: 0 4px; }

/* --- Case study: editorial story + big-number outcome ribbon --- */
.casefeat__lede { font-size: clamp(18px, 1.85vw, 23px); line-height: 1.5; color: #fff; font-weight: 500; max-width: 60ch; letter-spacing: -0.006em; }
.casefeat__lede b { color: var(--lime); font-weight: 600; }
.ribbon { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3.4vw, 52px); margin-top: 46px; }
.ribbon__item { border-top: 2px solid var(--lime); padding-top: 18px; }
.ribbon__n { font-size: clamp(34px, 4.2vw, 54px); font-weight: 800; color: #fff; letter-spacing: -0.028em; line-height: 0.96; font-variant-numeric: tabular-nums; }
.ribbon__l { margin: 13px 0 0; color: var(--pastel-grey); font-size: 14px; line-height: 1.5; }
@media (max-width: 700px) { .ribbon { grid-template-columns: 1fr; gap: 28px; } }

/* --- Why TIF: 3-column differentiators, outline numerals, no cards --- */
.whygrid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 54px; border-top: 1px solid var(--glass-bd); }
.whycol { padding: 38px 36px 8px; border-left: 1px solid var(--glass-bd); }
.whycol:first-child { border-left: 0; padding-left: 2px; }
.whycol__n { font-family: var(--font-sans); font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--lime) 88%, transparent); }
.whycol h3 { font-size: clamp(19px, 1.7vw, 22px); color: #fff; margin: 22px 0 12px; letter-spacing: -0.01em; line-height: 1.2; }
.whycol p { color: var(--pastel-grey); font-size: 14.5px; line-height: 1.62; margin: 0; }
@media (max-width: 820px) { .whygrid { grid-template-columns: 1fr; } .whycol { border-left: 0; border-top: 1px solid var(--glass-bd); padding: 30px 0 6px; } .whycol:first-child { border-top: 0; padding-top: 0; } }

/* Solution sector figure (image-led hero) */
.sol-figure { position: relative; border-radius: var(--radius-xl); overflow: visible; }
.sol-figure img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: var(--radius-xl); border: 1px solid var(--glass-bd); box-shadow: var(--shadow-xl); display: block; }
.sol-figure::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--lime), transparent); }
.chip--solo { position: absolute; bottom: 18px; left: -22px; }

/* Filter bar (resources hub) */
.filterbar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.filter { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--pastel-grey); cursor: pointer;
  background: var(--glass-bg); border: 1px solid var(--glass-bd); border-radius: 999px; padding: 9px 18px;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); }
.filter:hover { color: #fff; border-color: var(--glass-bd-2); }
.filter.is-active { background: var(--lime); color: var(--dark-blue); border-color: var(--lime); }

/* Contact: form + calendar embed */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,64px); align-items: start; }
.cform { display: grid; gap: 18px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; font-weight: 600; color: #fff; }
.field label .req { color: var(--coral); font-weight: 700; }
.field input, .field select, .field textarea { font-family: var(--font-sans); font-size: 16px; line-height: 1.4; color: #fff; box-sizing: border-box; width: 100%;
  background: rgba(255,255,255,0.06); border: 1.5px solid var(--glass-bd); border-radius: var(--radius-md); padding: 13px 16px; }
.field input, .field select { height: 52px; }
.field textarea { resize: vertical; }
.field select option { color: #10143a; background: #fff; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.5); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 28%, transparent); }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23A0FF9D' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.cform__note { font-size: 12.5px; color: var(--pastel-grey); margin: 0; }
.cform__note a { color: var(--lime); }
.feat__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--lime); text-decoration: none; }
.feat__link:hover { gap: 12px; }
.feat__link .arr { transition: transform .25s ease; }

.cal-embed { border: 1px solid var(--glass-bd); border-radius: var(--radius-xl); overflow: hidden; background: var(--glass-bg-2); display: block; }
.cal-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.cal-embed .meetings-iframe-container { width: 100%; }
.cal-embed .cal-embed__ph { min-height: 420px; }
.cal-embed__ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 48px 32px; width: 100%; }
.cal-embed__ph .tif-pulse-dot { width: 12px; height: 12px; }
.cal-embed__t { font-weight: 700; color: #fff; font-size: 17px; margin: 6px 0 0; }
.cal-embed__s { color: var(--pastel-grey); font-size: 14px; line-height: 1.5; max-width: 34ch; margin: 0 0 8px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .cform__row { grid-template-columns: 1fr; } }
.contact-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px,4vw,48px); margin-top: clamp(40px,5vw,64px); padding-top: clamp(28px,3vw,36px); border-top: 1px solid var(--glass-bd); }
.contact-detail__k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); margin: 0 0 8px; }
.contact-detail__v { display: block; font-size: 16px; color: #fff; margin: 0; text-decoration: none; }
a.contact-detail__v:hover { color: var(--lime); }
@media (max-width: 620px) { .contact-details { grid-template-columns: 1fr; gap: 24px; text-align: left; } }

/* Article detail */
.art-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; color: var(--pastel-grey); font-size: 14px; }
.art-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--pastel-grey); }
.art-lead { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--glass-bd); box-shadow: var(--shadow-xl); }
.art-lead img { display: block; width: 100%; aspect-ratio: 21/9; object-fit: cover; }
.editorial strong { color: #fff; }

/* Gated landing (report / webinar): copy + sticky form */
.gate { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px,5vw,64px); align-items: start; }
.gate__form { position: sticky; top: 100px; }
@media (max-width: 900px) { .gate { grid-template-columns: 1fr; } .gate__form { position: static; } }

/* Eyebrow with a leading pulse dot (used on solution pages) */
.eyebrow .d { width: 11px; height: 11px; border-radius: 50%; background: var(--coral); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) { .eyebrow .d { --pulse-c: var(--coral); animation: eyebrow-pulse 1.7s var(--ease-out, ease-out) infinite; } }
.eyebrow:has(.d)::before { display: none; }

/* ===========================================================================
   SIGNAL MOTION LAYER — the distinctive "living instrument" vision.
   Canvas radar (signal-field.js) + CSS data-waves, traveling pulses, live
   shimmer. All decorative, all reduced-motion gated, content never depends
   on it. Brand palette only; lime used as the "live signal" colour.
   =========================================================================== */

/* Signal-field canvas fills its layer */
.signal-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }

/* ---- Flowing data-waves (SVG band that streams sideways, seamless) -------- */
.wave-divider { position: absolute; left: 0; right: 0; height: 120px; z-index: 1; pointer-events: none; overflow: hidden; }
.wave-divider--top { top: -1px; }
.wave-divider--bottom { bottom: -1px; }
.wave-divider svg { position: absolute; left: 0; width: 200%; max-width: none; height: 100%; overflow: visible; }
.wave-divider .wpath { fill: none; stroke: var(--lime); stroke-width: 2.5; opacity: 0.42; }
.wave-divider .wpath--2 { stroke: var(--coral); opacity: 0.3; }
.wave-divider .wpath--3 { stroke: #fff; opacity: 0.16; }
@media (prefers-reduced-motion: no-preference) {
  .wave-divider .wstream { animation: wave-stream linear infinite; }
  .wave-divider .wstream--a { animation-duration: 19s; }
  .wave-divider .wstream--b { animation-duration: 27s; animation-direction: reverse; }
  .wave-divider .wstream--c { animation-duration: 34s; }
}
@keyframes wave-stream { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Traveling pulse along a hairline (section signal-rail) --------------- */
.signal-rail { position: relative; height: 1px; background: var(--glass-bd); overflow: visible; }
.signal-rail::after { content: ""; position: absolute; top: -1px; left: 0; width: 120px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--lime), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .signal-rail::after { animation: rail-run 5.5s var(--ease-standard) infinite; }
}
@keyframes rail-run { 0% { left: -120px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
/* Reverse signal rail — runs right-to-left along the bottom of the trust bar */
.signal-rail--rev { position: absolute; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--lime) 14%, transparent); }
.signal-rail--rev::after { animation-name: rail-run-rev; animation-duration: 4.2s; }
@keyframes rail-run-rev { 0% { left: 100%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: -120px; opacity: 0; } }

/* ---- Traveling pulse along the feature accent bars ------------------------ */
.feat__bar, .split__list .b { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .feat:hover .feat__bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); animation: bar-sheen 0.9s var(--ease-standard); }
}
@keyframes bar-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---- Live shimmer on the pulse dot's host stat ---------------------------- */
@keyframes u-breathe { 0%,100% { opacity: 1; } 50% { opacity: 0.62; } }

/* ---- Hero title word "next." gets a slow signal glow pulse ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__title .accent-lime { animation: signal-glow 4.4s ease-in-out infinite; }
}
@keyframes signal-glow {
  0%,100% { text-shadow: 0 0 10px color-mix(in srgb, var(--lime) 18%, transparent); }
  50%     { text-shadow: 0 0 18px color-mix(in srgb, var(--lime) 30%, transparent); }
}

/* ---- Live bars: gentle "data is updating" breathing ----------------------- */
@media (prefers-reduced-motion: no-preference) {
  .bar__fill.is-live { transition: width 1.6s var(--ease-emphasis); }
}

/* ---- Incoming-signal ping field on dark sections (sparse, ambient) -------- */
.ping-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ping-field i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); opacity: 0; }
.ping-field i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--lime); }
@media (prefers-reduced-motion: no-preference) {
  .ping-field i { animation: ping-in 6s ease-out infinite; }
  .ping-field i::after { animation: ping-ring 6s ease-out infinite; }
}
@keyframes ping-in { 0%,100% { opacity: 0; } 6%,14% { opacity: 0.9; } }
@keyframes ping-ring { 0% { transform: scale(0.4); opacity: 0; } 8% { opacity: 0.8; } 40% { transform: scale(3.4); opacity: 0; } 100% { opacity: 0; } }

/* ---- Floating elements (hero frame + stat chips drift gently) ------------- */
@media (prefers-reduced-motion: no-preference) {
  .float-soft { animation: float-soft 7s ease-in-out infinite; }
  .float-soft.fs2 { animation-duration: 8.5s; animation-delay: -2s; }
  .float-soft.fs3 { animation-duration: 6.2s; animation-delay: -1s; }
}
@keyframes float-soft { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* ---- Drifting ambient glows ----------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .glow--drift { animation: glow-drift 16s ease-in-out infinite; }
  .glow--drift.gd2 { animation-duration: 21s; animation-direction: reverse; }
}
@keyframes glow-drift { 0%,100% { translate: 0 0; opacity: 0.42; } 50% { translate: 24px 18px; opacity: 0.6; } }

/* glow-pulse alias kept for the hero keyword (animation defined via .accent-lime) */
.glow-pulse { will-change: text-shadow; }
/* Hero accent word: lime colour only (underline removed per design direction) */
.hero__title .accent-lime { position: relative; }

/* ---- End-CTA sonar pulse: a live wave expanding through the radar rings ---- */
.cta-pulse { position: absolute; left: 50%; top: 122%; width: 0; height: 0; z-index: 1; pointer-events: none; }
.cta-pulse span { position: absolute; left: 0; top: 0; width: 1100px; height: 1100px; margin: -550px 0 0 -550px;
  border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--lime) 50%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--lime) 22%, transparent); transform: scale(0); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cta-pulse span { animation: cta-pulse 5s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) infinite; }
  .cta-pulse span:nth-child(2) { animation-delay: 1.7s; }
  .cta-pulse span:nth-child(3) { animation-delay: 3.4s; }
}
@keyframes cta-pulse {
  0%   { transform: scale(0.06); opacity: 0; }
  8%   { opacity: 0.85; }
  100% { transform: scale(1.05); opacity: 0; }
}

/* ===========================================================================
   LICENSORS PAGE — SIGNATURE COMPONENTS (bespoke, not shared)
   =========================================================================== */

/* --- Lead vs lag: the rearview / windshield chart --- */
.leadlag { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: 8px; }
.leadlag__chart { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-bd); border-radius: var(--radius-lg); padding: 26px 26px 20px; }
.leadlag__title { margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: rgba(255,255,255,0.9); text-align: center; }
.leadlag__svg { width: 100%; height: auto; display: block; overflow: visible; }
.ll-grid { stroke: rgba(255,255,255,0.07); stroke-width: 1; }
.ll-axis { stroke: rgba(255,255,255,0.18); stroke-width: 1; }
.ll-sales { fill: none; stroke: var(--pastel-grey); stroke-width: 2.5; stroke-dasharray: 5 6; opacity: 0.55; }
.ll-demand-area { fill: url(#ll-fill); }
.ll-demand { fill: none; stroke: var(--lime); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--lime) 55%, transparent)); }
.ll-mark { stroke: var(--coral); stroke-width: 1.6; stroke-dasharray: 3 4; }
.ll-dot { fill: var(--lime); }
.ll-dot-glow { fill: var(--lime); opacity: 0.25; }
@media (prefers-reduced-motion: no-preference) { .ll-dot-glow { animation: pulse-dot 2.4s var(--ease-out) infinite; transform-origin: center; transform-box: fill-box; } }
.ll-label { font: 700 11px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; }
.leadlag__legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; }
.leadlag__leg { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--pastel-grey); }
.leadlag__sw { width: 20px; height: 3px; border-radius: 2px; flex: none; }
@media (max-width: 900px) { .leadlag { grid-template-columns: 1fr; } }

/* --- Decision ledger: licensing decisions TIF de-risks --- */
.declist { margin-top: 52px; border-top: 1px solid var(--glass-bd); }
.decrow { display: grid; grid-template-columns: 56px 1.05fr 1.25fr; gap: clamp(16px, 3vw, 40px); align-items: baseline; padding: 26px 8px; border-bottom: 1px solid var(--glass-bd); transition: background var(--dur-base) var(--ease-standard); }
.decrow:hover { background: color-mix(in srgb, #fff 3.5%, transparent); }
.decrow__n { font-family: var(--font-sans); font-size: 22px; font-weight: 800; color: var(--lime); opacity: 0.55; font-variant-numeric: tabular-nums; }
.decrow__q { font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; color: #fff; line-height: 1.25; letter-spacing: -0.01em; }
.decrow__a { color: var(--pastel-grey); font-size: 15px; line-height: 1.55; }
.decrow__a b { color: #fff; font-weight: 600; }
@media (max-width: 760px) { .decrow { grid-template-columns: 40px 1fr; } .decrow__a { grid-column: 2; } }

/* --- Commercial payoff strip --- */
.payoff { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; margin-top: 56px; }
.payoff__item { border-top: 2px solid var(--lime); padding-top: 16px; }
.payoff__n { font-size: clamp(22px, 2vw, 28px); font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.payoff__l { margin: 8px 0 0; color: var(--pastel-grey); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 760px) { .payoff { grid-template-columns: 1fr 1fr; gap: 28px; } }

/* --- Data moment: the connected correlation story --- */
.moment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; position: relative; }
.moment__node { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-bd); border-radius: var(--radius-lg); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.moment__node::after { content: ""; position: absolute; top: 50%; right: -13px; width: 26px; height: 26px; transform: translateY(-50%); z-index: 2; background: no-repeat center / contain; }
.moment__node:not(:last-child)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8FF60' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.moment__tag { font: 700 11px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); }
.moment__h { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.2; margin: 0; }
.moment__p { margin: 0; color: var(--pastel-grey); font-size: 14px; line-height: 1.55; }
@media (max-width: 820px) {
  .moment { grid-template-columns: 1fr; gap: 34px; }
  .moment__node::after { top: auto; bottom: -30px; right: 50%; transform: translateX(50%) rotate(90deg); }
}

/* --- Independent-currency band --- */
.currency { position: relative; text-align: center; }
.currency__mark { display: block; margin: 0 auto 18px; width: 46px; height: 3px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 14px color-mix(in srgb, var(--lime) 60%, transparent); }
.currency__big { font-size: clamp(24px, 3.1vw, 40px); font-weight: 800; line-height: 1.14; letter-spacing: -0.02em; color: #fff; max-width: 20ch; margin: 0 auto; text-wrap: balance; }
.currency__big em { color: var(--lime); font-style: normal; }
.currency__sub { margin: 20px auto 0; max-width: 52ch; color: var(--pastel-grey); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; }