/* ==========================================================================
   Kore: layout chrome: header, mega menu, mobile drawer, CTA, footer, chat
   ========================================================================== */

/* ---------------- Header ---------------- */
.k-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    transform 0.45s var(--ease);
}
.k-header.is-stuck {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--line);
}
.k-header.is-hidden {
  transform: translateY(-102%);
}
.k-header.is-open {
  transform: none;
  background: #fff;
  border-bottom-color: var(--line);
}

body {
  padding-top: var(--header-h);
}

.k-header__inner {
  height: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 22px;
}

.k-logo {
  flex: none;
  display: block;
}
.k-logo img {
  height: 30px;
  width: auto;
  transition: transform var(--t) var(--ease);
}
.k-logo:hover img {
  transform: scale(1.04);
}

.k-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
}

.k-nav__trigger,
.k-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition:
    color var(--t) var(--ease),
    background-color var(--t) var(--ease);
}
.k-nav__trigger::after,
.k-nav__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  background: var(--cyan);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t) var(--ease);
}
.k-nav__trigger:hover,
.k-nav__link:hover {
  color: var(--ink);
  background: var(--paper-2);
}
.k-nav__trigger.is-current,
.k-nav__link.is-current {
  color: var(--ink);
  font-weight: 600;
}
.k-nav__trigger.is-current::after,
.k-nav__link.is-current::after,
.k-nav__link:hover::after {
  transform: scaleX(1);
}
.k-nav__chev {
  transition: transform var(--t) var(--ease);
  opacity: 0.6;
}
.k-nav__group.is-open .k-nav__chev {
  transform: rotate(180deg);
}
.k-nav__group.is-open .k-nav__trigger {
  color: var(--ink);
  background: var(--paper-2);
}

/* ---------------- Mega menu ---------------- */
.k-nav__group {
  position: static;
}

.k-mega {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 1090;
  background: #fff;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition:
    opacity 0.28s var(--ease),
    transform 0.34s var(--ease),
    visibility 0.28s;
}
.k-nav__group.is-open .k-mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Compact dropdown: for a menu with two entries, the full-bleed panel is a
   band of empty white. This one is a card under its own trigger, which needs
   the group to become the positioning context. */
.k-nav__group--compact {
  position: relative;
}
.k-mega--compact {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: auto;
  width: 340px;
  max-width: calc(100vw - 2 * var(--gutter));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.k-mega--compact .k-mega__inner {
  display: block;
  padding: 10px;
  max-width: none;
  margin: 0;
}
.k-mega--compact .k-mega__grid {
  grid-template-columns: 1fr;
  gap: 2px;
}
/* Six sections stacked in one column is a very tall drop. Two columns keeps it
   to three rows, which reads at a glance. */
.k-mega--cols2 {
  width: 580px;
}
.k-mega--cols2 .k-mega__grid {
  grid-template-columns: 1fr 1fr;
  gap: 2px 6px;
}
.k-mega--compact .k-mega__item {
  padding: 11px 12px;
}
/* The icon here is a line glyph, not a product logo, so it keeps the tinted
   tile the mega items used to have. */
.k-mega--compact .k-mega__icon {
  background: color-mix(in srgb, var(--accent) 9%, #fff);
  border-color: color-mix(in srgb, var(--accent) 18%, #fff);
}

.k-mega__inner {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 34px var(--gutter) 38px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 46px;
}

.k-mega__aside {
  --accent: var(--blue);
}
.k-mega__title {
  font-size: 1.42rem;
  margin: 16px 0 10px;
  line-height: 1.16;
}
.k-mega__text {
  color: var(--muted);
  font-size: 0.93rem;
  margin-bottom: 16px;
}
.k-mega__promo {
  margin-top: 24px;
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line);
}
.k-mega__promo img {
  width: 100%;
  /* The heroes own shape, so a product shot sits in here whole rather than
     being sliced through the middle. */
  aspect-ratio: 300 / 210;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.7s var(--ease);
}
.k-mega__promo:hover img {
  transform: scale(1.06);
}
/* Scrim so the caption stays legible whatever the photo behind it is doing. */
.k-mega__promo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 38%,
    rgba(7, 16, 25, 0.82) 100%
  );
}
.k-mega__promo span {
  position: absolute;
  z-index: 1;
  left: 14px;
  right: 14px;
  bottom: 12px;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 600;
}

