/* ==========================================================================
   Keynes — front page (Ver 3.0).

   Loaded ONLY on the front page, where the legacy Bootstrap/Swiper/AOS and the
   162KB style.css are dequeued (see inc/ver3/enqueue.php). Because it owns the
   document there, it is free to set base element styles.

   Depends on kx-chrome.css for @font-face, the :root tokens and the button and
   pill classes — chrome is always enqueued first.
   ========================================================================== */

/* --- Base ----------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--kx-bg);
  color: var(--kx-ink);
  font-family: var(--kx-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: var(--kx-purple); text-decoration: none; }
a:hover { color: var(--kx-purple-link-hover); }
::selection { background: rgba(110, 86, 248, .18); }

img, svg, video { display: block; max-width: 100%; }

.kx-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--kx-purple);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Layout primitives ---------------------------------------------------- */
.kx-container {
  width: min(100% - var(--kx-gutter), var(--kx-container));
  margin-inline: auto;
}

.kx-section {
  padding: var(--kx-section-pt) 0 var(--kx-section-pb);
  background: var(--kx-bg);
}
.kx-section--alt { background: var(--kx-bg-alt); }

/* #platform follows the how-it-works stage, which reaches into it with a
   negative bottom margin. Without its own stacking context the pillars are
   painted underneath that stage instead of over it. */
#platform { position: relative; z-index: 1; }
/* Growth follows the stats panel, so it needs less air above it. */
.kx-section--tight-top { padding-top: 72px; }

.kx-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.kx-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kx-muted);
}

.kx-h2 {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(32px, 4.2vw, 62px);
  font-weight: 600;
  letter-spacing: -.038em;
  line-height: 1.05;
  text-wrap: balance;
}
/* Measure only: the networks headline is long, but it is set at the same size
   as every other section heading. */
.kx-h2--wide { max-width: 24ch; }
.kx-h2--quotes { max-width: 22ch; }
.kx-h2--narrow { max-width: 20ch; }

.kx-lede {
  margin: 0;
  max-width: 52ch;
  font-size: 16.5px;
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--kx-muted);
}

/* One grid for every card row. auto-fit collapses the empty tracks, so a
   3-up and a 4-up both come out at the design's widths without a modifier,
   and both step down on their own without a breakpoint. */
.kx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 236px), 1fr));
  gap: 18px;
  margin-top: 56px;
  align-items: stretch;
}

/* The lift that picks a card out of its row lives with the accent it belongs
   to, in the hover rules below - there is no resting raised state. */


/* --- Hero (#top) ----------------------------------------------------------
   Scroll drives --cam, --chrome-opacity, --room-blur, --room-opacity and
   --reveal-opacity from JS. The defaults below give a correct first paint
   before the script runs, and remain the final state if it never does. */
.kx-hero {
  position: relative;
  height: 380vh;
  background: var(--kx-bg);
}
.kx-hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: var(--kx-dark);
}
.kx-hero__room {
  position: absolute;
  left: 50%; top: 50%;
  width: max(132vw, 233vh);
  aspect-ratio: 1680 / 951;
  transform: translate(-50.3%, calc(-39.5% - 7vh)) scale(var(--cam, 1));
  transform-origin: 50.3% 39.5%;
  will-change: transform;
}
/* Only ever shown at phone widths - see the phone breakpoint below. */
.kx-hero__backdrop { display: none; }

