/* Hallmark · macrostructure: Signal Route · tone: technical-calm · anchor hue: ink + gold
   Humantic AI · Kairos (/personalization-suite), Website V2, rebuilt Oct 19 2026.
   Idea: one compact routing diagram. Three surfaces in, Kairos in the middle, five places a seller works out,
   each with the real vendor marks; gold dashes travel the wires while the diagram is on screen. Then the
   adoption argument on ink with the activation run: 8 product tiles lit in turn, one line of what lands, the
   three surfaces as a small row; sized so heading + run fit one laptop or phone screen (replaced the old video,
   the product ledger and the repeated numbers column, Oct 19).
   Locked palette; desktop density ~80% zoom (h1 60px, h2 36px at 1280+). */

html:has(body.kx) { overflow-x: clip; }
.kx {
  --gold: #FFC61E; --gold3: #FFE8A5; --ink: #110A33; --violet: #341D99; --lav: #DDD6FF; --mist: #F6F4FF; --slate: #5B6478; --white: #fff;
  --rule: rgba(17,10,51,.1);
  --disp: "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --sh-sm: 0 2px 8px rgba(17,10,51,.08); --sh-md: 0 12px 32px -12px rgba(17,10,51,.22);
  --pad: clamp(56px, 6vw, 80px);
  margin: 0; overflow-x: clip; background: var(--white); color: var(--ink); font-family: Manrope, Arial, sans-serif;
}
.kx *, .kx *::before, .kx *::after { box-sizing: border-box; }
:where(.kx main) :is(h1, h2, h3) { margin: 0; text-wrap: balance; }
:where(.kx main) p { margin: 0; text-wrap: pretty; }
:where(.kx main) :is(ul, ol, figure) { margin: 0; padding: 0; list-style: none; }
.kx-shell { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* AK Nov 4: the standard 1200px frame, 24px sides */
.kx main a:focus-visible, .kx main button:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 12px; }
.kx .hx-btn:active { transform: scale(.97); }

.kx-head { max-width: 700px; margin: 0 auto 40px; text-align: center; }
.kx-head h2 { font: 700 clamp(28px, 2.2vw + 12px, 36px)/1.12 var(--disp); letter-spacing: -.02em; }
.kx-head p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--slate); }
.kx-head a, .kx-lead a, .kx-route figcaption a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }

/* ---------- Hero (AK Nov 4) ----------
   One screen on desktop: the headline ("Kairos" big, the line under it on one row), the diagram, the buttons, then the customer
   logos. Centred in the 1200px frame. Sizes also follow the screen height so all of it fits 1280x720. */
.kx-hero { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding: clamp(96px, 13svh, 120px) 0 clamp(8px, 2svh, 32px); text-align: center; background: linear-gradient(180deg, #DDD6FF 0%, #ECE8FF 38%, #F6F4FF 70%, #fff 100%); }
.kx-hero h1 { display: flex; flex-direction: column; align-items: center; margin: 0 auto; font-family: var(--disp); font-weight: 700; letter-spacing: -.03em; }
.kx-h1__name { font-size: clamp(64px, min(9vw, 12svh), 128px); line-height: .96; }
.kx-h1__line { margin-top: clamp(4px, 1svh, 10px); font-size: clamp(22px, min(2.7vw, 4.6svh), 40px); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.kx-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(14px, 2.4svh, 28px); }
.kx-hero .hxp { padding: clamp(8px, 2svh, 20px) 0 0; }

/* ---------- The routing diagram (AK Nov 4) ----------
   Left: the four kinds of Intelligence plus signals. Middle: Kairos, with the four ways it delivers. Right: the surface wherever the
   rep is. The whole diagram shows at once; kairos.js then runs a gold pulse along each wire in turn (.go on a wire, pathLength 100)
   and gives each reached piece a short gold ring (.is-hit). */
.kx-route {
  --h: clamp(256px, 36svh, 330px); --ring: rgba(255,198,30,.55);
  position: relative; display: grid; grid-template-columns: 236px 72px 288px 72px 300px; /* Nov 5: middle 248 -> 288 so the Components tile fits */ justify-content: center; align-items: center;
  margin: clamp(12px, 2.6svh, 36px) auto 0; text-align: start; animation: kx-fade .6s var(--ease) both;
}
@keyframes kx-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.kx-in, .kx-out { height: var(--h); display: grid; grid-template-rows: repeat(var(--n, 5), minmax(0, 1fr)); align-items: center; }
.kx-out { --n: 6; }
.kx-in a {
  display: flex; align-items: center; gap: 10px; height: calc(100% - 8px); padding: 0 12px; border-radius: 14px; background: var(--white);
  border: 1px solid var(--lav); box-shadow: var(--sh-sm); color: var(--ink); text-decoration: none;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
}
.kx-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--mist); color: var(--violet); }
.kx-in__t { display: flex; flex-direction: column; min-width: 0; }
.kx-in b { font: 700 15px/1.15 var(--disp); }
.kx-in__t span { font-size: 12px; line-height: 1.3; color: var(--slate); }
@media (hover: hover) and (pointer: fine) { .kx-in a:hover { border-color: var(--ink); transform: translateX(2px); } }
.kx-in li.is-hit a { box-shadow: 0 0 0 5px var(--ring); border-color: var(--gold); }
.kx-in li.is-hit .kx-ic { background: var(--gold); color: var(--ink); }

