/* Shared shell (Oct 16): nav (partials/hx-nav), footer (hx-footer), Second opinion box and
   section copy-links (hx-shell). Links live in constants/shell.js, behaviour in shell.js.
   Loaded by hx-nav on hx and comparison pages, and by hx-shell on the older pages. */
@font-face{font-family:"Cabinet Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Arial");font-weight:700;size-adjust:90.8%;ascent-override:95.8%;descent-override:30.8%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";src:local("Arial");font-weight:400 600;size-adjust:102%;ascent-override:104.9%;descent-override:29.4%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700 800;size-adjust:100%;ascent-override:107%;descent-override:30%;line-gap-override:0%}
@font-face{font-family:"Cabinet Grotesk";src:url("/comparison-assets/fonts/CabinetGrotesk-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
.hx-nav,.hx-foot,.hx-so,.hx-skip{--ink:#110a33;--gold:#ffc61e;--gold-dk:#ffe8a5;--violet:#341d99;--lav:#ddd6ff;--mist:#f6f4ff;--slate:#5b6478;--ease:cubic-bezier(.23,1,.32,1)}
.hx-nav,.hx-nav *,.hx-foot,.hx-foot *,.hx-so,.hx-so *{box-sizing:border-box}
.hx-nav :focus-visible,.hx-foot :focus-visible,.hx-so :focus-visible,.hx-skip:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:12px}
.hx-drop :focus-visible{outline-color:var(--violet)}
.hx-skip{position:fixed;left:16px;top:-64px;z-index:1001;padding:12px 16px;border-radius:999px;background:var(--gold);color:var(--ink);font:700 15px/1 Manrope,"Manrope Fallback",Arial,sans-serif;text-decoration:none}
.hx-skip:focus{top:16px}

/* ---------- Nav: floating ink pill. Mega menus from 1241px, the burger panel below. ---------- */
.hx-nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:12px 16px 0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.hx-nav.hx-hide{transform:translateY(-120%)}
.hx-nav-pill{pointer-events:auto;position:relative;max-width:1240px;margin:0 auto;height:44px;border-radius:999px;background:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px 4px 14px;box-shadow:0 8px 24px -12px rgba(17,10,51,.45)}
.hx-logo{flex:none}
.hx-logo img{height:26px;width:auto;display:block} /* Oct 20 (AK): full logo back (sun + Humantic AI wordmark); the sun-only pill hid the name */
.hx-menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.hx-menu>li>a,.hx-menu>li>button{display:inline-flex;align-items:center;gap:6px;color:#ffffff;font:500 14px/1 Manrope,"Manrope Fallback",Arial,sans-serif;padding:9px 12px;border-radius:999px;background:none;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .15s}
.hx-menu>li>a:hover,.hx-menu>li>button:hover,.hx-menu>li.is-open>button{background:rgba(255,255,255,.1)}
.hx-menu>li.is-current>button,.hx-menu>li>a[aria-current]{text-decoration:underline 2px var(--gold);text-underline-offset:6px}
.hx-chev{width:12px;height:12px;transition:transform .2s var(--ease)}
.hx-menu>li.is-open .hx-chev{transform:rotate(180deg)}
.hx-menu-cta,.hx-menu-cta .hx-su{display:none}
/* One persistent panel (AK): every menu opens in the same white panel, anchored under the
   pill's left edge. The panel resizes to the menu; the menus cross-fade over it, shifting a
   little towards the direction of travel (shell.js sets --x). */
.hx-panel{position:absolute;left:0;top:calc(100% + 12px);width:0;height:0;border-radius:24px;background:#ffffff;box-shadow:0 32px 64px -24px rgba(17,10,51,.35),0 0 0 1px rgba(17,10,51,.06);opacity:0;visibility:hidden;transform:translateY(-6px);transition:width .22s var(--ease),height .22s var(--ease),opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
.hx-nav.has-panel .hx-panel{opacity:1;visibility:visible;transform:none}
.hx-nav.panel-fresh .hx-panel{transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
.hx-drop{position:absolute;top:calc(100% + 12px);left:0;display:flex;gap:24px;padding:24px;width:max-content;opacity:0;visibility:hidden;transform:translateX(var(--x,0));transition:opacity .2s var(--ease),transform .22s var(--ease),visibility .2s}
.hx-drop::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:24px}
.hx-menu>li.is-open .hx-drop{opacity:1;visibility:visible;transform:none}
.hx-drop-cols{display:flex;gap:24px}
.hx-drop-col{width:264px}
.hx-drop-h{margin:4px 12px 8px;font:700 12px/1.4 Manrope,"Manrope Fallback",Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--slate)}
.hx-it{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:16px;text-decoration:none;color:var(--ink);transition:background-color .15s}
.hx-it:hover,.hx-it[aria-current]{background:var(--mist)}
.hx-it b{display:block;font:700 15px/1.3 Manrope,"Manrope Fallback",Arial,sans-serif}
.hx-it small{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--slate)}
.hx-it:not(.has-ic) b{font-weight:600}
/* No lone wrapped word in any menu line (AK): names, one-liners and tour titles wrap evenly */
.hx-it b,.hx-it small,.hx-tour b,.hx-more{text-wrap:balance}
.hx-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:var(--mist);box-shadow:inset 0 0 0 1px var(--lav);color:var(--ink);transition:background-color .15s}
.hx-ic svg{width:20px;height:20px}
.hx-it:hover .hx-ic{background:#ffffff}
.hx-more{display:inline-block;margin:8px 12px 0;padding:4px 0;font:700 14px/1.4 Manrope,"Manrope Fallback",Arial,sans-serif;color:var(--ink);text-decoration:underline 2px var(--gold);text-underline-offset:4px}
.hx-tour{flex:none;align-self:flex-start;width:264px;display:flex;flex-direction:column;padding:8px;border-radius:16px;background:var(--mist);text-decoration:none;color:var(--ink);transition:background-color .15s}
.hx-tour:hover{background:var(--lav)}
.hx-tour img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:12px}
.hx-tour .hx-drop-h{margin:0 4px 4px}
.hx-tour b{margin:0 4px 4px;font:700 15px/1.3 Manrope,"Manrope Fallback",Arial,sans-serif}
.hx-actions{display:flex;align-items:center;gap:8px;flex:none}
.hx-login{color:#ffffff;font:600 14px/1 Manrope,"Manrope Fallback",Arial,sans-serif;padding:9px 12px;text-decoration:none;white-space:nowrap}
.hx-signup,.hx-demo{position:relative;font:700 14px/1 Manrope,"Manrope Fallback",Arial,sans-serif;padding:9px 16px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:background-color .15s,transform .16s var(--ease)}
.hx-signup{background:var(--gold);color:var(--ink)}
.hx-signup:hover{background:var(--gold-dk)}
.hx-demo{background:rgba(255,255,255,.12);color:#ffffff}
.hx-demo:hover{background:rgba(255,255,255,.2)}
.hx-signup:active,.hx-demo:active{transform:scale(.96)}
/* 44x44 hit box (negative margin keeps the pill layout at 36px); the visible disc is the ::after layer */
.hx-burger{display:none;position:relative;isolation:isolate;touch-action:manipulation;width:44px;height:44px;margin:-4px;border-radius:50%;background:none;border:0;color:#ffffff;align-items:center;justify-content:center;cursor:pointer}
.hx-burger::after{content:"";position:absolute;inset:4px;border-radius:50%;background:rgba(255,255,255,.1);z-index:-1}

  /* the panel hangs from the nav row, not the pill, so it stays put while the pill grows back from compact */html.hx-desk /* Oct 19 (Krish K-024/K-272): no animated max-width any more. The width used to tween between the full and compact
     pill while its content had already switched, so 'Book a demo' was cut ('Bo...') mid-change. The pill now switches
     size at once and settles with a short fade (two keyframe names so it replays both ways). */
  .hx-nav-pill{position:static;animation:hx-pill-b .26s cubic-bezier(.23,1,.32,1)}
  html.hx-desk .hx-nav.hx-compact .hx-nav-pill{animation-name:hx-pill-a}
  /* centred under the nav (AK, Oct 16): the shared panel grows from the middle as it resizes */html.hx-desk .hx-panel,html.hx-desk .hx-drop{left:0;right:0;margin-inline:auto}
  html.hx-desk .hx-menu,html.hx-desk .hx-login{transition:opacity .25s}
  html.hx-desk .hx-nav.hx-compact:not(:hover):not(:focus-within) .hx-nav-pill{max-width:600px}
  html.hx-desk .hx-nav.hx-compact:not(:hover):not(:focus-within) :is(.hx-menu,html.hx-desk .hx-login){opacity:0;visibility:hidden;position:absolute;pointer-events:none}
  /* compact pill hugs its content (AK, Oct 17): logo, "Start free trial" and "Book a demo" sit together
     with a 20px gap instead of spreading across the 600px cap. Hover or focus still opens the full pill. */html.hx-desk .hx-nav.hx-compact:not(:hover):not(:focus-within) .hx-nav-pill{width:max-content;margin-inline:auto;justify-content:center;gap:20px}
@media (min-width:1241px){
  /* the panel hangs from the nav row, not the pill, so it stays put while the pill grows back from compact */html:not(.hx-nd) /* Oct 19 (Krish K-024/K-272): no animated max-width any more. The width used to tween between the full and compact
     pill while its content had already switched, so 'Book a demo' was cut ('Bo...') mid-change. The pill now switches
     size at once and settles with a short fade (two keyframe names so it replays both ways). */
  .hx-nav-pill{position:static;animation:hx-pill-b .26s cubic-bezier(.23,1,.32,1)}
  html:not(.hx-nd) .hx-nav.hx-compact .hx-nav-pill{animation-name:hx-pill-a}
  /* centred under the nav (AK, Oct 16): the shared panel grows from the middle as it resizes */html:not(.hx-nd) .hx-panel,html:not(.hx-nd) .hx-drop{left:0;right:0;margin-inline:auto}
  html:not(.hx-nd) .hx-menu,html:not(.hx-nd) .hx-login{transition:opacity .25s}
  html:not(.hx-nd) .hx-nav.hx-compact:not(:hover):not(:focus-within) .hx-nav-pill{max-width:600px}
  html:not(.hx-nd) .hx-nav.hx-compact:not(:hover):not(:focus-within) :is(.hx-menu,html:not(.hx-nd) .hx-login){opacity:0;visibility:hidden;position:absolute;pointer-events:none}
  /* compact pill hugs its content (AK, Oct 17): logo, "Start free trial" and "Book a demo" sit together
     with a 20px gap instead of spreading across the 600px cap. Hover or focus still opens the full pill. */html:not(.hx-nd) .hx-nav.hx-compact:not(:hover):not(:focus-within) .hx-nav-pill{width:max-content;margin-inline:auto;justify-content:center;gap:20px}
}

  html.hx-nd:not(.hx-desk) .hx-menu{display:none}
  html.hx-nd:not(.hx-desk) .hx-burger{display:inline-flex}
  html.hx-nd:not(.hx-desk) .hx-login,html.hx-nd:not(.hx-desk) .hx-demo{display:none}
  html.hx-nd:not(.hx-desk) .hx-nav.open .hx-menu{display:flex;flex-direction:column;align-items:stretch;position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--ink);border-radius:24px;padding:12px;gap:2px;max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow:auto;overscroll-behavior:contain;box-shadow:0 32px 64px -24px rgba(17,10,51,.35)}
  html.hx-nd:not(.hx-desk) .hx-menu>li>a,html.hx-nd:not(.hx-desk) .hx-menu>li>button{width:100%;min-height:48px;justify-content:space-between;font-size:16px;padding:12px}
  html.hx-nd:not(.hx-desk) .hx-drop{position:static;display:none;width:auto;max-width:none;padding:0 0 8px;background:none;box-shadow:none;border-radius:0;opacity:1;visibility:visible;transform:none;transition:none}
  html.hx-nd:not(.hx-desk) .hx-drop::before,html.hx-nd:not(.hx-desk) .hx-tour,html.hx-nd:not(.hx-desk) .hx-it small,html.hx-nd:not(.hx-desk) .hx-ic{display:none}
  html.hx-nd:not(.hx-desk) .hx-menu>li.is-open .hx-drop{display:block;transform:none}
  html.hx-nd:not(.hx-desk) .hx-drop-cols{flex-direction:column;gap:8px}
  html.hx-nd:not(.hx-desk) .hx-drop-col{width:auto}
  html.hx-nd:not(.hx-desk) .hx-panel{display:none}
  html.hx-nd:not(.hx-desk) .hx-drop-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  html.hx-nd:not(.hx-desk) .hx-drop-h{color:rgba(255,255,255,.72);margin:8px 12px 4px}
  html.hx-nd:not(.hx-desk) .hx-it{min-height:44px;padding:8px 12px;color:#ffffff;border-radius:12px}
  html.hx-nd:not(.hx-desk) .hx-it:hover,html.hx-nd:not(.hx-desk) .hx-it[aria-current]{background:rgba(255,255,255,.08)}
  html.hx-nd:not(.hx-desk) .hx-it b{font-weight:600}
  html.hx-nd:not(.hx-desk) .hx-more{color:#ffffff;padding:12px 0}
  /* Sign up, Login and Book a demo stay pinned to the foot of the drawer while a section is open (Oct 19), so they are never scrolled out of reach on a short phone screen */html.hx-nd:not(.hx-desk) .hx-menu-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;padding:12px 0;border-top:1px solid rgba(255,255,255,.12);position:sticky;bottom:-12px;margin-bottom:-12px;background:var(--ink);z-index:1}
  /* an open drawer always stacks above a cookie banner (the banner is z-index 999999) */html.hx-nd:not(.hx-desk) .hx-nav.open{z-index:1000001}
  html.hx-nd:not(.hx-desk) .hx-menu-cta a{flex:1 1 120px;text-align:center;padding:14px 16px;border-radius:999px;color:#ffffff;font:700 15px/1 Manrope,"Manrope Fallback",Arial,sans-serif;text-decoration:none;background:rgba(255,255,255,.12)}
@media (max-width:1240px){
  html:not(.hx-nd) .hx-menu{display:none}
  html:not(.hx-nd) .hx-burger{display:inline-flex}
  html:not(.hx-nd) .hx-login,html:not(.hx-nd) .hx-demo{display:none}
  html:not(.hx-nd) .hx-nav.open .hx-menu{display:flex;flex-direction:column;align-items:stretch;position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--ink);border-radius:24px;padding:12px;gap:2px;max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow:auto;overscroll-behavior:contain;box-shadow:0 32px 64px -24px rgba(17,10,51,.35)}
  html:not(.hx-nd) .hx-menu>li>a,html:not(.hx-nd) .hx-menu>li>button{width:100%;min-height:48px;justify-content:space-between;font-size:16px;padding:12px}
  html:not(.hx-nd) .hx-drop{position:static;display:none;width:auto;max-width:none;padding:0 0 8px;background:none;box-shadow:none;border-radius:0;opacity:1;visibility:visible;transform:none;transition:none}
  html:not(.hx-nd) .hx-drop::before,html:not(.hx-nd) .hx-tour,html:not(.hx-nd) .hx-it small,html:not(.hx-nd) .hx-ic{display:none}
  html:not(.hx-nd) .hx-menu>li.is-open .hx-drop{display:block;transform:none}
  html:not(.hx-nd) .hx-drop-cols{flex-direction:column;gap:8px}
  html:not(.hx-nd) .hx-drop-col{width:auto}
  html:not(.hx-nd) .hx-panel{display:none}
  html:not(.hx-nd) .hx-drop-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  html:not(.hx-nd) .hx-drop-h{color:rgba(255,255,255,.72);margin:8px 12px 4px}
  html:not(.hx-nd) .hx-it{min-height:44px;padding:8px 12px;color:#ffffff;border-radius:12px}
  html:not(.hx-nd) .hx-it:hover,html:not(.hx-nd) .hx-it[aria-current]{background:rgba(255,255,255,.08)}
  html:not(.hx-nd) .hx-it b{font-weight:600}
  html:not(.hx-nd) .hx-more{color:#ffffff;padding:12px 0}
  /* Sign up, Login and Book a demo stay pinned to the foot of the drawer while a section is open (Oct 19), so they are never scrolled out of reach on a short phone screen */html:not(.hx-nd) .hx-menu-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;padding:12px 0;border-top:1px solid rgba(255,255,255,.12);position:sticky;bottom:-12px;margin-bottom:-12px;background:var(--ink);z-index:1}
  /* an open drawer always stacks above a cookie banner (the banner is z-index 999999) */html:not(.hx-nd) .hx-nav.open{z-index:1000001}
  html:not(.hx-nd) .hx-menu-cta a{flex:1 1 120px;text-align:center;padding:14px 16px;border-radius:999px;color:#ffffff;font:700 15px/1 Manrope,"Manrope Fallback",Arial,sans-serif;text-decoration:none;background:rgba(255,255,255,.12)}
}
/* Mid widths (AK, Oct 17): with the menu links tucked into the burger the pill hugs its content, so the
   logo, "Start free trial" and the burger sit together instead of a long empty gap. The open menu panel
   is anchored to the nav row, so it still spans the full width. */
@media (min-width:521px){
  html.hx-nd:not(.hx-desk) .hx-nav-pill{position:static;width:fit-content;max-width:100%;gap:32px}
  html.hx-nd:not(.hx-desk) .hx-nav.open .hx-menu{left:16px;right:16px}
}@media (min-width:521px) and (max-width:1240px){
  html:not(.hx-nd) .hx-nav-pill{position:static;width:fit-content;max-width:100%;gap:32px}
  html:not(.hx-nd) .hx-nav.open .hx-menu{left:16px;right:16px}
}
@media (max-width:520px){.hx-nav{padding:8px 12px 0}.hx-nav-pill{height:42px;padding:3px 3px 3px 14px}.hx-logo img{height:22px;width:auto}.hx-signup{padding:9px 14px;font-size:13px}}
@media (max-width:400px){.hx-nav{padding:8px 8px 0}.hx-nav-pill{height:42px;padding:3px 3px 3px 12px}.hx-logo img{height:20px;width:auto}.hx-signup{padding:9px 12px;font-size:13px}}
@media (max-width:359px){.hx-signup{display:none}.hx-menu-cta .hx-su{display:block;flex-basis:100%;background:var(--gold);color:var(--ink)}}

/* ---------- Footer, on one centre axis: brand line; link groups; wordmark; badges row; legal and .txt ----------
   Reveal (AK's Oct 16 recording; shell.js drives it from scroll position, transforms only):
   when the whole footer fits on the screen, its rows arrive a little low and rise into place,
   top row first, so a heading is always on screen before its links; the wordmark letters climb out of their clipped baseline, left to right.
   Every layer's resting place is its normal position (no hidden-by-default CSS), so no JS,
   reduced motion and the end of the page all show the plain footer. Compact on purpose (AK):
   nearly all of it fits a laptop screen at the end of the page. */
.hx-foot{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--ink);color:#ffffff;font-family:Manrope,"Manrope Fallback",Arial,sans-serif}
/* the gold ring on the ink footer even where a page styles its own focus ring (e.g. /pricing sets violet, which vanishes on ink) */
.hx-foot.hx-foot :focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hx-foot.is-live .hx-foot-inner>*,.hx-foot.is-live .hx-wm-l{will-change:transform}
.hx-foot-stage{padding:40px 24px calc(24px + env(safe-area-inset-bottom))}
.hx-foot-inner{max-width:1180px;margin:0 auto}
/* Brand line centred; the back-to-top button sits at the right of the same row */
.hx-foot-top{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;padding:0 72px;margin-bottom:24px}
body .hx-foot .hx-foot-tag{margin:0;font:700 clamp(28px,1rem + 1.6vw,40px)/1.08 "Cabinet Grotesk","Cabinet Fallback",Manrope,"Manrope Fallback",Arial,sans-serif;letter-spacing:-.03em;color:#ffffff;text-align:center;text-wrap:balance}
.hx-foot-up{position:absolute;right:0;top:-6px;display:grid;place-items:center;width:56px;height:56px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06);color:#ffffff;cursor:pointer;touch-action:manipulation;transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .16s var(--ease)}
.hx-foot-up svg{transition:transform .2s var(--ease)}
@media (hover:hover) and (pointer:fine){.hx-foot-up:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}.hx-foot-up:hover svg{transform:translateY(-2px)}}
.hx-foot-up:active{transform:scale(.96)}
/* The nav's two CTAs, here too: the nav steps away once the footer is in view */
.hx-foot-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.hx-foot-demo{font:700 15px/1 Manrope,"Manrope Fallback",Arial,sans-serif;padding:13px 18px;border-radius:999px;text-decoration:none;white-space:nowrap;background:rgba(255,255,255,.12);transition:background-color .15s,transform .16s var(--ease)}
.hx-foot .hx-foot-demo,.hx-foot .hx-foot-demo:hover{color:#ffffff}
.hx-foot .hx-signup,.hx-foot .hx-signup:hover{color:var(--ink)}
.hx-foot-demo:hover{background:rgba(255,255,255,.2)}
.hx-foot-demo:active{transform:scale(.96)}
.hx-foot-cta a{display:inline-block}
/* Link groups (AK): each heading centred over its group, the list centred under it; hairlines
   that fade out at both ends sit between the groups and above and below them, so the area is
   ruled but never boxed in. Products runs as two lists under one heading. */
.hx-foot-cols{--gap:clamp(36px,4.4vw,64px);position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(5,max-content);justify-content:center;gap:32px var(--gap);padding:24px 0}
.hx-foot-cols::before,.hx-foot-cols::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.16) 18%,rgba(255,255,255,.16) 82%,rgba(255,255,255,0))}
.hx-foot-cols::before{top:0}
.hx-foot-cols::after{bottom:0}
.hx-fc{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.hx-fc::before{content:"";position:absolute;left:calc(var(--gap) / -2);top:4px;bottom:4px;width:1px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.14) 22%,rgba(255,255,255,.14) 78%,rgba(255,255,255,0))}
.hx-fc:first-child::before{display:none}
.hx-fc-list{display:grid;justify-items:center;text-align:center;max-width:100%}
.hx-fc:first-child .hx-fc-list{grid-auto-flow:column;grid-template-rows:repeat(var(--rows,7),auto);column-gap:40px}
body .hx-foot h2{margin:0 0 6px;font:700 12px/1.4 "Cabinet Grotesk",Cabinetgrotesk,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--gold);text-align:center}
.hx-foot-cols a{display:block;padding:3px 0;font-size:14px;line-height:1.4;text-wrap:balance}
.hx-foot a{color:rgba(255,255,255,.88);text-decoration:none;transition:color .15s}
.hx-foot a:hover{color:var(--gold)}
.hx-disclaimer{margin:24px auto 0;max-width:820px;text-align:center;font-size:13px;line-height:1.6;color:rgba(255,255,255,.68)}
/* The wordmark, centred under the links: one SVG per letter inside a box of the artwork's
   proportions. The box is the clipped baseline the letters climb out of; the mask fades their
   feet into the ink, as the original artwork's gradient did. */
.hx-foot-mark{position:relative;width:min(100%,600px);margin:20px auto 0;aspect-ratio:1440/191;overflow:hidden;color:rgba(221,214,255,.3);-webkit-mask-image:linear-gradient(180deg,#000 50%,rgba(0,0,0,.3) 100%);mask-image:linear-gradient(180deg,#000 50%,rgba(0,0,0,.3) 100%);pointer-events:none;user-select:none}
.hx-wm-l{position:absolute;display:block;fill:currentColor;overflow:visible}
/* Bottom area, centred (AK): the mission line; badges and socials; legal and .txt */
.hx-foot-util{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:14px;text-align:center}
.hx-foot-id{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 16px}
.hx-foot-mission{margin:0;font-size:13px;line-height:1.4;color:rgba(255,255,255,.72);text-wrap:balance}
.hx-foot-proof{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 0}/* groups are spaced by one even 16 + divider + 16 (Oct 19 AK: odd gap before the socials) */
.hx-badges{display:flex;align-items:center;gap:0}
.hx-badges span{display:flex;align-items:center;gap:8px}
.hx-badges span+span{margin-left:16px;padding-left:16px;border-left:1px solid rgba(255,255,255,.18)}
.hx-badges img{width:56px;height:56px;object-fit:contain;padding:4px;border-radius:12px;background:rgba(255,255,255,.08)}
.hx-social{display:flex;gap:8px}
.hx-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);color:#ffffff;transition:background-color .15s,color .15s}
.hx-social a:hover{background:rgba(255,255,255,.16);color:var(--gold)}
.hx-social svg{width:18px;height:18px}
.hx-social{align-items:center;border-left:1px solid rgba(255,255,255,.18);padding-left:16px;margin-left:16px}
@media (max-width:600px){.hx-social{border-left:0;padding-left:0;margin-left:0}}
.hx-foot-base{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 24px;font-size:13px}
.hx-legal,.hx-txt{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px}
.hx-legal span{color:rgba(255,255,255,.72)}
.hx-legal>*+*::before{content:"";display:inline-block;width:3px;height:3px;margin-right:10px;border-radius:50%;background:rgba(255,255,255,.4);vertical-align:middle}
.hx-foot .hx-legal a{color:#ffffff}
.hx-foot .hx-legal a:hover,.hx-foot .hx-txt a:hover{color:var(--gold)}
.hx-txt{gap:4px 14px;font-size:12px}
.hx-foot .hx-txt a{color:rgba(255,255,255,.62)}
@media (min-width:1101px){.hx-txt{padding-left:24px;border-left:1px solid rgba(255,255,255,.14)}}
/* The phone row button for each link group (see below) does not exist on wider screens: the plain heading shows */
.hx-fc-t{display:none}
/* ---------- Footer under 1101px (AK, Oct 19: "the footer needs to be better on mobile") ----------
   Tablets and phones: every link, legal link and social a 44px target, every footer text at least 14px,
   CTAs 44px tall. Desktop above 1100px is untouched. */
@media (max-width:1100px){
  body .hx-foot h2{font-size:14px}
  .hx-foot-cta a{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
  .hx-foot-mission,.hx-foot-base,.hx-txt,.hx-disclaimer{font-size:14px}
  .hx-disclaimer a{display:inline-block;padding-block:12px;margin-block:-12px}   /* the email link in the comparison disclaimer: a 44px tall tap area, same line height */
  .hx-foot-cols a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0}
  .hx-legal a,.hx-txt a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0}
  .hx-social a{width:44px;height:44px}
}
/* Tablets, 768 to 1100px: Products runs as two rows across the width (as many columns as its desktop list
   has rows), the other four groups sit side by side under it, so the link area is a short, even block */
@media (min-width:768px) and (max-width:1100px){
  .hx-foot-cols{--gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));justify-content:stretch;gap:20px var(--gap)}
  .hx-fc:first-child{grid-column:1/-1}
  .hx-fc:first-child .hx-fc-list{display:flex;flex-wrap:wrap;justify-content:center;column-gap:12px}.hx-fc:first-child .hx-fc-list a{min-width:0;padding-inline:6px}/* even gaps: a flex row, not a grid whose columns follow the widest link (AK Oct 19) */
  .hx-fc:nth-child(2)::before{display:none}
}
/* Phones, up to 767px. The brand line: the tagline, then Start free trial, Book a demo and back to top on
   one row (the button drops under them only on the narrowest phones). The link groups: one 52px row per
   group with its name, a peek at its first links and a chevron; a tap opens its links in two columns,
   left-aligned so the eye runs down a list. No JS: every group stays open under its plain heading. */
@media (max-width:767px){
  .hx-foot-stage{padding:40px 16px calc(24px + env(safe-area-inset-bottom))}
  .hx-foot-top{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 8px;padding:0;margin-bottom:24px}
  body .hx-foot .hx-foot-tag{flex:1 1 100%}
  .hx-foot-cta{display:contents}
  .hx-foot .hx-signup{font-size:15px;padding:13px 18px}
  .hx-foot-up{position:static;width:44px;height:44px}
  .hx-foot-cols{display:block;padding:4px 0}
  .hx-fc{display:block}
  .hx-fc::before{display:none}
  .hx-fc+.hx-fc{border-top:1px solid rgba(255,255,255,.1)}
  body .hx-foot .hx-fc h2{margin:0;text-align:left}
  .hx-foot:not(.hx-acc) .hx-fc h2{padding:16px 0 4px}
  .hx-fc-list,.hx-fc:first-child .hx-fc-list{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(var(--rows,4),auto);column-gap:16px;justify-items:stretch;text-align:left;padding-bottom:8px}
  .hx-foot-cols a{justify-content:flex-start;font-size:15px;white-space:nowrap}
  .hx-acc .hx-fc-name{display:none}
  .hx-acc .hx-fc-t{display:flex;align-items:baseline;gap:12px;width:100%;min-height:52px;margin:0;padding:15px 0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:opacity .1s}
  .hx-acc .hx-fc-t:active{opacity:.72}
  .hx-fc-n{flex:none}
  .hx-fc-peek{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 14px/1.4 Manrope,"Manrope Fallback",Arial,sans-serif;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.6);transition:opacity .16s var(--ease)}
  .hx-fc-chev{flex:none;align-self:center;margin-left:auto;color:rgba(255,255,255,.72);transition:transform .22s var(--ease)}
  .hx-acc .hx-fc:not(.is-open) .hx-fc-list{display:none}
  .hx-fc.is-open .hx-fc-peek{opacity:0}
  .hx-fc.is-open .hx-fc-chev{transform:rotate(180deg)}
  .hx-acc .hx-fc.is-open .hx-fc-list{animation:hx-fc-in .24s var(--ease)}
  .hx-foot-mark{margin-top:24px}
  .hx-foot-util{gap:12px;margin-top:16px;padding-top:16px}
  .hx-badges img{width:52px;height:52px}
  .hx-foot-base{flex-direction:column;gap:0}
  .hx-legal,.hx-txt{gap:0 16px}
  .hx-legal span{flex:1 1 100%;margin-bottom:4px}
  .hx-legal>*+*::before{display:none}
}
@media (hover:hover) and (pointer:fine) and (max-width:767px){.hx-acc .hx-fc-t:hover .hx-fc-peek{color:rgba(255,255,255,.8)}}
/* Narrow phones: the long link names take a full row in an open group (two columns cannot hold them under 400px); under 360px the legal links run as rows of three */
@media (max-width:399px){
  /* W5 (Oct 26 PM): source order is kept (no dense packing: it pulled People Intelligence above Account Intelligence). 22+ char names take a full row here;
     under 360px every 20+ char name does, plus the short link before it (is-solo, set in partials/hx-footer) so no link sits alone beside an empty half. */
  .hx-fc-list,.hx-fc:first-child .hx-fc-list{grid-auto-flow:row;grid-template-rows:none}
  .hx-fc-list a.is-xl{grid-column:1/-1}
  /* odd link count (Solutions 7, Partners 3, Company 7): the last link takes the full row, never alone in a column (Oct 20) */
  .hx-fc-list a:last-child:nth-child(odd){grid-column:1/-1}
  /* Partners (3 links, one long name): one full-width row per link, so Sandler is never alone beside an empty half (Oct 20) */
  .hx-fc:nth-child(4) .hx-fc-list a{grid-column:1/-1}
}
@media (max-width:359px){
  .hx-fc:not(.hx-fc--split:not(:first-child)) .hx-fc-list a:is(.is-long,.is-solo){grid-column:1/-1}   /* Library keeps its two reading-down lists (shared/foot.css) */
  .hx-legal{display:grid;grid-template-columns:repeat(3,max-content);justify-content:center}
  .hx-legal span{grid-column:1/-1}
  /* the nav drops its own Sign up pill under 360px (it moves into the menu); the footer's stays */
  .hx-foot .hx-signup{display:inline-flex}
  .hx-foot .hx-signup,.hx-foot-demo{padding:13px 14px}
}
@keyframes hx-pill-a{from{opacity:.4;transform:translateY(-3px)}}
@keyframes hx-pill-b{from{opacity:.4;transform:translateY(-3px)}}
@keyframes hx-fc-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes hx-fc-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.hx-fc-chev{transition:none}.hx-acc .hx-fc.is-open .hx-fc-list{animation:hx-fc-fade .15s linear}}
/* The "Cookie Policy" tab the vendor pins bottom-left after a choice would sit on the footer's last row: leave room for it (Oct 19) */
@media (max-width:860px){body:has(.cc-revoke:not([style*="none"])) .hx-foot-stage{padding-bottom:calc(64px + env(safe-area-inset-bottom))}}