.kx-hero__room-bg {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  filter: blur(var(--room-blur, 0px)) saturate(.94) brightness(1.02);
  opacity: var(--room-opacity, 1);
}
.kx-hero__glow {
  position: absolute;
  left: 32.2%; top: 20.7%;
  width: 36.2%; height: 38%;
  background: radial-gradient(ellipse at 50% 55%,
    rgba(120, 96, 255, .4) 0%, rgba(118, 94, 255, .16) 52%, rgba(118, 94, 255, 0) 82%);
  filter: blur(26px);
  opacity: calc(var(--glow-strength, 1) * var(--chrome-opacity, 1));
}
.kx-hero__tv {
  position: absolute;
  left: 33.1%; top: 22.4%;
  width: 34.4%;
  aspect-ratio: 16 / 9;
}
.kx-hero__bezel {
  position: absolute;
  inset: 0;
  padding: .95%;
  border-radius: .7%;
  background: linear-gradient(150deg, #2b2d30 0%, #0a0b0c 46%, #1c1e21 100%);
  box-shadow: 0 .12em .32em rgba(24, 26, 24, .34),
              0 .04em .08em rgba(24, 26, 24, .4),
              inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.kx-hero__screen {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: .25%;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.kx-hero__screen video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.kx-hero__gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .085), transparent 22%,
    transparent 74%, rgba(255, 255, 255, .05));
}
.kx-hero__stand {
  position: absolute;
  left: 50.3%; top: 58.6%;
  width: 17.5%; height: 1.7%;
  transform: translateX(-50%);
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, #3c3e41 0%, #1a1c1e 58%, #0e0f10 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 .35em .5em rgba(30, 32, 28, .34);
  opacity: var(--chrome-opacity, 1);
}
.kx-hero__shadow {
  position: absolute;
  left: 50.3%; top: 60.15%;
  width: 18.6%; height: .45%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(38, 40, 34, .3);
  filter: blur(4px);
  opacity: var(--chrome-opacity, 1);
}
.kx-hero__copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  /* Anchored to the bottom so the scrim bleeds to the edge of the stage; the
     bottom padding is what holds the copy off it. */
  padding: 8vh 24px 1.4vh;
  background: linear-gradient(180deg, rgba(12, 12, 14, 0) 0%,
    rgba(12, 12, 14, .42) 62%, rgba(12, 12, 14, .55) 100%);
  opacity: var(--chrome-opacity, 1);
  pointer-events: none;
}
.kx-hero__title {
  margin: 0;
  font-size: clamp(28px, 3.8vw, 60px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
  max-width: 16ch;
}
.kx-hero__sub {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 19px);
  letter-spacing: -.012em;
  color: rgba(255, 255, 255, .84);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
  max-width: 44ch;
}
.kx-hero__reveal {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #fff;
  opacity: var(--reveal-opacity, 0);
  pointer-events: none;
}

/* --- Manifesto (#difference) ---------------------------------------------- */
/* The section is only a wrapper. Each stage owns its own height - a fixed
   height here would trap stage B inside stage A and break both sticky
   contexts, painting the two stages over each other. */
.kx-difference { position: relative; background: var(--kx-bg); }

/* Stage A. Its progress is measured on this element, not on the section. */
.kx-manifesto { position: relative; height: 150vh; }
.kx-manifesto__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kx-manifesto__inner {
  width: min(100% - var(--kx-gutter), 1000px);
  text-align: center;
}
.kx-manifesto__inner .kx-eyebrow { margin-bottom: 26px; }
.kx-manifesto__title {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 66px);
  font-weight: 600;
  letter-spacing: -.032em;
  line-height: 1.12;
  text-wrap: pretty;
  background-image: linear-gradient(90deg,
    #7032DA 0%, #8916D9 10%, #B918DD 20%, #E71BE0 30%, #D71BDD 40%, #C51AD9 50%,
    #B217D4 60%, #A018D1 70%, #8237CC 80%, #6163C8 90%, #4A86C4 100%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}
.kx-manifesto__title span { transition: color .28s ease; color: rgba(29, 29, 31, .14); }
.kx-manifesto__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: 44px;
  flex-wrap: wrap;
}

/* --- Cards (platform, growth, results) ------------------------------------ */
/* One rhythm for every card in the design - 24px padding, 22px radius. */
.kx-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid var(--kx-border);
  background: var(--kx-bg);
}
/* The accents are hover states, not resting ones. The design shows one card in
   each row already picked out, which is how a static mock draws a hover - every
   card in the row carries the modifier and takes it under the pointer instead.

   The modifier names the accent a card takes, not one it is wearing. Only
   transform and the paint properties move, so the row never reflows, and the
   child rules below hang off the same :hover as the parent so the two can never
   disagree about which state the card is in. */
.kx-card--grey,
.kx-card--purple {
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.kx-card--grey:hover {
  background: var(--kx-card-alt);
  box-shadow: var(--kx-shadow-lift);
  transform: translateY(-12px);
}
.kx-card--purple:hover {
  background: var(--kx-purple);
  color: #fff;
  box-shadow: var(--kx-shadow-purple);
  transform: translateY(-12px);
}
.kx-card--purple:hover .kx-card__body,
.kx-card--purple:hover .kx-card__note { color: rgba(255, 255, 255, .82); }
.kx-card--purple:hover .kx-pill { border-color: rgba(255, 255, 255, .4); color: #fff; }

.kx-card__logo {
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 34px;
}
.kx-card__logo img { width: auto; }
.kx-card__logo img[alt='Kortex'],
.kx-card__logo img[alt='Konnect'] { height: 26px; }
.kx-card__logo img[alt='Kai'] { height: 32px; }

/* The product name on a pillar card. Smaller than .kx-card__title, which
   belongs to the growth and results cards and stays at 21px. */
.kx-card__name {
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--kx-ink);
}
.kx-card__name + .kx-card__body { margin-top: 8px; }

.kx-card__body {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--kx-muted);
}