.k-mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 10px;
  align-content: start;
}
/* The two entries that close the Applications menu. They sit on a row of
   their own across the full grid and are centred on it, because they are one
   level up from the products rather than two more products. Each keeps a
   column's width so the columns above still read straight through. */
.k-mega__tabs {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.k-mega__tabs > .k-mega__item {
  flex: 0 1 calc((100% - 20px) / 3);
  min-width: 0;
}

.k-nav__group.is-open .k-mega__grid > li {
  animation: megaIn 0.5s var(--ease) both;
  animation-delay: var(--d);
}
@keyframes megaIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.k-mega__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  align-items: start;
  gap: 12px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid transparent;
  transition:
    background-color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    transform var(--t) var(--ease);
}
.k-mega__item:hover {
  background: var(--paper);
  border-color: var(--line);
  transform: translateX(2px);
}
.k-mega__item.is-current {
  background: color-mix(in srgb, var(--accent) 6%, #fff);
  border-color: color-mix(in srgb, var(--accent) 20%, #fff);
}
/* One neutral tile for every row, logo or glyph. A brand mark cannot be
   recoloured to white on hover the way a glyph could, and tilting one reads as
   a fault, so the tile keeps its face and answers the pointer by lifting its
   border. Neutral also stops a dozen brand colours fighting down the column. */
.k-mega__icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--line);
  transition:
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    transform var(--t) var(--ease);
}
.k-mega__icon--logo {
  padding: 5px;
}
.k-mega__icon--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.k-mega__item:hover .k-mega__icon {
  border-color: color-mix(in srgb, var(--accent) 45%, #fff);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 15%, transparent);
  transform: scale(1.06);
}
.k-mega__body {
  display: block;
  min-width: 0;
}
.k-mega__name {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.k-mega__blurb {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 2px;
}
.k-mega__go {
  color: var(--muted-2);
  opacity: 0;
  transform: translateX(-6px);
  transition: all var(--t) var(--ease);
  margin-top: 9px;
}
.k-mega__item:hover .k-mega__go {
  opacity: 1;
  transform: none;
  color: var(--accent);
}

/* ---------------- Header actions ---------------- */
.k-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.k-header__login {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-2);
  padding: 8px 12px;
  transition: color var(--t) var(--ease);
}
.k-header__login:hover {
  color: var(--ink);
}

/* A flex column with a gap, not stacked margins, the bars were 18px wide but
   6px apart, which read as three loose lines rather than one icon. Now 20px
   wide and 4px apart: pitch is height + gap = 6px, which is what the close
   transform below moves each outer bar by. */
.k-burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  background: none;
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background-color var(--t) var(--ease);
}
.k-burger:hover {
  background: var(--paper-2);
}
.k-burger span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0;
  background: var(--ink);
  border-radius: 2px;
  transition:
    transform 0.3s var(--ease),
    opacity 0.2s var(--ease);
}
.k-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.k-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.k-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------------- Mobile drawer ---------------- */
.k-scrim {
  position: fixed;
  inset: 0;
  z-index: 1095;
  background: rgba(11, 21, 36, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s var(--ease),
    visibility 0.35s;
}
body.is-drawer .k-scrim {
  opacity: 1;
  visibility: visible;
}

.k-drawer {
  position: fixed;
  inset: 0;
  z-index: 1120;
  pointer-events: none;
  /* The panel parks past the right edge when closed. Without this the page
     could be scrolled sideways to reach it on a very narrow screen. */
  overflow: hidden;
}
body.is-drawer .k-drawer {
  pointer-events: auto;
}
.k-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform 0.45s var(--ease);
}
body.is-drawer .k-drawer__panel {
  transform: none;
}
.k-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
/* Matches the hamburger it replaces: no box, just a hover tint. */
.k-drawer__close {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color var(--t) var(--ease);
}
.k-drawer__close:hover {
  background: var(--paper-2);
}
.k-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 22px 22px;
}
.k-drawer__link {
  display: block;
  padding: 15px 0;
  font-size: 1.05rem;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.k-drawer__foot {
  padding: 18px 22px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.k-acc {
  border-bottom: 1px solid var(--line);
}
.k-acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: left;
}
.k-acc__head svg {
  transition: transform 0.3s var(--ease);
  color: var(--muted);
}
.k-acc.is-open .k-acc__head svg {
  transform: rotate(135deg);
  color: var(--cyan);
}
.k-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease);
}
.k-acc.is-open .k-acc__panel {
  grid-template-rows: 1fr;
}
.k-acc__inner {
  overflow: hidden;
}
.k-acc__inner > a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 11px;
  font-size: 0.95rem;
  color: var(--ink-2);
  transition: background-color var(--t) var(--ease);
}
.k-acc__inner > a:hover {
  background: var(--paper-2);
}
.k-acc__inner > a:last-child {
  margin-bottom: 10px;
}
.k-acc__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  flex: none;
}
.k-acc__icon--logo {
  background: #fff;
  border: 1px solid var(--line);
  padding: 4px;
}
.k-acc__icon--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.k-acc__icon:not(.k-acc__icon--logo) {
  border: 1px solid color-mix(in srgb, var(--accent) 16%, #fff);
}
/* The section links that close a group: All Applications, Features & Tools,
   and Company's See all. Slightly stronger than a product row because they
   are a level up from it, but the same colour: they used to be cyan on every
   page, which is the colour this drawer uses for the page you are on, so
   they always looked like the current one. They take the same current-page
   marker as any other row instead. */
.k-acc__all {
  font-weight: 600;
  color: var(--ink-2);
}

/* ---------------- Pre-footer CTA ---------------- */
.k-cta {
  padding: 0 0 clamp(60px, 7vw, 110px);
}
/* Same intent as .splitband: off the dark gradient, uneven columns, no
   repeated tick glyphs, and real faces instead of an abstraction of "support".
   The tilt on hover is kept: that part was liked. */
.k-cta__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 0;
  align-items: stretch;
}
.k-cta__body {
  position: relative;
  z-index: 2;
  padding: clamp(34px, 4.2vw, 64px);
  align-self: center;
}
.k-cta__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.k-cta__eyebrow::after {
  content: "";
  height: 1px;
  width: 46px;
  background: var(--line-2);
}
.k-cta__title {
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.07;
  margin: 18px 0 16px;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.k-cta__text {
  color: var(--muted);
  max-width: 48ch;
}

/* The people, overlapped the way a team photo strip reads. */
.k-cta__who {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.k-cta__faces {
  display: flex;
}
.k-cta__faces img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--paper);
  background: var(--paper-2);
}
.k-cta__faces img + img {
  margin-left: -11px;
}
.k-cta__wholine {
  font-size: 0.86rem;
  color: var(--muted);
}

