/* Humantic AI · Buyer Intelligence category page (Website V2, rebuilt Oct 16 night).
   One idea, centred: signals converge on one buyer. The hero lines carry the four types
   into one profile, the Gartner stepper carries signals into one insight, the platform
   map carries eight products through Kairos to three surfaces.
   Surfaces: white, ink, mist (product), cream (brand). Lavender only on small chips. */

html:has(body.bi) { overflow-x: clip; }
.bi {
  --gold: #FFC61E; --gold3: #FFE8A5; --violet: #341D99; --ink: #110A33; --lav: #DDD6FF;
  --mist: #F6F4FF; --cream: #FFF4D2; --slate: #5B6478; --rule: #ECE9F6;
  --disp: "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --sh-sm: 0 2px 8px rgba(17,10,51,.08); --sh-md: 0 12px 32px -12px rgba(17,10,51,.22);
  --pad: clamp(48px, 6vw, 72px);
  --pad-c: clamp(45px, 5.6vw, 67px); /* --pad at about 70%: compact sections */
  margin: 0; overflow-x: clip; background: #fff; color: var(--ink); font-family: Manrope, Arial, sans-serif;
}
.bi *, .bi *::before, .bi *::after { box-sizing: border-box; }
:where(.bi main) :is(h1, h2, h3) { margin: 0; text-wrap: balance; }
:where(.bi main) p { margin: 0; text-wrap: pretty; }
:where(.bi main) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
.bi-shell { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); text-align: center; }
.bi-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shared */
.bi-head { max-width: 760px; margin: 0 auto clamp(24px, 3vw, 36px); }
.bi-head h2, .bi-close h2 { font: 700 clamp(27px, 3.4vw, 44px)/1.12 var(--disp); letter-spacing: -.03em; }
.bi-head p { margin-top: 16px; font-size: 17.5px; line-height: 1.6; font-weight: 400; color: var(--slate); }
.bi-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 700 16px/1 var(--disp); color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--gold); }
.bi-more svg { transition: transform .2s var(--ease); }
.bi-more:hover svg { transform: translateX(3px); }
.bi-more--c { margin-top: 12px; }
.bi-note { margin-top: 24px; font-size: 14px; line-height: 1.6; color: var(--slate); }
.bi-note a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--ink); font-weight: 700; }
.bi-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.bi .hx-btn:active { transform: scale(.97); }