.kx-card__step {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--kx-purple);
}
.kx-card--purple:hover .kx-card__step { color: rgba(255, 255, 255, .75); }
.kx-card__title {
  margin: 12px 0 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.kx-card__note {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--kx-muted);
}

/* Results cards */
.kx-result__title { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.kx-result__figure {
  display: block;
  margin-top: 18px;
  font-size: clamp(30px, 2.6vw, 40px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--kx-purple);
}
.kx-card--purple:hover .kx-result__figure { color: #fff; }
.kx-result__label {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(29, 29, 31, .55);
}
.kx-card--purple:hover .kx-result__label { color: rgba(255, 255, 255, .78); }
.kx-result__body {
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--kx-muted);
}
.kx-card--purple:hover .kx-result__body { color: rgba(255, 255, 255, .82); }

/* --- Networks marquee (#networks) ----------------------------------------- */
.kx-networks__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.kx-marquee {
  margin-top: 48px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.kx-marquee__track {
  display: flex;
  width: max-content;
  animation: kxNetScroll 34s linear infinite;
}
.kx-marquee__item {
  box-sizing: border-box;
  flex: 0 0 clamp(148px, 44vw, 200px);
  margin-right: clamp(10px, 2vw, 14px);
  display: grid;
  place-items: center;
  height: clamp(84px, 25vw, 116px);
  border-radius: 20px;
  border: 1px solid var(--kx-border-soft);
  overflow: hidden;
}
/* Background, object-fit and padding are set per tile in networks.php - they
   are brand data, not a shared rule. Disney and HBO Max bleed to the edge. */
.kx-marquee__item img {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes kxNetScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --- Voices (#voices) ------------------------------------------------------ */
/* Height comes from content; the grid equalises the row. The Ver 2.0 build
   forced a 340px min-height here, which left a dead band under every quote. */
.kx-quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid var(--kx-border);
  background: var(--kx-bg);
}
/* Same as the cards: the accent is what a quote takes under the pointer, not
   what the middle one wears. */
.kx-quote--purple {
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.kx-quote--purple:hover {
  background: var(--kx-purple);
  color: #fff;
  box-shadow: var(--kx-shadow-purple);
  transform: translateY(-12px);
}
.kx-quote blockquote {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.32;
  text-wrap: pretty;
}
.kx-quote figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 34px;
}
.kx-quote__avatar {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: var(--kx-purple-tint);
}
.kx-quote--purple:hover .kx-quote__avatar { background: rgba(255, 255, 255, .24); }
.kx-quote__who { display: flex; flex-direction: column; gap: 2px; }
.kx-quote__name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.kx-quote__role { font-size: 14.5px; letter-spacing: -.01em; color: var(--kx-muted-2); }
.kx-quote--purple:hover .kx-quote__role { color: rgba(255, 255, 255, .72); }

/* --- Kortex (#kortex) ------------------------------------------------------ */
.kx-kortex { position: relative; height: 210vh; background: var(--kx-bg); }
.kx-kortex__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vh;
  padding: 6vh 0 5vh;
}
.kx-kortex__caption {
  position: relative;
  flex: 0 0 auto;
  text-align: center;
  padding-inline: 24px;
  opacity: var(--panel-caption, 1);
  transform: translate3d(0, calc((1 - var(--panel-caption, 1)) * -20px), 0);
}
.kx-kortex__caption .kx-eyebrow { margin-bottom: 16px; }
.kx-kortex__title {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 68px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.02;
}
.kx-tablist {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .1);
  background: rgba(245, 245, 247, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.kx-tablist button {
  display: grid;
  place-items: center;
  height: 40px;
  padding: 0 20px;
  font: inherit;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background .25s ease, box-shadow .25s ease;
}
.kx-tablist button img {
  width: auto;
  pointer-events: none;
  opacity: .5;
  transition: opacity .25s ease;
}
.kx-tablist button img[alt='Kortex'],
.kx-tablist button img[alt='Konnect'] { height: 17px; }
.kx-tablist button img[alt='Kai'] { height: 22px; }
.kx-tablist button[aria-selected='true'] {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.kx-tablist button[aria-selected='true'] img { opacity: 1; }

.kx-device {
  position: relative;
  flex: 0 0 auto;
  width: min(72vw, 1120px, 106vh);
  aspect-ratio: 2432 / 1469;
  transform: translateY(calc((var(--panel-scale, .72) - 1) * 50%)) scale(var(--panel-scale, .72));
  transform-origin: center center;
  will-change: transform;
}
.kx-device__frame {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
}
.kx-device__screens {
  position: absolute;
  left: 9.6%; top: 1.1%;
  width: 80.8%; height: 89.4%;
  z-index: 3;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  background: var(--kx-screen);
}

/* The spots are 16:9 designed frames, the screen is not, so they are fitted
   whole (contain) and everything behind them is painted their own ground. That
   colour is the poster too: the first frame of each spot is bare ground, so
   there is nothing to preload and nothing to flash. It carries the .45s
   cross-fade between tabs as well - against black, a half-faded pane would
   darken mid-swap. */
.kx-device__pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
  background: var(--kx-screen);
}
.kx-device__pane[data-active='true'] { opacity: 1; pointer-events: auto; }
.kx-device__pane video {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--kx-screen);
}
.kx-device__gloss {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(114deg, rgba(255, 255, 255, .07), transparent 24%,
    transparent 78%, rgba(255, 255, 255, .04));
}

/* Shown where artwork has not been supplied yet - now only the testimonial
   cards; every device pane has its spot. */
.kx-placeholder {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  padding: 24px;
  text-align: center;
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .38);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 12px, transparent 12px 24px),
    var(--kx-dark-2);
}