.k-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.k-cta__points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 24px;
  font-size: 0.84rem;
  color: var(--muted-2);
}
/* Separated by a middot rather than a tick each, a line of text, not a
   third checklist on the same page. */
.k-cta__points li {
  display: flex;
  align-items: center;
  gap: 20px;
}
.k-cta__points li + li::before {
  content: "·";
  margin-right: 20px;
  color: var(--line-2);
}

/* Once it wraps, the middots end up orphaned at the start of a line and the
   items no longer share a left edge. Below this width it becomes a plain
   stacked list, every item marked the same way, all starting together. */
@media (max-width: 760px) {
  .k-cta__points {
    flex-direction: column;
    gap: 9px;
  }
  .k-cta__points li {
    gap: 9px;
  }
  .k-cta__points li::before,
  .k-cta__points li + li::before {
    content: "·";
    margin: 0;
    color: var(--line-2);
  }
}
.k-cta__media {
  position: relative;
  z-index: 1;
  min-height: 340px;
}
.k-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------- Footer ---------------- */
.k-footer {
  position: relative;
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: clamp(52px, 6vw, 84px) 0 0;
  overflow: hidden;
}
.k-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 54px;
}
.k-footer__logo {
  height: 30px;
  width: auto;
}
/* The registered company name, under the mark. */
.k-footer__legal {
  margin: 12px 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.k-footer__pitch {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 46ch;
  margin: 8px 0 22px;
}

.k-subscribe {
  display: flex;
  gap: 8px;
  max-width: 420px;
}
.k-subscribe input {
  flex: 1;
  min-width: 0;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: #fff;
  font-size: 0.93rem;
  color: var(--ink);
  transition:
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.k-subscribe input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: none;
}
/* The honeypot is a flex child of the form, so it must not claim a gap slot.
   .cform__hp in pages.css takes it out of flow; this makes sure flex does not
   reserve space for it either. */
.k-subscribe .cform__hp {
  position: absolute;
  flex: 0 0 0;
}

/* ---------- Result message ----------

   Lighter than .cform__status in pages.css on purpose. That one sits under a
   full contact form with room to breathe; this one lives in a 420px column in
   the footer and in a narrow band, where a tinted panel with a border reads as
   clutter. So: the tick and the colour, no box.

   Collapsed rather than display:none when empty, because the element carries
   role="status" aria-live="polite" and a live region that is inserted and
   filled in the same frame is announced unreliably. */
.k-subscribe__msg {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  max-width: 420px;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--blue);
}
.k-subscribe__msg.is-ok,
.k-subscribe__msg.is-error {
  max-height: none;
  overflow: visible;
  opacity: 1;
  margin-top: 10px;
  /* statusIn is defined in pages.css next to .cform__status. Keyframes are
     global regardless of stylesheet order, so this resolves fine. */
  animation: statusIn 0.3s var(--ease) both;
}
/* Pseudo-element, not markup: the handler sets the text with .text(), which
   would wipe a real child node on every update. */
