/* AK Nov 7 2026 (Amar): comparison page rework, shared by every /comparison/<slug> page and the hub.
   Hero: one-line H1, 2-3 line sub, a Buyer Intelligence score card (rings + one bar per Intelligence group), customer logos on its
   bottom edge, full first screen. Table: Advanced / Basic / warning / not offered values. Under the table: why Humantic AI is a yes,
   then the trial buttons. One 3-tile section replaces the tools strip, the trust wall and "Intelligence That Compounds".
   LLM page: the two research sections become one section with two tabs. Brand colours only. */

/* ---------- hero ---------- */
body.hai .hx-hero.has-score { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 96px 24px 28px; }
body.hai .hx-hero.has-score .hx-hero-inner { width: 100%; max-width: 1152px; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; }
body.hai .hx-hero.has-score h1 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.04; margin: 0 0 20px; }
body.hai .hx-hero.has-score .hx-sub { font: 600 clamp(18px, 1.6vw, 22px)/1.45 Manrope, Arial, sans-serif; color: #110A33; max-width: 560px; margin: 0; }
body.hai .hx-hero .hx-sub b { color: #341D99; }
.cmp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.cmp-score { position: relative; background: #fff; border: 1px solid #DDD6FF; border-radius: 24px; padding: 24px; box-shadow: 0 1px 3px rgba(17,10,51,.05), 0 32px 64px -32px rgba(17,10,51,.35); text-align: left; }
.cmp-score__k { margin: 0; font: 800 12px/1.2 Manrope, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #5B6478; }
.cmp-score__t { margin: 4px 0 0; font: 700 22px/1.2 "Cabinet Grotesk", Arial, sans-serif; color: #110A33; letter-spacing: -.01em; }
.cmp-score__rings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.cmp-ring { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: #F6F4FF; }
.cmp-ring.is-us { background: #FFF4D2; }
.cmp-ring__dial { --p: 0; position: relative; flex: none; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(var(--c, #341D99) calc(var(--p) * 1%), #DDD6FF 0); display: grid; place-items: center; animation: cmpDial 1.2s cubic-bezier(.16,1,.3,1) both; }
.cmp-ring.is-us .cmp-ring__dial { --c: #341D99; }
.cmp-ring:not(.is-us) .cmp-ring__dial { --c: #5B6478; }
.cmp-ring__dial::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.cmp-ring__dial b { position: relative; font: 700 24px/1 "Cabinet Grotesk", Arial, sans-serif; color: #110A33; }
.cmp-ring__dial b small { font-size: 13px; color: #5B6478; }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes cmpDial { from { --p: 0; } }
.cmp-ring__who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cmp-ring__who img { height: 20px; width: auto; max-width: 112px; object-fit: contain; object-position: left; }
.cmp-ring__who span { font: 700 14px/1.2 Manrope, Arial, sans-serif; color: #110A33; }
.cmp-ring__who small { font-size: 12.5px; line-height: 1.3; color: #5B6478; }
.cmp-bars { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.cmp-bars li { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; column-gap: 12px; font-size: 13px; color: #110A33; }
.cmp-bars li > span { font-weight: 700; }
.cmp-bars__pair { display: grid; gap: 3px; }
.cmp-bars__pair i { display: block; height: 7px; border-radius: 4px; background: #DDD6FF; overflow: hidden; }
.cmp-bars__pair i::before { content: ""; display: block; height: 100%; width: calc(var(--w) * 1%); border-radius: 4px; background: #341D99; transform-origin: left; animation: cmpGrow 1.1s cubic-bezier(.16,1,.3,1) both; }
.cmp-bars__pair i + i::before { background: #5B6478; }
@keyframes cmpGrow { from { transform: scaleX(0); } }
.cmp-score__key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; font-size: 12px; color: #5B6478; }
.cmp-score__key span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: #341D99; }
.cmp-score__key span + span::before { background: #5B6478; }
.cmp-score__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #DDD6FF; }
.cmp-score__foot a { font-weight: 800; font-size: 14px; color: #110A33; text-decoration: none; border-bottom: 2px solid #FFC61E; }
.cmp-score__foot p { margin: 0; font-size: 12px; color: #5B6478; }

.cmp-logos { width: 100%; max-width: 1152px; margin: 40px auto 0; }
.cmp-logos p { margin: 0 0 12px; text-align: center; font: 700 13px/1.2 Manrope, Arial, sans-serif; color: #5B6478; }
.cmp-logos__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.cmp-logos__row img { width: 150px; height: 44px; object-fit: contain; opacity: .65; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.cmp-logos__row img:hover { opacity: 1; filter: none; }
.cmp-lg { position: relative; display: inline-flex; }
.cmp-lg a { position: absolute; right: -6px; bottom: -10px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: 999px; background: #FFC61E; color: #110A33; font: 800 11px/1.4 Manrope, Arial, sans-serif; text-decoration: none; }
.cmp-lg a i { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #fff; font-style: normal; font-size: 7px; }
@media (max-width: 960px) {
  body.hai .hx-hero.has-score .hx-hero-inner { grid-template-columns: minmax(0, 1fr); }
  body.hai .hx-hero.has-score .hx-sub { margin: 0 auto; }
  .cmp-hero-cta { justify-content: center; }
  .cmp-logos__row img { width: 104px; height: 32px; }
}
@media (max-width: 640px) {
  body.hai .hx-hero.has-score { padding: 88px 16px 24px; }
  .cmp-score { padding: 18px; }
  .cmp-score__rings { grid-template-columns: minmax(0, 1fr); }
  .cmp-bars li { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ---------- table values ---------- */
body.hai td.v-adv, body.hai td.v-basic, body.hai td.v-warn, body.hai td.v-na { font-weight: 700; }
body.hai td.v-adv::before, body.hai td.v-basic::before, body.hai td.v-warn::before { content: ""; display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: -6px; margin-right: 8px; background-position: center; background-repeat: no-repeat; background-size: 14px; }
body.hai td.v-adv { color: #341D99; }
body.hai td.v-adv::before { background-color: #341D99; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC61E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }
body.hai td.v-basic { color: #110A33; font-weight: 600; }
body.hai td.v-basic::before { background-color: #F6F4FF; box-shadow: inset 0 0 0 2px #DDD6FF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6478' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
body.hai td.v-warn { color: #110A33; background: #FFF4D2 !important; }
body.hai td.v-warn::before { border-radius: 4px; background-color: transparent; background-size: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l10 18H2z' fill='%23FFC61E' stroke='%23110A33' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12 10v5' stroke='%23110A33' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='18' r='1.2' fill='%23110A33'/%3E%3C/svg%3E"); }
body.hai td.v-na { color: #5B6478; font-weight: 600; }
body.hai td.v-adv[title], body.hai td.v-basic[title], body.hai td.v-warn[title] { cursor: help; }
body.hai .comp-table td .cmp-why { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.35; font-weight: 600; color: #5B6478; }
body.hai .comp-table tr.is-new td:first-child::after { content: "New"; display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: #FFC61E; color: #110A33; font: 800 10px/1.6 Manrope, Arial, sans-serif; letter-spacing: .04em; vertical-align: 2px; }
.cmp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 0 0 18px; font-size: 13px; color: #5B6478; }
.cmp-legend b { color: #110A33; }

/* ---------- under the table ---------- */
.cmp-yes { max-width: 1152px; margin: 32px auto 0; padding: 28px; border-radius: 24px; background: #110A33; color: #fff; text-align: left; }
.cmp-yes h3 { margin: 0; font: 700 clamp(22px, 1rem + 1vw, 30px)/1.15 "Cabinet Grotesk", Arial, sans-serif; color: #fff !important; letter-spacing: -.02em; }
.cmp-yes > p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: #DDD6FF; }
.cmp-yes ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cmp-yes li { padding: 18px; border-radius: 18px; background: rgba(221,214,255,.08); box-shadow: inset 0 0 0 1px rgba(221,214,255,.16); }
.cmp-yes li b { display: block; font: 700 18px/1.2 "Cabinet Grotesk", Arial, sans-serif; color: #FFC61E; }
.cmp-yes li span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: #fff; }
.cmp-yes li a { color: #FFC61E; font-weight: 700; }
.cmp-after { max-width: 1152px; margin: 28px auto 0; text-align: center; }
.cmp-after .hx-cta-row { justify-content: center; }
.cmp-after .hx-proof { margin-top: 18px; }
@media (max-width: 860px) { .cmp-yes ul { grid-template-columns: minmax(0, 1fr); } .cmp-yes { padding: 22px 18px; } }

/* ---------- 3 tiles ---------- */
.cmp-tiles { background: #F6F4FF; padding: 72px 24px; }
.cmp-tiles__in { max-width: 1152px; margin: 0 auto; }
.cmp-tiles h2 { margin: 0 0 32px; text-align: center; font: 700 clamp(28px, 1.2rem + 2.2vw, 44px)/1.12 "Cabinet Grotesk", Arial, sans-serif; color: #110A33 !important; letter-spacing: -.03em; }
.cmp-tiles ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cmp-tile { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px #DDD6FF, 0 16px 40px -28px rgba(17,10,51,.35); text-align: left; }
.cmp-tile__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #FFC61E; color: #110A33; }
.cmp-tile h3 { margin: 6px 0 0; font: 700 22px/1.2 "Cabinet Grotesk", Arial, sans-serif; color: #110A33 !important; }
.cmp-tile p { margin: 0; font-size: 15px; line-height: 1.55; color: #5B6478; }
.cmp-tile blockquote { margin: 4px 0 0; padding: 14px 16px; border-radius: 16px; background: #FFF4D2; font: 700 15px/1.45 Manrope, Arial, sans-serif; color: #110A33; }
.cmp-tile blockquote cite { display: block; margin-top: 8px; font-style: normal; font-size: 13px; font-weight: 600; color: #5B6478; }
.cmp-tile__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-tile__chips span { padding: 4px 10px; border-radius: 999px; background: #DDD6FF; font: 700 12.5px/1.3 Manrope, Arial, sans-serif; color: #110A33; }
.cmp-tile > a { margin-top: auto; padding-top: 6px; align-self: flex-start; font-weight: 800; font-size: 15px; color: #110A33; text-decoration: none; border-bottom: 2px solid #FFC61E; }
@media (max-width: 860px) { .cmp-tiles ul { grid-template-columns: minmax(0, 1fr); } .cmp-tiles { padding: 48px 16px; } }

/* ---------- LLM page: one research section, two tabs ---------- */
.cmp-rp { background: #F6F4FF; padding: 72px 24px; }
.cmp-rp__in { max-width: 1152px; margin: 0 auto; }
.cmp-rp > .cmp-rp__in > h2 { margin: 0; text-align: center; font: 700 clamp(28px, 1.2rem + 2.2vw, 44px)/1.12 "Cabinet Grotesk", Arial, sans-serif; color: #110A33 !important; letter-spacing: -.03em; }
.cmp-rp__sub { margin: 12px auto 0; max-width: 62ch; text-align: center; font-size: 17px; line-height: 1.55; color: #5B6478; }
.cmp-rp__tabs { display: flex; justify-content: center; gap: 8px; margin: 24px 0 20px; flex-wrap: wrap; }
.cmp-rp__tabs button { all: unset; cursor: pointer; padding: 12px 20px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #DDD6FF; font: 800 15px/1 Manrope, Arial, sans-serif; color: #110A33; }
.cmp-rp__tabs button[aria-selected="true"] { background: #110A33; color: #fff; box-shadow: none; }
.cmp-rp__tabs button:focus-visible { outline: 3px solid #341D99; outline-offset: 2px; }
.cmp-rp__panel[hidden] { display: none; }
.cmp-rp__panel .rp-wrap { padding: 0; max-width: none; }
.cmp-rp__panel .rp-head h3 { margin: 0; text-align: center; font: 700 clamp(22px, 1rem + 1vw, 30px)/1.15 "Cabinet Grotesk", Arial, sans-serif; color: #110A33 !important; }
.cmp-rp__panel .rp-head p { margin: 8px auto 0; max-width: 70ch; text-align: center; font-size: 15px; line-height: 1.55; color: #5B6478; }
.cmp-rp__get { display: flex; justify-content: center; margin-top: 24px; }

/* ---------- hub ---------- */
/* Nov 7 round 2 (Amar: text too far down): no forced screen height (the page already starts 132px down), even air above and below, the logos after a gap */
body.hai-matrix .hx-cover { min-height: 0; display: block; padding-top: 48px; padding-bottom: 56px; box-sizing: border-box; }
body.hai-matrix .hx-cover .cmp-logos { margin-top: 48px; }
body.hai-matrix .hx-cover .hx-sub { max-width: 640px; margin-left: auto; margin-right: auto; }
.cmp-hub-sub { margin: 8px auto 20px; max-width: 60ch; text-align: center; font-size: 16px; line-height: 1.5; color: #5B6478; }
body.hai-matrix .lens-section .deck { margin: 0 0 20px; }
body.hai-matrix .lens-section > .lens-controls { margin: 0 0 20px; }
body.hai .hx-hero.has-score .hx-sub { max-width: 600px; }
@media (min-width: 961px) and (max-height: 820px) {
  body.hai .hx-hero.has-score { padding-top: 84px; padding-bottom: 16px; }
  body.hai .hx-hero.has-score h1 { font-size: clamp(40px, 4.6vw, 60px); margin-bottom: 14px; }
  .cmp-hero-cta { margin-top: 20px; }
  .cmp-score { padding: 16px 18px; }
  .cmp-score__t { font-size: 18px; }
  .cmp-score__rings { margin-top: 12px; }
  .cmp-ring { padding: 10px; }
  .cmp-ring__dial { width: 64px; height: 64px; }
  .cmp-ring__dial::before { inset: 7px; }
  .cmp-ring__dial b { font-size: 19px; }
  .cmp-bars { margin-top: 12px; gap: 5px; }
  .cmp-score__key { margin-top: 8px; }
  .cmp-score__foot { margin-top: 10px; padding-top: 10px; }
  .cmp-logos { margin-top: 20px; }
  .cmp-logos p { margin-bottom: 8px; }
  .cmp-logos__row img { height: 36px; }
}
@media (min-width: 961px) { body.hai .hx-hero.has-score .hx-hero-inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 40px; } body.hai .hx-hero.has-score .hx-sub { max-width: 620px; } }
@media (max-width: 640px) { .cmp-sub-lead { display: none; } body.hai .hx-hero.has-score .hx-sub { font-size: 17px; } }

/* ---------- hub, round 2 (Amar Nov 7): clean picker, taller coloured map, no score pairs, controls below, leader inside the insight ---------- */
body.hai-matrix .lens-section .deck { padding: 0; background: none; box-shadow: none; border: 0; }
body.hai-matrix .deck-title { font-size: 15px !important; }
/* round 3 (Amar): back to one column per group (6 across), each tool on one line */
body.hai-matrix #deck-body { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 14px 12px !important; align-items: start; }
body.hai-matrix .archetype { display: block !important; }
body.hai-matrix .archetype-label { font-size: 11.5px !important; min-height: 2.6em; }
body.hai-matrix .tiles { display: flex !important; flex-direction: column; gap: 6px !important; }
body.hai-matrix .tile { width: 100% !important; min-height: 36px !important; padding: 4px 8px !important; border-radius: 10px !important; }
body.hai-matrix .tile-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal !important; font-size: 12.5px !important; }
@media (max-width: 1100px) { body.hai-matrix #deck-body { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 620px) { body.hai-matrix #deck-body { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

body.hai-matrix .lens-plot { height: clamp(380px, 56vh, 520px) !important; background-color: #fff;
  background-image: linear-gradient(#F6F4FF, #F6F4FF), linear-gradient(#F6F4FF, #F6F4FF), linear-gradient(#F6F4FF, #F6F4FF), linear-gradient(#F6F4FF, #F6F4FF) !important;
  background-size: 50% 50% !important; background-repeat: no-repeat !important; background-position: 0 0, 100% 0, 0 100%, 100% 100% !important; border-radius: 0 12px 12px 0; }
body.hai-matrix .lens-plot:has(#lens-quad-tr.is-win) { background-image: linear-gradient(#F6F4FF, #F6F4FF), linear-gradient(#FFF4D2, #FFF4D2), linear-gradient(#fff, #fff), linear-gradient(#F6F4FF, #F6F4FF) !important; }
body.hai-matrix .lens-plot:has(#lens-quad-tl.is-win) { background-image: linear-gradient(#FFF4D2, #FFF4D2), linear-gradient(#F6F4FF, #F6F4FF), linear-gradient(#F6F4FF, #F6F4FF), linear-gradient(#fff, #fff) !important; }
body.hai-matrix .lens-quad.is-win { color: #110A33 !important; background: #FFC61E !important; padding: 3px 10px !important; border-radius: 999px !important; }
body.hai-matrix .lens-dot .d { width: 16px !important; height: 16px !important; box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(17,10,51,.25) !important; }
body.hai-matrix .lens-dot.hum .d { width: 22px !important; height: 22px !important; box-shadow: 0 0 0 4px #110A33, 0 0 0 7px #FFC61E !important; }
body.hai-matrix .lens-legend-sc, body.hai-matrix .lens-legend-head span:last-child { display: none !important; }
body.hai-matrix .lens-section > .lens-controls { margin: 20px 0 0 !important; padding: 12px 16px !important; }
body.hai-matrix .lens-controls-label { font-size: 12px !important; }
body.hai-matrix .lens-pill-group-label { font-size: 11px !important; }
body.hai-matrix .lens-pill { font-size: 12.5px !important; padding: 5px 11px !important; min-height: 32px !important; }
body.hai-matrix .lens-verify { margin-top: 12px !important; }
body.hai-matrix .lens-verify-lede { font-size: 13px !important; }
body.hai-matrix .lens-insight .lens-leader-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: #FFF4D2; box-shadow: inset 0 0 0 1px #FFC61E; }
body.hai-matrix .lens-insight .lens-leader-tag { padding: 3px 10px; border-radius: 999px; background: #110A33; color: #FFC61E !important; font: 800 11px/1.4 Manrope, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
body.hai-matrix .lens-insight .lens-leader-name { font: 700 18px/1.2 "Cabinet Grotesk", Arial, sans-serif; color: #110A33; }
body.hai-matrix .lens-insight .lens-leader-hint { font-size: 13px; color: #5B6478; }

/* ---------- 3 tiles, round 2 (Amar: more visual: a face, a video, the surfaces, the four Intelligence types) ---------- */
.cmp-tile { padding: 0; overflow: hidden; gap: 0; }
.cmp-tile > :not(.cmp-tile__vid):not(.cmp-surf):not(.cmp-bi) { margin-left: 22px; margin-right: 22px; }
.cmp-tile h3 { margin-top: 18px; }
.cmp-tile > p { margin-top: 8px; }
.cmp-tile__go { margin: auto 22px 22px !important; padding-top: 14px; align-self: flex-start; font-weight: 800; font-size: 15px; color: #110A33; text-decoration: none; border-bottom: 2px solid #FFC61E; }
.cmp-tile__vid { position: relative; display: block; aspect-ratio: 16 / 9; background: #110A33; overflow: hidden; }
.cmp-tile__vid img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: transform .5s ease, opacity .3s; }
.cmp-tile__vid:hover img { transform: scale(1.04); opacity: 1; }
.cmp-tile__play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: grid; place-items: center; border-radius: 50%; background: #FFC61E; color: #110A33; font-size: 18px; padding-left: 3px; box-shadow: 0 8px 24px rgba(17,10,51,.35); }
.cmp-tile__cap { position: absolute; left: 12px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(17,10,51,.82); color: #fff; font: 700 12px/1.3 Manrope, Arial, sans-serif; }
.cmp-tile__q { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 12px; }
.cmp-tile__q img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #FFC61E; }
.cmp-tile__q blockquote { margin: 0; padding: 0; background: none; font: 700 15px/1.45 Manrope, Arial, sans-serif; color: #110A33; }
.cmp-tile__g2 { margin-top: 12px !important; font-size: 14px; color: #5B6478; }
.cmp-tile__g2 b { font: 700 20px/1 "Cabinet Grotesk", Arial, sans-serif; color: #110A33; margin-right: 4px; }
.cmp-surf { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; place-items: center; aspect-ratio: 16 / 9; padding: 18px 22px; background: linear-gradient(135deg, #110A33, #341D99); }
.cmp-surf > span:not(.cmp-surf__core) { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.cmp-surf > span img { width: 26px; height: 26px; object-fit: contain; }
.cmp-surf__core { grid-column: 2 / span 3; grid-row: 2; display: grid; place-items: center; width: 100%; height: 48px; border-radius: 999px; background: #FFF4D2; box-shadow: 0 0 0 4px rgba(255,198,30,.5); }
.cmp-surf__core img { width: 120px; height: auto; }
.cmp-bi { aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 18px 22px; background: #FFF4D2; }
.cmp-bi__four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cmp-bi__four span { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #FFE8A5; }
.cmp-bi__four img { width: 32px; height: 32px; }
.cmp-bi__four b { font: 700 15px/1.2 "Cabinet Grotesk", Arial, sans-serif; color: #110A33; }
.cmp-bi__eq { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cmp-bi__eq span { padding: 4px 10px; border-radius: 999px; background: #110A33; color: #FFC61E; font: 800 12px/1.3 Manrope, Arial, sans-serif; }

/* ---------- comparison hero, round 2: score tiles, buttons aligned with the headline, full-size type ---------- */
.cmp-score2 { text-align: left; }
.cmp-score2__k { margin: 0; font: 800 12px/1.2 Manrope, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #341D99; }
.cmp-score2__ctx { margin: 6px 0 16px; font-size: 15px; line-height: 1.45; color: #5B6478; }
.cmp-st { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px 22px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px #DDD6FF, 0 18px 40px -26px rgba(17,10,51,.35); overflow: hidden; }
.cmp-st + .cmp-st { margin-top: 12px; }
.cmp-st.is-us { background: #110A33; box-shadow: 0 24px 48px -24px rgba(17,10,51,.55); }
.cmp-st__who { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cmp-st__who img { height: 22px; width: auto; max-width: 140px; object-fit: contain; object-position: left; }
.cmp-st.is-us .cmp-st__who img { filter: none; }
.cmp-st__who span { font: 700 15px/1.2 Manrope, Arial, sans-serif; color: #5B6478; }
.cmp-st.is-us .cmp-st__who span { display: none; }
.cmp-st b { font: 700 clamp(48px, 5vw, 72px)/1 "Cabinet Grotesk", Arial, sans-serif; letter-spacing: -.03em; color: #110A33; white-space: nowrap; }
.cmp-st.is-us b { color: #FFC61E; }
.cmp-st b small { font-size: .38em; color: #5B6478; margin-left: 2px; letter-spacing: 0; }
.cmp-st.is-us b small { color: #DDD6FF; }
.cmp-st i { position: absolute; left: 0; bottom: 0; height: 6px; width: calc(var(--w) * 1%); background: #5B6478; transform-origin: left; animation: cmpGrow 1.1s cubic-bezier(.16,1,.3,1) both; }
.cmp-st.is-us i { background: #FFC61E; }
.cmp-score2__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 0; }
.cmp-score2__foot a { font-weight: 800; font-size: 15px; color: #110A33; text-decoration: none; border-bottom: 2px solid #FFC61E; }
.cmp-score2__foot span { font-size: 12.5px; color: #5B6478; }
@media (min-width: 961px) { .cmp-hero-cta { justify-content: flex-start !important; } }
.cmp-hero-cta .hx-btn, .cmp-after .hx-btn { min-height: 50px; box-sizing: border-box; }
@media (min-width: 961px) and (max-height: 820px) {
  body.hai .hx-hero.has-score h1 { font-size: clamp(40px, 5.2vw, 72px); }
  .cmp-st { padding: 14px 18px 18px; }
  .cmp-st b { font-size: 52px; }
  .cmp-score2__ctx { margin-bottom: 10px; }
}

/* ---------- table, round 2: custom dark tooltips, info marks, no text in the cells ---------- */
body.hai .comp-table td.has-tip { position: relative; cursor: help; }
body.hai .comp-table td.has-tip::after { content: none !important; }
body.hai .comp-table td.has-tip:focus { outline: 2px solid #341D99; outline-offset: -2px; }
.cmp-i, .cmp-info { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; background: #DDD6FF; color: #341D99; font: 800 11px/1 Manrope, Arial, sans-serif; vertical-align: 1px; font-style: normal; }
.cmp-info { position: relative; cursor: help; }
.cmp-tip { position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 8px); width: max-content; max-width: 280px; padding: 10px 12px; border-radius: 12px; background: #110A33; color: #fff; font: 600 13px/1.45 Manrope, Arial, sans-serif; text-align: left; white-space: normal; box-shadow: 0 16px 32px -12px rgba(17,10,51,.5); opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; }
.cmp-tip::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #110A33; }
td.has-tip:hover > .cmp-tip, td.has-tip:focus > .cmp-tip, .cmp-info:hover > .cmp-tip, .cmp-info:focus > .cmp-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.comp-table td:last-child .cmp-tip { left: auto; right: 0; transform: translate(0, 4px); }
.comp-table td:last-child:hover > .cmp-tip, .comp-table td:last-child:focus > .cmp-tip { transform: none; }
.comp-table td:last-child .cmp-tip::after { left: auto; right: 24px; }
.cmp-info .cmp-tip { left: 0; transform: translate(0, 4px); font-weight: 600; text-transform: none; letter-spacing: 0; }
.cmp-info:hover > .cmp-tip, .cmp-info:focus > .cmp-tip { transform: none; }
.cmp-info .cmp-tip::after { left: 12px; }
body.hai td.v-warn { background: #FFF4D2 !important; }
/* round 2: tooltips must not be cut off by the table card; air above "Ask a Second Opinion" on every page */
body.hai .comp-card { overflow: visible !important; }
body.hai .reasons { padding-top: 88px !important; }
@media (max-width: 700px) { body.hai .reasons { padding-top: 56px !important; } .cmp-tip { max-width: 220px; } }

/* round 3: the legend beside the map uses the full height, no scrollbar; lens controls side by side (strategic left, category right) */
body.hai-matrix .lens-side, body.hai-matrix .lens-wrap.many .lens-side { height: auto !important; max-height: none !important; overflow: visible !important; margin-top: 0 !important; }
body.hai-matrix .lens-legend { max-height: none !important; overflow: visible !important; }
body.hai-matrix .lens-controls .lens-pill-groups { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px !important; align-items: start; }
body.hai-matrix .lens-pill-group { display: flex !important; flex-direction: column; align-items: flex-start; gap: 8px !important; }
body.hai-matrix .lens-pills { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
@media (max-width: 700px) { body.hai-matrix .lens-controls .lens-pill-groups { grid-template-columns: minmax(0, 1fr); } }

/* ---------- round 3 (Amar): logos exactly as on the home page hero; the hub hero fills the first screen with the logos at its foot ---------- */
.cmp-logos { width: 100%; max-width: 1152px; margin: 40px auto 0; }
.cmp-logos .hp2-logos { display: flex; gap: 16px 24px; align-items: center; justify-content: center; flex-wrap: wrap; row-gap: 34px; }
.cmp-logos .hp2-logos img { width: 150px; height: 47px; flex-shrink: 0; object-fit: contain; opacity: .65; filter: grayscale(1); transition: opacity .2s; }
.cmp-logos .hp2-logos img:hover { opacity: .9; }
.cmp-logos .hp2-logos img.hp2-logo-tall { height: 44px; }
.cmp-logos .hp2-lg { position: relative; display: flex; align-items: center; align-self: stretch; flex: none; }
.cmp-logos .hp2-lg img { display: block; }
.cmp-logos .hp2-vid { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; background: #DDD6FF; color: #110A33; font: 700 12px/16px Manrope, "Manrope Fallback", Arial, sans-serif; text-decoration: none; white-space: nowrap; }
.cmp-logos .hp2-vid:hover { background: #fff; }
.cmp-logos .hp2-vid:focus-visible { outline: 2px solid #341D99; outline-offset: 2px; }
.cmp-logos .hp2-vid-ico { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #FFC61E; flex: none; }
.cmp-logos .hp2-vid-ico svg { display: block; }
.cmp-logos { padding-bottom: 30px; }
@media (max-width: 1040px) { .cmp-logos .hp2-logos { gap: 16px; } .cmp-logos .hp2-logos img { width: 126px; height: 40px; } }
@media (max-width: 880px) { .cmp-logos .hp2-logos { gap: 12px; row-gap: 30px; } .cmp-logos .hp2-logos img { width: 104px; height: 33px; } }
@media (max-width: 720px) { .cmp-logos .hp2-logos { gap: 8px; row-gap: 30px; } .cmp-logos .hp2-logos img { width: 84px; height: 27px; } }
@media (min-width: 961px) {
  body.hai-matrix .hx-cover { display: flex; flex-direction: column; min-height: calc(100svh - 132px); padding-top: 64px; padding-bottom: 8px; }
  body.hai-matrix .hx-cover .cmp-logos { margin-top: auto; padding-top: 48px; }
}

/* round 4 (Amar): on every comparison page the logos sit at the foot of the hero, with the hero copy centred in the space above */
@media (min-width: 961px) {
  body.hai .hx-hero.has-score { justify-content: flex-start; padding-bottom: 8px; }
  body.hai .hx-hero.has-score .hx-hero-inner { margin-top: auto; margin-bottom: auto; }
  body.hai .hx-hero.has-score .cmp-logos { margin-top: 32px; }
}
.cmp-score2__foot span { font-weight: 700; color: #341D99; }
body.hai .comp-sublabel { white-space: nowrap; }
@media (max-width: 700px) { body.hai .comp-sublabel { white-space: normal; } }
/* round 5 (Amar): air between the hero logos and "Compare Humantic AI Against Any Competitor" on the hub */
body.hai-matrix #lens-section { padding-top: 72px !important; }
@media (max-width: 700px) { body.hai-matrix #lens-section { padding-top: 48px !important; } }