/* --- Stats (#platform-scale) ---------------------------------------------- */
.kx-stats { padding: 8px 0 24px; background: var(--kx-bg); }
.kx-stats__panel {
  box-sizing: border-box;
  width: min(100% - var(--kx-gutter), var(--kx-container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 20px;
  padding: 34px;
  border-radius: 28px;
  border: 1px solid var(--kx-border);
  background: var(--kx-bg-alt);
}
.kx-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.kx-stat__value {
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1;
}
.kx-stat__label { font-size: 15px; letter-spacing: -.01em; color: var(--kx-muted); }

/* --- Testimonial carousel (#testimonials) --------------------------------- */
.kx-testimonials {
  padding: var(--kx-section-pt) 0 116px;
  background: var(--kx-bg);
  overflow: hidden;
}
.kx-carousel {
  position: relative;
  height: min(76vh, 620px);
  margin-top: 60px;
  perspective: 1800px;
  perspective-origin: 50% 50%;
}
.kx-tcard {
  position: absolute;
  left: 50%; top: 0;
  width: min(78vw, 400px);
  height: 100%;
  margin-left: max(-39vw, -200px);
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.22, .7, .2, 1), opacity .45s ease;
  cursor: pointer;
}
.kx-tcard__shell {
  box-sizing: border-box;
  height: 100%;
  padding: 13px;
  border-radius: 44px;
  background: var(--kx-dark);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .14);
}
.kx-tcard__inner {
  position: relative;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: var(--kx-dark-2);
}
.kx-tcard__inner--zenni {
  background: linear-gradient(165deg, #e7e4f7 0%, #f4f2fb 46%, #e3e6f2 100%);
}
.kx-tcard__media { position: absolute; inset: 0; display: grid; }
.kx-tcard__media img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.kx-tcard__media--crossfade img:first-child { animation: kxCrossfade 7s ease-in-out infinite; }
.kx-tcard__media--crossfade img:last-child { animation: kxCrossfade 7s ease-in-out -3.5s infinite; }
.kx-tcard__media--frames {
  inset: 0 0 52% 0;
  grid-template-rows: 1fr;
  place-items: center;
  overflow: hidden;
  padding: 20% 8% 0;
}
.kx-tcard__media--frames img { height: auto; max-height: 100%; min-height: 0; object-fit: contain; }
.kx-tcard__badges {
  position: absolute;
  left: 18px; right: 18px; top: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
}
.kx-tcard__logo {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45);
}
.kx-tcard__logo img { width: auto; }
.kx-tcard__wordmark { font-size: 17px; font-weight: 600; letter-spacing: .3em; color: var(--kx-ink); }
.kx-tcard__metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(11, 11, 12, .62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.kx-tcard__metric strong { font-size: 16px; font-weight: 700; letter-spacing: -.03em; color: #fff; }
.kx-tcard__metric span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.kx-tcard__panel {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  padding: 18px 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.kx-tcard__panel blockquote,
.kx-tcard__statement {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.34;
  color: var(--kx-ink);
  text-wrap: pretty;
}
.kx-tcard__attr { margin: 12px 0 0; font-size: 13.5px; letter-spacing: -.01em; color: var(--kx-muted); }
.kx-tcard__link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.kx-tcard__media .kx-placeholder { position: absolute; inset: 0; }

@keyframes kxCrossfade {
  0%, 40% { opacity: 1; }
  50%, 90% { opacity: 0; }
  100% { opacity: 1; }
}

.kx-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 44px;
}
.kx-carousel__arrow {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  font: inherit;
  border-radius: 50%;
  border: 1px solid var(--kx-border-pill);
  background: #fff;
  color: var(--kx-ink);
  cursor: pointer;
  transition: background .2s ease;
}
.kx-carousel__arrow:hover { background: var(--kx-bg-alt); }
.kx-carousel__arrow svg { width: 17px; height: 17px; }
.kx-carousel__dots { display: flex; align-items: center; gap: 9px; }
.kx-carousel__dots button {
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}
.kx-carousel__dots button[aria-current='true'] {
  background: var(--kx-purple);
  transform: scale(1.35);
}

/* --- Proof (#proof) -------------------------------------------------------- */
.kx-proof { padding: 120px 0 130px; background: var(--kx-bg); }
.kx-proof__figure { margin: 0 auto; max-width: 960px; text-align: center; }
.kx-proof__quote {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.14;
  text-wrap: pretty;
  background-image: linear-gradient(90deg, #7539FF 0%, #E70FE9 48%, #4A8FD4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kx-proof__attr { margin-top: 28px; font-size: 15px; letter-spacing: -.01em; color: var(--kx-muted-2); }

/* --- FAQ (#faq) ------------------------------------------------------------ */
.kx-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 56px;
  max-width: 860px;
  margin-inline: auto;
}
.kx-faq details {
  padding: 22px 26px;
  border-radius: 22px;
  border: 1px solid var(--kx-border);
  background: var(--kx-bg);
}
.kx-faq summary {
  list-style: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.018em;
}
.kx-faq summary::-webkit-details-marker { display: none; }
.kx-faq details p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -.01em;
  color: var(--kx-muted);
}

/* --- Contact (#contact) ---------------------------------------------------- */
.kx-contact { padding: 120px 0 130px; background: var(--kx-bg); }
.kx-contact__head {
  width: min(100% - var(--kx-gutter), var(--kx-container));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.kx-contact__title {
  margin: 0;
  display: inline-block;
  padding: .12em .08em .18em;
  font-size: clamp(38px, 5.6vw, 84px);
  font-weight: 600;
  letter-spacing: -.042em;
  line-height: 1.12;
  background-image: linear-gradient(90deg, #7032DA 0%, #E71BE0 46%, #6163C8 82%, #4A86C4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kx-contact__grid {
  width: min(100% - var(--kx-gutter), 940px);
  margin: 52px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  align-items: stretch;
}
.kx-contact__aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 30px;
  border-radius: 24px;
  background: var(--kx-bg-alt);
}
.kx-contact__aside h3 {
  margin: 0;
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 600;
  letter-spacing: -.032em;
  line-height: 1.08;
}
.kx-contact__points { display: flex; flex-direction: column; gap: 14px; }
.kx-contact__points p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--kx-muted);
}

.kx-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px;
  border-radius: 24px;
  border: 1px solid var(--kx-border);
  background: var(--kx-bg);
}
.kx-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 14px; }
.kx-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.kx-form input,
.kx-form select,
.kx-form textarea {
  box-sizing: border-box;
  width: 100%;
  font: inherit;
  font-size: 15px;
  border-radius: 12px;
  border: 1px solid var(--kx-border-pill);
  background: #fff;
  color: var(--kx-ink);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.kx-form input,
.kx-form select { height: 42px; padding: 0 13px; }
.kx-form select { padding: 0 10px; }
.kx-form textarea { padding: 10px 13px; line-height: 1.5; resize: vertical; }
.kx-form input:focus,
.kx-form select:focus,
.kx-form textarea:focus {
  border-color: var(--kx-purple);
  box-shadow: 0 0 0 3px rgba(110, 86, 248, .18);
}
.kx-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.kx-form__note {
  margin: 0;
  max-width: 30ch;
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--kx-muted-2);
}