.k-subscribe__msg.is-ok::before,
.k-subscribe__msg.is-error::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}
.k-subscribe__msg.is-ok {
  color: #1f6b52;
}
.k-subscribe__msg.is-ok::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7f63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.4l2.6 2.6L16 9.6'/%3E%3C/svg%3E");
}
.k-subscribe__msg.is-error {
  color: #c02626;
}
.k-subscribe__msg.is-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c02626' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.8v4.6'/%3E%3Cpath d='M12 16.2h.01'/%3E%3C/svg%3E");
}

/* Google's attribution, required because .grecaptcha-badge is hidden. */
.k-subscribe__fine {
  max-width: 420px;
  margin: 10px 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--muted);
}
.k-subscribe__fine a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.k-subscribe__fine a:hover {
  text-decoration-color: currentColor;
}

/* ---------- Pre-footer newsletter band (includes/cta.php) ----------

   Sits under .k-cta__card as the quieter alternative to it. White on the
   section's own ground with a hairline border, where the card is --paper: that
   inversion is what keeps it reading as secondary rather than as a third
   call to action. */
.k-subband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 44px);
  flex-wrap: wrap;
  margin-top: 14px;
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 34px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.k-subband__text {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-width: 0;
}
.k-subband__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--paper-2);
  color: var(--blue);
}
.k-subband__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
}
.k-subband__note {
  margin: 4px 0 0;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--ink-2);
}
/* The band's own form: wider target than the footer's, and its message hangs
   under the whole band rather than under the input. */
.k-subscribe--band {
  flex: 0 1 420px;
}
.k-subband .k-subscribe__msg,
.k-subband .k-subscribe__fine {
  flex-basis: 100%;
  max-width: none;
}
.k-subband .k-subscribe__msg.is-ok,
.k-subband .k-subscribe__msg.is-error {
  margin-top: 4px;
}

@media (max-width: 720px) {
  /* Stacked: the input needs the full width long before the text does. */
  .k-subband {
    flex-direction: column;
    align-items: stretch;
  }
  .k-subscribe--band {
    flex: 1 1 auto;
  }
}
@media (max-width: 460px) {
  /* Side by side, the button leaves the field too narrow to read the address. */
  .k-subscribe {
    flex-wrap: wrap;
  }
  .k-subscribe input {
    flex: 1 1 100%;
  }
  .k-subscribe > .k-btn {
    width: 100%;
  }
}

.k-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.k-footer__col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.k-footer__col h3 {
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: 4px;
}
.k-footer__col-h2 {
  margin-top: 22px;
}
.k-footer__col a {
  font-size: 0.92rem;
  color: var(--ink-2);
  width: fit-content;
  position: relative;
  transition:
    color var(--t) var(--ease),
    transform var(--t) var(--ease);
}
.k-footer__col a:hover {
  color: var(--blue);
  transform: translateX(3px);
}
.k-footer__addr {
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 30ch;
}