/* ---------- Cookie banners (Oct 19, AK: "the navbar is barely working" on his phone) ----------
   GTM injects two banners (the cookieconsent card .cc-window on every page, the Klaro notice on some
   older ones). /css/cookie-consent-theme.css pins both to top:106px on phones, written for the old
   90px Webflow navbar, at z-index 999999. On the V2 nav that put the banner over the open menu
   (Products, Solutions, Library, Partners could not be tapped) and over the footer links; and once
   the vendor fades the banner out (.cc-invisible, opacity 0) it kept swallowing taps. Fixes, all here
   because shell.css is stamped (the theme file is linked as ?v=4) and every rule needs the extra
   specificity to beat the theme's !important:
   1. a faded-out banner takes no taps and leaves the tab order;
   2. on phones and tablets the banner is a compact card at the bottom, clear of the nav, and the
      footer keeps room for it so no footer link is ever stuck under it;
   3. the open menu stacks above it (.hx-nav.open above). */
html body .cc-window.cc-invisible{pointer-events:none !important;visibility:hidden !important;transition:opacity 1s,visibility 0s linear 1s !important}
@media (max-width:860px){
  html body .cc-window,html body #klaro-cookie-notice{top:auto !important;bottom:calc(12px + env(safe-area-inset-bottom)) !important;left:12px !important;right:12px !important;width:auto !important;max-width:none !important;margin:0 !important;padding:14px 16px !important;gap:10px !important;max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow:auto}
  html body .cc-window .cc-message::before{display:none}
  html body .cc-window .cc-message{font-size:14px !important;line-height:20px !important}
  html body .cc-window .cc-btn{min-height:44px !important;padding:12px 16px !important}
  html body #klaro-cookie-notice h2{font-size:16px !important;margin:0 0 6px !important}
  html body #klaro-cookie-notice p{font-size:14px !important;line-height:1.4 !important;margin:0 0 10px !important}
  html body #klaro-cookie-notice br{display:none}
  html body #klaro-cookie-notice .cn-buttons{flex-wrap:nowrap !important;gap:8px !important}
  html body #klaro-cookie-notice .cm-btn{min-height:44px !important;padding:10px 14px !important;flex:0 0 auto !important}
  html body #klaro-cookie-notice .cm-customize-link{flex:1 1 auto !important;flex-basis:auto !important;display:flex !important;align-items:center;justify-content:center;min-height:44px;font-size:14px !important}
  /* room at the end of the page so the banner never sits on a footer link */
  body:has(.cc-window:not(.cc-invisible)) .hx-foot-stage{padding-bottom:calc(176px + env(safe-area-inset-bottom))}
  body:has(#klaro-cookie-notice:not([style*="none"])) .hx-foot-stage{padding-bottom:calc(296px + env(safe-area-inset-bottom))}
}
@media (max-width:400px){body:has(#klaro-cookie-notice:not([style*="none"])) .hx-foot-stage{padding-bottom:calc(352px + env(safe-area-inset-bottom))}}

/* ---------- Second opinion (Amar C2): the live homepage callout, persistent bottom-left ----------
   Card values are the live callout's (views/aeo-llm-callout.ejs at HEAD). Collapsed it is a
   labelled pill, never a round bubble like the HubSpot chat bottom-right; open, the card takes
   the pill's place. Sits under the nav (1000), the chat (9990) and the cookie banner (999999). */
.hx-so{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:900;font-family:Manrope,"Manrope Fallback",Arial,Helvetica,sans-serif;transition:transform .3s var(--ease),opacity .3s var(--ease),visibility .3s}
.hx-so-pill,.hx-so-card{background:linear-gradient(150deg,#110A33,#120a3a);border:1px solid rgba(255,255,255,.08);color:#ffffff;box-shadow:0 18px 48px rgba(17,10,51,.32)}
.hx-so-pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 16px 6px 8px;border-radius:999px;font:700 14px/1 Manrope,"Manrope Fallback",Arial,sans-serif;cursor:pointer;touch-action:manipulation;transition:transform .16s var(--ease),opacity .2s var(--ease),visibility .2s}
.hx-so-pill:active{transform:scale(.96)}
.hx-so-pill .hx-so-logos{gap:0;margin:0}
.hx-so-pill .hx-so-logos span{width:24px;height:24px;box-shadow:0 0 0 2px #160c45}
.hx-so-pill .hx-so-logos span+span{margin-left:-6px}
.hx-so-pill svg{width:13px;height:13px}
.hx-so-card{position:absolute;left:0;bottom:0;width:316px;max-width:calc(100vw - 32px);padding:18px 18px 16px;border-radius:18px;transform-origin:bottom left;opacity:0;visibility:hidden;transform:scale(.96);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
.hx-so.is-open .hx-so-card{opacity:1;visibility:visible;transform:none}
.hx-so.is-open .hx-so-pill{opacity:0;visibility:hidden}
.hx-so-x{position:absolute;top:10px;right:10px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;padding:0;background:rgba(255,255,255,.08);border:none;border-radius:50%;color:rgba(255,255,255,.6);font-family:inherit;font-size:14px;line-height:1;cursor:pointer;transition:background .15s,color .15s}
.hx-so-x::before{content:"";position:absolute;inset:-8px}
.hx-so-x:hover{background:rgba(255,255,255,.16);color:#ffffff}
.hx-so-eyebrow{display:flex;align-items:center;gap:7px;margin-bottom:9px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ffc61e}
.hx-so-dot{width:6px;height:6px;border-radius:50%;background:#ffc61e;flex-shrink:0}
.hx-so-t{margin:0 0 14px;padding-right:18px;font-size:15.5px;font-weight:600;line-height:1.45;color:#ffffff}
.hx-so-logos{display:flex;align-items:center;gap:9px;margin-bottom:15px}
.hx-so-logos span{width:27px;height:27px;display:flex;align-items:center;justify-content:center;background:#ffffff;border-radius:50%;flex-shrink:0}
.hx-so-card .hx-so-logos{gap:0;margin:-6px 0 9px -6px}
.hx-so-card .hx-so-logos a{display:grid;place-items:center;width:39px;height:39px;border-radius:50%;transition:transform .16s var(--ease)}
.hx-so-card .hx-so-logos a:hover{transform:translateY(-1px)}
.hx-so-go{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:10px;background:#ffc61e;color:#110A33;border:none;border-radius:100px;font:700 13.5px/1.4 Manrope,"Manrope Fallback",Arial,sans-serif;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.hx-so-go:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(253,183,20,.35)}
/* Out of the way only under the open mobile menu and when shell.js tucks it away (10s to 25s after
   it appears, and the last 120px of a scrolling page over the legal row). Never tied to scrolling or
   the nav hiding (AK, Oct 17). */
body:has(.hx-nav.open) .hx-so,.hx-so.is-away{transform:translateY(calc(100% + 32px));opacity:0;pointer-events:none}
.hx-so.is-away{visibility:hidden}   /* tucked away: out of the tab order too */
.hx-so.is-cover{opacity:0;visibility:hidden;pointer-events:none}   /* a link or button sits under it at any width: shell.js steps it aside */
/* Once a cookie choice is made the banner leaves a "Cookie Policy" tab at the bottom-left edge: sit above it. */
body:has(.cc-revoke:not([style*="none"])) .hx-so{bottom:calc(52px + env(safe-area-inset-bottom))}
/* Phones: the open card spans the width (as live) and rises clear of the chat button when it exists. */
@media (max-width:600px){.hx-so-card{width:calc(100vw - 32px)}body:has(#hubspot-messages-iframe-container) .hx-so-card{bottom:72px}}
/* AK Oct 19, phones under 768px: the pill collapses to a round 48px logo button so it stops covering the hero
   buttons at 320 and 390. The label stays for screen readers (visually hidden). Desktop is unchanged. */
@media (max-width:767px){
  .hx-so-pill{width:48px;height:48px;min-height:48px;padding:0;gap:0;justify-content:center;border-radius:50%}
  .hx-so-pill .hx-so-lbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .hx-so-pill .hx-so-logos span{width:18px;height:18px}
  .hx-so-pill .hx-so-logos span+span{margin-left:-5px}
  .hx-so-pill svg{width:11px;height:11px}
  .hx-so.is-cover{opacity:0;visibility:hidden;pointer-events:none}   /* a button sits under it: shell.js steps it aside */
}
/* Phones (Oct 18): 44px tap areas. Each hit area is a ::before layer, so the pill, logo and logos keep their size. */
@media (max-width:767px){
  .hx-nav .hx-logo,.hx-nav .hx-signup,.hx-so-card .hx-so-logos a{position:relative}
  .hx-nav .hx-logo::before,.hx-nav .hx-signup::before,.hx-so-card .hx-so-logos a::before{content:"";position:absolute;top:50%;height:44px;margin-top:-22px;left:0;right:0}
  .hx-so-card .hx-so-logos a::before{left:-3px;right:-3px}
}

/* ---------- Sticky-header offset for every section id (deep links, Amar R5) ---------- */
body.hai [id]{scroll-margin-top:84px}
body:not(.hai) [id]{scroll-margin-top:84px}   /* older pages: same slim fixed nav (56px from the top) */
@media (max-width:520px){body.hai [id],body:not(.hai) [id]{scroll-margin-top:72px}}

@media (prefers-reduced-motion:reduce){.hx-nav-pill{animation:none !important}.hx-panel,.hx-menu .hx-drop{transition:none}.hx-nav,.hx-drop,.hx-so,.hx-so-pill,.hx-so-go,.hx-so-card .hx-so-logos a{transition:opacity .15s}.hx-so-card{transform:none;transition:opacity .15s,visibility .15s}body:has(.hx-nav.open) .hx-so,.hx-so.is-away{transform:none}.hx-foot-up{transition:background-color .15s,border-color .15s,color .15s}.hx-foot-up svg{transition:none}.hx-foot-up:hover svg,.hx-foot-up:active{transform:none}}
@media print{.hx-so,.hx-skip{display:none}}
/* AK Oct 18: no lone word on the last line */
body.hai p, body.hai li, body.hai dd, body.hai figcaption, body.hai blockquote { text-wrap: pretty; }
body.hai h1, body.hai h2, body.hai h3, body.hai h4 { text-wrap: balance; }

/* AK Oct 19: Second opinion off the homepage = text line + bigger tap targets, no link to the homepage */
.hx-so-ask{margin:0 0 10px;font:700 13px/1.4 Manrope,"Manrope Fallback",Arial,sans-serif;color:#FFE8A5}
.hx-so--big .hx-so-card .hx-so-logos{gap:10px;margin:0 0 2px}
.hx-so--big .hx-so-card .hx-so-logos a{width:52px;height:52px}
.hx-so--big .hx-so-card .hx-so-logos a span{width:44px;height:44px}
.hx-so--big .hx-so-card .hx-so-logos a span svg,.hx-so--big .hx-so-card .hx-so-logos a span img{width:24px;height:24px}

/* ---------- Video facade + lightbox (shell.js, Krish K-023, Oct 19 A1) ----------
   Poster first, the YouTube player only after a click: no third-party weight on load (LCP stays under 2.5 s). */
.hxv{position:relative;aspect-ratio:var(--ar,16/9);border-radius:24px;overflow:hidden;background:#110a33;isolation:isolate}
.hxv>button[data-hxv]{all:unset;position:absolute;inset:0;cursor:pointer;display:block}
.hxv>button[data-hxv] img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.hxv-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:#ffc61e;color:#110a33;display:grid;place-items:center;box-shadow:0 12px 32px -12px rgba(17,10,51,.45);transition:transform .2s cubic-bezier(.23,1,.32,1)}
.hxv-play svg{width:24px;height:24px;margin-left:3px}
@media (hover:hover) and (pointer:fine){.hxv>button[data-hxv]:hover img{transform:scale(1.03)}.hxv>button[data-hxv]:hover .hxv-play{transform:scale(1.06)}}
.hxv>button[data-hxv]:active .hxv-play{transform:scale(.96)}
.hxv>button[data-hxv]:focus-visible{outline:3px solid #ffc61e;outline-offset:-3px;border-radius:24px}
.hxv iframe,.hxv-live{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
html.hxv-lock{overflow:hidden}
.hxv-dlg{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0;inset:0;display:none;place-items:center}
.hxv-dlg[open]{display:grid}
.hxv-dlg::backdrop{background:rgba(17,10,51,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hxv-dlg-box{position:relative;width:min(1040px,calc(100vw - 144px),calc((100vh - 64px) * 16 / 9));animation:hxv-in .24s cubic-bezier(.23,1,.32,1)} /* AK Oct 20: the video always fits the screen, so the close button never leaves it */
.hxv-frame{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 32px 64px -24px rgba(17,10,51,.35)}
.hxv-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hxv-x{position:absolute;right:-60px;top:0;box-shadow:0 8px 24px rgba(0,0,0,.35);width:44px;height:44px;border-radius:50%;border:0;background:#ffffff;color:#110a33;display:grid;place-items:center;cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.hxv-x:active{transform:scale(.96)}
.hxv-x:focus-visible{outline:2px solid #ffc61e;outline-offset:3px}
@keyframes hxv-in{from{opacity:0;transform:scale(.97)}}
/* Phones and narrow windows: no room at the side, so the close button sits just above the video, inside the screen. */
@media (max-width:700px){.hxv-dlg-box{width:min(1040px,calc(100vw - 24px),calc((100vh - 140px) * 16 / 9))}.hxv-x{right:0;top:-56px}}
@media (prefers-reduced-motion:reduce){.hxv-dlg-box{animation:none}.hxv>button[data-hxv] img,.hxv-play{transition:none}}

/* Oct 19 (Krish K-311/K-322, A1): menu icons. Products show their official round marks (no tile behind them); every other
   item uses one real icon set (Phosphor Regular, 20px, ink on the mist tile). */
.hx-ic.is-mark{background:none;box-shadow:none;border-radius:50%}
.hx-ic.is-mark img{width:36px;height:36px;display:block;border-radius:50%}
.hx-it:hover .hx-ic.is-mark{background:none}

/* Oct 19 (Krish K-165/K-199, A1): nav colours can't be taken over by a page's own link rule (/sales-excellence-council
   sets ".sec a { color: inherit }", which turned Login and "Book a demo" ink on the ink pill). The nav sets its own. */
.hx-nav .hx-login,.hx-nav .hx-demo,.hx-nav .hx-menu>li>a,.hx-nav .hx-menu>li>button{color:#ffffff}
.hx-nav .hx-signup,.hx-nav .hx-signup:hover{color:var(--ink)}
.hx-nav .hx-drop .hx-it,.hx-nav .hx-drop .hx-more,.hx-nav .hx-tour{color:var(--ink)}
html.hx-nd:not(.hx-desk) .hx-nav .hx-drop .hx-it,html.hx-nd:not(.hx-desk) .hx-nav .hx-drop .hx-more{color:#ffffff}html.hx-nd:not(.hx-desk) .hx-nav .hx-menu-cta a{color:#ffffff}@media (max-width:1240px){html:not(.hx-nd) .hx-nav .hx-drop .hx-it,html:not(.hx-nd) .hx-nav .hx-drop .hx-more{color:#ffffff}html:not(.hx-nd) .hx-nav .hx-menu-cta a{color:#ffffff}}
@media (max-width:359px){.hx-nav .hx-menu-cta .hx-su{color:var(--ink)}}

/* Oct 19 (Krish K-214, A1): closing the mega menu is instant. The white panel and its menu used to fade out on separate
   timers, so for a moment an empty white panel sat over the page. Panel and menu now leave together, at once; switching
   between menus (panel stays open) keeps its short cross-fade. */
html.hx-desk .hx-nav:not(.has-panel) .hx-panel,html.hx-desk .hx-nav:not(.has-panel) .hx-drop{transition:none}@media (min-width:1241px){html:not(.hx-nd) .hx-nav:not(.has-panel) .hx-panel,html:not(.hx-nd) .hx-nav:not(.has-panel) .hx-drop{transition:none}}

/* Oct 19 (Krish K-247, A1): on laptops and desktops both cookie notices are one compact bar at the bottom centre
   (message and buttons on one line, about 64px tall) instead of a tall card over the content. The footer keeps room
   for it, so no footer link is ever under the bar. Phones keep the compact bottom card above. */
@media (min-width:861px){
  html body .cc-window{left:50% !important;right:auto !important;bottom:16px !important;transform:translateX(-50%) !important;width:auto !important;max-width:min(960px,calc(100% - 48px)) !important;flex-direction:row !important;align-items:center !important;gap:20px !important;padding:12px 12px 12px 24px !important;border-radius:999px !important}
  html body .cc-window .cc-message{font-size:14px !important;line-height:20px !important}
  html body .cc-window .cc-message::before{display:none !important}
  html body .cc-window .cc-compliance{flex:none !important;width:auto !important;display:flex !important;gap:8px !important}
  html body .cc-window .cc-btn{flex:none !important;min-height:40px !important;padding:10px 18px !important;border-radius:999px !important;white-space:nowrap !important}
  html body #klaro-cookie-notice{top:auto !important;left:50% !important;right:auto !important;bottom:16px !important;transform:translateX(-50%) !important;width:auto !important;max-width:min(960px,calc(100% - 48px)) !important;margin:0 !important;padding:12px 12px 12px 24px !important;border-radius:999px !important}
  html body #klaro-cookie-notice .cn-body{display:flex !important;align-items:center !important;gap:20px !important;padding:0 !important}
  html body #klaro-cookie-notice h2{display:none !important}
  html body #klaro-cookie-notice p{margin:0 !important;font-size:14px !important;line-height:20px !important}
  html body #klaro-cookie-notice br{display:none}
  html body #klaro-cookie-notice .cn-ok{flex:none !important;display:flex !important;align-items:center !important;gap:8px !important;margin:0 !important;flex-wrap:nowrap !important}
  html body #klaro-cookie-notice .cm-btn{min-height:40px !important;padding:10px 16px !important;border-radius:999px !important;white-space:nowrap !important}
  body:has(.cc-window:not(.cc-invisible)) .hx-foot-stage,body:has(#klaro-cookie-notice:not([style*="none"])) .hx-foot-stage{padding-bottom:104px}
}

/* Oct 19 (Krish K-258, A1): Second opinion folds to a 48px round button after the first scroll, on desktop too. */
.hx-so.is-mini .hx-so-pill{width:48px;height:48px;min-height:48px;padding:0;gap:0;justify-content:center;border-radius:50%}
.hx-so.is-mini .hx-so-pill .hx-so-lbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hx-so.is-mini .hx-so-pill .hx-so-logos span{width:18px;height:18px}
.hx-so.is-mini .hx-so-pill .hx-so-logos span+span{margin-left:-5px}
.hx-so.is-mini .hx-so-pill svg{width:11px;height:11px}

/* Oct 19 (AK, A1): one icon style across every mega menu: the round filled mark (violet disc, light ring, cream glyph),
   the same look as the official product marks in Agents and Other products. */
.hx-ic.is-disc{border-radius:50%;background:linear-gradient(180deg,#5E4DA3,#7A6EB4);box-shadow:0 0 0 2px #CEADFF inset,0 2px 8px rgba(17,10,51,.12);color:#FFF9EB}
.hx-ic.is-disc svg{width:18px;height:18px}
.hx-ic.is-disc svg path{fill:currentColor}
.hx-it:hover .hx-ic.is-disc{background:linear-gradient(180deg,#5E4DA3,#7A6EB4)}

/* Oct 19 (Krish round, A12): at 320 the round button sat on the hero visual. On the narrowest phones it waits for the first
   scroll (shell.js adds is-mini after 160px), then shows as before. Hidden from the tab order until then. */
@media (max-width:359px){.hx-so:not(.is-mini):not(.is-open){opacity:0;visibility:hidden;pointer-events:none}}

/* Oct 20 guard: the mega-menu panel is positioned against the fixed .hx-nav row, never against a menu item. A page or brand sheet that
   makes a <li> a containing block (position, transform, filter, contain) used to shift the whole panel off the screen. Pinned here
   with page-proof specificity so it cannot recur; the desktop drop is also kept out of the cascade of any sheet loaded after this one. */
header.hx-nav .hx-menu>li{position:static;transform:none;filter:none;contain:none;perspective:none}
header.hx-nav .hx-nav-pill{transform:none;filter:none;contain:none;perspective:none}

/* Oct 20 (AK + Krish): the big footer mark is the real landscape logo (sun + wordmark), not faded text */
.hx-foot-mark{aspect-ratio:auto;width:min(100%,720px);overflow:visible;-webkit-mask-image:none;mask-image:none;color:inherit;display:flex;justify-content:center}
.hx-foot-mark img{display:block;width:100%;height:auto}
@media (max-width:560px){.hx-foot-mark{width:min(100%,320px)}}
/* Oct 20: on desktop the GTM Klaro notice inherited the cookieconsent pill styles (heading clipped, text overlapping
   the buttons). Give it the same compact bottom-left card as phones: heading, text, then one row of buttons. */
@media (min-width:861px){
  html body #klaro-cookie-notice{top:auto !important;bottom:24px !important;left:24px !important;right:auto !important;width:420px !important;max-width:calc(100vw - 48px) !important;margin:0 !important;padding:20px !important;border-radius:24px !important;display:block !important;box-shadow:0 12px 32px -18px rgba(17,10,51,.35) !important}
  html body #klaro-cookie-notice .cn-body{display:block !important;padding:0 !important}
  html body #klaro-cookie-notice h2{font-size:16px !important;margin:0 0 6px !important}
  html body #klaro-cookie-notice p{font-size:14px !important;line-height:1.45 !important;margin:0 0 12px !important}
  html body #klaro-cookie-notice br{display:none}
  html body #klaro-cookie-notice .cn-ok{display:flex !important;flex-direction:row !important;gap:8px !important;align-items:center;flex-wrap:wrap}
  html body #klaro-cookie-notice .cn-buttons{display:flex !important;flex-wrap:nowrap !important;gap:8px !important;margin:0 !important}
  html body #klaro-cookie-notice .cm-btn{min-height:40px !important;padding:8px 16px !important;flex:0 0 auto !important;width:auto !important}
  html body #klaro-cookie-notice .cm-customize-link{flex:0 0 auto !important;width:auto !important;min-height:40px;display:inline-flex !important;align-items:center;font-size:14px !important}
}
@media (min-width:861px){ html body #klaro-cookie-notice{transform:none !important;bottom:104px !important;left:24px !important;translate:none !important} }

/* ---------- Oct 20: rules taken from Ro's app design language ("The Briefing Room"), colours and fonts excluded ----------
   See current-campaigns/website-phase-2/03-reference/briefing-room-fit-for-website.md (changes 1-3, all SAFE). */
/* 1. One shared easing curve (expo-out, never bounce). Page files that still define their own --ease use the same feel. */
:root{--ease-out:cubic-bezier(.22,1,.36,1)}
/* 2. Reduced-motion safety net for every page, including the ones without their own block. Content never hides behind motion. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
/* 3. One visible keyboard focus ring in page content: violet ring plus a soft gold halo, readable on white, mist, cream and ink. */
main :focus-visible{outline:2px solid #341D99;outline-offset:2px;box-shadow:0 0 0 5px rgba(255,198,30,.55)}
/* Oct 20 (AK: "footer UI broken"): the four trust badges were two transparent shapes on faint tiles and two full squares,
   so the row looked uneven. Same white rounded tile for all four, badge contained inside with equal padding. */
.hx-badges img{background:#fff !important;padding:6px !important;border-radius:14px !important;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
/* FAQ spacing, heading size and behaviour are locked in views/partials/hai-faq.ejs (AK Oct 20 E2: same format on every page). */
/* Oct 20 (AK): every table heading is bold, everywhere. */
html body main th, html body main [role="columnheader"], html body th{font-weight:700 !important;color:#110A33}

/* Oct 20 night (AK): the footer CTA pair. "Start free trial" was picking up the small nav button (14px, 9px padding) beside a
   15px "Book a demo", and pages that stretch the row (block display, 41px) left its label sitting 5px high. One shared,
   flex-centred pill for both, on every page. */
html body .hx-foot .hx-foot-cta a.hx-signup,html body .hx-foot .hx-foot-cta a.hx-foot-demo{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;height:auto;padding:0 22px;font:700 15px/1 Manrope,"Manrope Fallback",Arial,sans-serif;text-align:center}

/* Oct 20 (AK, Ro rule 18): one stroke width for inline line icons. Every 24-unit icon draws its lines at 2px
   (was 1.5 to 3.2). Filled icons and logos are unaffected; stroke none stays none. */
html body :is(svg[viewBox="0 0 24 24"],svg[viewBox^="0 0 24 "],svg[viewBox^="0,0,24,24"]) :is(path,line,polyline,polygon,circle,rect,ellipse){stroke-width:2px}


/* ---------- Oct 20 (AK, competitor review A1 + B1 + B3): the quiet line under a hero CTA pair (partials/hx-hero-extras) ---------- */
.hx-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-hnote{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:20px 0 0;padding:0;font:500 14px/1.45 Manrope,"Manrope Fallback",Arial,sans-serif;color:#5b6478;text-wrap:pretty}
.hx-hnote--c{justify-content:center;text-align:center}
.hx-hnote--r{margin-top:6px}
.hx-hnote-d{color:#5b6478;opacity:.7}
.hx-hnote a{color:#110a33;font-weight:700;text-decoration:underline;text-decoration-color:rgba(17,10,51,.28);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .15s}
.hx-hnote a:hover{text-decoration-color:#110a33}
.hx-hnote a:focus-visible{outline:2px solid #110a33;outline-offset:3px;border-radius:6px}
.hx-watch{display:inline-flex;align-items:center;gap:8px;min-height:24px}
.hx-watch-disc{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:#ffc61e;color:#110a33}
.hx-watch-disc svg{margin-left:1px}
@media (max-width:767px){.hx-hnote a{display:inline-flex;align-items:center;min-height:32px}}


/* ---------- Oct 20 (AK, competitor review B5): the CTA pair stays reachable (partials/hx-nav .hx-pair, toggled by shell.js) ----------
   Desktop and tablet: a small ink pill at the top right, shown only while the nav pill is tucked away. Phones: a slim bottom bar,
   safe-area aware, hidden under the open menu and the cookie banner, with the Ask AI button and the cookie tab lifted clear of it. */
.hx-pair{position:fixed;top:12px;right:calc(16px + env(safe-area-inset-right,0px));z-index:999;display:flex;align-items:center;gap:4px;padding:3px;border-radius:999px;background:#110a33;box-shadow:0 8px 24px -12px rgba(17,10,51,.45);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s cubic-bezier(.23,1,.32,1),transform .2s cubic-bezier(.23,1,.32,1),visibility .2s}
.hx-pair.is-on{opacity:1;visibility:visible;transform:none}
.hx-pair .hx-signup,.hx-pair .hx-demo{display:inline-flex;align-items:center;justify-content:center;position:relative;font:700 13px/1 Manrope,"Manrope Fallback",Arial,sans-serif;padding:11px 14px;border-radius:999px;text-decoration:none;white-space:nowrap}
.hx-pair .hx-signup::before,.hx-pair .hx-demo::before{content:"";position:absolute;inset:-3px -2px}   /* 44px touch area on a 38px pill */
.hx-pair .hx-signup{background:#ffc61e;color:#110a33}
.hx-pair .hx-signup:hover{background:#ffe8a5}
.hx-pair .hx-demo{background:rgba(255,255,255,.14);color:#ffffff}
.hx-pair .hx-demo:hover{background:rgba(255,255,255,.22)}
.hx-pair a:focus-visible{outline:2px solid #ffc61e;outline-offset:2px}
body:has(.hx-nav.open) .hx-pair{opacity:0;visibility:hidden}
/* Oct 27 night (AK, owner, final): the pair is back on every width. shell.js turns it on exactly while the full nav is collapsed
   (scrolling down, past the top, not near the footer) and off the moment the visitor scrolls up, so it never pops in and out mid
   scroll (no fade-while-moving, no dodge). It enters a beat after the nav leaves and leaves at once when the nav returns, so the two
   never sit together in the corner. It is small and pinned to the top-right corner, inside the page gutter. */
.hx-pair{gap:2px;transition:opacity .16s cubic-bezier(.23,1,.32,1),transform .16s cubic-bezier(.23,1,.32,1),visibility 0s linear .16s}
.hx-pair.is-on{transition:opacity .22s cubic-bezier(.23,1,.32,1) .08s,transform .22s cubic-bezier(.23,1,.32,1) .08s,visibility 0s}
/* Oct 27 night (AK: nothing floating may cover page content): shell.js sets is-yield while a heading line is under or about to slide
   under the pair; it steps out with a short fade and a 6px lift (no sideways move) and returns once the heading is clear. */
.hx-pair.is-on.is-yield{opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;transition:opacity .14s cubic-bezier(.23,1,.32,1),transform .14s cubic-bezier(.23,1,.32,1),visibility 0s linear .14s}
/* the sign-up card on comparison pages (compare-popup.css) sits below the pair, never under it; it waits while it would cover an H1 */
body:has(.hx-nav.hx-hide):has(.hx-pair.is-on) .hx-cp{translate:0 0}
/* sticky bars that move to the very top once the nav steps away (/start role picker, comparison table header) stop just under the pair instead */
body:has(.hx-pair.is-on) .sr-navoff .sr-pickbar{top:64px}
html body.hai:has(.hx-pair.is-on) .comp-table thead th{top:64px}
.hx-cp[data-hx-hold],.hx-promo[data-hx-hold]{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
@media (max-width:767px){
  .hx-pair{top:calc(10px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));padding:3px}
  .hx-pair .hx-signup,.hx-pair .hx-demo{min-height:38px;padding:0 12px;font-size:13px}
}
/* Oct 27 night: on phones the pair is as small as a tap target allows (32px pills, 36px with the rim), tucked into the corner, so it
   covers the least text; the touch area still reaches 40px. */
@media (max-width:430px){
  .hx-pair{top:calc(8px + env(safe-area-inset-top,0px));right:calc(8px + env(safe-area-inset-right,0px));padding:2px}
  .hx-pair .hx-signup,.hx-pair .hx-demo{min-height:32px;padding:0 10px;font-size:12px}
  .hx-pair .hx-signup::before,.hx-pair .hx-demo::before{inset:-4px -2px}
}
@media (max-width:359px){.hx-pair .hx-signup,.hx-pair .hx-demo{font-size:11.5px;padding:0 8px}}
@media (prefers-reduced-motion:reduce){.hx-pair,.hx-pair.is-on,.hx-pair.is-on.is-yield{transition:opacity .12s linear,visibility 0s;transform:none}}
@media (max-width:520px){.hx-hnote:not(.hx-pl){flex-direction:column;align-items:flex-start;gap:6px}.hx-hnote--c:not(.hx-pl){align-items:center}.hx-hnote-d{display:none}}

/* Oct 21 (AK, phone review): with the cookie tab moved to the right on phones, the Ask AI button keeps its normal place. */
@media (max-width:767px){body:has(.cc-revoke:not([style*="none"])) .hx-so{bottom:calc(16px + env(safe-area-inset-bottom))}}

/* Oct 21 (AK: the playlist links "feel like AI slop"): every playlist link is a quiet pill, not underlined text. */
.hx-pl a.hx-watch{text-decoration:none;gap:10px;min-height:44px;padding:6px 18px 6px 6px;border-radius:999px;background:#ffffff;box-shadow:inset 0 0 0 1px #ddd6ff;color:#110a33;font-weight:700;transition:box-shadow .2s ease,transform .2s ease}
.hx-pl a.hx-watch:hover{box-shadow:inset 0 0 0 1px #110a33;transform:translateY(-1px)}
.hx-pl a.hx-watch .hx-watch-disc{width:32px;height:32px}
@media (prefers-reduced-motion:reduce){.hx-pl a.hx-watch{transition:none}.hx-pl a.hx-watch:hover{transform:none}}

/* ---------- Oct 21 (AK: "the navbar and footer need to be better", phone review; UI/UX Pro Max pass) ----------
   Phone and tablet menu only (the menu panel exists below 1241px); desktop is untouched.
   - Top rows: 52px tap targets, 17px semibold, hairline dividers, no loose gaps.
   - Items: compact tiles with the product mark or icon, so a seller recognises Agent Miia, Pi, Vidar at a glance.
   - Bottom: "Book a demo" is a real pill button; Login stays a quiet link (Start free trial is always in the header). */

  html.hx-nd:not(.hx-desk) .hx-nav .hx-menu>li{margin:0}
  html.hx-nd:not(.hx-desk) .hx-nav .hx-menu>li+li{border-top:1px solid rgba(255,255,255,.08)}
  html.hx-nd:not(.hx-desk) .hx-nav .hx-menu>li>button{min-height:52px;padding-top:12px;padding-bottom:12px;font-size:17px;font-weight:600}
  html.hx-nd:not(.hx-desk) .hx-nav .hx-drop .hx-drop-h{margin:14px 0 8px;font-size:12px;letter-spacing:.08em}
  html.hx-nd:not(.hx-desk) .hx-nav .hx-drop .hx-drop-list{gap:8px}
  html.hx-nd:not(.hx-desk) .hx-nav .hx-drop .hx-it.has-ic{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.05);font-size:15px;line-height:1.25}
  html.hx-nd:not(.hx-desk) .hx-nav .hx-drop .hx-it.has-ic:active{background:rgba(255,255,255,.1)}
  html.hx-nd:not(.hx-desk) .hx-nav .hx-drop .hx-it .hx-ic{display:grid!important;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.08);overflow:hidden}
  html.hx-nd:not(.hx-desk) .hx-nav .hx-drop .hx-it .hx-ic.is-mark{background:#ffffff}
  html.hx-nd:not(.hx-desk) .hx-nav .hx-drop .hx-it .hx-ic img{width:26px;height:26px;object-fit:contain}
  html.hx-nd:not(.hx-desk) .hx-nav .hx-drop .hx-it .hx-ic svg{width:18px;height:18px;color:#ffc61e}
  html.hx-nd:not(.hx-desk) .hx-nav .hx-drop .hx-it b{font-weight:600}
  html.hx-nd:not(.hx-desk) .hx-nav .hx-drop .hx-it small{display:none}
  html.hx-nd:not(.hx-desk) .hx-nav .hx-menu-cta{align-items:center;gap:12px}
  html.hx-nd:not(.hx-desk) .hx-nav .hx-menu-cta a[data-book-demo]{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);font-weight:700}
@media (max-width:1240px){
  html:not(.hx-nd) .hx-nav .hx-menu>li{margin:0}
  html:not(.hx-nd) .hx-nav .hx-menu>li+li{border-top:1px solid rgba(255,255,255,.08)}
  html:not(.hx-nd) .hx-nav .hx-menu>li>button{min-height:52px;padding-top:12px;padding-bottom:12px;font-size:17px;font-weight:600}
  html:not(.hx-nd) .hx-nav .hx-drop .hx-drop-h{margin:14px 0 8px;font-size:12px;letter-spacing:.08em}
  html:not(.hx-nd) .hx-nav .hx-drop .hx-drop-list{gap:8px}
  html:not(.hx-nd) .hx-nav .hx-drop .hx-it.has-ic{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.05);font-size:15px;line-height:1.25}
  html:not(.hx-nd) .hx-nav .hx-drop .hx-it.has-ic:active{background:rgba(255,255,255,.1)}
  html:not(.hx-nd) .hx-nav .hx-drop .hx-it .hx-ic{display:grid!important;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.08);overflow:hidden}
  html:not(.hx-nd) .hx-nav .hx-drop .hx-it .hx-ic.is-mark{background:#ffffff}
  html:not(.hx-nd) .hx-nav .hx-drop .hx-it .hx-ic img{width:26px;height:26px;object-fit:contain}
  html:not(.hx-nd) .hx-nav .hx-drop .hx-it .hx-ic svg{width:18px;height:18px;color:#ffc61e}
  html:not(.hx-nd) .hx-nav .hx-drop .hx-it b{font-weight:600}
  html:not(.hx-nd) .hx-nav .hx-drop .hx-it small{display:none}
  html:not(.hx-nd) .hx-nav .hx-menu-cta{align-items:center;gap:12px}
  html:not(.hx-nd) .hx-nav .hx-menu-cta a[data-book-demo]{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);font-weight:700}
}
/* Footer on phones: each section is a clean row (name and chevron); the list preview text is gone, the wordmark is smaller. */
@media (max-width:767px){
  .hx-foot .hx-fc-peek{display:none}
  .hx-acc .hx-fc-t{align-items:center}
  .hx-foot .hx-foot-mark img{width:150px;height:auto}
}
/* Oct 22 (Amar Oct 21, A-03): desktop nav back to the live humantic.ai thickness (66px pill, 24px from the top). Menus and items stay V2. Phones and tablets unchanged. */

  html.hx-desk .hx-nav{padding-top:24px}
  html.hx-desk .hx-nav-pill{height:66px;padding:12px 12px 12px 22px}
  html.hx-desk .hx-nav-pill .hx-signup,html.hx-desk .hx-nav-pill [data-book-demo]{min-height:42px;display:inline-flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0;line-height:1}
@media (min-width:1241px){
  html:not(.hx-nd) .hx-nav{padding-top:24px}
  html:not(.hx-nd) .hx-nav-pill{height:66px;padding:12px 12px 12px 22px}
  html:not(.hx-nd) .hx-nav-pill .hx-signup,html:not(.hx-nd) .hx-nav-pill [data-book-demo]{min-height:42px;display:inline-flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0;line-height:1}
}

  html.hx-desk body.sl nav.sl-tabs{margin-top:24px}            /* /solutions team tabs clear the thicker nav */html.hx-desk body.hai #main.hx-hero,html.hx-desk body.hai section.hx-hero.has-score{padding-top:120px} /* comparison page heroes clear the thicker nav */
@media (min-width:1241px){
  html:not(.hx-nd) body.sl nav.sl-tabs{margin-top:24px}            /* /solutions team tabs clear the thicker nav */html:not(.hx-nd) body.hai #main.hx-hero,html:not(.hx-nd) body.hai section.hx-hero.has-score{padding-top:120px} /* comparison page heroes clear the thicker nav */
}
/* Oct 22 (AK): ONE size rule for the six customer logos on every page (homepage hero, shared proof strip, comparison pages).
   Heights give each logo the same visual weight (ink box x ink density, measured from the files), anchored on Indegene at 30px.
   --lk scales the whole row down on smaller screens. */
:is(.hp2-logos,.hxp-logos,.hx-logos-row) img:is([alt="NextEra Energy"],[alt="Next Era Energy"]){--lh:44px}
:is(.hp2-logos,.hxp-logos,.hx-logos-row) img[alt="Mitel"]{--lh:31px}
:is(.hp2-logos,.hxp-logos,.hx-logos-row) img[alt="Wipro"]{--lh:40px}
:is(.hp2-logos,.hxp-logos,.hx-logos-row) img[alt="Sandler"]{--lh:23px}
:is(.hp2-logos,.hxp-logos,.hx-logos-row) img[alt="Indegene"]{--lh:30px}
:is(.hp2-logos,.hxp-logos,.hx-logos-row) img[alt="Happiest Minds"]{--lh:31px}
/* Nov 5 (Amar + Krish): Compass UOL and Expedient join the strip; same rule, heights set from each file's measured ink so all six read at one weight */
:is(.hp2-logos,.hxp-logos,.hx-logos-row) img[alt="Compass UOL"]{--lh:21px}
:is(.hp2-logos,.hxp-logos,.hx-logos-row) img[alt="Expedient"]{--lh:29px}
:is(.hp2-logos,.hxp-logos,.hx-logos-row) img:is([alt="NextEra Energy"],[alt="Next Era Energy"],[alt="Mitel"],[alt="Wipro"],[alt="Sandler"],[alt="Indegene"],[alt="Happiest Minds"],[alt="Compass UOL"],[alt="Expedient"]){height:calc(var(--lh) * var(--lk,1))!important;width:auto!important;max-width:none!important;transform:none!important;object-fit:contain}
.hp2-logos{gap:16px 48px!important}
@media (max-width:1330px){.hp2-logos{gap:16px 36px!important}:is(.hp2-logos,.hxp-logos,.hx-logos-row){--lk:.9}}
@media (max-width:1040px){.hp2-logos{gap:16px 28px!important}:is(.hp2-logos,.hxp-logos,.hx-logos-row){--lk:.8}}
@media (max-width:767px){.hp2-logos{gap:14px 22px!important}:is(.hp2-logos,.hxp-logos,.hx-logos-row){--lk:.72}}
@media (max-width:400px){:is(.hp2-logos,.hxp-logos,.hx-logos-row){--lk:.62}}
/* Oct 22 (Amar Oct 21, A-07; AK pass 3): "Ask ChatGPT about us", bottom-left on every page (Storylane RepX idea).
   It must never read as the support chat (HubSpot Breeze, a solid round bubble bottom-right), so it is the opposite on
   every cue: a light prompt bar, not a bubble; the ChatGPT mark and the words "Ask ChatGPT", not a speech icon; an
   external arrow; a slowly turning gold-lavender border. Hover (120ms), focus or a tap opens the text box and 4 short
   questions; each opens ChatGPT. Replaces the Second opinion card (.hx-so, no longer rendered). */
@property --hx-ask-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.hx-ask{--hx-ask-gap:16px;--hx-ask-l:calc(var(--hx-ask-gap) + env(safe-area-inset-left,0px));position:fixed;left:var(--hx-ask-l);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:990;transition:transform .32s cubic-bezier(.23,1,.32,1);font-family:Manrope,"Manrope Fallback",Arial,sans-serif;color:#110A33;--ease:cubic-bezier(.23,1,.32,1)}
.hx-ask *,.hx-ask *::before,.hx-ask *::after{box-sizing:border-box}
.hx-ask-bar{position:relative;display:flex;align-items:center;gap:8px;width:172px;height:44px;margin:0;padding:0 4px 0 5px;overflow:hidden;border:2px solid transparent;border-radius:999px;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--hx-ask-a),#FFC61E,#FFE8A5,#DDD6FF,#341D99,#DDD6FF,#FFE8A5,#FFC61E) border-box;box-shadow:0 12px 32px -12px rgba(17,10,51,.3);cursor:pointer;animation:hx-ask-spin 6s linear infinite;transition:width .32s var(--ease),box-shadow .2s}
@keyframes hx-ask-spin{to{--hx-ask-a:360deg}}
.hx-ask-bar:hover{box-shadow:0 0 0 4px rgba(255,198,30,.18),0 12px 32px -12px rgba(17,10,51,.3)}
.hx-ask-av{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#110A33;color:#FFC61E}
.hx-ask-av svg{display:block}
.hx-ask-lbl{position:absolute;left:42px;top:0;bottom:0;display:flex;align-items:center;gap:6px;font:700 14px/1 Manrope,"Manrope Fallback",Arial,sans-serif;color:#110A33;white-space:nowrap;pointer-events:none;transition:opacity .16s}
.hx-ask-lbl svg{color:#5B6478}
.hx-ask-bar input{flex:1 1 auto;min-width:0;height:100%;margin:0;padding:0;border:0;outline:0;background:transparent;font:500 14px/1 Manrope,"Manrope Fallback",Arial,sans-serif;color:#110A33;opacity:0;transition:opacity .16s}
.hx-ask-bar input::placeholder{color:#5B6478;opacity:1}
/* W5 (Oct 26 PM): the send button is a 44x44 target (it was 34px, 20px while closed). The 34px dark circle is its ::before, so the scale-in
   animation never shrinks the tap area; the button spans the bar's full height and sits on its right end. */
.hx-ask-go{position:absolute;top:-2px;right:0;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:#FFC61E;cursor:pointer;opacity:0;touch-action:manipulation;transition:opacity .16s,color .15s}
.hx-ask-go::before{content:"";position:absolute;inset:5px 3px 5px 7px;border-radius:50%;background:#110A33;transform:scale(.6);transition:transform .2s var(--ease),background-color .15s}
.hx-ask-go svg{position:relative}
.hx-ask-go:hover{color:#110A33}
.hx-ask-go:hover::before{background:#FFC61E}
.hx-ask-go:focus-visible{outline:2px solid #341D99;outline-offset:-3px}
.hx-ask-qs a:focus-visible{outline:2px solid #341D99;outline-offset:2px}
.hx-ask.is-open .hx-ask-bar,.hx-ask:focus-within .hx-ask-bar{width:390px;cursor:auto;animation-play-state:paused;box-shadow:0 0 0 5px rgba(255,198,30,.22),0 12px 32px -12px rgba(17,10,51,.22)}
.hx-ask.is-open .hx-ask-lbl,.hx-ask:focus-within .hx-ask-lbl{opacity:0}
.hx-ask.is-open .hx-ask-bar input,.hx-ask:focus-within .hx-ask-bar input{opacity:1;transition-delay:.12s}
.hx-ask.is-open .hx-ask-go,.hx-ask:focus-within .hx-ask-go{opacity:1;transition-delay:.1s}
.hx-ask.is-open .hx-ask-go::before,.hx-ask:focus-within .hx-ask-go::before{transform:none;transition-delay:.1s}
.hx-ask-panel{position:absolute;left:0;width:390px;bottom:calc(100% + 10px);padding:12px;border-radius:20px;background:linear-gradient(180deg,#F6F4FF,#fff 70%);box-shadow:0 0 0 1px #DDD6FF,0 32px 64px -24px rgba(17,10,51,.35);opacity:0;visibility:hidden;transform:translateY(8px) scale(.98);transform-origin:bottom left;pointer-events:none;transition:opacity .18s var(--ease),transform .22s var(--ease),visibility 0s .22s}
.hx-ask-panel::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.hx-ask.is-open .hx-ask-panel,.hx-ask:focus-within .hx-ask-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:.06s,.06s,0s}
.hx-ask-t{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:2px 8px 8px;font:700 12px/16px Manrope,"Manrope Fallback",Arial,sans-serif;color:#5B6478}
.hx-ask-qs{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hx-ask-qs a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:10px 12px;border-radius:12px;font:600 14px/20px Manrope,"Manrope Fallback",Arial,sans-serif;color:#110A33;text-decoration:none;text-wrap:pretty;transition:background-color .15s,box-shadow .15s}
.hx-ask-qs a:hover{background:#fff;box-shadow:0 2px 8px rgba(17,10,51,.08)}
.hx-ask-qs a svg{flex:none;color:#5B6478;transition:transform .2s var(--ease)}
.hx-ask-qs a:hover svg{transform:translate(2px,-2px)}
body:has(.cc-window:not(.cc-invisible):not([style*="display: none"])) .hx-ask{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
/* W5 (Oct 26 PM, Oct 27 night): shell.js sets is-moving while the page scrolls (round icon only), then after it stops is-min (the same 44px icon)
   when text, pictures, controls or cards are under the full pill. Hover, focus, a tap (is-peek) or an open pill restores it in full.
   Only the bar's width changes on this fixed element, so the page never shifts. */
/* tablets (768-860px) get the stacked cookie card too (shell.css cookie block), so the pill lifts above it there as on phones */
@media (min-width:768px) and (max-width:860px){body:has(.cc-window:not(.cc-invisible):not([style*="display: none"])) .hx-ask{bottom:calc(150px + env(safe-area-inset-bottom,0px))}}
/* the nav hides its own Book a demo below 1241px (burger layout); the collapsed pair always shows both CTAs */
.hx-pair .hx-signup,.hx-pair .hx-demo{display:inline-flex!important}
.hx-ask-bar,.hx-pair a{touch-action:manipulation}
.hx-ask:is(.is-moving,.is-min,.is-tuck):not(.is-open,.is-peek):not(:focus-within) .hx-ask-bar{width:44px;gap:0}
.hx-ask:is(.is-moving,.is-min,.is-tuck):not(.is-open,.is-peek):not(:focus-within) .hx-ask-lbl{opacity:0;right:0;overflow:hidden}   /* nothing spills out of the 44px bar */
.hx-ask:is(.is-moving,.is-min,.is-tuck):not(.is-open,.is-peek):not(:focus-within) .hx-ask-go{display:none}
/* Oct 27 night (AK): the off-screen edge tab (is-tuck) is retired; the pill is always whole and on screen (full pill or round icon) */
.hx-ask{transform:none!important}
/* Oct 27 night, fix 2 (AK: nothing floating covers page content): shell.js sets --hx-ask-lift (the smallest clear lift, 8px steps, 0 to 96px)
   when the round icon would rest on a heading, a question, a picture or text, and is-away (a 140ms fade, no movement) when no clear spot
   exists. `translate` is its own property, so the transform:none lock above does not touch it. Hover, keyboard focus, a tap or an open pill
   bring it back whole. Nothing here changes while the page scrolls: shell.js decides once it rests. */
.hx-ask{translate:0 calc(var(--hx-ask-lift,0px)*-1);transition:translate .24s cubic-bezier(.23,1,.32,1),opacity .14s cubic-bezier(.23,1,.32,1)}
.hx-ask.is-away:not(.is-open,.is-peek):not(:focus-within){opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.hx-ask{transition:opacity .12s linear}}
@media (max-width:767px){
  .hx-ask{--hx-ask-gap:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .hx-ask.is-open .hx-ask-bar,.hx-ask:focus-within .hx-ask-bar,.hx-ask-panel{width:calc(100vw - 24px)}
  .hx-ask-bar input{font-size:16px}
  body:has(.cc-window:not(.cc-invisible):not([style*="display: none"])) .hx-ask{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.hx-ask-bar{animation:none}.hx-ask,.hx-ask-panel,.hx-ask-bar,.hx-ask-go,.hx-ask-go::before,.hx-ask-lbl,.hx-ask-bar input{transition:none!important}}
/* Cookie settings button sits bottom-RIGHT on every width, away from the Ask AI pill (AK, Oct 22). */
.cc-revoke{left:auto!important;right:16px!important}
/* Oct 22 (AK): a customer-logo row never wraps untidily. shell.js measures it: one even line (shrunk evenly if needed),
   or two even rows of three on small phones. Laptops that already fit are untouched. Nothing slides or is cut off. */
:is(.hp2-logos,.hxp-logos,.hx-logos-row).is-fitcheck{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;overflow:hidden}
:is(.hp2-logos,.hxp-logos,.hx-logos-row).is-fitcheck>*{flex:none!important;width:auto!important;max-width:none!important}
:is(.hp2-logos,.hxp-logos,.hx-logos-row).is-grid3{display:grid!important;grid-template-columns:repeat(3,auto)!important;justify-content:center!important;align-items:center!important;justify-items:center!important;gap:18px 20px!important;margin-left:0!important;margin-right:0!important}
:is(.hp2-logos,.hxp-logos,.hx-logos-row).is-grid3>*{width:auto!important;max-width:none!important;padding:0!important;margin:0!important;min-height:0!important;height:auto!important}
/* Oct 22 (AK): the homepage hero shows the customer logos on phones too, as the one sliding row (the old site hid them
   because they stacked awkwardly; the sliding row fixes that). */
@media (max-width:640px){.hp2-hero .hp2-logos{display:flex!important;margin-top:28px}}
:is(.hp2-logos,.hxp-logos,.hx-logos-row).is-fitcheck{width:100%;max-width:100%;min-width:0;align-self:stretch;contain:inline-size}
.hp2-hero>.hp2-container{min-width:0;max-width:100%}
/* Oct 22: tighter steps the nav tries (shell.js) before it falls back to the burger menu: any width or zoom that can hold
   the desktop menu gets it. Step 1 trims the space between items; step 2 also trims the logo and the type to 13px. */
html.hx-desk.hx-t1 .hx-menu>li>:first-child{padding-left:8px!important;padding-right:8px!important}
html.hx-desk.hx-t2 .hx-menu>li>:first-child{padding-left:7px!important;padding-right:7px!important;font-size:13px!important}
html.hx-desk.hx-t2 .hx-logo img{width:150px!important;height:auto!important}
html.hx-desk.hx-t2 .hx-actions a,html.hx-desk.hx-t2 .hx-actions button{font-size:13px!important}
html.hx-desk.hx-t2 .hx-nav-pill{padding-left:16px!important}
:is(.hp2-logos,.hxp-logos,.hx-logos-row).is-line{display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;justify-content:center!important}
:is(.hp2-logos,.hxp-logos,.hx-logos-row).is-line>*{flex:none!important;width:auto!important}
/* Oct 22 (AK): the homepage product equation reads bigger (about 15%); the one-screen fitter in shell.js scales the hero
   back only when a short or zoomed-in window needs it, so it still lands on the screen's bottom edge. */
.hp2-hero .hp2-hero-gif,.hp2-hero .hp2-hero-anim{max-width:clamp(640px,calc(250vh - 1080px),1150px)}

/* Oct 22: the snap assist lives in shell.js (directional, after a scroll ends). Native CSS scroll-snap was tried and
   removed: with "proximity", a 100px mouse-wheel notch kept snapping back to the edge it had just left. */
.hx-ask-t span{font-weight:500;font-size:11px;color:#5B6478}
/* ---------- Oct 28 (AK): NORMAL SCROLL ON EVERY PAGE, with a frame rhythm ----------
   Slide paging, mandatory snapping (html.hx-slides) and the one-screen fitter are off (shell.js). In their place:
   one section padding token for every band (--hx-frame-y: 64px desktop, 48px tablet, 40px phone; the homepage bands and
   the product-page --hx-sec-y read it) and a 1px hairline seam where two bands of the same colour touch (shell.js adds
   .hx-seam once after load), so a long page reads as a stack of framed bands (the Attio / Linear pattern) instead of one
   colour running on. The seam is an inset shadow: it never changes layout. */
:root{--hx-frame-y:64px}
@media (max-width:991px){:root{--hx-frame-y:48px}}
@media (max-width:767px){:root{--hx-frame-y:40px}}
html{scroll-snap-type:none}
.hx-seam{box-shadow:inset 0 1px 0 rgba(17,10,51,.08)}
/* Oct 28 (AK: "the nav bar should be identical in every single page"): page CSS must never reach into the shell. On the
   Library pages (Webflow + Bootstrap) the body's font-weight 300 / no smoothing and Bootstrap's dark kbd box changed the
   nav text weight and the Ctrl K hint, which shifted every menu item 6-13px. Pinned here for every page. */
header.hx-nav,.hx-pair{font:400 16px/24px Manrope,"Manrope Fallback",Arial,sans-serif;color:#110A33;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
header.hx-nav .hx-menu>li{font-weight:400}
header.hx-nav kbd.hx-find-k{padding:0;background:none;border:0;border-radius:0;box-shadow:none;font-size:12px;line-height:1;color:rgba(255,255,255,.85)}

/* ---------- Oct 26: Ctrl+K command palette trigger (partials/hx-nav .hx-find, .hx-menu-find; loader in partials/hx-shell; palette.css loads on first open) ----------
   Desktop: a small search pill left of Login. It sits inside .hx-actions, so the measuring in shell.js counts it; when the pill does not
   fit, the step classes shrink it first (hx-t1: icon only) and then drop it (hx-t2), so the desktop menu keeps its place. Ctrl+K and "/" still work.
   Burger menu: the pill is hidden and a full-width "Search the site" row heads the open panel. */
.hx-find{position:relative;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 10px;border:0;border-radius:999px;background:rgba(255,255,255,.1);color:#ffffff;font:600 12px/1 Manrope,"Manrope Fallback",Arial,sans-serif;cursor:pointer;touch-action:manipulation;white-space:nowrap;transition:background-color .15s,transform .16s var(--ease)}
.hx-find::before{content:"";position:absolute;inset:-6px -2px}
.hx-find:hover{background:rgba(255,255,255,.18)}
.hx-find:active{transform:scale(.96)}
.hx-find svg{flex:none;width:16px;height:16px}
.hx-find-k{font:700 12px/1 Manrope,"Manrope Fallback",Arial,sans-serif;letter-spacing:.02em;color:rgba(255,255,255,.85)}
.hx-menu-find{display:none}
html.hx-desk.hx-t1 .hx-find{width:32px;padding:0;justify-content:center}
html.hx-desk.hx-t1 .hx-find-k{display:none}
html.hx-desk.hx-t2 .hx-find{display:none}
html.hx-desk .hx-nav.hx-compact:not(:hover):not(:focus-within) .hx-find{display:none}
html.hx-nd:not(.hx-desk) .hx-find{display:none}
html.hx-nd:not(.hx-desk) .hx-nav.open .hx-menu-find{display:block}
@media (max-width:1240px){
  html:not(.hx-nd) .hx-find{display:none}
  html:not(.hx-nd) .hx-nav.open .hx-menu-find{display:block}
}
@media (min-width:1241px){html:not(.hx-nd) .hx-nav.hx-compact:not(:hover):not(:focus-within) .hx-find{display:none}}
.hx-menu-find>button svg{width:20px;height:20px;flex:none}
@media (prefers-reduced-motion:reduce){.hx-find{transition:none}}

/* W5 (Oct 26 PM): the mobile menu never leaves a link alone beside an empty half. Lists have 2 to 7 links (auto-fill gave 4+1 at 768 and 2+2+1 at 390):
   under 720px two columns, an odd last link takes the full row; from 720px the column count follows the link count (3 / 5 / 7 links on a 12-column grid,
   so the last row fills the width too). Same rows for the legacy and the new nav class sets. */
@media (max-width:1240px){
  :is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:719px){
  :is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list>a:nth-child(odd):last-child{grid-column:1/-1}
  /* 3 and 5 links (Agents, Other Products, Partners...): small tiles, icon above the name, 3 across (the 5th and 4th share the second row), so nothing sits alone */
  :is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list:has(>a:nth-child(3):last-child),:is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list:has(>a:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
  :is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list:has(>a:nth-child(3):last-child)>a,:is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list:has(>a:nth-child(5):last-child)>a{grid-column:span 2;flex-direction:column;justify-content:center;gap:6px;padding:10px 6px;text-align:center;font-size:14px}
  :is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list:has(>a:nth-child(5):last-child)>a:nth-child(n+4){grid-column:span 3}
  :is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list:has(>a:nth-child(3):last-child)>a b,:is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list:has(>a:nth-child(5):last-child)>a b{text-wrap:balance}
}
@media (min-width:720px) and (max-width:1240px){
  :is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list{grid-template-columns:repeat(4,minmax(0,1fr))}
  :is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list:has(>a:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list:has(>a:nth-child(3):last-child),:is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list:has(>a:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  :is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list:has(>a:nth-child(5):last-child),:is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list:has(>a:nth-child(7):last-child){grid-template-columns:repeat(12,minmax(0,1fr))}
  :is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list:has(>a:nth-child(5):last-child)>a{grid-column:span 4}
  :is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list:has(>a:nth-child(5):last-child)>a:nth-child(n+4){grid-column:span 6}
  :is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list:has(>a:nth-child(7):last-child)>a{grid-column:span 3}
  :is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-drop-list:has(>a:nth-child(7):last-child)>a:nth-child(n+5){grid-column:span 4}
}
/* W5 (Oct 26 PM): at 320px two columns are tight. Menu links and footer links shrink a little so no word is cut off (was overflowing: Engineering, Prospecting, Comparisons, Methodology, Customer Stories). */
@media (max-width:359px){
  :is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-it.has-ic{gap:6px;padding:8px 6px;font-size:13px}
  :is(html.hx-nd:not(.hx-desk),html:not(.hx-nd)) .hx-nav .hx-drop .hx-it .hx-ic{width:28px;height:28px}
  .hx-foot-cols a{font-size:13px}
}

/* Hero top spacing, one standard for every page (AK, Oct 26): the hero's first content starts about 60px under the nav on desktop,
   54px on phones. Each page's own hero padding used to differ (14px to 166px under the nav). The one-screen fit in shell.js keeps a
   hero's own top padding, so this holds there too. */
:is(html body section, html body header):is(.hp2-hero, .pf-hero, .section_miia-hero, .kx-hero, .cm-hero, .bi-hero, .uc-hero, .ab-hero, .pr-hero, .tr-hero, .sec-hero, .sr-hero, .lib-hero, .ct-hero, .dm-hero) { padding-top: 150px !important; }
@media (max-width: 991px) { :is(html body section, html body header):is(.hp2-hero, .pf-hero, .section_miia-hero, .kx-hero, .cm-hero, .bi-hero, .uc-hero, .ab-hero, .pr-hero, .tr-hero, .sec-hero, .sr-hero, .lib-hero, .ct-hero, .dm-hero) { padding-top: 128px !important; } }
@media (max-width: 767px) { :is(html body section, html body header):is(.hp2-hero, .pf-hero, .section_miia-hero, .kx-hero, .cm-hero, .bi-hero, .uc-hero, .ab-hero, .pr-hero, .tr-hero, .sec-hero, .sr-hero, .lib-hero, .ct-hero, .dm-hero) { padding-top: 104px !important; } }

/* ---------- Oct 28 review fixes (R1, R2, R3; backup 04-build/backups/oct28-review-fixes) ----------
   1. Nav focus ring: gold on the ink nav pill (violet on ink was about 1.6:1); the white dropdown panels keep violet.
   2. Phones: the corner Sign up / Book a demo pair keeps its small 32px pills, but each touch area now reaches 44px.
   3. Ask AI border spin: 2 turns (12 s), then it rests (was infinite; WCAG 2.2.2).
   4. Cookie banner on small phones: one compact card under 15% of the screen (2-line message, the two buttons side by side). The
      consent choices are unchanged. While it is up, keyboard focus never scrolls under it (scroll-padding-bottom, WCAG 2.4.11). */
html body .hx-nav :not(.hx-drop, .hx-drop *):focus-visible{outline-color:#FFC61E}
@media (max-width:430px){.hx-pair .hx-signup::before,.hx-pair .hx-demo::before{inset:-6px -1px}}
@media (max-width:359px){.hx-pair .hx-signup,.hx-pair .hx-demo{font-size:12px}}
.hx-ask-bar{animation-iteration-count:2}
html:has(.cc-window:not(.cc-invisible):not([style*="display: none"])){scroll-padding-bottom:112px}
@media (max-width:480px){
  html body .cc-window{flex-direction:column !important;align-items:stretch !important;padding:6px 12px !important;gap:6px !important;bottom:calc(8px + env(safe-area-inset-bottom)) !important;left:8px !important;right:8px !important;border-radius:20px !important}
  html body .cc-window .cc-message{margin:0 !important;font-size:12px !important;line-height:16px !important}
  html body .cc-window .cc-message a,html body .cc-window .cc-link{display:inline !important;padding:0 !important;font-size:12px !important}
  html body .cc-window .cc-compliance{display:flex !important;flex-direction:row !important;gap:8px !important;width:100% !important}
  html body .cc-window .cc-btn{flex:1 1 0 !important;min-height:44px !important;margin:0 !important;padding:0 12px !important;font-size:14px !important;line-height:44px !important;border-radius:999px !important}
  body:has(.cc-window:not(.cc-invisible):not([style*="display: none"])) .hx-ask{bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  html:has(.cc-window:not(.cc-invisible):not([style*="display: none"])){scroll-padding-bottom:120px}
  body:has(.cc-window:not(.cc-invisible)) .hx-foot-stage{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
}
/* AK Nov 1: Product menu, "Full Product" is the first link, a highlighted row above the three columns */
.hx-drop-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.hx-lead{background:var(--cream,#FFF4D2);box-shadow:inset 0 0 0 1px #FFC61E}
.hx-lead:hover{background:#FFF4D2;box-shadow:inset 0 0 0 2px #FFC61E}

/* Nov 2 (A9, AK): Amar's YELLOW lead row is back (round 1 wrongly made it white). "Full Product" is highlighted so every eye goes
   there first: cream fill + gold ring (Amar's), gold 300 on hover/focus so the press reads. In the dark phone drawer the cream row
   would carry white text, so there it is a solid gold row with ink text: still the one yellow item in the menu. */
.hx-lead{background:#FFF4D2;box-shadow:inset 0 0 0 1px #FFC61E}
.hx-lead:hover,.hx-lead:focus-visible{background:#FFE8A5;box-shadow:inset 0 0 0 1px #FFC61E}
html.hx-nd:not(.hx-desk) .hx-nav .hx-drop .hx-it.hx-lead{margin-bottom:4px;background:#FFC61E;color:#110A33}
html.hx-nd:not(.hx-desk) .hx-nav .hx-drop .hx-it.hx-lead:hover,html.hx-nd:not(.hx-desk) .hx-nav .hx-drop .hx-it.hx-lead:focus-visible,html.hx-nd:not(.hx-desk) .hx-nav .hx-drop .hx-it.hx-lead:active{background:#FFE8A5;color:#110A33}
html.hx-nd:not(.hx-desk) .hx-nav .hx-drop .hx-it.hx-lead .hx-ic{background:#ffffff}
html.hx-nd:not(.hx-desk) .hx-nav .hx-drop .hx-it.hx-lead .hx-ic svg{color:#110A33}
@media (max-width:1240px){
  html:not(.hx-nd) .hx-nav .hx-drop .hx-it.hx-lead{margin-bottom:4px;background:#FFC61E;color:#110A33}
  html:not(.hx-nd) .hx-nav .hx-drop .hx-it.hx-lead:hover,html:not(.hx-nd) .hx-nav .hx-drop .hx-it.hx-lead:focus-visible,html:not(.hx-nd) .hx-nav .hx-drop .hx-it.hx-lead:active{background:#FFE8A5;color:#110A33}
  html:not(.hx-nd) .hx-nav .hx-drop .hx-it.hx-lead .hx-ic{background:#ffffff}
  html:not(.hx-nd) .hx-nav .hx-drop .hx-it.hx-lead .hx-ic svg{color:#110A33}
}

/* Nov 1 (A24): the longer "Start free trial" label never wraps or clips in the nav pill (was 2px over at 768-1024) */
.hx-signup{white-space:nowrap;padding-left:13px!important;padding-right:13px!important}

/* Nov 2 (AK, site-wide): one shared gap above every CTA button and call-out pill that follows text or chips: 28px desktop, 24px phones
   (4px scale). Components opt in by reading var(--cta-gap); the selector list below covers the known "button right under content" spots. */
:root { --cta-gap: 28px; }
@media (max-width: 599px) { :root { --cta-gap: 24px; } }
body.hai .slv-role .slv-role__go,
body.hai .sr .sr-cnc__go,
body.hai .hxc-facts + .hxc-btn, body.hai .hxc-facts + * .hxc-btn:first-child,
body.hai .sl-out__more,
body.hai .slv-pts + .slv-role__go { margin-top: 0; }
body.hai .slv-role .slv-role__lead, body.hai .slv-role .slv-ucl, body.hai .slv-role .slv-pts { margin-bottom: var(--cta-gap); }
body.hai .sr .sr-cnc__go { margin-top: calc(var(--cta-gap) + 4px); }

body.hai .sl-out__more { margin-top: var(--cta-gap); }

/* Nov 2 (AK, nav screenshot): the desktop bar had about 75px of empty space each side of the menu (logo to Product, Pricing to
   search). It now goes to the brand and the menu: logo 26 -> 30px tall, menu labels 14 -> 15px with a little more room between
   them, pill inset 22 -> 26px. Bar height, the right-side buttons, the menus and Amar's gold Full Product row are unchanged.
   Only the full desktop menu (html.hx-desk without a fitter step) is affected: shell.js still measures and steps
   down on narrower windows (hx-t1 = the old 14px / 26px sizes with trimmed padding, hx-t2 = 13px type + 150px logo), and the
   burger drawer is untouched.
   Rollback: 04-build/backups/nov02-final/nav-size/shell.css */
html.hx-desk:not(.hx-t1) .hx-nav-pill{padding-left:26px}
html.hx-desk:not(.hx-t1) .hx-logo img{height:30px}
html.hx-desk .hx-menu{gap:4px}
html.hx-desk:not(.hx-t1) .hx-menu>li>a,html.hx-desk:not(.hx-t1) .hx-menu>li>button{padding:9px 14px}
html.hx-desk:not(.hx-t1) .hx-menu>li>a,html.hx-desk:not(.hx-t1) .hx-menu>li>button{font-size:15px}
@media (min-width:1241px){
  html:not(.hx-nd) .hx-nav-pill{padding-left:26px}
  html:not(.hx-nd) .hx-logo img{height:30px}
  html:not(.hx-nd) .hx-menu{gap:4px}
  html:not(.hx-nd) .hx-menu>li>a,html:not(.hx-nd) .hx-menu>li>button{padding:9px 14px;font-size:15px}
}

/* Nov 5 QA sweep: no lone last word. Headings balance, body copy avoids a one-word last line, on every V2 page (not only body.hai).
   Low specificity on purpose: any page rule that sets text-wrap itself still wins. */
h1,h2,h3,h4{text-wrap:balance}
p,li,dd,figcaption,blockquote{text-wrap:pretty}

/* Nov 5 QA (CLS 0.22 on /kairos at 768): the customer-logo row painted as a 3 x 2 grid, then shell.js (on load) collapsed it to one line,
   pulling everything below it up 56px. On tablets the row now starts as the one line the script ends with (the script still scales it
   with --lk when it cannot fit), so nothing moves. */
@media (min-width:768px) and (max-width:991px){
  .hxp .hxp-logos{display:flex;flex-wrap:nowrap;justify-content:center;gap:16px 24px}
  .hxp .hxp-logos>*{flex:none;width:auto}
}