/* ==========================================================================
   Responsive — ordinary breakpoints against classes. No !important anywhere.
   ========================================================================== */

/* Tablet: 4-up grids collapse to 2-up, and the hover lift sits flat - in a
   2-up grid it reads as a misaligned row rather than as emphasis. The colour
   change still happens. */
@media (max-width: 1024px) {
  .kx-stats__panel { grid-template-columns: repeat(2, 1fr); }
  .kx-card--grey:hover,
  .kx-card--purple:hover,
  .kx-quote--purple:hover { transform: none; }
}

/* Phone */
@media (max-width: 760px) {

  /* Size the room by width so the television never runs past the edges, and
     let the blurred backdrop cover whatever the room leaves. The mask fades the
     sharp room into that blur rather than meeting it at a hard seam - the top
     and bottom 7% only, well clear of the television. */
  .kx-hero__room {
    width: 250vw;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }

  .kx-hero__backdrop {
    display: block;
    position: absolute;
    inset: -6%;
    background-size: cover;
    background-position: center 42%;
    filter: blur(26px) saturate(.9) brightness(.72);
    opacity: var(--room-opacity, 1);
  }

  .kx-hero__title { font-size: 33px; max-width: 20ch; }
  .kx-hero__sub { font-size: 15.5px; }

  .kx-manifesto { height: 130vh; }

  .kx-grid { gap: 14px; margin-top: 36px; }
  .kx-stats__panel { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; padding: 26px 20px; }

  .kx-quote blockquote { font-size: 19px; }
  .kx-card { padding: 22px; }

  .kx-marquee__item { border-radius: 16px; }

  .kx-kortex { height: 165vh; }
  .kx-kortex__stage { gap: 2.4vh; padding: 8vh 0 4vh; }
  .kx-tablist { gap: 4px; padding: 5px; }
  .kx-tablist button { height: 34px; padding: 0 13px; }
  .kx-tablist button img[alt='Kortex'],
  .kx-tablist button img[alt='Konnect'] { height: 13px; }
  .kx-tablist button img[alt='Kai'] { height: 17px; }
  .kx-device { width: min(94vw, 118vh); }

  .kx-carousel { height: min(72vh, 540px); margin-top: 40px; }
  .kx-tcard__panel blockquote,
  .kx-tcard__statement { font-size: 16.5px; }

  .kx-proof { padding: 76px 0 84px; }
  .kx-contact { padding: 76px 0 84px; }

  .kx-form,
  .kx-contact__aside { padding: 24px; }

  .kx-faq details { padding: 18px 20px; }
  .kx-faq summary { font-size: 16.5px; }

}