/* The chat bubble and the back-to-top button are fixed to the bottom right
   corner, and this is the last row on the page, so they were landing on it:
   Privacy and Terms on a desktop, the last social link on a phone. Keeping
   the row out of their column fixes it at every width, where clearing them
   downwards would have meant 170px of dead space under every footer. */
.k-footer__bottom {
  margin-top: clamp(38px, 4vw, 56px);
  padding: 22px 104px 22px 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  font-size: 0.86rem;
  color: var(--muted);
}
.k-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-left: auto;
}
.k-footer__social a:hover,
.k-footer__legal a:hover {
  color: var(--blue);
}
.k-footer__legal {
  display: flex;
  gap: 18px;
}

.k-footer__wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 17vw, 15rem);
  line-height: 0.82;
  letter-spacing: -0.05em;
  text-align: center;
  color: rgba(11, 21, 36, 0.045);
  margin-bottom: -0.2em;
  user-select: none;
  pointer-events: none;
}

/* ---------------- Back to top ---------------- */
/* Both corner buttons are circles of different sizes, so the shared numbers
   live in one place. Aligning their right edges would leave the smaller one
   visibly off-axis, and writing the maths out in two rules is how they drifted
   apart the first time: change --fab-size and both follow. */
:root {
  --fab-size: 80px;
  --fab-inset: 22px;
  --fab-right: var(--fab-inset);
  --fab-bottom: 24px;
  --totop-size: 46px;
  --totop-gap: 14px;
}

/* The true corner of the window, at every width.

   These used to pull in to the edge of the 1400px column past 2000px, on the
   reasoning that on a very wide panel the window corner is a long way from
   the text being read. In practice that put them level with the right edge of
   the header, which reads as part of the header rather than as something
   floating over the page, and it is not where anyone looks for a chat button.
   Every site parks these in the corner; so does this one now. */
.k-totop {
  position: fixed;
  /* Centred on the orb's axis: half the difference in their diameters. */
  right: calc(var(--fab-right) + (var(--fab-size) - var(--totop-size)) / 2);
  bottom: calc(var(--fab-bottom) + var(--fab-size) + var(--totop-gap));
  z-index: 900;
  width: var(--totop-size);
  height: var(--totop-size);
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line-2);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--sh-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: all var(--t) var(--ease);
}
.k-totop.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.k-totop:hover {
  background: var(--ink);
  color: #fff;
}