/* Hero: centred definition, then the map */
.bi-hero { background: #fff radial-gradient(circle at 1px 1px, rgba(91,100,120,.16) 1px, transparent 0) 0 0 / 24px 24px; padding: clamp(64px, 6vw, 84px) 0 clamp(32px, 4vw, 48px); }
.bi-hero h1 { font: 700 clamp(38px, 6vw, 76px)/1.06 var(--disp); letter-spacing: -.04em; }
.bi-lead + .bi-lead, body.hai .bi-lead + .bi-lead { margin-top: 12px; }
.bi-lead, body.hai .bi-lead { max-width: 74ch; text-wrap: balance; margin: 24px auto 0; font-size: clamp(17px, 1rem + .3vw, 20px); line-height: 1.6; }
.bi-meta { margin-top: 20px; font-size: 14px; color: var(--slate); }
/* F18 (Amar, Oct 28): the modular-units board. A mist tray holds three white blocks: the four units
   (joined, gold pins on the seams), the two live feeds, and the ink base with the claim. On view the
   units slide in from apart and snap together, then the feeds plug in and the base lands (one pass,
   about 1.2 s; transform and opacity only). Concentric radii: tray 24, padding 8, blocks 16. */
.bi-hero { padding-bottom: 0; }
.bi-units { background: #fff radial-gradient(circle at 1px 1px, rgba(91,100,120,.16) 1px, transparent 0) 0 0 / 24px 24px; padding: clamp(40px, 4.4vw, 56px) 0 clamp(40px, 5vw, 64px); }
.bi-head--units { max-width: 820px; margin-bottom: clamp(20px, 2.4vw, 28px); }
.bi-head--units h2 { font-size: clamp(26px, 2.8vw, 38px); }
.bi-head--units p { margin-top: 12px; font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.bi-cite { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bi-cite:hover { text-decoration-color: var(--ink); }
.bi-cite:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.bi-mod { max-width: 1040px; margin: 0 auto; }
.bi-mod__board { padding: 8px; border-radius: 24px; background: var(--mist); box-shadow: var(--sh-md), inset 0 0 0 1px var(--rule); }
.bi-mod__units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bi-unit { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px; background: #fff; color: var(--ink); scroll-margin-top: 112px; }
.bi-unit:first-child { border-radius: 16px 0 0 16px; }
.bi-unit:last-child { border-radius: 0 16px 16px 0; }
.bi-unit + .bi-unit { box-shadow: inset 1px 0 0 var(--rule); }
/* the pin that locks two units together, centred on the seam */
.bi-unit + .bi-unit::before { content: ""; position: absolute; top: 50%; left: -5px; width: 10px; height: 10px; margin-top: -5px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 0 3px #fff; transform: rotate(45deg); z-index: 1; }
.bi-unit > svg { flex: none; box-sizing: content-box; width: 22px; height: 22px; padding: 11px; border-radius: 50%; background: var(--ink); color: var(--gold); }
.bi-unit h3 { font: 700 clamp(17px, .9rem + .3vw, 19px)/1.15 var(--disp); letter-spacing: -.02em; }
.bi-unit p, body.hai .bi-unit p { max-width: 26ch; font-size: 15px; line-height: 1.4; color: var(--slate); text-wrap: balance; }
.bi-unit__go { margin-top: auto; padding: 4px 14px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 800 14px/1.5 Manrope, Arial, sans-serif; text-decoration: none; transition: background-color .2s var(--ease); }
a.bi-unit__go { display: inline-flex; align-items: center; min-height: 32px; }
a.bi-unit__go:hover, a.bi-unit__go:focus-visible { background: var(--gold); }
a.bi-unit__go:focus-visible, .bi-feed__name:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bi-unit p + .bi-unit__go { margin-top: 4px; }
/* live feeds: one white block, two halves */
.bi-mod__feeds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
.bi-feed { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding: 16px 20px 18px; background: #fff; overflow: hidden; scroll-margin-top: 112px; }
.bi-feed:first-child { border-radius: 16px 0 0 16px; }
.bi-feed:last-child { border-radius: 0 16px 16px 0; box-shadow: inset 1px 0 0 var(--rule); }
.bi-feed__dot { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--gold3); }
.bi-feed__name { font: 700 18px/1.2 var(--disp); color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a.bi-feed__name { display: inline-flex; align-items: center; min-height: 32px; }
a.bi-feed__name:hover { text-decoration-color: var(--ink); }
.bi-feed__line { font-size: 15px; line-height: 1.4; color: var(--slate); }
.bi-feed__track { position: absolute; inset: auto 20px 6px; height: 2px; border-radius: 1px; background: var(--rule); overflow: hidden; }
.bi-feed__track::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 24%; border-radius: 1px; background: var(--gold); transform: translateX(-110%); }
.bi-mod.on .bi-feed__track::after { animation: biFeed 1.6s var(--ease) calc(1s + var(--i) * 160ms) both; }
/* the base: the brand mark and the claim */
.bi-mod__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; margin-top: 8px; padding: 16px 24px; border-radius: 16px; background: var(--ink); }
.bi-mod__base img { display: block; width: 140px; height: auto; }
.bi-mod__base p, body.hai .bi-mod__base p { font: 700 clamp(17px, 1rem + .3vw, 21px)/1.3 var(--disp); letter-spacing: -.01em; color: #fff; text-wrap: balance; }
/* build on view: only when bi.js armed it (motion allowed, observer present) */
.bi-mod.armed .bi-unit { opacity: 0; transform: translate(var(--dx, 0), 12px); transition: transform .7s var(--ease), opacity .4s var(--ease); transition-delay: calc(var(--i) * 60ms); }
.bi-mod.armed .bi-unit:nth-child(1) { --dx: -40px; } .bi-mod.armed .bi-unit:nth-child(2) { --dx: -14px; }
.bi-mod.armed .bi-unit:nth-child(3) { --dx: 14px; } .bi-mod.armed .bi-unit:nth-child(4) { --dx: 40px; }
.bi-mod.armed .bi-unit + .bi-unit::before { opacity: 0; transform: rotate(45deg) scale(.4); transition: transform .35s var(--ease) .62s, opacity .25s var(--ease) .62s; }
.bi-mod.armed .bi-feed, .bi-mod.armed .bi-mod__base { opacity: 0; transform: translateY(12px); transition: transform .6s var(--ease), opacity .4s var(--ease); transition-delay: calc(.55s + var(--i, 0) * 80ms); }
.bi-mod.armed .bi-mod__base { transition-delay: .78s; }
.bi-mod.armed.on .bi-unit, .bi-mod.armed.on .bi-feed, .bi-mod.armed.on .bi-mod__base { opacity: 1; transform: none; }
.bi-mod.armed.on .bi-unit + .bi-unit::before { opacity: 1; transform: rotate(45deg); }
@keyframes biFeed { 0% { transform: translateX(-110%); } 100% { transform: translateX(430%); } }
@media (max-width: 1000px) {
  .bi-unit { padding: 18px 10px; }
  .bi-mod.armed .bi-unit:nth-child(1) { --dx: -24px; } .bi-mod.armed .bi-unit:nth-child(4) { --dx: 24px; }
}
@media (max-width: 740px) {
  .bi-mod__units { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bi-unit:nth-child(1) { border-radius: 16px 0 0 0; } .bi-unit:nth-child(2) { border-radius: 0 16px 0 0; }
  .bi-unit:nth-child(3) { border-radius: 0 0 0 16px; box-shadow: inset 0 1px 0 var(--rule); } .bi-unit:nth-child(4) { border-radius: 0 0 16px 0; box-shadow: inset 1px 1px 0 var(--rule); }
  .bi-unit + .bi-unit::before { display: none; }
  .bi-mod.armed .bi-unit { --dx: 0px !important; }
}
@media (max-width: 900px) {
  .bi-feed { gap: 0 8px; padding: 12px 12px 16px; }
  .bi-feed__line { flex-basis: 100%; text-align: center; }
}
@media (max-width: 640px) {
  .bi-feed__name { font-size: 17px; }
  .bi-feed__line { font-size: 14px; }
  .bi-feed__track { inset: auto 12px 6px; }
  .bi-mod__base { flex-direction: column; padding: 14px 16px; }
  .bi-mod__base img { width: 120px; }
  .bi-mod__base p, body.hai .bi-mod__base p { text-align: center; }
  .bi-head--units p { font-size: 15px; }
}
@media (max-width: 420px) {
  .bi-unit { padding: 14px 8px; gap: 6px; }
  .bi-unit > svg { width: 18px; height: 18px; padding: 10px; }
  .bi-unit h3 { font-size: 16px; }
  .bi-unit p, body.hai .bi-unit p { font-size: 14px; }
  .bi-unit__go { padding: 4px 10px; }
  .bi-mod__board { padding: 6px; border-radius: 22px; }
  .bi-mod__feeds, .bi-mod__base { margin-top: 6px; }
}
@media (max-width: 359px) {
  .bi-mod__feeds { grid-template-columns: minmax(0, 1fr); }
  .bi-feed:first-child { border-radius: 16px 16px 0 0; }
  .bi-feed:last-child { border-radius: 0 0 16px 16px; box-shadow: inset 0 1px 0 var(--rule); }
}
.bi-cmp svg, .bi-check__box svg { flex: none; transition-delay: inherit; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.bi-cmp .m-y svg path, .bi-check__box svg path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--ease); transition-delay: inherit; }
.bi-cmp.on .m-y svg path, .bi-check ol.on svg path { stroke-dashoffset: 0; }

/* Comparison table: Buyer Intelligence is the raised ink column */
.bi-vs { padding: var(--pad-c) 0; }
.bi-cmp { width: 100%; max-width: 980px; margin: 0 auto; border-collapse: separate; border-spacing: 0; font-size: 16px; line-height: 1.45; }
.bi-cmp th, .bi-cmp td { padding: 9px 14px; vertical-align: middle; }
.bi-cmp thead th { font: 700 18px/1.2 var(--disp); text-align: center; vertical-align: bottom; }
.bi-cmp thead th span { display: block; margin-top: 6px; font: 500 14px/1.4 Manrope, Arial, sans-serif; color: var(--slate); }
.bi-cmp tbody th { text-align: left; font: 600 16px/1.4 Manrope, Arial, sans-serif; }
.bi-cmp td { width: 20%; text-align: center; }
.bi-cmp tbody tr:not(:first-child) > :not(.is-bi) { border-top: 1px solid var(--rule); }
.bi-cmp .is-bi { background: var(--ink); color: #fff; }
.bi-cmp thead .is-bi { border-radius: 24px 24px 0 0; padding-top: 28px; }
.bi-cmp thead .is-bi span { color: var(--lav); }
.bi-cmp tbody tr:last-child .is-bi { border-radius: 0 0 24px 24px; padding-bottom: 28px; }
.bi-cmp td > span { display: inline-grid; place-items: center; }
.bi-cmp .m-y svg { width: 28px; height: 28px; padding: 6px; background: var(--gold3); }
.bi-cmp .is-bi.m-y svg { background: var(--gold); transform: scale(.6); opacity: 0; transition: transform .5s var(--ease), opacity .5s var(--ease); transition-delay: calc(.2s + var(--r) * 110ms); }
.bi-cmp.on .is-bi.m-y svg { transform: none; opacity: 1; }
.bi-cmp .m-n svg { width: 22px; height: 22px; padding: 0; background: none; color: var(--slate); opacity: .7; }
.bi-cmp .m-p span { padding: 4px 10px; border-radius: 999px; background: var(--mist); font-size: 14px; font-weight: 700; color: var(--slate); }

/* What Gartner says + the platform: ONE ink-to-violet panel (AK Oct 20). The stat is the hero, the three signal areas
   map to the product that reads them, and the built-from list is a row of product chips with the platform link. */
.bi-gartner { position: relative; overflow: hidden; color: #fff; padding: clamp(32px, 4vw, 48px) 0;
  background: var(--ink); }
.bi-gartner__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px); text-align: left; }
.bi-quote { margin: 0; }
body.hai .bi-gartner h2.bi-gartner__h { font: 700 clamp(20px, 1rem + .5vw, 24px)/1.25 var(--disp); letter-spacing: -.01em; text-transform: none; color: #fff; margin: 0 0 16px; text-wrap: balance; }
.bi-quote blockquote { margin: 0; }
.bi-quote blockquote p { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); font: 700 clamp(22px, 1rem + 1.1vw, 30px)/1.18 var(--disp); letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.bi-quote__n { flex: none; position: relative; padding-bottom: 8px; font: 700 clamp(84px, 5rem + 4vw, 136px)/.86 var(--disp); letter-spacing: -.05em; color: #fff; font-variant-numeric: tabular-nums; }
.bi-quote__n::after { content: ""; position: absolute; inset: auto 0 0 0; height: 5px; border-radius: 3px; background: var(--gold); transform-origin: left; }
.bi-quote figcaption { margin-top: 16px; font-size: 15px; color: var(--lav); }
.bi-quote figcaption a { color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bi-quote figcaption a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* signal -> product: three rows, one connector each */
.bi-map3 { display: grid; gap: 12px; }
.bi-map3 { grid-template-columns: max-content minmax(24px, 1fr) max-content; } .bi-map3 li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; gap: 12px; } .bi-map3 b { justify-self: start; }
.bi-map3 b { padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(221,214,255,.22); font: 800 15px/1.2 Manrope, Arial, sans-serif; color: #fff; white-space: nowrap; }
.bi-map3 i { position: relative; height: 2px; border-radius: 1px; background: linear-gradient(90deg, rgba(221,214,255,.1), rgba(221,214,255,.55)); }
.bi-map3 i::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 2px solid rgba(221,214,255,.7); border-right: 2px solid rgba(221,214,255,.7); transform: rotate(45deg); }
.bi-map3__by { padding: 10px 16px; border-radius: 999px; background: var(--lav); font: 800 15px/1.2 Manrope, Arial, sans-serif; color: var(--ink); white-space: nowrap; }
.bi-map3__by a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(17,10,51,.35); text-underline-offset: 3px; }
.bi-map3__by a:hover { text-decoration-color: var(--ink); }
/* built from: product chips, then the platform link */
.bi-built { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: clamp(20px, 2.4vw, 28px); padding-top: clamp(16px, 2vw, 20px); border-top: 1px solid rgba(221,214,255,.16); text-align: left; }
.bi-built__l, body.hai .bi-built h2.bi-built__l { flex: 0 0 100%; margin: 0; font: 800 15px/1.2 Manrope, Arial, sans-serif; letter-spacing: 0; text-transform: none; color: var(--lav); }
.bi-chips { display: flex; flex-wrap: wrap; flex: 1 1 360px; gap: 8px; }
.bi-chips a, .bi-chips span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--lav); font: 700 14px/1 Manrope, Arial, sans-serif; color: var(--ink); text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease); }
.bi-chips a:hover { background: #fff; color: var(--ink); }
.bi-chips a:focus-visible, .bi-map3__by a:focus-visible, .bi-more--ink:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.bi-more--ink { color: #fff; }
.bi-anchor { display: block; height: 0; scroll-margin-top: 112px; }
@media (max-width: 900px) {
  .bi-gartner__grid { grid-template-columns: 1fr; text-align: center; }
  .bi-quote blockquote p { flex-direction: column; gap: 8px; justify-content: center; }
  .bi-map3 { max-width: 460px; margin-inline: auto; }
  .bi-built { justify-content: center; text-align: center; }
  .bi-chips { justify-content: center; flex-basis: 100%; }
}
@media (max-width: 520px) {
  .bi-map3 { grid-template-columns: 1fr; }
  .bi-map3 li { grid-template-columns: 1fr; gap: 8px; justify-items: center; }
  .bi-map3 b { justify-self: center; }
  .bi-map3 i { display: none; }
  .bi-map3 li { padding-bottom: 4px; }
}

/* Testimonials and results: one white band (the voices block is transparent inside it) */
.bi-proof { background: var(--mist); padding: clamp(32px, 3.6vw, 48px) 0 clamp(32px, 3.6vw, 48px); }
.bi-proof .hxb { padding-top: 0 !important; padding-bottom: 0 !important; }
.bi-proof .hxb.hxb .hxb-h2 + :not(.hxb-sub) { margin-top: 24px; }
.bi-proof .hxb-v { padding: 20px; }
.bi-proof .hxb-v blockquote p { font-size: 16px; line-height: 24px; }
.bi-results { margin-top: 32px; }
.bi-results__line { max-width: 880px; margin: 0 auto; font: 700 clamp(22px, 1rem + 1.2vw, 32px)/1.35 var(--disp); letter-spacing: -.02em; }
.bi-results__line b { padding: 0 6px; border-radius: 8px; background: var(--gold); font-variant-numeric: tabular-nums; }

/* How to choose: a checklist that ticks itself */
.bi-choose { background: var(--mist); padding: clamp(28px, 3.4vw, 40px) 0; }
.bi-check { max-width: 680px; margin: 0 auto; padding: clamp(14px, 2vw, 22px) clamp(16px, 2.4vw, 26px); border-radius: 24px; background: #fff; box-shadow: var(--sh-sm); }
.bi-check li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 8px 0; text-align: left; transition-delay: calc(var(--j) * 260ms); }
.bi-check li + li { border-top: 1px solid var(--rule); }
.bi-check__box { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--gold); transition: background-color .4s var(--ease); transition-delay: inherit; }
.bi-check__box svg { width: 18px; height: 18px; padding: 0; background: none; transition-delay: inherit; }
.bi-check ol.on .bi-check__box { background: var(--gold); }
.bi-check h3 { font: 700 19px/1.12 var(--disp); }
.bi-check__a { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--slate); }
.bi-check__foot { display: flex; flex-direction: column; align-items: center; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--rule); }
.bi-check__foot .hx-btn { cursor: pointer; background: none; font-family: inherit; }
.bi-check__foot .bi-note { margin-top: 8px; }

/* FAQ stays white; sources line and fallback close */
.bi-sources { max-width: 760px; margin: 0 auto; padding: 0 16px clamp(48px, 6vw, 72px); text-align: center; font-size: 14px; line-height: 1.6; color: var(--slate); }
.bi-sources a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bi-close { background: var(--cream); padding: var(--pad) 0; }
#get-started { padding-top: 0; }
.bi-close p { max-width: 560px; margin: 16px auto 0; font-size: 18px; line-height: 1.6; }

@keyframes biDraw { to { stroke-dashoffset: 0; } }
@keyframes biRun { 0% { opacity: 1; stroke-dashoffset: .07; } 90% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }
@keyframes biRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes biPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes biPulse { 0% { opacity: .9; transform: scale(.97); } 100% { opacity: 0; transform: scale(1.08); } }
@keyframes biWire { from { transform: scaleX(0); } to { transform: none; } }
@keyframes biDot { 0% { opacity: 1; left: 0; } 100% { opacity: 0; left: calc(100% - 10px); } }
@keyframes biInk { from { color: rgba(255,255,255,.25); } to { color: #fff; } }

@media (max-width: 960px) {
  /* tablet: signals on top, then insight and the messaging pill side by side */
  .bi-steps__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .bi-step__wire { display: none; }
}
@media (max-width: 560px) {
  /* phones: one column, no wires, pill sits under the insight on the left */
  .bi-steps__row { justify-items: start; padding: 12px; }
  .bi-step--insight { width: 100%; }
  .bi-waffle { grid-template-columns: repeat(50, 1fr); }
}
@media (max-width: 760px) {
  .bi-cmp { font-size: 14px; }
  .bi-cmp th, .bi-cmp td { padding: 14px 8px; }
  .bi-cmp td { width: 64px; }
  .bi-cmp thead th { font-size: 14px; }
  .bi-cmp thead th span { display: none; }
  .bi-cmp tbody th { font-size: 14px; }
  .bi-cmp thead .is-bi { padding-top: 18px; } .bi-cmp tbody tr:last-child .is-bi { padding-bottom: 18px; }
  .bi-cmp .m-p span { padding: 2px 6px; font-size: 14px; }
  .bi-cta .hx-btn { flex: 1 1 100%; justify-content: center; }
  .bi-check li { grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
  .bi-check__box { width: 32px; height: 32px; }
}
@media (max-width: 420px) {
  .bi-cmp { width: calc(100% + 16px); margin: 0 -8px; }
  .bi-cmp th, .bi-cmp td { padding: 12px 4px; font-size: 14px; }
  .bi-cmp td { width: 60px; }
  .bi-cmp thead th { font-size: 14px; letter-spacing: -.01em; }
  .bi-cmp tbody th { padding-left: 8px; font-size: 14px; }
  .bi-cmp .m-y svg { width: 24px; height: 24px; padding: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .bi-feed__track::after { display: none; }
  .bi .on *, .bi [data-rv] * { animation: none !important; transition: none !important; }
  .bi-waffle i.f, .bi-cmp .is-bi.m-y svg { opacity: 1; transform: none; }
  .bi [data-rv] svg path { stroke-dashoffset: 0; }
  .bi-check__box { background: var(--gold); }
}

/* 360° Sales Intelligence wheel (AK, Oct 17). Gold family = what Humantic AI provides,
   mist = other tools. Build on view: core, then the data ring, then the outer ring, then
   Buyer Intelligence steps out of the wheel. Pick a part to read what covers it. */
.bi-wheel { max-width: 340px; margin: 0 auto 24px; }
.bi-wheel__svg { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; overflow: visible; }
.bi-wheel__seg { cursor: pointer; outline: none; transform-box: view-box; transform-origin: 240px 240px; transition: opacity .25s var(--ease); }
.bi-wheel__fill { fill: var(--mist); stroke: var(--lav); stroke-width: 1.5; transition: stroke .2s var(--ease), stroke-width .2s var(--ease); }
.bi-wheel__seg.is-ours .bi-wheel__fill { fill: var(--gold3); stroke: none; }
.bi-wheel__seg--outer.is-ours .bi-wheel__fill { fill: var(--gold); }
.bi-wheel__seg text { font: 700 17px/1 var(--disp); fill: var(--slate); letter-spacing: -.01em; pointer-events: none; }
.bi-wheel__seg.is-ours text { fill: var(--ink); }
.bi-wheel__seg--inner text { font-size: 15px; }
.bi-wheel__core circle { fill: var(--ink); }
.bi-wheel__core text { fill: #fff; font-size: 15px; }
.bi-wheel__core .bi-wheel__deg { font-size: 22px; fill: var(--gold); }
/* Buyer Intelligence sits a little outside the wheel, with a cut line around it. */
.bi-wheel__seg--outer.is-ours { transform: translate(9px, -9px); }
.bi-wheel__cut { fill: none; stroke: var(--ink); stroke-opacity: .4; stroke-width: 1.5; stroke-dasharray: 6 6; }
/* Picked part: ink edge; the rest steps back. */
.bi-wheel__seg:is(:hover, :focus-visible, [aria-pressed="true"]) .bi-wheel__fill { stroke: var(--ink); stroke-width: 2.5; }
.bi-wheel__core:is(:hover, :focus-visible, [aria-pressed="true"]) circle { stroke: var(--gold); stroke-width: 3; }
.bi-wheel.has-pick .bi-wheel__seg:not([aria-pressed="true"]) { opacity: .5; }
.bi-wheel__cap { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 24px; }
.bi-wheel__key { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--slate); }
.bi-wheel__key i { width: 14px; height: 14px; border-radius: 4px; background: var(--mist); box-shadow: inset 0 0 0 1.5px var(--lav); }
.bi-wheel__key i.is-ours { background: var(--gold); box-shadow: none; }
.bi-wheel__say { flex-basis: 100%; max-width: 56ch; margin: 8px auto 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
/* Build-in, only when JS armed it and motion is allowed. */
.bi-wheel.armed .bi-wheel__core { opacity: 0; transform: scale(.85); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.bi-wheel.armed .bi-wheel__seg--inner { opacity: 0; transform: scale(.9) rotate(-10deg); transition: opacity .5s var(--ease), transform .7s var(--ease); transition-delay: calc(.25s + var(--i) * 90ms); }
.bi-wheel.armed .bi-wheel__seg--outer { opacity: 0; transform: scale(.94) rotate(-14deg); transition: opacity .55s var(--ease), transform .8s var(--ease); transition-delay: calc(.6s + var(--i) * 90ms); }
.bi-wheel.armed .bi-wheel__cut { opacity: 0; transition: opacity .4s var(--ease) 1.7s; }
.bi-wheel.armed.on .bi-wheel__seg { opacity: 1; transform: none; }
.bi-wheel.armed.on .bi-wheel__seg--outer.is-ours { transform: translate(9px, -9px); transition-delay: .6s; transition-duration: .55s, 1.1s; }
.bi-wheel.armed.on .bi-wheel__cut { opacity: 1; }
@media (max-width: 560px) {
  .bi-wheel__seg text { font-size: 19px; }
  .bi-wheel__seg--inner text { font-size: 17px; }
  .bi-wheel__say { font-size: 15px; }
}
/* Phone floor: 14px for the small labels (desktop sizes unchanged) */
@media (max-width: 560px) {
  .bi-unit__go, .bi-step__h, .bi-step--signals li, .bi-check__a, .bi-sources { font-size: 14px; }
}
/* K-237: slim video band under the hero, text left, poster right, one screen tall */
/* Yearly timeline (Krish Oct 19, restored Oct 27 night): one white tray on a cream band, six years across, a gold rule that draws on view.
   Concentric radii: tray 24, the rule sits inside the padding. Transform and opacity only; no-JS and reduced motion show the finished state. */
.bi-tl { background: var(--cream); padding: clamp(32px, 4vw, 48px) 0 clamp(36px, 4.4vw, 52px); }
.bi-tl__h { font: 700 clamp(24px, 2.6vw, 34px)/1.12 var(--disp); letter-spacing: -.03em; margin-bottom: clamp(20px, 2.4vw, 28px) !important; }
.bi-tl__sub { max-width: 640px; margin: calc(-1 * clamp(8px, 1.2vw, 14px)) auto clamp(20px, 2.4vw, 28px); text-align: center; font-size: 16px; line-height: 1.5; color: var(--slate); text-wrap: balance; }
.bi-tl__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bi-pz { flex: none; display: block; width: 32px; height: 32px; }
.bi-pz path { fill: var(--lav); }
.bi-pz path.on { fill: var(--gold); }
.bi-tl__item p strong { color: var(--ink); font-weight: 800; }
.bi-tl__tray { position: relative; max-width: 1120px; margin: 0 auto; padding: 24px 8px 8px; border-radius: 24px; background: #fff; box-shadow: var(--sh-md); text-align: left; }
.bi-tl__rule { position: absolute; top: 16px; left: 24px; right: 24px; height: 4px; border-radius: 2px; background: var(--gold); transform-origin: left center; }
.bi-tl__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bi-tl__item { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 20px; }
.bi-tl__item + .bi-tl__item { box-shadow: inset 1px 0 0 var(--rule); }
.bi-tl__yr { font: 700 clamp(26px, 2.4vw, 32px)/1 var(--disp); letter-spacing: -.03em; color: var(--ink); }
.bi-tl__t { align-self: flex-start; font: 700 16px/1.25 var(--disp); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
a.bi-tl__t { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a.bi-tl__t:hover { text-decoration-color: var(--ink); }
a.bi-tl__t:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.bi-tl__item p, body.hai .bi-tl__item p { font-size: 14px; line-height: 1.5; color: var(--slate); text-wrap: pretty; }
.bi-tl__tray.armed .bi-tl__rule { transform: scaleX(0); transition: transform 1.1s var(--ease); }
.bi-tl__tray.armed .bi-tl__item { opacity: 0; transform: translateY(8px); transition: transform .6s var(--ease), opacity .4s var(--ease); transition-delay: calc(var(--i) * 90ms + .15s); }
.bi-tl__tray.armed.on .bi-tl__rule { transform: none; }
.bi-tl__tray.armed.on .bi-tl__item { opacity: 1; transform: none; }
@media (max-width: 1000px) {
  .bi-tl__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bi-tl__item:nth-child(4) { box-shadow: none; }
  .bi-tl__item:nth-child(n+4) { box-shadow: inset 0 1px 0 var(--rule); }
  .bi-tl__item:nth-child(5), .bi-tl__item:nth-child(6) { box-shadow: inset 1px 1px 0 var(--rule); }
}
@media (max-width: 640px) {
  .bi-tl__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bi-tl__item, .bi-tl__item + .bi-tl__item { padding: 14px 12px 16px; box-shadow: none; }
  .bi-tl__item:nth-child(even) { box-shadow: inset 1px 0 0 var(--rule); }
  .bi-tl__item:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--rule); }
  .bi-tl__item:nth-child(n+3):nth-child(even) { box-shadow: inset 1px 1px 0 var(--rule); }
  .bi-tl__rule { left: 20px; right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .bi-tl__tray.armed .bi-tl__rule, .bi-tl__tray.armed .bi-tl__item { transform: none; opacity: 1; transition: none; }
}

.bi-watch { padding: clamp(32px, 4vw, 48px) 0; background: var(--mist); } /* Oct 20 rhythm: hero white, watch mist, vs white */
.bi-watch__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(24px, 4vw, 56px); align-items: center; text-align: left; }
.bi-watch__txt h2 { font: 700 clamp(24px, 2.6vw, 34px)/1.12 var(--disp); letter-spacing: -.03em; text-wrap: balance; }
.bi-watch__txt p { margin-top: 12px; max-width: 44ch; font-size: 17px; line-height: 1.6; color: var(--slate); text-wrap: pretty; }
.bi-watch__vid { width: 100%; box-shadow: var(--sh-md); }
@media (max-width: 767px) { .bi-watch__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* MOBILE-B (Oct 21): signal and product pills share a row; a little less air */
@media (max-width: 767px) {
  .bi-hero { padding-bottom: 0; }
  .bi-units { padding: 32px 0 32px; }
  .bi-watch { padding: 24px 0; }
  .bi-wheel { margin-bottom: 12px; }
  .bi-wheel__cap { margin-top: 12px; }
  .bi-built { margin-top: 16px; padding-top: 14px; }
  .bi-proof { padding: 24px 0; }
}
@media (max-width: 520px) {
  .bi-map3 { gap: 8px; }
  .bi-map3 li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; justify-items: stretch; padding-bottom: 0; }
  .bi-map3 b, .bi-map3__by { display: block; text-align: center; white-space: normal; padding: 8px 10px; font-size: 14px; }
  .bi-map3 b { justify-self: stretch; }
}

/* MOBILE-B (Oct 21): the hero's two CTAs share one row on phones (stack only below 360px) */
@media (min-width: 360px) and (max-width: 767px) {
  .bi-cta { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: 8px; }
  .bi-cta .hx-btn { flex: 1 1 auto; width: auto; min-width: 0; justify-content: center; gap: 8px; white-space: nowrap; }
  .bi-cta .hx-btn-primary { padding-right: 14px; }
  .bi-cta .hx-btn-ghost { padding-left: 14px; padding-right: 14px; }
}

/* AK Nov 4: Gartner's illustrative example of AI-led atomic insights, with where each area lives in Humantic AI */
.bi-atom { padding: var(--pad) 0; background: var(--mist); }
.bi-atom .bi-head { max-width: 880px; }
.bi-atom__eye { margin: 0 0 12px; font: 800 13px/1 Manrope, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
.bi-atom .bi-head p.bi-atom__eye { margin-top: 0; }
.bi-atom__fig { margin: 0; padding: clamp(16px, 2.4vw, 28px); border-radius: 24px; background: #fff; box-shadow: var(--sh-md); text-align: left; }
.bi-atom__cols, .bi-atom__row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.bi-atom__cols span { padding: 0 4px 12px; font: 800 12px/1.3 Manrope, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.bi-atom__cols span.is-us { color: var(--ink); }
.bi-atom__rows { display: grid; gap: 14px; }
.bi-atom__sig { padding: 14px; border-radius: 16px; background: var(--mist); }
.bi-atom__sig b { display: block; margin: 0 0 10px; font: 800 13px/1 Manrope, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); text-align: center; }
.bi-atom__sig ul { display: grid; gap: 6px; }
.bi-atom__sig li { padding: 8px 12px; border-radius: 999px; background: var(--violet); color: #fff; font: 700 14px/1.2 Manrope, Arial, sans-serif; text-align: center; }
.bi-atom__ins { display: grid; align-content: center; gap: 8px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--lav); }
.bi-atom__ins li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.bi-atom__ins li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.bi-atom__us { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-content: center; gap: 6px 12px; padding: 14px 16px; border-radius: 16px; background: var(--ink); color: #fff; }
.bi-atom__tick { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.bi-atom__by { font: 700 17px/1.3 var(--disp); }
.bi-atom__by a { color: #fff; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.bi-atom__by a:hover { color: var(--gold); }
.bi-atom__line { font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.8); }
.bi-atom__fig figcaption { margin: 16px 0 0; font-size: 13px; line-height: 1.4; color: var(--slate); text-align: center; }
.bi-atom__close { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; margin: clamp(24px, 3vw, 32px) auto 0; max-width: 1000px; }
.bi-atom__close p { font-size: 17px; line-height: 1.5; color: var(--ink); }
.bi-atom__ctas { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.bi-atom__btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--gold); color: var(--ink); font: 800 15px/1 Manrope, Arial, sans-serif; text-decoration: none; }
.bi-atom__btn--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.bi-atom__btn:hover { filter: brightness(.96); }
.bi-atom a:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
@media (max-width: 899px) {
  .bi-atom__cols { display: none; }
  .bi-atom__row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-bottom: 6px; }
  .bi-atom__sig ul { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .bi-atom__ins::before { content: "Atomic insights"; display: block; margin-bottom: 2px; font: 800 11px/1 Manrope, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
}
.bi-atom .bi-head { max-width: 1120px; } .bi-atom .bi-head p:not(.bi-atom__eye) { max-width: 820px; margin-left: auto; margin-right: auto; }

/* AK Nov 7: Buyer Signals and Data Streams, a more visible call-out: cream panels, a "Live feed" tag, bigger names. */
.bi-feed { background: var(--cream, #FFF4D2); padding: 18px 20px 20px; gap: 6px 14px; }
.bi-feed:last-child { box-shadow: inset 1px 0 0 rgba(17,10,51,.08); }
.bi-feed__tag { display: inline-flex; align-items: center; gap: 8px; font: 700 11px/1 var(--disp); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: #fff; border-radius: 999px; padding: 6px 10px; }
.bi-feed__tag .bi-feed__dot { width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(255,198,30,.35); }
.bi-feed__name { font-size: 22px; }
.bi-feed__line { color: var(--ink); }
.bi-feed__track { background: rgba(17,10,51,.1); }
@media (max-width: 640px) { .bi-feed:last-child { box-shadow: inset 0 1px 0 rgba(17,10,51,.08); } .bi-feed__name { font-size: 19px; } }

/* AK Nov 7: 2022 added, so the timeline has 7 years: 7 across on desktop, 4 + 3 on tablet. */
.bi-tl__list { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bi-tl__item { padding: 16px 12px 20px; }
@media (max-width: 1000px) {
  .bi-tl__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bi-tl__item:nth-child(n) { box-shadow: inset 1px 1px 0 var(--rule); }
  .bi-tl__item:nth-child(1) { box-shadow: none; }
  .bi-tl__item:nth-child(2), .bi-tl__item:nth-child(3), .bi-tl__item:nth-child(4) { box-shadow: inset 1px 0 0 var(--rule); }
  .bi-tl__item:nth-child(5) { box-shadow: inset 0 1px 0 var(--rule); }
}
@media (max-width: 640px) {
  .bi-tl__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bi-tl__item:nth-child(n) { box-shadow: inset 0 1px 0 var(--rule); }
  .bi-tl__item:nth-child(1) { box-shadow: none; }
  .bi-tl__item:nth-child(2) { box-shadow: inset 1px 0 0 var(--rule); }
  .bi-tl__item:nth-child(n+3):nth-child(even) { box-shadow: inset 1px 1px 0 var(--rule); }
}

/* AK Nov 7: the analyst view. Gartner's example in its own white panel (columns 1-2), Humantic AI outside it (column 4),
   one shared grid so every Humantic AI card sits level with its Gartner row. Rows: title, column heads, 3 rows, source. */
.bi-atom__map { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr) 36px minmax(0, 1fr); grid-template-rows: repeat(6, auto); column-gap: 16px; row-gap: 12px; text-align: left; }
.bi-atom__g { grid-column: 1 / 3; grid-row: 1 / 7; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; margin: 0; padding: 20px 20px 16px; border-radius: 24px; background: #fff; box-shadow: var(--sh-md); outline: 1.5px dashed var(--lav); outline-offset: 6px; }
.bi-atom__gt { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--lav); }
.bi-atom__gt b { font: 800 20px/1.1 var(--disp); color: var(--ink); }
.bi-atom__gt span { font-size: 15px; line-height: 1.35; color: var(--slate); }
.bi-atom__ch { align-self: end; padding: 0 4px; font: 800 12px/1.3 Manrope, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.bi-atom__g figcaption { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.4; color: var(--slate); text-align: right; }
.bi-atom__uh { grid-column: 4; grid-row: 1 / 3; align-self: end; margin: 0; padding: 0 4px; font: 800 12px/1.3 Manrope, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.bi-atom__map .bi-atom__us { grid-column: 4; position: relative; }
.bi-atom__arrow { position: absolute; left: -46px; top: 50%; width: 30px; height: 2px; background: var(--gold); }
.bi-atom__arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--gold); border-right: 0; }
.bi-atom__claim { grid-column: 4; grid-row: 6; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 4px 4px 0; }
.bi-atom__claim img { height: 16px; width: auto; }
.bi-atom__claim span { font: 700 17px/1.3 var(--disp); color: var(--ink); }
@media (max-width: 899px) {
  .bi-atom__map { display: flex; flex-direction: column; gap: 12px; }
  .bi-atom__g { display: flex; flex-direction: column; gap: 10px; outline: none; }
  .bi-atom__g .bi-atom__ch { display: none; }
  .bi-atom__g .bi-atom__ins::before { content: "AI-led atomic insights"; display: block; margin-bottom: 2px; font: 800 11px/1 Manrope, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
  .bi-atom__uh { margin-top: 16px; }
  .bi-atom__arrow { display: none; }
}
/* AK Nov 7: tighter, so the analyst view fits one screen on desktop. */
.bi-head--units { max-width: 1152px; }
@media (min-width: 900px) {
  .bi-atom { padding: 48px 0; }
  .bi-atom .bi-head { margin-bottom: 24px; }
  .bi-atom__map { grid-template-columns: minmax(0, .72fr) minmax(0, 1.5fr) 36px minmax(0, .95fr); row-gap: 8px; }
  .bi-atom__g { padding: 16px 18px 12px; }
  .bi-atom__gt { padding-bottom: 8px; }
  .bi-atom__map .bi-atom__sig { padding: 8px 10px; }
  .bi-atom__map .bi-atom__sig b { margin-bottom: 6px; }
  .bi-atom__map .bi-atom__sig ul { gap: 4px; }
  .bi-atom__map .bi-atom__sig li { padding: 5px 10px; font-size: 13px; }
  .bi-atom__map .bi-atom__ins { padding: 8px 14px; gap: 3px; }
  .bi-atom__map .bi-atom__ins li { font-size: 14.5px; line-height: 1.4; }
  .bi-atom__map .bi-atom__us { padding: 10px 14px; }
  .bi-atom__map .bi-atom__line { font-size: 13.5px; }
  .bi-atom__close { margin-top: 20px; }
}

/* AK Nov 7: Gartner's column heads, two lines each as in the figure (bold label, then the instruction). */
.bi-atom__ch { display: flex; flex-direction: column; gap: 2px; text-transform: none; letter-spacing: 0; font: 600 13px/1.35 Manrope, Arial, sans-serif; color: var(--slate); }
.bi-atom__ch b { font: 800 12px/1.3 Manrope, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 899px) { .bi-atom__g .bi-atom__ins::before { content: "Example atomic insights"; } }
@media (min-width: 900px) { .bi-atom { padding: 32px 0; } .bi-atom .bi-head { margin-bottom: 18px; } .bi-atom__close { margin-top: 14px; } }