/* --- Reduced motion --------------------------------------------------------
   Collapse the pinned scroll sections to their end states and stop the loops. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .kx-hero { height: 100vh; }
  .kx-manifesto,
  .kx-kortex { height: auto; }
  .kx-manifesto__stage,
  .kx-kortex__stage { position: static; height: auto; padding: 96px 0; }
  .kx-manifesto__title span { color: transparent; }
  .kx-device { transform: none; }
  .kx-kortex__caption { opacity: 1; transform: none; }

  .kx-marquee__track,
  .kx-tcard__media--crossfade img { animation: none; }

  .kx-tcard { transition: none; }

  /* The card and quote accents still change colour on hover - that is the
     affordance, not the motion. Only the lift and the fade go. */
  .kx-card--grey,
  .kx-card--purple,
  .kx-quote--purple { transition: none; }
  .kx-card--grey:hover,
  .kx-card--purple:hover,
  .kx-quote--purple:hover { transform: none; }
}

/* --- Meet kAI (#kai) -------------------------------------------------------
   Full-bleed white block. The orb is painted on a canvas behind the copy; the
   copy column is pointer-events: none so the orb is never blocked, except for
   the CTA row which puts them back. */
.kx-kai { position: relative; background: var(--kx-bg); }

.kx-kai__stage {
  position: relative;
  height: min(100vh, 820px);
  min-height: 560px;
  overflow: hidden;
}

.kx-kai__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.kx-kai__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.kx-kai__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 520px;
  max-width: 46vw;
}

.kx-kai__line { color: var(--kx-ink); }

.kx-kai__line--1 {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 56px;
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 600;
  letter-spacing: -.038em;
  line-height: 1.04;
}
.kx-kai__logo {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .34s cubic-bezier(.2, .6, .2, 1), transform .34s cubic-bezier(.2, .6, .2, 1);
}
.kx-kai__logo img { height: 40px; width: auto; object-fit: contain; display: block; }
.kx-kai__stop { margin-left: 1px; }

.kx-kai__line--2 {
  min-height: 40px;
  font-size: clamp(24px, 2.5vw, 34px);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.12;
}

.kx-kai__line--3 {
  min-height: 30px;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.012em;
  color: var(--kx-muted);
  text-wrap: pretty;
}

/* Block caret on whichever line is currently typing. */
.kx-kai__caret {
  display: inline-block;
  background: var(--kx-purple);
  animation: kxKaiCaret 1s steps(1) infinite;
}
/* The browser's own [hidden] rule loses to the display above, so the two
   carets the typewriter has parked need hiding explicitly. */
