/* ==========================================================================
   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);
}
/* Colour only, and deliberately no transform. This used to slide 2px to the
   right on hover, which put the whole row on its own compositing layer for
   the length of the transition: text on a composited layer is drawn with
   greyscale antialiasing instead of subpixel, so the label appeared to change
   weight and then change back. It reads as the font swapping under the
   pointer, which is what the designer was seeing. The tile and the arrow are
   affordance enough. */
.k-mega__item:hover {
  background: var(--paper);
  border-color: var(--line);
}
.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 ---------------- */
/* The footer under this already opens with up to 84px of its own, so the
   two were stacking to nearly 200px of blank between the subscribe card and
   the first line of the footer. This half is the one to give up. */
.k-cta {
  padding: 0 0 clamp(34px, 3.4vw, 54px);
}
/* 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 {
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--muted);
}
/* Two different things share this class: this line, and the Privacy/Terms nav
   at the foot of the page, which sets display: flex further down. That rule
   wins here too, which is why the company name was a flex container sitting
   flush against the logo with no gap at all. Qualified with p so it applies to
   this line only and leaves that nav alone. */
p.k-footer__legal {
  display: block;
  margin: 8px 0 0;
}
.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);
}
/* The status line is a third row in this wrapping band, and an empty row
   still costs the gap above it: 44px of nothing under the form until
   somebody actually subscribes, which is what made the card look bottom
   heavy. Out of the flow until it has something to say. The footer's copy of
   the form is a column and does not have the problem. */
.k-subband > .k-subscribe__msg:not(.is-ok):not(.is-error) {
  display: none;
}
.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 ---------------- */
/* Stacks above the ask_ai FAB (56px, 24px from the corner). */
:root {
  --fab-size: 56px;
  --fab-inset: 24px;
  --fab-right: var(--fab-inset);
  --fab-bottom: 24px;
  --totop-size: 46px;
  --totop-gap: 14px;
}

.k-totop {
  position: fixed;
  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;
}

/* ==========================================================================
   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;
  }
}

@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); }