/* knowhere brand layer (brand book v1.0, 10-14-2026). Loaded last, so it wins.
   Ink and white do the work; purple is the signal (the dot, the primary button, the one action).
   Inter for every headline and all copy, JetBrains Mono for dates, times and IDs, Poppins only inside the logo files. */
:root{
  --ink:#191229;--purple:#5C1FD2;--purple-dark:#9D7BFF;
  --page:#F8F7FA;--g100:#F4F3F7;--g200:#E5E1ED;--g500:#7E7398;--g700:#42365C;
  --ok:#55B685;--warn:#CC7C2E;--bad:#CA3A31;--idle:#9B94AE;
  --fg:var(--ink);--fg2:var(--g700);--muted:var(--g500);--border:var(--g200);--hl:var(--g100);--tint:var(--g100);
  --au1:var(--ink);--au2:var(--ink);--au3:var(--ink);--lilac:var(--purple-dark);--violet:var(--purple);
  --display:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow-card:0 1px 2px rgba(25,18,41,.04),0 0 0 1px rgba(25,18,41,.05);
}
/* 62% white: the page is white, neutral bands are the page gray */
html,body{background:#fff}
section.s.white{background:var(--page);border-block:1px solid var(--g200)}
.navbar{background:rgba(255,255,255,.88)}
/* Headlines: Inter SemiBold, tracking -2% */
h1,.phero h1,h2.big,h2.mid,.tq,.card h3,.post h3,.article h1,.abody h2,.final h2{font-family:var(--display);letter-spacing:-.02em}
h1,.phero h1{font-weight:600}
.tg{font-family:var(--display);letter-spacing:-.015em}
/* Labels: Inter Medium, uppercase, tracking 5%, gray, never purple */
.kick,.eyebrow,.card .tag,.post .tag,.fgrid .fh,.sn{color:var(--g500);font-weight:500;letter-spacing:.05em}
.final .eyebrow{color:var(--purple-dark)}
/* Buttons: purple is the primary action, rounded rectangles */
.btn{border-radius:10px}
.pri{background:var(--purple);color:#fff}
.pri:hover{filter:none;background:#4E19B8}
.out{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--g200)}
.out:hover{background:var(--g100)}
.inv{background:#fff;color:var(--ink)}
.chrome{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
/* Dark grounds are flat ink: no glows, no gradients */
.stage,.st2,.final,.pull,.post.feature .art,.post .thumb,.card.dark{background:var(--ink)!important}
/* Bullets and small markers are ink; purple stays rare */
.ticks li::before{background:var(--ink)}
.soon{background:var(--g100);color:var(--g700);box-shadow:inset 0 0 0 1px var(--g200)}
/* Data: dates, times, IDs */
.mono,.post .meta time,.article .meta time{font-family:var(--mono);font-size:.92em;letter-spacing:0}
/* Logo */
.lk .logo{height:24px;width:auto;display:block}
footer .lk .logo{height:24px}
/* Page families on the brand palette: flat ink grounds, gray neutrals, purple only as a dot or the one action */
.t-product .pband::before{background:var(--ink)!important}
.t-product .track::before{background:var(--g200)!important}
.t-product .live .node{background:var(--purple)}
.t-product .live .node::after{box-shadow:0 0 0 2px var(--purple-dark)}
.t-product .minor .node{box-shadow:inset 0 0 0 3px var(--ink),0 0 0 6px var(--page)}
.t-product .phase{color:var(--ink)}
.t-product .capline b,.t-product .capline strong{color:#fff}
.t-compare .cx-them{background:var(--g100)!important;color:var(--g500)}
.t-compare .cx-us,.t-compare .cx-opt.us,.t-compare .cmp thead th.kh,.t-pricing .pr-plan.pop{background:var(--ink)!important}
.t-compare .cx-us .cx-who img.cx-logo{height:28px}
.t-pricing .pr-for{color:var(--g500)}
.t-pricing .pop .pr-for{color:var(--purple-dark)}
.t-about .ab-hero{background:var(--page)!important}
.t-about .ab-tl::before{background:var(--g200)!important}
.t-about .ab-q mark{background:linear-gradient(transparent 62%,var(--g200) 62%,var(--g200) 92%,transparent 92%)}
.t-about .ab-role{color:var(--g500)}
.t-about .ab-ph{box-shadow:0 0 0 1px var(--g200)}
.t-about .ab-ph::after{display:none}
.t-about .ab-hang{color:var(--g200)}
.t-about .ab-qp{border-left:0;padding-left:0}
.t-about .ab-tl li::before{box-shadow:inset 0 0 0 3px var(--ink)}
.t-about .ab-tl li.now::before{background:var(--purple);box-shadow:0 0 0 6px var(--g100)}
.t-about .ab-tl li.now .ab-yr{color:var(--ink)}
.t-about .ab-n{color:var(--ink)}
@media (max-width:420px){.hc h1{font-size:32px}}
/* The wordmark set inline in a headline: the real logo file, sized to the ascenders, sitting on the baseline */
.wm-inline{display:inline-block;height:.74em;width:auto;vertical-align:baseline;margin-left:.04em}
/* The brand line set as a graphic: lowercase Poppins Medium, ending on the wordmark (brand book p06) */
/* "know" in the text matches the "know" in the wordmark: same face, the wordmark's tracking (-24 units),
   equal k height (the wordmark box is 752 units, its k is 740), a shared baseline (the box sits 12 units low),
   and the same left edge (Poppins k carries 75 units of side bearing; the outlined wordmark carries none) */
.hc h1.brandline{font-family:Poppins,var(--display);font-weight:500;letter-spacing:-.024em}
.hc h1.brandline .wm-inline{height:.752em;vertical-align:-.012em;margin-left:0;transform:translateX(.0755em)}
/* Accessible text grays (WCAG AA). Brand Gray 500 (#7E7398) stays for lines, dots and decoration; it is
   4.0-4.4:1 on the page and gray bands, below the 4.5:1 small text needs. Text uses a step darker:
   Gray 600 #6B6082 (5.3-5.8:1) for secondary text, #5E5375 (6.4-7.1:1) for the gray half of the statement. */
:root{--g600:#6B6082;--muted:var(--g600)}
.kick,.eyebrow,.card .tag,.post .tag,.fgrid .fh,.sn,.t-pricing .pr-for,.t-about .ab-role{color:var(--g600)}
.tq .a{color:#5E5375}
.t-compare{--cx-g3:#6B6082;--cx-g4:#6B6082}
.t-compare .cx-them,.t-compare .cx-them .cx-who,.t-compare .cx-opt.them .who{color:var(--g600)}
:root{--muted2:var(--g600)}
.t-compare .cx-them .cx-claim,.t-compare .cx-opt.them h3,.t-compare .cx-opt.them .price,.t-compare .cx-opt.them .lone{color:var(--g600)}
@media (max-width:380px){.faqgrid h2{font-size:23px}}
/* FAQ: the block sits centered on the page; each question and answer still reads left-aligned */
.faqgrid{justify-items:center}
.faqgrid h2{text-align:center}
.faqgrid .faq{width:100%;max-width:880px}

/* events marquee under the statement */
.foot .shows{display:block;margin:0;min-width:0}
.shows-k{margin:0 0 10px;font:500 13px/1.2 var(--sans);color:var(--g600,#6B6082)}
.mq{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-t{list-style:none;margin:0;padding:0;display:flex;flex:none;gap:0;animation:mq 70s linear infinite}
.mq-t li{font:500 15px/1.4 var(--sans);color:var(--fg2);white-space:nowrap;padding:0 14px}
.mq-t li::after{content:"·";color:var(--g600,#6B6082);margin-left:28px;position:relative;left:-14px}
.mq:hover .mq-t{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.mq{-webkit-mask-image:none;mask-image:none}.mq-t{animation:none;flex-wrap:wrap;flex:1;row-gap:4px}.mq-t[aria-hidden]{display:none}.mq-t li{padding:0 10px 0 0}}

/* product loops: silent autoplay clips standing in for stills */
video.loop{display:block;width:100%;height:auto;background:var(--page,#F8F7FA)}
.t-product .shot-img video.loop{height:100%;object-fit:cover;object-position:top center}
.t-product .shot-img video.loop.tall,.t-product .shot-img video.loop.wide{object-fit:contain;object-position:center}
.loopfig{margin:32px 0}
.loopfig video.loop{border-radius:14px;box-shadow:var(--shadow-card),0 0 0 1px rgba(25,18,41,.06)}
.loopfig figcaption{margin-top:10px;font-size:14px;color:var(--g600,#6B6082)}
.t-product .shot-img:has(video.loop.wide){aspect-ratio:auto}

/* Why knowhere menu: items had lost their inset to the generic nav-link padding */
.nav nav .ddm{width:380px;padding:10px}
.nav nav .ddm a{padding:12px 16px;box-shadow:none}

/* Trust Center: at-a-glance facts under the hero */
.trust-glance{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.trust-glance li{background:#fff;border-radius:14px;box-shadow:var(--shadow-card),0 0 0 1px rgba(25,18,41,.05);padding:18px 18px 20px}
.trust-glance b{display:block;font:600 16px/1.3 var(--display);letter-spacing:-.01em;color:var(--fg)}
.trust-glance span{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--g600,#6B6082)}
@media (max-width:900px){.trust-glance{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.trust-glance{grid-template-columns:1fr}}
.legal .social{display:inline-flex;gap:16px;margin-left:20px}
.legal .social a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){.legal .social{display:flex;margin:10px 0 0}}

/* home Know It All: the answer panel floating on the ink stage, fading out at the bottom */
.kia-stage{display:flex;justify-content:center;align-items:center}
.kia-panel{margin:0;width:min(86%,560px)}
.kia-panel img{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 48px rgba(0,0,0,.35))}

/* main nav centered on the page between the logo and the actions (desktop only; phones use the menu) */
@media (min-width:861px){
  .nav{display:grid;grid-template-columns:1fr auto 1fr}
  .nav .lk{justify-self:start}
  .nav nav{justify-self:center}
  .nav .r{justify-self:end;margin-left:0}
}