.kx-link { display: block; align-self: stretch; height: var(--h); }
.kx-link svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kx-wire, .kx-flow { fill: none; }
.kx-wire { stroke: rgba(17,10,51,.18); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.kx-flow {
  stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 26 220; stroke-dashoffset: 26; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(255,198,30,.95));
}
.kx-flow.go { animation: kx-go .5s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes kx-go { from { stroke-dashoffset: 26; } to { stroke-dashoffset: -100; } }

.kx-core {
  display: flex; flex-direction: column; align-items: center; gap: 10px; width: 288px; padding: 20px 16px 16px;
  border-radius: 28px; background: var(--ink); color: var(--white); text-align: center;
  box-shadow: var(--sh-md); transition: box-shadow .25s var(--ease);
}
.kx-core.is-hit { box-shadow: var(--sh-md), 0 0 0 6px var(--ring); }
.kx-core__name { display: flex; align-items: center; gap: 10px; }
.kx-core__name img { width: 34px; height: 34px; }
.kx-core__name b { font: 700 34px/1 var(--disp); letter-spacing: -.02em; color: var(--white); }
.kx-core__k { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lav); }
.kx-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.kx-ways a {
  display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(221,214,255,.22); color: var(--white); font-size: 13px; font-weight: 700; text-decoration: none;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.kx-ways svg { flex: none; color: var(--gold); }
.kx-ways a:hover, .kx-ways li.is-hit a { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.kx-ways a:hover svg, .kx-ways li.is-hit svg { color: var(--ink); }

.kx-out li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; height: calc(100% - 8px); padding: 0 14px;
  border-radius: 14px; background: var(--white); border: 1px solid var(--lav); transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.kx-out li.is-hit { box-shadow: 0 0 0 5px var(--ring); border-color: var(--gold); }
.kx-out b { font: 700 15px/1.15 var(--disp); white-space: nowrap; }
.kx-marks { display: flex; gap: 8px; }
.kx-marks img { display: block; width: 20px; height: 20px; object-fit: contain; }
.kx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kx-route figcaption { position: absolute; right: -52px; bottom: 0; }
.kx-route .pf-pause { position: static; flex: none; width: 36px; height: 36px; }
.kx-route .pf-pause[hidden] { display: none; }

/* ---------- Shared blocks on this page: same density ---------- */
@media (min-width: 1024px) {
  .kx .hxb { padding: 72px 24px; }
  .kx .hxb.hxb .hxb-h2 { font-size: 36px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1099px) { .kx-route figcaption { right: 0; bottom: -44px; } }
@media (max-width: 1023px) {
  .kx-route { grid-template-columns: minmax(0, 1fr) 40px 224px 40px minmax(0, 1fr); width: 100%; }
  .kx-core { width: 224px; padding: 16px 12px 12px; }
  .kx-in__t span { display: none; }
  .kx-ways a { padding: 7px 8px; font-size: 12px; }
}
@media (max-width: 767px) {
  /* stacked: the inputs, then the route runs down through Kairos to the surfaces */
  .kx-hero { min-height: 0; padding: 104px 0 40px; }
  .kx-route { grid-template-columns: minmax(0, 1fr); justify-items: center; --h: auto; }
  .kx-in, .kx-out { width: 100%; height: auto; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kx-in li:last-child { grid-column: 1 / -1; }
  .kx-in a, .kx-out li { height: 100%; min-height: 48px; padding: 8px 10px; }
  .kx-out li { justify-content: flex-start; flex-wrap: wrap; gap: 4px 10px; }
  .kx-in b, .kx-out b { font-size: 14px; }
  .kx-marks img { width: 18px; height: 18px; }
  .kx-link { position: relative; width: 2px; height: 28px; background: rgba(17,10,51,.18); overflow: hidden; }
  .kx-link svg { display: none; }
  .kx-link::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 14px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 6px var(--gold); transform: translateY(-14px); }
  .kx-link.go::after { animation: kx-down .5s cubic-bezier(.4, 0, .2, 1) both; }
  .kx-core { width: 100%; max-width: 360px; }
  .kx-route figcaption { position: static; grid-column: 1 / -1; margin-top: 12px; }
}
@keyframes kx-down { from { transform: translateY(-14px); } to { transform: translateY(28px); } }
@media (max-width: 599px) {
  .kx-shell { padding: 0 16px; }
  .kx-h1__name { font-size: 64px; }
  .kx-h1__line { font-size: 24px; }
}
/* phones: the two buttons share one row (stack only below 360px) */
@media (min-width: 360px) and (max-width: 767px) {
  .kx-cta { flex-wrap: nowrap; gap: 8px; }
  .kx-cta .hx-btn { flex: 1 1 auto; min-width: 0; justify-content: center; gap: 8px; white-space: nowrap; }
  .kx-cta .hx-btn-primary { padding-right: 14px; }
  .kx-cta .hx-btn-ghost { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 359px) { .kx-cta .hx-btn { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) {
  .kx-route { animation: none; }
  .kx-flow, .kx-flow.go { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; filter: none; opacity: .9; }
  .kx-link::after, .kx-link.go::after { animation: none; transform: none; height: 100%; box-shadow: none; }
  .kx *, .kx *::before, .kx *::after { transition-duration: .01ms !important; }
  .kx-route .pf-pause { display: none; }
}

/* ---------- Three reps, three workflows (AK Nov 4) ----------
   One screen on desktop. Three columns: each rep, where they live, and the quick steps to get started with the time each takes.
   Install steps link to the install (logo on the left, time on the right). */
.kr { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding: clamp(48px, 6svh, 72px) 0; background: var(--mist); }
.kr-head { max-width: 900px; margin: 0 auto; text-align: center; }
.kr-head h2 { margin: 0; font: 700 clamp(28px, 2.2vw + 12px, 40px)/1.12 var(--disp); letter-spacing: -.02em; text-wrap: balance; }
.kr-head p { margin: 10px 0 0; font-size: 17px; line-height: 1.55; color: var(--slate); text-wrap: pretty; }
.kr-reps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: clamp(24px, 4svh, 40px) 0 0; }
.kr-rep { display: flex; flex-direction: column; padding: 20px 16px; border: 1px solid var(--lav); border-radius: 24px; background: var(--white); box-shadow: var(--sh-sm); }
.kr-face { flex: none; display: block; border-radius: 50%; }
.kr-who { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--lav); }
.kr-who p { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kr-who b { font: 700 20px/1.15 var(--disp); color: var(--ink); }
.kr-who p span { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--slate); }
.kr-stack { flex: none; display: inline-flex; }
.kr-stack img { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 2px var(--lav); object-fit: contain; }
.kr-stack img + img { margin-left: -4px; }
.kr-k { margin: 16px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.kr-steps { margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.kr-step { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px 8px 8px; border: 1px solid var(--lav); border-radius: 14px; background: var(--white); color: var(--ink); text-decoration: none; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
a.kr-step:hover { border-color: var(--ink); background: var(--mist); }
a.kr-step:active { transform: scale(.98); }
.kr-step:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.kr-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); font: 800 12px/1 Manrope, Arial, sans-serif; color: var(--ink); }
.kr-step img { flex: none; width: 20px; height: 20px; object-fit: contain; }
.kr-step__t { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 4px; font: 700 15px/1.25 var(--disp); }
.kr-time { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--cream, #FFF4D2); border: 1px solid var(--gold); font-size: 12px; font-weight: 800; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kr-total { display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding-top: 16px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.kr-steps + .kr-total { margin-top: 16px; border-top: 1px solid var(--lav); }
.kr-total img { flex: none; }
@media (max-width: 1099px) { .kr-reps { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; } }
@media (max-width: 767px) { .kr { min-height: 0; } }
@media (max-width: 599px) { .kr-rep { padding: 18px 16px; } .kr-who b { font-size: 18px; } }

/* AK Nov 4: on desktop every section on this page fills one screen, content centred (the shared blocks too, on /kairos only). */
@media (min-width: 1024px) {
  .kx main > .pdd > #day, .kx main > #faqs, .kx main > #get-started { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .kx .hp2-moved > .hp2-compound { min-height: 100svh; }
}

/* AK Nov 4: every section heading on /kairos at the site standard (pm-clean.css section 11): 50px Cabinet Grotesk 500 on desktop, 26px 700 on phones */
html body main section h2:not(.tn-sr):not(.hai-faq__h) , html body main section .hai-faq__h { font-family: "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif !important; font-size: clamp(40px, 3.9vw, 50px) !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: -.01em; }
@media (max-width: 767px) { html body main section h2:not(.tn-sr), html body main section .hai-faq__h { font-size: 26px !important; font-weight: 700 !important; } }

/* ---------- Nov 5 hero fixes ----------
   1. "Components" ran past the edge of its tile (the 2x2 tiles were 104px wide, the word plus its icon needs ~120px). The middle card is
      wider (288px, set above) and a tile keeps 8px of air on both sides; from 1023px down, where the card is 224px, each tile stacks its
      icon over its word.
   2. Rings that looked stuck: each light was a class that a timer took off 650ms later, so a late timer (a busy or background tab) left
      gold rings and gold tiles lit. Each light is now a short animation that fades out by itself; the class only restarts it. */
.kx-ways a { gap: 6px; padding: 8px 9px; min-width: 0; }
.kx-ways a span { min-width: 0; white-space: nowrap; }
@media (max-width: 1023px) and (min-width: 768px) {
  .kx-ways a { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px; text-align: center; }
}
@keyframes kx-ring { 0% { box-shadow: 0 0 0 0 rgba(255,198,30,0); border-color: var(--gold); } 25%, 60% { box-shadow: 0 0 0 5px var(--ring); border-color: var(--gold); } 100% { box-shadow: 0 0 0 5px rgba(255,198,30,0); border-color: var(--lav); } }
@keyframes kx-core-ring { 0% { box-shadow: var(--sh-md), 0 0 0 0 rgba(255,198,30,0); } 30%, 60% { box-shadow: var(--sh-md), 0 0 0 6px var(--ring); } 100% { box-shadow: var(--sh-md), 0 0 0 6px rgba(255,198,30,0); } }
@keyframes kx-ic { 0%, 65% { background: var(--gold); color: var(--ink); } 100% { background: var(--mist); color: var(--violet); } }
@keyframes kx-way { 0%, 65% { background: var(--gold); border-color: var(--gold); color: var(--ink); } 100% { background: rgba(255,255,255,.08); border-color: rgba(221,214,255,.22); color: var(--white); } }
@keyframes kx-way-ic { 0%, 65% { color: var(--ink); } 100% { color: var(--gold); } }
.kx-in li.is-hit a, .kx-out li.is-hit { box-shadow: none; border-color: var(--lav); animation: kx-ring .65s var(--ease) both; }
.kx-in li.is-hit .kx-ic { background: var(--mist); color: var(--violet); animation: kx-ic .65s ease both; }
.kx-core.is-hit { box-shadow: var(--sh-md); animation: kx-core-ring .5s var(--ease) both; }
.kx-ways li.is-hit a { background: rgba(255,255,255,.08); border-color: rgba(221,214,255,.22); color: var(--white); animation: kx-way .55s ease both; }
.kx-ways li.is-hit svg { color: var(--gold); animation: kx-way-ic .55s ease both; }
@media (hover: hover) and (pointer: fine) { .kx-ways a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); } .kx-ways a:hover svg { color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .kx-route .is-hit, .kx-route .is-hit * { animation: none !important; } }
/* 3. The hero buttons sat on the customer logos (0px apart, the logo row even started 2px above the strip): the gap above the logos
      (.kx-hero .hxp padding, above) loses to proof.css ".hxp.hxp--plain { padding: 0 }", which loads later with the same weight. */
.kx-hero .hxp.hxp--plain { margin-top: clamp(12px, 2.4svh, 24px); }

/* Nov 5 QA: "Intelligence That Compounds" left "Compounds" alone on a phone; a slightly smaller size lets it break as two even lines. */
@media (max-width: 430px) { .kx .hp2-compound .hp2-sec-head h2 { font-size: 36px; } }