/* ---------------- Ask Kore chat ---------------- */
.k-chat-fab {
  position: fixed;
  right: var(--fab-right);
  bottom: var(--fab-bottom);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  cursor: pointer;
  /* No pill behind it: the orb is the button. */
  background: none;
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.k-chat-fab:hover {
  transform: translateY(-3px);
}
/* The Kore orb, played from an 8x8 sprite sheet: 64 frames sampled from the
   original 137-frame animation, 72px each so it stays crisp at 2x. Two stepped
   animations walk the sheet, the fast one across a row and the slow one down
   the rows. That is the whole player, no script involved. */
/* Stepped in pixels, not percentages: a percentage background-position aligns
   that point of the image with the same point of the box, so -100% and beyond
   push the frame out of view instead of advancing it by one cell. With the
   sheet scaled to 8 cells across, each step is exactly one --orb. */
.k-chat-fab__orb {
  --orb: var(--fab-size);
  width: var(--orb);
  height: var(--orb);
  flex: none;
  /* A soft shadow under the sphere so it sits on the page rather than floating
     flat on white. Not a background: it follows the artwork's own edges. */
  filter: drop-shadow(0 8px 16px rgba(11, 21, 36, 0.22));
  background-image: url("../images/kore-orb-sprite.png");
  background-repeat: no-repeat;
  background-size: calc(var(--orb) * 8) calc(var(--orb) * 8);
  animation:
    orbCol 0.58s steps(8) infinite,
    orbRow 4.64s steps(8) infinite;
}
@keyframes orbCol {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: calc(var(--orb) * -8);
  }
}
@keyframes orbRow {
  from {
    background-position-y: 0;
  }
  to {
    background-position-y: calc(var(--orb) * -8);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Hold a single frame rather than looping. */
  .k-chat-fab__orb {
    animation: none;
    background-position: 0 0;
  }
}
body.is-chat .k-chat-fab {
  opacity: 0;
  pointer-events: none;
}

.k-chat {
  position: fixed;
  inset: 0;
  z-index: 1300;
  pointer-events: none;
}
body.is-chat .k-chat {
  pointer-events: auto;
}
.k-chat__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 21, 36, 0.35);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
body.is-chat .k-chat__scrim {
  opacity: 1;
}
.k-chat__win {
  position: absolute;
  /* Opens where its button is. The scrim it sits in is fixed to the viewport
     and full width, so the same 50%-based offset resolves to the same place. */
  right: var(--fab-right);
  bottom: 22px;
  width: min(410px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 44px));
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(22px) scale(0.97);
  transition:
    opacity 0.32s var(--ease),
    transform 0.38s var(--ease);
}
body.is-chat .k-chat__win {
  opacity: 1;
  transform: none;
}
.k-chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.k-chat__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-family: var(--font-display);
}
.k-chat__close {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.k-chat__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.k-chat__greet p {
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 14px 16px;
  border-radius: 16px 16px 16px 4px;
  font-size: 0.93rem;
}
.k-chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.k-chat__chips .k-chip {
  font-size: 0.82rem;
  padding: 8px 13px;
}
.k-chat__msg {
  max-width: 86%;
  padding: 12px 15px;
  border-radius: 16px;
  font-size: 0.92rem;
  line-height: 1.55;
}
.k-chat__msg--me {
  align-self: flex-end;
  background: var(--ink);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}
.k-chat__msg--ai {
  align-self: flex-start;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 16px 16px 16px 4px;
}
.k-chat__typing {
  display: inline-flex;
  gap: 4px;
}
.k-chat__typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted-2);
  animation: dotBlink 1.2s infinite;
}
.k-chat__typing i:nth-child(2) {
  animation-delay: 0.18s;
}
.k-chat__typing i:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes dotBlink {
  0%,
  60%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.k-chat__foot {
  display: flex;
  gap: 8px;
  padding: 14px;
  border-top: 1px solid var(--line);
}
.k-chat__foot input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 0.92rem;
}
.k-chat__foot input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: none;
}
.k-chat__foot button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--cyan);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  transition: transform var(--t) var(--ease);
}
.k-chat__foot button:hover {
  transform: scale(1.06);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1420px) {
  .k-mega__inner {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
  }
  .k-nav__trigger,
  .k-nav__link {
    padding: 9px 11px;
    font-size: 0.93rem;
  }
}

@media (max-width: 1300px) {
  .k-nav,
  .k-header__login,
  .k-header__actions .k-btn {
    display: none;
  }
  .k-burger {
    display: flex;
  }
  .k-header__actions {
    gap: 8px;
  }
}

