/* Contextual callout + offer pop-up (Krish ideas 3 and 5, Oct 27 2026). Behaviour: callouts.js and promo.js.
   Brand colours only: ink #110A33, gold #FFC61E, lavender #DDD6FF (small chip), white. Text is ink: slate on lavender measured 4.28:1, below 4.5:1 (Oct 27 review). 4px scale, pill buttons. */

/* ---------- Callout: one proof line that belongs to the section's call to action (Oct 28: no floating pill) ----------
   Figure in Cabinet Grotesk (ink), line in Manrope (ink: slate on lavender was 4.28:1, Oct 27 review), centred like the headings above it. No fill: it reads as part of the band. */
.hx-co-row{display:flex;justify-content:center;box-sizing:border-box;width:100%;padding:16px 16px 0;margin:0;font-family:Manrope,"Manrope Fallback",Arial,sans-serif}
.hx-co-row.is-arm{opacity:0;transform:translateY(8px)}
.hx-co-row.is-in{opacity:1;transform:none;transition:opacity .3s cubic-bezier(.23,1,.32,1),transform .3s cubic-bezier(.23,1,.32,1)}
/* .hx-co-row prefix: body.hai p (shell.css) sets text-wrap:pretty and out-ranks a bare .hx-co, which let a lone "customers" wrap at 320 (Oct 28 review) */
.hx-co-row .hx-co{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:0 8px;max-width:520px;margin:0;padding:0;background:none;color:#110A33;
	font:500 15px/24px Manrope,"Manrope Fallback",Arial,sans-serif;text-align:center;text-wrap:balance}