.kx-kai__caret[hidden] { display: none; }

.kx-kai__caret--1 { width: 4px; height: 38px; }
.kx-kai__caret--2 { width: 3px; height: 28px; margin-left: 5px; vertical-align: -3px; }
.kx-kai__caret--3 { width: 2px; height: 17px; margin-left: 4px; vertical-align: -2px; }

@keyframes kxKaiCaret {
  0%, 46% { opacity: 1; }
  54%, 100% { opacity: 0; }
}

.kx-kai__ctas {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 12px;
  pointer-events: auto;
}
.kx-kai__ask {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -.01em;
  border-radius: 999px;
  background: var(--kx-bg-alt);
  border: 1px solid var(--kx-border-pill);
  color: var(--kx-ink);
}
.kx-kai__ask:hover { color: var(--kx-ink); border-color: var(--kx-purple); }
.kx-kai__ask img { height: 18px; width: auto; object-fit: contain; display: block; }

/* Stacked layout: copy on top, orb recentred below it. The orb half of this
   is done in canvas geometry (see kx-kai.js), not here - a media query cannot
   move the centre of a painted scene. */
@media (max-width: 780px) {
  .kx-kai__overlay { align-items: flex-start; padding-top: 7vh; }
  .kx-kai__copy {
    width: 100%;
    max-width: none;
    align-items: center;
    text-align: center;
  }
  .kx-kai__line--1 { justify-content: center; }
  .kx-kai__ctas { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .kx-kai__logo { opacity: 1; transform: none; transition: none; }
  .kx-kai__caret { animation: none; display: none; }
}

/* --- The difference, stage B (#how-it-works) -------------------------------
   Four steps stacked in one slot and cross-faded by scroll. Pulled up into the
   manifesto stage above it, and tightened into the pillars below.

   The negative margins are why #platform carries z-index - without it the
   pillars are painted under this stage rather than over it. */
/* The -42vh pull below is deliberate: stage B rides up over stage A. But this
   wrapper has no background of its own, so over that overlap it is invisible
   and still topmost - and it was taking the clicks meant for the manifesto's
   "Request a demo" pill and "How Keynes works" link, which stay on screen
   underneath it. The buttons looked live and did nothing.

   Nothing inside #how-it-works is interactive: it is a scroll-driven display
   of a numbered rail and four cross-faded headings, zero links or buttons. So
   it never needs pointer events, and the guard belongs on the wrapper rather
   than the stage - the wrapper is the box that overlaps. Anything interactive
   added in here later must set pointer-events: auto on itself. */
.kx-how {
  position: relative;
  pointer-events: none;
  margin-top: -42vh;
  margin-bottom: -14vh;
  /* Height is overwritten by JS: 100vh per step beyond the first. This is the
     no-JS value, which shows step 01 and nothing else. */
  height: 100vh;
}
.kx-how__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.kx-how__row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(20px, 4vw, 54px);
}

/* Progress rail: the numeral plus four ticks. */
.kx-how__rail {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 6px;
}
.kx-how__num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--kx-purple);
}
.kx-how__ticks { display: flex; flex-direction: column; gap: 7px; }
.kx-how__ticks span {
  display: block;
  width: 2px;
  height: 26px;
  border-radius: 2px;
  background: rgba(0, 0, 0, .13);
  transition: height .35s cubic-bezier(.2, .6, .2, 1), background .35s ease;
}
/* Before JS sizes the stage, the first tick reads as the active one. After
   that the module owns it via .is-active. */
.kx-how:not([data-ready]) .kx-how__ticks span:first-child,
.kx-how[data-ready] .kx-how__ticks span.is-active {
  height: 34px;
  background: var(--kx-purple);
}

/* The copy column is flexible, not fixed, so rail + gap + copy always fit
   inside the container and the gutters survive at every width. The reserved
   min-height stops the slot reflowing as steps swap. */
.kx-how__col {
  position: relative;
  flex: 1 1 auto;
  width: auto;
  max-width: 680px;
  min-width: 0;
  min-height: clamp(280px, 42vh, 380px);
}
.kx-how__step {
  position: absolute;
  left: 0;
  top: 0;
  width: min(100%, 780px);
  will-change: transform, opacity;
}
.kx-how__step + .kx-how__step { opacity: 0; }
.kx-how__step h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 600;
  letter-spacing: -.038em;
  line-height: 1.04;
  text-wrap: pretty;
  color: var(--kx-ink);
}
.kx-how__step p {
  margin: 22px 0 0;
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.012em;
  text-wrap: pretty;
  color: var(--kx-muted);
}