@media (max-width: 980px) {
  .k-cta__card {
    grid-template-columns: 1fr;
  }
  .k-cta__media {
    min-height: 240px;
    order: -1;
  }
  .k-cta__media::after {
    background: linear-gradient(180deg, rgba(11, 21, 36, 0.15), #0b1524 92%);
  }
  /* minmax(0, …), not a bare 1fr, a 1fr track has an automatic minimum, so
     the widest item inside (a long nav label, the address) pushed the column
     past the container and clipped the subscribe button off the right edge. */
  .k-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .k-footer__pitch {
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  :root {
    --gutter: 18px;
    --header-h: 66px;
  }
  body {
    font-size: 16px;
  }
  .k-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }
  .k-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .k-footer__social {
    margin-left: 0;
  }
  .k-chat__win {
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  /* Collapsed to icons: both buttons need the same diameter and the same
     right offset, or their centres do not line up in the stack. */
  /* The shared variables carry the centring and the stacking with them. */
  :root {
    --fab-size: 64px;
    /* Only the inset changes: --fab-right is worked out from it, and at this
       width the max() is already resolving to the inset anyway. */
    --fab-inset: 16px;
    --fab-bottom: 20px;
    --totop-gap: 12px;
  }
}

@media (max-width: 520px) {
  .k-footer__cols {
    grid-template-columns: 1fr;
  }
  .k-drawer__foot {
    grid-template-columns: 1fr;
  }
}

/* The page you are on, marked in the drawer. Without it the menu gives no clue
   which product you are already looking at. A tinted row with a bar down its
   leading edge, because a list of links needs the marker at the start of the
   row where the eye lands, not under the text. */
.k-acc__inner > a.is-current {
  position: relative;
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  color: var(--ink);
  font-weight: 600;
}
.k-acc__inner > a.is-current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
/* And the group that holds it, so the heading agrees with the row inside. */
.k-acc__head.is-current { color: var(--ink); font-weight: 700; }

/* The promo shot crossfades as the pointer moves down the list. */
.k-mega__promo img { transition: opacity .22s var(--ease), transform .7s var(--ease); }

/* ==========================================================================
   THE NUDGE

   A small card beside the orb that says hello a few seconds after the page
   settles. It sits to the left of the orb rather than above it, because above
   is where the back-to-top button lives, and its tail points across at the
   orb so the two read as one thing.

   Everything is anchored off the same --fab- variables the orb and the
   back-to-top use, so moving the orb moves this with it.
   ========================================================================== */
.k-nudge {
  position: fixed;
  z-index: 899;               /* under the orb, over the page */
  right: calc(var(--fab-right) + var(--fab-size) + 12px);
  /* Centred on the orb's own centre line. */
  bottom: calc(var(--fab-bottom) + var(--fab-size) / 2);
  transform: translateY(50%);
  display: flex;
  align-items: flex-start;
  gap: 2px;
  max-width: min(272px, calc(100vw - var(--fab-size) - 56px));
  padding: 12px 10px 12px 13px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 20px 44px -20px rgba(15, 32, 51, 0.4);
  text-align: left;
}

/* The tail. A rotated square with the same border and fill, tucked so only
   the two outer edges show: that way it is part of the card rather than a
   triangle stuck to the side of it. */
.k-nudge::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  transform: rotate(45deg);
  background: #fff;
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 2px;
}

/* Arrival. Comes in from the orb's side, so it reads as having been sent by
   it. The class goes on once the script decides it is time. */
.k-nudge[hidden] { display: none; }
.k-nudge {
  opacity: 0;
  visibility: hidden;
}
.k-nudge.is-in {
  opacity: 1;
  visibility: visible;
  animation: nudgeIn 0.46s var(--ease-out-soft, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
@keyframes nudgeIn {
  from {
    opacity: 0;
    transform: translateY(50%) translateX(14px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(50%) translateX(0) scale(1);
  }
}
/* Leaving is quicker than arriving: it has said its piece. */
.k-nudge.is-out {
  opacity: 0;
  transform: translateY(50%) translateX(10px) scale(0.96);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.k-nudge__body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.k-nudge__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cyan) 12%, #fff);
}
.k-nudge__icon img { display: block; }
.k-nudge__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.k-nudge__line {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
}
.k-nudge__sub {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}

.k-nudge__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: -2px -2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #9aa7b4;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.k-nudge__x:hover {
  background: var(--paper-2, #f1f4f8);
  color: var(--ink);
}

/* While the nudge is up, the orb carries a dot: the pair reads as one
   notification rather than a card floating near a button. */
.k-chat-fab__dot {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cyan, #00b4e5);
  border: 2px solid #fff;
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.25s ease,
    transform 0.25s var(--ease-out-soft, cubic-bezier(0.22, 1, 0.36, 1));
}
body.is-nudge .k-chat-fab__dot {
  opacity: 1;
  transform: scale(1);
}

/* On a phone the card takes the width it can get and sits above the orb
   instead of beside it: 272px will not fit next to an 80px orb on a 375px
   screen without squeezing the text to three words a line. */
@media (max-width: 560px) {
  .k-nudge {
    right: var(--fab-right);
    bottom: calc(var(--fab-bottom) + var(--fab-size) + 12px);
    transform: none;
    max-width: min(280px, calc(100vw - var(--fab-right) * 2));
  }
  .k-nudge::after {
    top: auto;
    bottom: -6px;
    right: calc(var(--fab-size) / 2 - 6px);
    margin-top: 0;
    border-right: 1px solid var(--line);
    border-top: 0;
    border-bottom: 1px solid var(--line);
  }
  @keyframes nudgeIn {
    from { opacity: 0; transform: translateY(10px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .k-nudge.is-out {
    transform: translateY(8px) scale(0.96);
  }
  /* The back-to-top button shares this corner and would sit on the card. */
  body.is-nudge .k-totop {
    opacity: 0;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .k-nudge.is-in { animation: none; }
  .k-nudge.is-out,
  .k-chat-fab__dot { transition: none; }
}