.hx-co-row .hx-co b{font:700 24px/28px "Cabinet Grotesk",Manrope,Arial,sans-serif;letter-spacing:-.01em;color:#110A33;font-variant-numeric:tabular-nums}
/* Sits above a section's own link (People Research Agent): the proof line, then the link it supports. */
.hx-co-row--before{padding:0 16px 4px}
@media (max-width:480px){ .hx-co-row .hx-co{flex-direction:column;align-items:center;gap:0} .hx-co-row .hx-co b{font-size:22px;line-height:28px} }

/* ---------- Sign-up pop-up with the time-aware counter (N35, Oct 27 2026; behaviour promo.js + popup-counter.js) ----------
   Same place and entrance as the comparison pages' card (compare-popup.css): top-right under the floating nav, slides down 12px and
   fades in, follows the nav up when it tucks away, waits behind the sticky CTA pair. Small, like the Ask AI pill: counter line, one
   short line, "Start free trial", close. White card, lavender ring, brand colours only. */
.hx-promo{--pr-ink:#110A33;--pr-gold:#FFC61E;--pr-ease:cubic-bezier(.23,1,.32,1);
	/* --pr-y is measured by promo.js each time the card shows: just under the floating nav pill, or under the ink CTA pair once the
	   nav tucks away (Oct 27 night: the old fixed 72px sat under the taller floating nav). 104px is the desktop fallback. */
	position:fixed;top:0;translate:0 var(--pr-y,104px);right:max(16px,env(safe-area-inset-right,0px));z-index:890;box-sizing:border-box;width:320px;max-width:calc(100vw - 32px);
	padding:16px;border-radius:24px;background:#fff;color:var(--pr-ink);
	box-shadow:0 0 0 1px #DDD6FF,0 12px 32px -12px rgba(17,10,51,.22);
	font-family:Manrope,"Manrope Fallback",Arial,sans-serif;
	display:grid;grid-template-areas:"t" "s" "c";gap:8px;
	opacity:0;visibility:hidden;transform:translateY(-12px);
	transition:opacity .24s var(--pr-ease),transform .24s var(--pr-ease),visibility .24s,translate .35s cubic-bezier(.2,.7,.2,1)}
.hx-promo *{box-sizing:border-box}
.hx-promo[hidden]{display:none}
.hx-promo.is-in{opacity:1;visibility:visible;transform:none}
.hx-promo.no-move{transition:none}   /* promo.js: set while it picks this showing's spot, so the card never glides across the screen */
/* Bottom slot (only when the top spot would cover the page's H1): enters and leaves from below, tooltip opens upwards. */
.hx-promo.at-bottom:not(.is-in){transform:translateY(6px)}   /* 6px (was 12): the card is 8px above the Ask AI icon on phones, so its entrance never touches it (Oct 27 night fix 2) */
.hx-promo.at-bottom .hx-pc-tip{top:auto;bottom:calc(100% + 8px);transform:translateY(4px)}
.hx-promo.is-yield{opacity:0!important;visibility:hidden!important;pointer-events:none}   /* keyboard focus is under the card: step aside */
/* Oct 28 (AK, final): once it is up it is steady for its 10 s. shell.js's heading hold (shell.css [data-hx-hold]) must not fade it while the visitor scrolls, so a showing card ignores it (specificity beats the !important rule there; shell.css is not edited). */
.hx-promo.is-in:not(.is-yield)[data-hx-hold]{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.hx-promo .hx-promo-t{grid-area:t;margin:0;padding:0 36px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:inherit;letter-spacing:0;text-wrap:initial}
.hx-promo .hx-pc-num{order:1;font:700 26px/1 "Cabinet Grotesk",Manrope,Arial,sans-serif;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--pr-ink)}
.hx-promo .hx-pc-tag{order:2;position:relative;margin:0;padding:3px 8px;border:0;border-radius:999px;background:#DDD6FF;color:var(--pr-ink);
	font:800 11px/16px Manrope,"Manrope Fallback",Arial,sans-serif;cursor:help;touch-action:manipulation;transition:transform .16s var(--pr-ease)}
.hx-promo .hx-pc-tag[hidden]{display:none}
.hx-promo .hx-pc-tag::after{content:"";position:absolute;inset:-12px -8px}   /* 44px hit area on a 22px chip */
.hx-promo .hx-pc-tag:active{transform:scale(.97)}
.hx-promo .hx-pc-what{order:3;flex:0 0 100%;font:700 13px/18px Manrope,"Manrope Fallback",Arial,sans-serif;color:var(--pr-ink);text-wrap:balance}
.hx-promo .hx-pc-sr,.hx-promo-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hx-promo .hx-promo-s{grid-area:s;margin:0;font:500 13px/18px Manrope,"Manrope Fallback",Arial,sans-serif;color:#110A33;text-wrap:pretty}
.hx-promo .hx-promo-go{grid-area:c;justify-self:start;margin-top:4px;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:999px;
	background:var(--pr-gold);color:var(--pr-ink);font:800 14px/20px Manrope,"Manrope Fallback",Arial,sans-serif;text-decoration:none;white-space:nowrap;touch-action:manipulation;
	transition:transform .16s var(--pr-ease),background-color .15s}
.hx-promo .hx-promo-go:active{transform:scale(.97)}
.hx-promo .hx-promo-x{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:50%;
	background:transparent;color:#110A33;cursor:pointer;touch-action:manipulation;transition:background-color .15s,color .15s,transform .16s var(--pr-ease)}
.hx-promo .hx-promo-x::before{content:"";position:absolute;inset:-6px}   /* 44px hit area */
.hx-promo .hx-promo-x:active{transform:scale(.97)}
.hx-promo :focus-visible{outline:2px solid #341D99;outline-offset:2px}
/* Tooltip behind the "est." chip: opens below the card (the card sits at the top of the screen). */
.hx-promo .hx-pc-tip{position:absolute;left:0;right:0;top:calc(100% + 8px);padding:12px 16px;border-radius:16px;background:#fff;color:var(--pr-ink);
	box-shadow:0 0 0 1px #DDD6FF,0 32px 64px -24px rgba(17,10,51,.35);font:500 12px/18px Manrope,"Manrope Fallback",Arial,sans-serif;text-wrap:pretty;
	opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none;
	transition:opacity .14s var(--pr-ease),transform .14s var(--pr-ease),visibility 0s .14s}
.hx-promo.tip-off .hx-pc-tip{opacity:0!important;visibility:hidden!important}   /* Esc dismisses a hover tooltip until the pointer leaves (WCAG 1.4.13) */
.hx-promo:has(.hx-pc-tag:focus-visible) .hx-pc-tip,.hx-promo.tip-on .hx-pc-tip{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media (hover:hover) and (pointer:fine){.hx-promo:has(.hx-pc-tag:hover) .hx-pc-tip{opacity:1;visibility:visible;transform:none;transition-delay:0s}}
@media (hover:hover) and (pointer:fine){
	.hx-promo .hx-promo-go:hover{background:#FFE8A5}
	.hx-promo .hx-promo-x:hover{background:#F6F4FF;color:var(--pr-ink)}
}

/* Phones: a compact bar under the nav (nav is 12px + 58px tall; 10px + 58px below 400px), same as the comparison card. */
@media (max-width:640px){
	.hx-promo:not(.is-in):not(.at-bottom){transform:translateY(-6px)}   /* Oct 28: the top bar is 8px under the nav, so its fade in and out travels 6px (was 12) and never crosses the nav pill */
	.hx-promo{top:0;translate:0 var(--pr-y,58px);left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));width:auto;max-width:none;padding:12px 12px 12px 16px;border-radius:20px;
		grid-template-areas:"t t" "s c";grid-template-columns:1fr auto;gap:8px 12px;align-items:center}
	.hx-promo .hx-promo-t{padding-right:32px;gap:4px 8px;align-items:baseline}
	.hx-promo .hx-pc-num{font-size:22px}
	.hx-promo .hx-pc-tag{align-self:center}
	.hx-promo .hx-pc-what{flex:1 1 100px;min-width:96px;font-size:13px;line-height:17px;text-wrap:pretty}
	.hx-promo .hx-promo-s{font-size:12px;line-height:17px}
	.hx-promo .hx-promo-go{margin:0;padding:10px 16px;font-size:13px}
	.hx-promo .hx-promo-x{top:4px;right:4px;width:44px;height:44px}
	.hx-promo .hx-promo-x::before{inset:0}
}
@media (max-width:360px){
	.hx-promo{grid-template-areas:"t" "s" "c";grid-template-columns:1fr}
	.hx-promo .hx-promo-go{justify-self:stretch}
	.hx-promo .hx-pc-what{flex:0 0 100%}
}
/* Short phones in landscape: keep it from eating the screen. */
@media (max-height:480px){.hx-promo .hx-promo-s{display:none}}

@media (prefers-reduced-motion:reduce){
	.hx-co-row.is-arm{opacity:1;transform:none}
	.hx-co-row.is-in{transition:none}
	.hx-promo,.hx-promo.is-in,.hx-promo.at-bottom:not(.is-in),.hx-promo:not(.is-in):not(.at-bottom){transform:none;transition:opacity .15s linear,visibility .15s}   /* fade only: no slide, and it jumps (not glides) to its new spot under the nav */
	.hx-promo.at-bottom .hx-pc-tip{transform:none}
	.hx-promo .hx-pc-tip{transform:none;transition:opacity .12s linear,visibility 0s}
	.hx-promo .hx-promo-go:active,.hx-promo .hx-promo-x:active,.hx-promo .hx-pc-tag:active{transform:none}
}
@media print{.hx-promo{display:none}}

/* Nov 5 late (/product experiment, Krish + Amar at 41:07): the same pop-up carrying a testimonial (promo.js, .hx-promo--quote): the face, the
   person's own words, name and role, and "Read more" to the page's testimonials. Same card, same placement and the same 2-per-session cap. */
.hx-promo--quote .hx-promo-t{flex-wrap:nowrap;align-items:flex-start;gap:12px}
.hx-promo--quote .hx-pq-face{flex:none;order:0;width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 18%;background:#DDD6FF;outline:1px solid rgba(17,10,51,.08);outline-offset:-1px}
.hx-promo--quote .hx-pc-what{flex:1 1 auto;order:1;font:600 15px/1.4 Manrope,"Manrope Fallback",Arial,sans-serif;color:var(--pr-ink);text-wrap:pretty}
.hx-promo--quote .hx-promo-s{padding-left:52px;color:#5B6478}
.hx-promo--quote .hx-promo-s b{font-weight:800;color:var(--pr-ink)}
.hx-promo--quote .hx-promo-go{margin-left:52px}
@media (max-width:640px){
	.hx-promo--quote{grid-template-areas:"t t" "s c"}
	.hx-promo--quote .hx-pc-what{font-size:14px}
	.hx-promo--quote .hx-pq-face{width:36px;height:36px}
	.hx-promo--quote .hx-promo-s{padding-left:48px}
	.hx-promo--quote .hx-promo-go{margin-left:0}
}