@media (max-width: 600px) {
  .kx-how__row { gap: 14px; }
  .kx-how__col { min-height: clamp(220px, 34vh, 300px); }
  .kx-how__step h2 { font-size: clamp(26px, 7.4vw, 34px); }
  .kx-how__step p { margin-top: 16px; font-size: 15.5px; }
}

/* Short landscape phones cannot afford the reserved slot height. */
@media (max-width: 600px) and (orientation: landscape) {
  .kx-how__col { min-height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .kx-how { height: auto; margin-top: 0; margin-bottom: 0; }
  .kx-how__stage { position: static; height: auto; padding: 96px 0; }
  .kx-how__col { min-height: 0; }
  .kx-how__step { position: static; opacity: 1; transform: none; }
  .kx-how__step + .kx-how__step { margin-top: 64px; opacity: 1; }
  .kx-how__ticks span { transition: none; }
}

/* --- HubSpot contact form -------------------------------------------------
   The embed is created with css: '' so HubSpot loads no stylesheet of its own.
   Its markup therefore arrives unstyled, and the design system dresses it here.
   These selectors track HubSpot generated class names - if the form ever looks
   wrong after a HubSpot change, check the rendered markup before the CSS. */
.kx-hsform { gap: 14px; }

.kx-hsform .hs-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
}

/* Rhythm lives on the fieldset: HubSpot gives every field its own, so putting
   it on the field itself leaves nothing between them. */
.kx-hsform fieldset.form-columns-1,
.kx-hsform fieldset.form-columns-2 { margin-bottom: 14px; }
.kx-hsform fieldset:last-of-type { margin-bottom: 0; }

/* The two-up row, on the same grid the design uses elsewhere, rather than
   HubSpot's floats. */
.kx-hsform .form-columns-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 14px;
}
/* HubSpot injects instance-scoped widths (see the note above kx-hubspot.js);
   these cannot be out-specified, only overridden. */
.kx-hsform .form-columns-2 .hs-form-field {
  float: none;
  width: auto !important;
}
.kx-hsform .hs-input { width: 100% !important; }

/* The panel keeps .kx-form for its shell, which also targets `label` - that
   would stack the required asterisk under the label text. */
.kx-hsform .hs-form-field > label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--kx-ink);
}
.kx-hsform .hs-form-required { margin-left: 2px; color: var(--kx-purple); }
.kx-hsform .hs-field-desc { display: none; }

.kx-hsform fieldset {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}
/* HubSpot puts an 8px right margin on this wrapper, narrowing every field. */
.kx-hsform .input { margin: 0 !important; }

.kx-hsform .hs-input {
  box-sizing: border-box;
  width: 100%;
  font: inherit;
  font-size: 15px;
  border-radius: 12px;
  border: 1px solid var(--kx-border-pill);
  background: #fff;
  color: var(--kx-ink);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.kx-hsform input.hs-input,
.kx-hsform select.hs-input { height: 42px; padding: 0 13px; }
.kx-hsform select.hs-input { padding: 0 10px; }
.kx-hsform textarea.hs-input {
  min-height: 90px;
  padding: 10px 13px;
  line-height: 1.5;
  resize: vertical;
}
.kx-hsform .hs-input:focus {
  border-color: var(--kx-purple);
  box-shadow: 0 0 0 3px rgba(110, 86, 248, .18);
}

/* The design puts the reassurance note to the left of the button on one
   line. The note is moved into .actions by kx-hubspot.js so the two can share
   a row - HubSpot renders the button inside the form and the note lives
   outside it. */
.kx-hsform .hs_submit { margin-top: 16px; }
.kx-hsform .actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.kx-hsform .actions .kx-form__note { order: -1; }
.kx-hsform input[type='submit'] {
  display: inline-block;
  width: auto;
  padding: 12px 26px;
  font-family: var(--kx-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: normal;
  border: none;
  border-radius: 999px;
  background: var(--kx-purple);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
}
.kx-hsform input[type='submit']:hover { background: var(--kx-purple-hover); }

/* Validation messages. */
.kx-hsform .hs-error-msgs {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.kx-hsform .hs-error-msgs li { margin: 0; }
.kx-hsform .hs-error-msgs label {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: #c0392b;
}
.kx-hsform .hs_error_rollup { margin-top: 8px; }

/* The submitted state, when HubSpot answers inline rather than redirecting. */
.kx-hsform .submitted-message {
  font-size: 15px;
  line-height: 1.55;
  color: var(--kx-muted);
}