/* ============================================================================
 solution-pages.css
 Shared design system for the Media Solution pages, ported from the
 Brand Lift page: type hierarchy, page rhythm, hero console, the open
 "how it works" treatment, benefits, and the partner band.
 Linked AFTER each page's own <style> so it wins on equal specificity.
 ========================================================================== */

/* ── Hero console: live campaign readout ─────────────────────────────────── */
.er-con-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--mist-line); }
.er-con-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 400; font-size: 13px; letter-spacing: -0.005em; color: var(--ink-2); }
.er-con-title .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2BB56C; flex: 0 0 auto; position: relative; }
.er-con-title .live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #2BB56C; opacity: .5; }
@media (prefers-reduced-motion: no-preference) { .er-con-title .live-dot::after { animation: liveDot 2s ease-out infinite; } }
@keyframes liveDot { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.er-con-badge { font-family: var(--font-sans); font-weight: 800; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pink-1); background: var(--obj-soft); padding: 5px 10px; border-radius: 999px; }

.bl-console { padding: 22px 24px 24px; }
.bl-study { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--mist-line); }
.bl-lab { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.bl-num { font-family: var(--font-sans); font-weight: 900; font-size: clamp(34px, 3.4vw, 46px); line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bl-num small { font-size: .42em; font-weight: 800; color: var(--pink-1); margin-left: 2px; }
.bl-spark { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 52px; flex: 0 0 auto; }
.bl-spark i { width: 9px; border-radius: 2px 2px 0 0; background: var(--mist-line); }
.bl-spark i.on { background: var(--pink-1); }
.bl-sig-lab { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.bl-sigs { display: flex; flex-direction: column; gap: 10px; }
.bl-sig { display: grid; grid-template-columns: minmax(0, 12.4rem) 1fr 16px; align-items: center; gap: 12px; }
.bl-sig .bl-ico { width: 16px; height: 16px; flex: 0 0 auto; display: inline-flex; color: var(--pink-1); }
.bl-sig .bl-ico svg { width: 100%; height: 100%; }
.bl-sig .bl-ico svg > *:nth-child(even) { stroke: var(--aqua-d); }
.bl-sig .n { display: inline-flex; align-items: flex-start; gap: 9px; line-height: 1.25; font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--ink-2); }
.bl-sig .t { display: block; height: 6px; background: var(--mist-line); overflow: hidden; }
.bl-sig .t b { display: block; height: 100%; background: var(--aqua-d); }
.bl-sig .t b.low { background: var(--pink-1); }
.bl-sig .v { font-family: var(--font-sans); font-weight: 900; font-size: 13px; text-align: right; }
.bl-sig .v.up { color: #1E9E6A; }
.bl-sig .v.dn { color: var(--pink-1); }
.bl-foot { display: flex; gap: 28px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--mist-line); }
.bl-foot-item { display: flex; flex-direction: column; gap: 5px; }
.bl-foot-lab { font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.bl-foot-val { font-family: var(--font-sans); font-weight: 900; font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bl-foot-val.up { color: #1E9E6A; }
.bl-foot-val.down { color: #1E9E6A; }
@media (max-width: 560px) { .bl-sig { grid-template-columns: 1fr auto; } .bl-sig .t { grid-column: 1 / -1; } }

/* ── How it works: open layout, large abstract graphics ──────────────────── */
/* ── How it works: open layout, large abstract graphics ── */
.blx-hiw { background: var(--mist); border-top: 1px solid var(--mist-line); padding: var(--sec-pad) 0; }
.blx-hiw-head { margin: 0 auto clamp(30px, 4vh, 52px); text-align: center; }
.blx-hiw-head h2 { margin: 10px auto 0; }
.blx-hiw-head .blx-eyebrow { justify-content: center; }

.hiw-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 4vw, 64px); align-items: start; }
.hiw-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.hiw-item .hi-gfx { width: 100%; max-width: 260px; height: clamp(120px, 12vw, 152px); margin-bottom: clamp(14px, 2vh, 22px); }
.hiw-item .hi-gfx svg { width: 100%; height: 100%; overflow: visible; }
.hiw-item h3 { margin: 0; }
.hiw-item p { font-family: var(--font-sans); font-size: clamp(14px, 1.1vw, 15.5px); line-height: 1.55; color: var(--ink-2); margin: 10px 0 0; max-width: 34ch; text-wrap: pretty; }
@media (max-width: 860px) { .hiw-row { grid-template-columns: 1fr; gap: 40px; } }


/* ── Benefits grid ───────────────────────────────────────────────────────── */
.blb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 3.2vw, 46px); row-gap: clamp(22px, 2.4vw, 30px); align-items: start; }
.blb-item { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
.blb-ico { grid-column: 1; grid-row: 1; width: clamp(40px, 3.2vw, 48px); height: clamp(40px, 3.2vw, 48px); display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.blb-ico svg { width: 100%; height: 100%; }
.blb-ico svg .a { stroke: var(--aqua-d); stroke-opacity: 1; }
.blb-ico svg .b { stroke: var(--pink-1); stroke-width: 2.4; }
.blb-item h4 { grid-column: 2; grid-row: 1; font-family: var(--font-sans); font-weight: 900; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.14; letter-spacing: -0.025em; color: var(--ink); margin: 0; max-width: none; text-wrap: balance; }
.blb-item p { grid-column: 2; grid-row: 2; font-family: var(--font-sans); font-size: clamp(14.5px, 1.12vw, 16.5px); line-height: 1.55; color: var(--ink-2); margin: 10px 0 0; max-width: 46ch; text-wrap: pretty; }

@media (max-width: 860px) { .blb-grid { grid-template-columns: 1fr; } .blb-item { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; } .blb-ico { width: 36px; height: 36px; } .blb-ico svg { width: 28px; height: 28px; } }

/* ── Partner band ────────────────────────────────────────────────────────── */
.blx-pband { text-align: center; display: grid; justify-items: center; gap: 10px; }
.blx-pband h3 { font-family: var(--font-sans); font-weight: 900; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.08; letter-spacing: -.025em; color: var(--ink); margin: 0; }
.blx-pband p { font-family: var(--font-sans); font-weight: 400; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 62ch; }
.blx-pband .pb-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px clamp(34px, 4.4vw, 58px); margin-top: 16px; }
.blx-pband .pb-row .blp-logo img { --plogo-h: 26px; opacity: 1; filter: grayscale(1); }
.blx-pband .pb-row .blp-logo img[src*="index-exchange"] { --plogo-h: 30px; }
.blx-pband .pb-row .blp-logo img[src*="cint"] { --plogo-h: 24px; }
.blx-pband .pb-row .blp-logo img[src*="happydemics"] { --plogo-h: 21px; }
.blx-pband .pb-row .blp-logo:hover img { filter: none; }

/* ── Type hierarchy ──────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   TYPE HIERARCHY — one scale for the whole page.
   Tier 1  h1        page title
   Tier 2  section   every section header
   Tier 3  feature   case-study / partner band headers
   Tier 4  card      titles inside cards
   ───────────────────────────────────────────────────────────── */
:root {
  --t-section: clamp(25px, 2.6vw, 38px);
  --t-feature: clamp(20px, 2vw, 26px);
  --t-card:    clamp(16px, 1.4vw, 19px);
}

/* Tier 2 — section headers */
.blx-s-head h2,
.blx-hiw-head h2,
.blx-o-head h2,
.er-how-head h2,
.md-sol-head h2,
.md-umbrella .md-through,
.vv-sig-head h2,
.md-posts-head h2,
.blb-head,
.md-cases .pp-h2,
.md-grow .md-grow-head h3,
.md-grow .md-grow-head h2 {
  font-family: var(--font-sans); font-weight: 900;
  font-size: var(--t-section); line-height: 1.04;
  letter-spacing: -0.035em; color: var(--ink); text-wrap: balance;
}
/* give the forced break room to land on two lines */
.blx-s-head h2 { max-width: none; }
.blx-hiw-head h2 { max-width: 34ch; }
.blb-head { max-width: 30ch; }
.md-cases .pp-h2 { max-width: 26ch; }

/* Tier 3 — feature headers */
.md-cases .cs-title,
.blx-pband h3,
.md-posts .mp-title {
  font-family: var(--font-sans); font-weight: 900;
  font-size: var(--t-feature); line-height: 1.08;
  letter-spacing: -0.028em; color: var(--ink);
}

/* Tier 4 — card titles */
.hiw-item h3,
.blx-kpi h3,
.blb-item h4,
.er-step h3,
.md-kpi h3,
.vv-sig-item h4,
.md-grow-card h3 {
  font-family: var(--font-sans); font-weight: 900;
  font-size: var(--t-card); line-height: 1.12;
  letter-spacing: -0.022em; text-transform: none; text-wrap: balance;
}
.hiw-item.lead h3 { color: #fff; }
/* ── Page rhythm ─────────────────────────────────────────────────────────── */
/* Section padding, backgrounds and heading gaps. Backgrounds alternate
   white / mist so each section reads as its own block; card fills decide
   which way each one goes (white cards need a mist section and vice versa). */
:root {
  --sec-pad:  clamp(46px, 5vw, 78px);   /* full sections */
  --band-pad: clamp(26px, 2.8vw, 40px); /* slim bands    */
  --head-gap: clamp(24px, 2.6vw, 34px); /* header → content */
}

/* even vertical step on every full section */
.md-umbrella,
.er-how,
.md-solution,
.vv-sig,
.md-posts,
.blx-hiw,
.md-cases,
.md-grow { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); }

/* slim bands sit tighter */
.blx-partners-sec,
.md-demostrip { padding-top: var(--band-pad); padding-bottom: var(--band-pad); }
main > section.blx-partners-sec { padding-top: var(--band-pad); padding-bottom: var(--band-pad); }
.blx-partners-sec .blx-pband-strip { padding: 0; background: none; border: 0; margin: 0; }

/* backgrounds: white → mist → white → mist … */
.md-umbrella { background: #fff; }
.er-how { background: var(--mist); border-top: 1px solid var(--mist-line); }
.md-solution { background: #fff; border-top: 1px solid var(--mist-line); }
.vv-sig, .md-posts { background: var(--mist); border-top: 1px solid var(--mist-line); }
.blx-partners-sec { background: var(--mist); border-top: 1px solid var(--mist-line); }
.md-cases { background: #fff; border-top: 1px solid var(--mist-line); }
.md-grow { background: var(--mist); border-top: 1px solid var(--mist-line); }
.md-demostrip { background: #fff; border-top: 1px solid var(--mist-line); }

/* grow cards flip to white so their section can carry mist */
.md-grow-card:not(.pink) { background: #fff; border: 1px solid var(--mist-line); }

/* one heading → content gap everywhere */
.er-how-head,
.md-sol-head,
.blx-hiw-head,
.md-cases .pp-head,
.md-grow .md-grow-head { margin-bottom: var(--head-gap); }

/* how-it-works fills one screen, content centred */
.er-how { min-height: calc(100svh - var(--nav-h, 78px)); display: flex; flex-direction: column; justify-content: center; }
.er-how > .container { width: 100%; padding-bottom: 0; }

/* CTA strip: icon beside the copy */
.md-demostrip .ds-inner { display: flex; align-items: center; gap: clamp(16px, 2vw, 26px); flex-wrap: wrap; }
.md-demostrip .ds-copy { flex: 1 1 auto; margin: 0; }
.md-demostrip .ds-ico { width: 54px; height: 54px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--pink-1); }
.md-demostrip .ds-ico svg { width: 54px; height: 54px; }
.md-demostrip .ds-ico svg > *:nth-child(even) { stroke: var(--aqua-d); }

/* section headers on these pages keep their own widths in check */
.er-how-head h2, .md-sol-head h2 { max-width: 30ch; }
.er-how-head p, .md-sol-head p { margin-top: 12px; }

/* signal-name column: allow two lines for long labels */
.bl-sig .n { min-width: 0; }
.bl-sig .bl-ico { margin-top: 1px; }

/* never two mist sections in a row: the band flips to white when it
   follows an already-mist section */
.vv-sig + .blx-partners-sec,
.md-posts + .blx-partners-sec,
.er-how + .blx-partners-sec,
.md-grow + .blx-partners-sec { background: #fff; }

/* Adjacency guards: where two mist sections would meet, the second flips to
   white and its cards flip back to mist so the contrast still holds. */
.md-posts + .md-grow,
.vv-sig + .md-grow,
.er-how + .md-grow { background: #fff; }
.md-posts + .md-grow .md-grow-card:not(.pink),
.vv-sig + .md-grow .md-grow-card:not(.pink),
.er-how + .md-grow .md-grow-card:not(.pink) { background: var(--mist); border-color: transparent; }
/* …and a band between two white sections keeps its mist so it reads as a break */
.md-solution + .blx-partners-sec,
.md-cases + .blx-partners-sec { background: var(--mist); }

/* ── SOLUTION SECTION (ported from Brand Lift) ───────────────────────────── */
@media (prefers-reduced-motion: reduce) { .blx-stops::after { transition: none; transform: scaleX(1); } .blx-arrow { transition: none; opacity: 1; transform: none; } .bh-fill { transition: none !important; } }

/* Section headings stay full-strength: they rise, but never fade */
  .blx-o-head, .blx-s-head, .blb-head, .blx-pband h3 { animation-name: softRiseNoFade !important; }
.blx-o-head.reveal, .blx-s-head.reveal, .blb-head.reveal,
  .blx-outcome.reveal .blx-o-head, .blx-benefits.reveal .blb-head,
  .blx-pband h3, .blx-pband.reveal h3 { opacity: 1 !important; color: var(--ink) !important; }
/* ── How containerisation works: before/after + inside-the-container ── */
  .blx-how { background: #fff; border-top: 1px solid var(--mist-line); padding: var(--sec-pad) 0; }
/* cards read against white now */
  .blx-how .ba-card { background: var(--mist); }
.blx-how .ba-inside { background: #fff; }
.blx-how .ba-flow span { background: #fff; }
.blx-how .blx-explain { background: var(--mist); }
.blx-how-head { max-width: 62ch; margin-bottom: clamp(26px, 3.4vh, 40px); }
.blx-how-head h2 { font-family: var(--font-sans); font-weight: 900; font-size: clamp(24px, min(2.9vw, 4.6vh), 40px); line-height: 1.06; letter-spacing: -0.03em; color: var(--ink); margin: 10px 0 0; max-width: 24ch; text-wrap: balance; }
.blx-how-head p { font-family: var(--font-sans); font-size: clamp(14.5px, 1.12vw, 16.5px); line-height: 1.55; color: var(--ink-2); margin: 12px 0 0; max-width: 60ch; }
/* inside the container: 3 steps */
  .blx-inline-steps { margin: clamp(20px, 2.6vh, 30px) 0 0; font-family: var(--font-sans); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 78ch; }
.blx-inline-steps b { color: var(--ink); font-weight: 800; }
/* what changes / what doesn't */
  .blx-ops { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 26px); margin-top: clamp(28px, 3.6vh, 44px); }
/* containerisation explainer */
  .blx-explain { margin-top: clamp(20px, 2.4vh, 30px); background: #fff; border: 1px solid var(--mist-line); width: 100%; }
.blx-explain summary { cursor: pointer; list-style: none; padding: 18px clamp(20px, 2.2vw, 26px); display: flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-weight: 900; font-size: 15px; letter-spacing: -0.015em; color: var(--ink); }
.blx-explain summary::-webkit-details-marker { display: none; }
.blx-explain summary::after { content: '+'; margin-left: auto; font-weight: 900; font-size: 20px; color: var(--pink-1); line-height: 1; }
.blx-explain[open] summary::after { content: '\2013'; }
.blx-explain summary .sq { width: 10px; height: 10px; background: var(--pink-1); transform: skewX(var(--skew)); flex: 0 0 auto; }
.blx-explain .ex-body { padding: 0 clamp(20px, 2.2vw, 26px) 24px; }
.blx-explain .ex-body p { font-family: var(--font-sans); font-size: 14px; line-height: 1.62; color: var(--ink-2); margin: 0 0 12px; max-width: none; break-inside: avoid; }
.blx-explain .ex-body p:last-child { margin-bottom: 0; }
.blx-explain .ex-body b { color: var(--ink); font-weight: 700; }
@media (max-width: 860px) { .ba-grid, .blx-ops { grid-template-columns: 1fr; } .blx-explain { width: 100%; } .st-row { grid-template-columns: 1fr; } .st-item + .st-item { border-left: 0; border-top: 1px solid var(--mist-line); } }
/* ── How it works: open layout, large abstract graphics ── */
  .blx-hiw { background: var(--mist); border-top: 1px solid var(--mist-line); padding: var(--sec-pad) 0; }
.blx-hiw-head { margin: 0 auto clamp(30px, 4vh, 52px); text-align: center; }
.blx-hiw-head h2 { margin: 10px auto 0; }
.blx-hiw-head .blx-eyebrow { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .blx-stops::after { transition: none; transform: scaleX(1); } .blx-arrow { transition: none; opacity: 1; transform: none; }
    .er-ladder::before { transform: scaleX(1); transition: none; }
    .ba-gap .g-split-real { transition: none; }
    .ba-gap:not(.motion-in) .g-split-real { width: revert !important; }
    .bh-panel { transition: none; }
  }
@media (prefers-reduced-motion: reduce) { .blx-stops::after { transition: none; transform: scaleX(1); } .blx-arrow { transition: none; opacity: 1; transform: none; } .ba-gap .g-bt b { transition: none; } .ba-gap:not(.motion-in) .g-bt b { width: revert !important; } }
/* The mist partner strip closes .blx, so md-cases stays white and is
     separated by a hairline instead of a second mist band. */
  /* Benefits + case studies share one height so the two blocks match */
  :root { --sec-match-h: min(max(660px, 82vh), 820px); }
.blx-sec-ben > .container { width: 100%; }
/* Three sibling sections. Content sets the height; the sections just get a
     consistent, generous step. No forced viewport fill (it left dead space). */
  .blx > .container:first-of-type { display: flex; align-items: center; }
.blx > .container:first-of-type > .blx-solution { width: 100%; margin-top: 0; }
.blx > .container:first-of-type .blx-s-top { margin-bottom: 0; }
section.blx-sec-kpi { background: var(--mist); border-top: 1px solid var(--mist-line); }
section.blx-sec-ben { background: #fff; }
.blx-sec-kpi > .container, .blx-sec-ben > .container:first-of-type { display: flex; flex-direction: column; justify-content: center; }
.blx-sec-kpi .blx-outcome, .blx-sec-ben .blx-benefits { width: 100%; margin-top: 0 !important; }
@media (max-width: 900px) {
    .blx > .container:first-of-type,
    .blx-sec-kpi > .container,
    .blx-sec-ben > .container:first-of-type { display: block; }
  }
.blx { --blx-pb: var(--sec-pad);background: #fff; border-top: 1px solid var(--mist-line); padding: var(--sec-pad) 0 var(--blx-pb); }
/* Intro block matches the hero's height exactly */
  .blx:not(.blx-sec-kpi):not(.blx-sec-ben) { min-height: calc(100svh - var(--nav-h, 77px) - 121px); display: flex; align-items: center; padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); }
.blx:not(.blx-sec-kpi):not(.blx-sec-ben) > .container { width: 100%; }
.blx-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 16px; }
.blx-eyebrow::before { content: ''; width: 8px; height: 8px; background: var(--ink); transform: skewX(var(--skew)); flex: 0 0 auto; }
.blx-eyebrow.pink { color: var(--pink-1); }
.blx-eyebrow.pink::before { background: var(--pink-1); }
.blx h2 { font-family: var(--font-sans); font-weight: 900; font-size: clamp(27px, 3vw, 42px); line-height: 1.04; letter-spacing: -0.035em; color: var(--ink); margin: 0; text-wrap: balance; }
.blx-problem { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: clamp(34px, 5.5vw, 76px); align-items: center; }
.blx-p-copy h2 { max-width: 15ch; }
.blx-lead { font-family: var(--font-sans); font-size: 16.5px; line-height: 1.62; color: var(--ink-2); margin: 20px 0 0; max-width: 48ch; text-wrap: pretty; }
.blx-chart { margin: 0; background: #fff; border: 1px solid var(--mist-line); padding: 28px 30px; box-shadow: 0 30px 60px -40px rgba(48,48,48,.34); }
.blx-chart .g-lab { font-family: var(--font-sans); font-weight: 800; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--mist-line); }
.blx-chart .g-bands { display: flex; flex-direction: column; gap: 13px; }
.blx-chart .g-band { display: grid; grid-template-columns: 6.4rem 1fr auto; align-items: center; gap: 14px; }
.blx-chart .g-bk { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.blx-chart .g-bt { display: block; height: 11px; background: rgba(48,48,48,.07); overflow: hidden; }
.blx-chart .g-bt b { display: block; height: 100%; background: var(--aqua-d); transition: width 1.05s cubic-bezier(.6,.02,.35,1) .1s; }
.blx-chart .g-bt b.mid { background: var(--aqua-m); }
.blx-chart .g-bt b.low { background: var(--pink-1); }
.blx-chart:not(.motion-in) .g-bt b { width: 0 !important; }
.blx-chart .g-bv { font-family: var(--font-sans); font-weight: 900; font-size: 15.5px; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 4.6ch; text-align: right; }
.blx-chart .g-bv small { font-size: .62em; font-weight: 800; color: var(--ink-3); margin-left: 1px; }
.blx-chart .g-bv.hi, .blx-chart .g-bv.hi small { color: var(--pink-1); }
.blx-chart .g-note { margin: 20px 0 0; padding-top: 15px; border-top: 1px solid var(--mist-line); font-family: var(--font-sans); font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.blx-chart .g-note b { color: var(--ink); font-weight: 800; }
.blx-solution { margin-top: clamp(56px, 7vw, 92px); }
.blx-s-head { margin-bottom: clamp(34px, 4vw, 52px); }
.blx-s-head h2 { max-width: 22ch; }
.blx-track { --cols: repeat(3, minmax(0, 1fr)) minmax(0, 0.92fr); }
.blx-winrow { display: grid; grid-template-columns: var(--cols); margin-bottom: 14px; }
.blx-win { grid-column: 1 / span 3; display: flex; align-items: center; gap: 10px; padding: 7px 14px; background: var(--obj-soft); color: var(--pink-1); font-family: var(--font-sans); font-weight: 800; font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; }
.blx-win::before { content: ''; width: 6px; height: 6px; background: var(--pink-1); border-radius: 50%; flex: 0 0 auto; }
.blx-win.end { grid-column: 4; margin-left: clamp(18px, 2.2vw, 34px); background: rgba(48,48,48,.06); color: var(--ink-3); }
.blx-win.end::before { background: var(--ink-3); opacity: .55; }
.blx-stops { list-style: none; display: grid; grid-template-columns: var(--cols); grid-template-rows: auto auto auto 1fr; gap: 0; margin: 0; padding: 0; position: relative; }
.blx-stops::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: rgba(48,48,48,.12); }
.blx-stops::after { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 3px; background: var(--obj-soft, #FFE3E8); transform: scaleX(0); transform-origin: left center; transition: transform 1.8s cubic-bezier(.5,.02,.25,1) .15s; }
.blx-track.motion-in .blx-stops::after { transform: scaleX(1); }
.blx-track { position: relative; }
.blx-arrow { position: absolute; right: -9px; top: 3px; z-index: 2; display: inline-flex; color: var(--obj-soft, #FFE3E8); opacity: 0; transform: translateX(-10px); transition: opacity .35s ease 1.7s, transform .45s cubic-bezier(.2,.7,.3,1) 1.7s; }
.blx-arrow svg { width: 13px; height: 13px; }
.blx-track.motion-in .blx-arrow { opacity: 1; transform: none; }
.blx-stop { position: relative; padding: 0 clamp(18px, 2.2vw, 34px) 0 0; display: grid; grid-row: 1 / span 4; grid-template-rows: subgrid; }
.blx-stop + .blx-stop { padding-left: clamp(18px, 2.2vw, 34px); }
.blx-dot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 26px; height: 18px; margin-bottom: 22px; background: var(--aqua-d); color: #fff; font-family: var(--font-sans); font-weight: 900; font-size: 10.5px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.blx-stop.ghost .blx-dot { width: 18px; background: var(--mist); border: 2px solid rgba(48,48,48,.22); }
.blx-sico { display: block; width: 34px; height: 34px; margin: 0 0 14px; }
.blx-sico svg { width: 34px; height: 34px; }
.blx-sico svg .a { stroke: var(--ink); }
.blx-sico svg .b { stroke: var(--pink-1); }
.blx-sico.off svg .a { stroke: rgba(48,48,48,.28); }
.blx-sico.off svg .b { stroke: rgba(48,48,48,.28); }
.blx-stop h3 { font-family: var(--font-sans); font-weight: 900; font-size: clamp(17px, 1.55vw, 22px); line-height: 1.12; letter-spacing: -0.028em; color: var(--ink); margin: 0 0 11px; text-wrap: balance; }
.blx-stop > p:not(.blx-ben) { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.blx-stop > p:not(.blx-ben) b { color: var(--ink); font-weight: 800; }
.blx-stop.ghost h3, .blx-stop.ghost > p:last-child { color: var(--ink-3); }
.blx-outcome { margin-top: 0; background: none; border: 0; padding: 0; box-shadow: none; }
.blx-o-head { margin: 0 auto clamp(24px, 2.6vw, 32px); text-align: center; max-width: none; }
.blx-o-head h2 { font-size: clamp(21px, 2.1vw, 30px); white-space: nowrap; }
@media (max-width: 620px) { .blx-o-head h2 { white-space: normal; } }
.blx-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 860px; margin: 0 auto; }
.blx-kpi { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border: 1px solid var(--mist-line); border-top: 2px solid var(--pink-1); padding: clamp(18px, 1.9vw, 22px) clamp(18px, 2vw, 24px); }
.blx-kpi.alt { border-top-color: var(--aqua-d); }
.blx-kpi { transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, background-color .3s ease; }
.blx-kpi:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 24px 46px -30px rgba(48,48,48,.28); }
@media (prefers-reduced-motion: reduce) { .blx-kpi { transition: none; } .blx-kpi:hover { transform: none; } }
.bk-ico { display: block; width: 40px; height: 40px; margin: 0 0 12px; }
.bk-ico svg { width: 40px; height: 40px; }
.bk-ico svg .a { stroke: var(--ink); }
.bk-ico svg .b { stroke: var(--pink-1); }
.blx-kpi.alt .bk-ico svg .b { stroke: var(--aqua-d); }
.blx-kpi .bk-chips span { background: var(--mist); }
.blx-kpi .bk-lab { display: block; font-family: var(--font-sans); font-weight: 800; font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--pink-1); margin: 0 0 4px; }
.blx-kpi.alt .bk-lab { color: #0B8F89; }
.blx-kpi h3 { font-family: var(--font-sans); font-weight: 800; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 9px; }
.blx-kpi .bk-desc { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 20px; max-width: 34ch; text-wrap: pretty; }
.blx-kpi .bk-chips { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; margin-top: auto; }
.blx-kpi .bk-chips span { font-family: var(--font-sans); font-weight: 700; font-size: 11px; line-height: 1.2; white-space: nowrap; color: var(--ink-2); background: var(--mist); border: 1px solid var(--mist-line); padding: 6px 9px; }
@media (max-width: 620px) { .blx-kpi .bk-chips { flex-wrap: wrap; } }
.blx-sum { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(28px, 3vw, 40px) 0 0; padding: 24px 0 0; border-top: 1px solid var(--mist-line); }
.blx-sum li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 clamp(18px, 2.4vw, 32px); border-left: 1px solid var(--mist-line); font-family: var(--font-sans); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.blx-sum li:first-child { border-left: 0; }
.blx-sum li span { font-weight: 800; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; line-height: 1.35; color: var(--ink); }
.blx-sum .sum-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-bottom: 3px; color: var(--pink-1); }
.blx-sum .sum-ico svg { width: 24px; height: 24px; }
.blx-sum li:nth-child(2) .sum-ico { color: var(--aqua-d); }
@media (max-width: 1040px) { .blx-stops { grid-template-rows: none; } .blx-stop { grid-row: auto; grid-template-rows: none; } .blx-track { --cols: repeat(2, minmax(0, 1fr)); } .blx-winrow { display: none; } .blx-win.end { display: none; } .blx-stops { row-gap: 34px; } .blx-stops::before, .blx-stops::after { display: none; } .blx-arrow { display: none; } .blx-stop, .blx-stop + .blx-stop { padding: 0 20px 0 0; } }
@media (max-width: 940px) {
    .blx-problem { grid-template-columns: 1fr; gap: 32px; }
    .blx-kpis { grid-template-columns: 1fr; }

    .blx-sum { grid-template-columns: 1fr; gap: 20px; }
    .blx-sum li { padding: 0; border-left: 0; }
  }
@media (max-width: 620px) { .blx-track { --cols: 1fr; } .blx-win { grid-column: 1; } }
/* Algorithm infographic — icon-led, minimal copy */
  .blx-algo { position: relative; overflow: hidden; display: grid; grid-template-columns: auto auto auto auto auto; justify-content: center; align-items: center; gap: clamp(10px, 1.6vw, 22px); padding: clamp(26px, 3vw, 38px) clamp(20px, 2.6vw, 34px); background: var(--mist, #F7F5F0); border: 1px solid var(--mist-line, #E4E1DA); margin-bottom: clamp(14px, 1.6vw, 20px); }
.blx-algo::before { content: ''; position: absolute; top: -34px; right: -34px; width: 128px; height: 128px; background: var(--pink-1, #F8506F); opacity: .07; transform: skewX(var(--skew, -8.95deg)); pointer-events: none; }
.blx-algo > * { position: relative; z-index: 1; }
.blx-algo .ag-inputs { display: grid; gap: clamp(12px, 1.4vw, 18px); }
.blx-algo .ag-in { display: grid; justify-items: center; gap: 9px; text-align: center; }
.blx-algo .ag-in .ag-sw { width: clamp(58px, 5.4vw, 74px); height: clamp(58px, 5.4vw, 74px); display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1.5px solid var(--mist-line, #E4E1DA); color: var(--ink-2, #6B6B6B); }
.blx-algo .ag-in .ag-sw svg { width: 50%; height: 50%; }
.blx-algo .ag-in.piq .ag-sw { background: var(--aqua-l, #E5F1EC); border-color: var(--aqua-d, #8ADBCD); color: #1E9E6A; }
.blx-algo .ag-in b { font-family: var(--font-sans); font-weight: 800; font-size: 13px; letter-spacing: .01em; color: var(--ink, #303030); }
.blx-algo .ag-plus { font-family: var(--font-sans); font-weight: 900; font-size: 17px; color: var(--ink-3, #A6A29A); line-height: 1; text-align: center; }
.blx-algo .ag-core { display: grid; justify-items: center; gap: 11px; text-align: center; }
.blx-algo .ag-core .ag-c-ico { position: relative; overflow: hidden; width: clamp(92px, 8.6vw, 116px); height: clamp(92px, 8.6vw, 116px); display: inline-flex; align-items: center; justify-content: center; background: var(--pink-1, #F8506F); color: #fff; box-shadow: 0 20px 40px -20px rgba(223,72,100,.5); }
.blx-algo .ag-core .ag-c-ico::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: url("assets/stripes/stripes-02-white-ext.png") right center / cover no-repeat; opacity: .5; -webkit-mask-image: radial-gradient(ellipse at 86% 10%, #000 0%, transparent 62%); mask-image: radial-gradient(ellipse at 86% 10%, #000 0%, transparent 62%); }
.blx-algo .ag-core .ag-c-ico svg { position: relative; z-index: 1; width: 46%; height: 46%; }
.blx-algo .ag-core b { font-family: var(--font-sans); font-weight: 900; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.08; letter-spacing: -.018em; color: var(--ink, #303030); max-width: 15ch; }
.blx-algo .ag-core small { font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--pink-1, #F8506F); }
.blx-algo .ag-arrow { display: inline-flex; color: var(--pink-1, #F8506F); }
.blx-algo .ag-arrow svg { width: clamp(20px, 2vw, 28px); height: clamp(20px, 2vw, 28px); }
.blx-algo .ag-out { display: grid; justify-items: center; gap: 10px; text-align: center; margin: 0; }
.blx-algo .ag-out .ag-o-ico { width: clamp(58px, 5.4vw, 74px); height: clamp(58px, 5.4vw, 74px); display: inline-flex; align-items: center; justify-content: center; background: var(--aqua-l, #E5F1EC); border: 1.5px solid var(--aqua-d, #8ADBCD); color: #1E9E6A; }
.blx-algo .ag-out .ag-o-ico svg { width: 50%; height: 50%; }
.blx-algo .ag-out b { display: block; font-family: var(--font-sans); font-weight: 900; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.08; letter-spacing: -.02em; color: var(--ink, #303030); max-width: 14ch; }
@media (max-width: 900px) { .blx-algo { grid-template-columns: 1fr; justify-items: center; gap: 14px; } .blx-algo .ag-arrow { transform: rotate(90deg); } }
/* ── Compact diagram: technical connector network + living core ── */
  .blx-algo.compact { display: grid; grid-template-columns: auto minmax(52px, 7%) auto minmax(40px, 5.5%) auto; justify-content: center; justify-items: center; align-items: center; gap: 0 clamp(4px, .6vw, 10px); margin: 0; padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
.blx-algo.compact::before, .blx-algo.compact::after { display: none; }
/* inputs — frameless, icon tile + label */
  .blx-algo.compact .ag-inputs { grid-template-columns: 1fr; gap: clamp(22px, 2.4vw, 32px); }
.blx-algo.compact .ag-in { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 12px; text-align: left; padding: 0; background: none; border: 0; box-shadow: none; }
.blx-algo.compact .ag-in .ag-sw { width: clamp(40px, 3.4vw, 48px); height: clamp(40px, 3.4vw, 48px); border: 1px solid var(--mist-line, #E4E1DA); background: #fff; color: var(--ink-2, #6B6B6B); transition: border-color .2s ease, color .2s ease; }
.blx-algo.compact .ag-in.piq .ag-sw { border-color: var(--aqua-d, #8ADBCD); background: var(--aqua-l, #E5F1EC); color: #1E9E6A; }
.blx-algo.compact .ag-in .ag-sw svg { width: 50%; height: 50%; }
.blx-algo.compact .ag-in b { font-size: clamp(14px, 1.15vw, 17px); font-weight: 800; letter-spacing: -.005em; white-space: nowrap; }
/* connector network */
  .blx-algo.compact .ag-arrow { width: 100%; color: var(--pink-1, #F8506F); }
.blx-algo.compact .ag-arrow svg { width: 100%; height: auto; overflow: visible; }
.blx-algo.compact .ag-arrow.merge { align-self: stretch; display: flex; align-items: center; }
.blx-algo.compact .ag-arrow.merge svg { height: clamp(104px, 9.4vw, 132px); }
.blx-algo.compact .ag-arrow .cline { fill: none; stroke: var(--ink-3, #A6A29A); stroke-width: 1.1; opacity: .5; }
.blx-algo.compact .ag-arrow .cnode { fill: #fff; stroke: var(--ink-3, #A6A29A); stroke-width: 1.1; }
.blx-algo.compact .ag-arrow .cjoin { fill: var(--pink-1, #F8506F); }
.blx-algo.compact .ag-arrow .cflow { fill: none; stroke: var(--pink-1, #F8506F); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 5 48; }
.blx-algo.compact .ag-arrow .chead { fill: var(--pink-1, #F8506F); }
.blx-algo.compact .ag-arrow.single .cflow { stroke: var(--aqua-d, #8ADBCD); }
.blx-algo.compact .ag-arrow.single .chead { fill: var(--aqua-d, #8ADBCD); }
@media (prefers-reduced-motion: no-preference) {
    .blx-algo.compact .ag-arrow .cflow { animation: agFlow 2.6s linear infinite; }
    .blx-algo.compact .ag-arrow .cflow.d2 { animation-delay: .65s; }
  }
/* core — solid skewed mark inside counter-rotating dashed rings */
  .blx-algo.compact .ag-core { gap: 14px; }
.ag-c-stage { position: relative; display: inline-flex; align-items: center; justify-content: center; width: clamp(132px, 12vw, 176px); height: clamp(132px, 12vw, 176px); }
.ag-c-stage .ag-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ag-c-stage .ag-rings g { transform-origin: 100px 100px; }
.ag-c-stage .ag-rings .ra { fill: none; stroke: var(--pink-1, #F8506F); stroke-width: 1.4; opacity: .34; stroke-dasharray: 2 9; stroke-linecap: round; }
.ag-c-stage .ag-rings .rb { fill: none; stroke: var(--aqua-d, #8ADBCD); stroke-width: 1.8; opacity: .75; stroke-dasharray: 54 30; stroke-linecap: round; }
.ag-c-stage .ag-rings .rc { fill: none; stroke: var(--pink-1, #F8506F); stroke-width: 1.2; opacity: .28; stroke-dasharray: 22 14; }
.ag-c-stage .ag-rings .rdot { fill: var(--aqua-d, #8ADBCD); }
.ag-c-stage .glow { position: absolute; inset: 20%; background: radial-gradient(circle, rgba(248,80,111,.20), transparent 72%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
    .ag-c-stage .ag-rings .spin-a { animation: agSpin 34s linear infinite; }
    .ag-c-stage .ag-rings .spin-b { animation: agSpinR 22s linear infinite; }
    .ag-c-stage .ag-rings .spin-c { animation: agSpin 15s linear infinite; }
  }
.blx-algo.compact .ag-core .ag-c-ico { position: relative; z-index: 1; width: clamp(74px, 6.6vw, 96px); height: clamp(74px, 6.6vw, 96px); overflow: visible; transform: skewX(var(--skew, -8.95deg)); box-shadow: 0 22px 44px -20px rgba(223,72,100,.6); }
.blx-algo.compact .ag-core .ag-c-ico::before { content: ''; position: absolute; inset: 0; border: 1.5px solid var(--pink-1, #F8506F); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .blx-algo.compact .ag-core .ag-c-ico::before { animation: agPulse 3s ease-out infinite; } }
.blx-algo.compact .ag-core .ag-c-ico svg { width: 46%; height: 46%; transform: skewX(calc(-1 * var(--skew, -8.95deg))); }
.blx-algo.compact .ag-core b { font-size: clamp(14px, min(1.3vw, 2.2vh), 18px); max-width: 15ch; }
/* outcome */
  .blx-algo.compact .ag-out { gap: 12px; }
.blx-algo.compact .ag-out .ag-o-ico { width: clamp(52px, 4.4vw, 62px); height: clamp(52px, 4.4vw, 62px); border: 1px solid var(--aqua-d, #8ADBCD); background: var(--aqua-l, #E5F1EC); box-shadow: 0 16px 32px -22px rgba(138,219,205,.75); }
.blx-algo.compact .ag-out .ag-o-ico svg { width: 52%; height: 52%; }
.blx-algo.compact .ag-out b { font-size: clamp(14px, min(1.3vw, 2.2vh), 18px); max-width: 13ch; padding-top: 12px; position: relative; }
.blx-algo.compact .ag-out b::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%) skewX(var(--skew, -8.95deg)); width: 30px; height: 3px; background: var(--aqua-d, #8ADBCD); }
.blx-algo.compact .ag-plus { display: none; }
/* feedback loop: outcome returns into the algorithm */
  .blx-algo.compact .ag-loop { grid-column: 3 / -1; grid-row: 2; justify-self: stretch; display: grid; justify-items: center; gap: 2px; margin-top: 6px; }
.blx-algo.compact .ag-loop svg { width: 100%; height: 44px; overflow: visible; }
.blx-algo.compact .ag-loop .lline { fill: none; stroke: var(--aqua-d, #8ADBCD); stroke-width: 1.5; opacity: .5; }
.blx-algo.compact .ag-loop .lflow { fill: none; stroke: var(--aqua-d, #8ADBCD); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 10 300; }
.blx-algo.compact .ag-loop .lhead { fill: var(--aqua-d, #8ADBCD); }
@media (prefers-reduced-motion: no-preference) { .blx-algo.compact .ag-loop .lflow { animation: agLoop 3.4s linear infinite; } }
.blx-algo.compact .ag-loop-lab { font-family: var(--font-sans); font-weight: 800; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: #1E9E6A; }
@media (max-width: 900px) {
    .blx-algo.compact { grid-template-columns: 1fr; gap: 18px 0; }
    .blx-algo.compact .ag-in b { white-space: normal; }
    .blx-algo.compact .ag-arrow { width: 34px; }
    .blx-algo.compact .ag-arrow.merge { display: none; }
    .blx-algo.compact .ag-arrow.single svg { transform: rotate(90deg); }
  }
/* Full-width partner strip */
  main > section.blx-partners-sec:not(.er-trust):not(.md-demostrip) { padding-top: var(--band-pad); padding-bottom: var(--band-pad); }
.blx-pband-strip { margin: 0; padding: 0; background: none; border: 0; }
.blx-pband-strip + .container { padding-top: clamp(46px, 5.2vw, 76px); }
.blx-outcome + .blx-benefits { margin-top: clamp(34px, 3.6vw, 48px); padding-top: 0; border-top: 0; }
.blx-pband { text-align: center; display: grid; justify-items: center; gap: 10px; }
.blx-pband h3 { font-family: var(--font-sans); font-weight: 900; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.08; letter-spacing: -.025em; color: var(--ink); margin: 0; }
.blx-pband p { font-family: var(--font-sans); font-weight: 400; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 62ch; }
.blx-pband .pb-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px clamp(34px, 4.4vw, 58px); margin-top: 16px; }
.blx-pband .pb-row .blp-logo img { --plogo-h: 26px; opacity: 1; filter: grayscale(1); }
.blx-pband .pb-row .blp-logo img[src*="index-exchange"] { --plogo-h: 30px; }
.blx-pband .pb-row .blp-logo img[src*="cint"] { --plogo-h: 24px; }
.blx-pband .pb-row .blp-logo img[src*="happydemics"] { --plogo-h: 21px; }
.blx-pband .pb-row .blp-logo:hover img { filter: none; }
/* Algo footer CTA */
  .blx-algo-foot { display: flex; align-items: center; justify-content: flex-start; margin: 0; padding: 26px 0 0; }
.blx-algo-foot p { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); max-width: 62ch; }
.blx-algo-foot .btn { flex: 0 0 auto; }
/* ── Three ideas: the build-up behind the algorithm ── */
  .blx-ideas { margin: 0 0 clamp(44px, 5vw, 72px); }
.blx-ideas .bi-head { max-width: 62ch; margin-bottom: clamp(26px, 3vw, 38px); }
.blx-ideas .bi-head h3 { font-family: var(--font-sans); font-weight: 900; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.04; letter-spacing: -.02em; color: var(--ink); margin: 10px 0 0; max-width: 30ch; }
.blx-idea { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); gap: clamp(24px, 3.4vw, 56px); align-items: start; padding: clamp(26px, 3vw, 38px) 0; border-top: 1px solid var(--mist-line); }
.blx-idea:last-child { border-bottom: 1px solid var(--mist-line); }
.blx-idea .bi-n { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-sans); font-weight: 900; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--pink-1); margin: 0 0 12px; }
.blx-idea .bi-n::before { content: ''; width: 9px; height: 9px; background: currentColor; transform: skewX(var(--skew)); flex: 0 0 auto; }
.blx-idea h4 { font-family: var(--font-sans); font-weight: 900; font-size: clamp(20px, 2.1vw, 30px); line-height: 1.08; letter-spacing: -.018em; text-transform: none; color: var(--ink); margin: 0 0 14px; max-width: 26ch; }
.blx-idea p { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 52ch; }
.blx-idea p + p { margin-top: 12px; }
.blx-idea p b { color: var(--ink); font-weight: 700; }
.blx-idea .bi-first { font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pink-1); background: var(--obj-soft); padding: 6px 12px; display: inline-block; margin-bottom: 14px; }
@media (max-width: 900px) { .blx-idea { grid-template-columns: 1fr; } .blx-idea h4, .blx-idea p { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .blx-stops::after { transition: none; transform: scaleX(1); } .blx-arrow { transition: none; opacity: 1; transform: none; } .blx-chart .g-bt b { transition: none; } .blx-chart:not(.motion-in) .g-bt b { width: revert !important; } }
/* Solution head + evidence side by side (problem block folded in) */
  .blx-solution { margin-top: 0; }
.blx-s-top { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); gap: clamp(28px, 4vw, 64px); align-items: end; margin-bottom: clamp(30px, 3.4vw, 44px); }
.blx-s-head { margin-bottom: 0; }
.blx-s-head h2 { max-width: 24ch; }
.blx-s-head .blx-lead { font-family: var(--font-sans); font-size: 18px; line-height: 1.6; color: var(--ink-2); margin: 16px 0 0; max-width: 48ch; text-wrap: pretty; }
.blx-body { font-family: var(--font-sans); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--ink-2); margin: clamp(14px, 2vh, 20px) 0 0; max-width: 48ch; text-wrap: pretty; }
.blx-s-head .blx-sub { margin-top: clamp(18px, 2.4vh, 26px); }
.blx-s-head .blx-sub-lab { font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink); margin: clamp(20px, 2.2vw, 28px) 0 0; }
.blx-s-head .blx-sub { margin-top: 14px; }
@media (max-width: 940px) { .blx-s-top { grid-template-columns: 1fr; gap: 32px; } }
/* Partner card in the solution head */
  .blx-partners { background: #fff; border: 1px solid var(--mist-line); padding: 26px 30px; box-shadow: 0 30px 60px -40px rgba(48,48,48,.34); }
/* Two decisions, folded into step 3 */
  .blx-sub { list-style: none; margin: 12px 0 0; padding: 0; border-top: 0; display: flex; flex-direction: column; gap: 10px; max-width: 48ch; }
.blx-sub li { display: flex; gap: 13px; align-items: flex-start; font-family: var(--font-sans); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.blx-sub li > span:first-child { flex: 0 0 9px; }
.blx-sub li > .t { flex: 1 1 auto; min-width: 0; }
.blx-sub li b { font-weight: 700; color: var(--ink); }
.blx-sub li > span:first-child { display: block; width: 9px; height: 9px; margin-top: 7px; background: var(--aqua-d); transform: skewX(var(--skew)); }
.blx-ben { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 9px; margin: 0; padding-top: 20px; border-top: 0; font-family: var(--font-sans); font-weight: 800; font-size: 13.5px; line-height: 1.4; letter-spacing: -0.005em; color: var(--ink); }
.blx-ben span { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; background: var(--pink-1); color: #fff; }
.blx-ben span svg { width: 11px; height: 11px; }
/* Benefits — icon beside the heading, copy indented beneath */
  .blx-benefits { margin-top: 0; padding-top: 0; border-top: 0; }
/* Tier 2 — section headers */
  .blx-s-head h2,
  .blx-hiw-head h2,
  .blx-o-head h2,
  .blb-head,
  .md-cases .pp-h2,
  .md-grow .md-grow-head h3 {
    font-family: var(--font-sans); font-weight: 900;
    font-size: var(--t-section); line-height: 1.04;
    letter-spacing: -0.035em; color: var(--ink); text-wrap: balance;
  }
/* give the forced break room to land on two lines */
  .blx-s-head h2 { max-width: none; }
.blx-hiw-head h2 { max-width: 34ch; }
/* Tier 3 — feature headers */
  .md-cases .cs-title,
  .blx-pband h3 {
    font-family: var(--font-sans); font-weight: 900;
    font-size: var(--t-feature); line-height: 1.08;
    letter-spacing: -0.028em; color: var(--ink);
  }
/* Tier 4 — card titles */
  .hiw-item h3,
  .blx-kpi h3,
  .blb-item h4,
  .md-grow-card h3 {
    font-family: var(--font-sans); font-weight: 900;
    font-size: var(--t-card); line-height: 1.12;
    letter-spacing: -0.022em; text-transform: none; text-wrap: balance;
  }
/* even vertical step on every full section */
  .blx,
  .blx-hiw,
  .blx-sec-kpi,
  .blx-sec-ben,
  .md-cases,
  .md-grow { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); }
/* slim bands sit tighter than full sections */
  .blx-partners-sec,
  .md-demostrip { padding-top: var(--band-pad); padding-bottom: var(--band-pad); }
.blx-partners-sec .blx-pband-strip { padding: 0; background: none; border: 0; margin: 0; }
/* backgrounds: white → mist → white → mist … */
  .blx { background: #fff; }
.blx-hiw,
  .blx-sec-kpi { background: var(--mist); }
.blx-hiw { border-top: 1px solid var(--mist-line); }
.blx-sec-kpi { border-top: 0; }
.blx-sec-ben { background: #fff; border-top: 1px solid var(--mist-line); }
.blx-partners-sec { background: var(--mist); border-top: 1px solid var(--mist-line); }
/* one heading → content gap everywhere */
  .blx-hiw-head,
  .blx-o-head,
  .md-cases .pp-head,
  .md-grow .md-grow-head { margin-bottom: var(--head-gap); }
.blx-benefits .blb-head { margin-bottom: var(--head-gap); }
/* mid-page sections each fill one screen, content centred */
  .blx-hiw,
  section.blx.blx-sec-kpi { min-height: calc(100svh - var(--nav-h, 78px)); display: flex; flex-direction: column; justify-content: center; }
.blx-hiw > .container,
  section.blx.blx-sec-kpi > .container { width: 100%; }

/* ── Section rhythm after the Brand Lift port ─────────────────────────────── */
/* These pages now use the same section set as Brand Lift, so the padding and
   background alternation follow the same rules. */
.blx-hiw, .blx-sec-kpi { background: var(--mist); }
.blx-hiw { border-top: 1px solid var(--mist-line); }
.blx-sec-kpi { border-top: 0; }
.blx-sec-ben { background: #fff; border-top: 1px solid var(--mist-line); }
.blx-sec-ben + .blx-partners-sec { background: var(--mist); }
.vv-sig, .md-posts { background: #fff; }
.vv-sig + .blx-partners-sec, .md-posts + .md-grow { background: var(--mist); }
.md-posts + .md-grow .md-grow-card:not(.pink) { background: #fff; border-color: var(--mist-line); }

/* how-it-works and KPI sections each fill one screen */
.blx-hiw, section.blx.blx-sec-kpi { min-height: calc(100svh - var(--nav-h, 78px)); display: flex; flex-direction: column; justify-content: center; }
.blx-hiw > .container, section.blx.blx-sec-kpi > .container { width: 100%; }

/* KPI grid: handles two or three cards */
.blx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; max-width: 860px; margin: 0 auto; }
.blx-kpi-note { margin: 18px auto 0; max-width: 860px; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; color: var(--ink-3); text-align: center; }
.blx-kpi-note b { color: var(--ink-2); font-weight: 700; }

/* grow row: four sibling solutions */
.md-grow-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .md-grow-row { grid-template-columns: 1fr; } }

/* partner band sits between two mist sections on the ported pages */
.blx-sec-ben + .blx-partners-sec { background: var(--mist); }
.blx-partners-sec + .md-cases { border-top: 1px solid var(--mist-line); }

/* benefits section fills one screen too, matching how-it-works and KPIs */
section.blx.blx-sec-ben { min-height: calc(100svh - var(--nav-h, 78px)); display: flex; flex-direction: column; justify-content: center; }
section.blx.blx-sec-ben > .container { width: 100%; }

/* partner logos: the base rule that consumes --plogo-h (the pages' own
   stylesheets don't all define it, so the images were rendering full size) */
.blx-pband .pb-row .blp-logo { display: inline-flex; align-items: center; }
.blx-pband .pb-row .blp-logo img { height: var(--plogo-h, 26px); width: auto; max-width: 150px; object-fit: contain; display: block; }
.blx-pband .pb-row .blp-logo img[src*="index-exchange"] { --plogo-h: 28px; }
.blx-pband .pb-row .blp-logo img[src*="dv360"] { --plogo-h: 24px; }
.blx-pband .pb-row .blp-logo img[src*="the-trade-desk"] { --plogo-h: 20px; }
.blx-pband .pb-row .blp-logo img[src*="openx"] { --plogo-h: 22px; }
.blx-pband .pb-row .blp-logo img[src*="magnite"] { --plogo-h: 22px; }
.blx-pband .pb-row .blp-logo img[src*="cint"] { --plogo-h: 24px; }
.blx-pband .pb-row .blp-logo img[src*="happydemics"] { --plogo-h: 21px; }

/* The solution section is a one-screen flex box; with a row flex and
   align-items:center a taller child overflows instead of growing the
   section. Column flex lets the restored graphics extend it properly. */
main > section.blx:not(.blx-sec-kpi):not(.blx-sec-ben) { flex-direction: column; justify-content: center; align-items: stretch; height: auto; }
main > section.blx:not(.blx-sec-kpi):not(.blx-sec-ben) > .container { width: 100%; }

/* restored problem graphics sit under the two-column row */
.blx-solution .ba-gap { margin-top: clamp(28px, 3.4vw, 44px); max-width: 900px; justify-self: stretch; width: 100%; }

/* ── Restored graphics: anchor markers to their targets ───────────────────── */
/* The surviving CSS positioned these with absolute px/% offsets tuned to the
   original markup. Anchoring to the actual target element instead keeps the
   marker on the thing it is pointing at, whatever the rhythm around it. */
.vw-gtarget { position: relative; }
.blx-solution .vw-gaze { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; }
/* on the quality panel, sit right of the label so "YOUR AD" stays readable */
.blx-solution .vw-ad .vw-gaze { left: auto; right: 10px; transform: translateY(-50%); }
/* colour semantics: aqua marks the good placement, grey the ignored one */
.blx-solution .vw-gaze.good { border-color: var(--aqua-d); box-shadow: 0 0 0 5px rgba(138,219,205,.16); }
.blx-solution .vw-gaze.good::after { background: var(--aqua-d); }
.blx-solution .vw-gaze.muted { border-color: var(--ink-3); box-shadow: 0 0 0 5px rgba(48,48,48,.10); }
.blx-solution .vw-gaze.muted::after { background: var(--ink-3); }
.vw-dot.good { background: var(--aqua-d); }

/* phone taps: anchored to the close button and to the native ad */
.qt-bad .qtp-pop { position: absolute; }
.qt-bad .qtp-pop .qtp-tap { position: absolute; top: 4px; right: 4px; left: auto; width: 19px; height: 19px; }
.qt-good .qtp-native-box { position: relative; }
.qt-good .qtp-native-box .qtp-tap { position: absolute; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); }

/* keep the ignored-ad marker clear of the ad block beneath it */
.blx-solution .vw-col .vw-gaze.muted { transform: translate(-50%, -58%); }

/* ── Restored reach graphic: split bar ────────────────────────────────────────
   Sized with flex-basis and painted unconditionally. The legacy CSS animated
   width from a `width:0 !important` gate tied to a .motion-in class that the
   page's observer never set, so the segment collapsed to its min-content width;
   a clip-path reveal then hid it entirely when the document timeline stalled.
   Correctness must not depend on a motion clock, so the final state IS the
   base state and there is no reveal on this element. */
.blx-solution .ba-gap .g-split-real { flex: 0 0 38%; min-width: 0; white-space: nowrap; transition: none; animation: none; clip-path: none; }

/* ── Partner band hierarchy ───────────────────────────────────────────────────
   The band's h3 sat only 5.5px above its own body copy with no label above it,
   so it read as another paragraph rather than a heading. An eyebrow sets the
   level, the heading takes the feature tier, and the body drops back. */
.blx-pband { gap: 0; }
.blx-pband .pb-eyebrow { font-family: var(--font-sans); font-weight: 800; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink-1); margin: 0 0 10px; }
.blx-pband h3 { font-size: var(--t-feature); line-height: 1.08; letter-spacing: -0.028em; margin: 0 0 8px; }
.blx-pband > p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 56ch; }
.blx-pband .pb-row { margin-top: 22px; }

/* ── Solution top row: alignment ──────────────────────────────────────────────
   `align-items: end` was set when the right column held the short algorithm
   diagram. Where the column holds a tall graphic (or the grid has collapsed to
   one column), bottom alignment pushes the copy away from the section top. */
.blx-s-top { align-items: start; }
.blx-s-top > .ba-gap { margin-top: 0; }

.blx-s-top > .blx-s-head { padding-top: clamp(14px, 2vw, 28px); }

/* ── Solution section flow ────────────────────────────────────────────────────
   The section's children were spaced by per-element margins tuned for the
   two-column layout, so when the grid collapses to one column the graphic and
   diagram sit flush (0px apart). A flex column with one gap spaces them in
   both layouts, and the row's own margin is no longer needed. */
.blx-solution { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 46px); }
.blx-solution > .blx-s-top { margin-bottom: 0; }
.blx-solution > .blx-algo.compact { margin: 0; }

/* ── Phone comparison: landscape proportions ──────────────────────────────────
   The screens were 9/17, so the pair stood taller than it was wide and left the
   column short of space. A shorter ratio makes the whole card landscape. */
/* Phone comparison: both screens sized by the same aspect ratio, with content
   clipped so a longer content list can't stretch one phone taller than the
   other (which was also forcing the card taller than it needs to be). */
.blx-solution .qtp-screen { aspect-ratio: 9 / 16; width: 124px; max-width: 100%; height: auto; min-height: 0; overflow: hidden; }
.blx-solution .qt-phones { gap: 22px; justify-content: center; align-items: start; }
.blx-solution .qt-phone { max-width: 142px; margin: 0 auto; }
.blx-solution .ba-gap { padding-top: 18px; padding-bottom: 18px; }

.blx-algo-lab { font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 -14px; }

.blx-solution .qtp-badge { font-weight: 500; text-align: center; justify-content: center; }

/* pop-up label sits on one line and clears the close button */
.blx-solution .qtp-pop { font-size: 10.5px; line-height: 1.25; padding-right: 22px; }
/* fallback for --pink-ink */
.qt-bad .qtp-ad, .qt-bad .qtp-pop { --pink-ink: #DF4864; }

/* ── Reveal safety: appearance must not depend on the motion clock ────────────
   Grow cards were left at scale(.97) translateY(34px) when the document
   timeline stalls, so they rendered shrunk and offset. Opacity is a safe thing
   to animate (it resolves to 1); geometry is not, so the transform start state
   is dropped and only the fade remains. */
.md-grow-card, .md-grow-card.reveal { transform: none !important; }

/* grow header centred, matching the reference */
.md-grow .md-grow-head { text-align: center; max-width: none; }
.md-grow .md-grow-head h3 { margin-left: auto; margin-right: auto; }

/* ── Grow: pink feature card ──────────────────────────────────────────────────
   The white-card override above was written for the mist/white alternation and
   swallowed the pink variant, leaving pink-on-white text unreadable. */
.md-grow-card.pink { background: var(--pink-1); border-color: var(--pink-1); }
.md-grow-card.pink h3 { color: #fff; }
.md-grow-card.pink p { color: rgba(255,255,255,.92); }
.md-grow-card.pink .md-grow-ico { background: transparent; border: 0; color: #fff; }
.md-grow-card.pink .md-grow-cta { color: #fff; }

/* ── Reveal safety net ────────────────────────────────────────────────────────
   Scroll-driven `animation-timeline: view()` was pinning these at their 0%
   keyframe (opacity 0, fill both) because the view timeline cannot resolve for
   subjects inside one-screen flex sections. Content visibility must never
   depend on the motion clock, so the revealed state is the base state and the
   IntersectionObserver .reveal system provides the motion. */
.md-grow-head, .md-grow-card, .blx-kpi, .blb-item, .hiw-item, .blx-o-head, .blb-head,
.blx-s-head, .blx-hiw-head, .blx-algo, .blx-pband, .md-cases .pp-head {
  animation-name: none !important; animation-timeline: auto !important;
}
.md-grow-head, .md-grow-card, .blx-kpi, .blb-item { opacity: 1; }