/* ==========================================================================
   CLARITASK — KORE SECTION PRIMITIVES
   Ported from new_kore_website (core.css type/head scale, pages.css metrics
   and howto). Loaded after style.css so these win where both describe the
   same element.

   Section heads come in two shapes. The plain one is a centred 780px column,
   which is the house style here. The other is .clx-head--split: an asymmetric
   two-column head with the title on one side and the supporting line plus a
   link on the other, sharing a baseline, which is Kore's habit and what the
   denser sections use. Add --left to opt a plain head out of the centring.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Section heads
   -------------------------------------------------------------------------- */
.clx-head {
  max-width: 780px;
  margin: 0 auto clamp(31px, 4vw, 55px);
  text-align: center;
}
.clx-head > * + * {
  margin-top: 18px;
}
.clx-head__title {
  margin: 0;
}
.clx-head__sub {
  margin: 0 auto;
  max-width: 62ch;
}
/* Centred is the default; --left opts a head out of it. --center is kept as
   a no-op alias so calls that ask for it explicitly still read correctly. */
.clx-head--center {
  margin-inline: auto;
  text-align: center;
}
.clx-head--left {
  margin-inline: 0;
  text-align: left;
}
.clx-head--left .clx-head__sub {
  margin-inline: 0;
}

/* The asymmetric head: title on the left, the supporting line and its link on
   the right, both sitting on the same baseline. The eyebrow spans the pair so
   it stays at the top left whatever the columns do. */
.clx-head--split {
  max-width: none;
  margin-inline: 0;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px 60px;
  align-items: end;
}
.clx-head--split .clx-head__sub {
  margin-inline: 0;
}
.clx-head--split > * + * {
  margin-top: 0;
}
.clx-head--split .clx-eyebrow {
  grid-column: 1 / -1;
  justify-self: start;
}
.clx-head__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.k-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.836rem;
  color: var(--ct-primary);
  transition: gap var(--fx-t) var(--fx-ease);
}
.k-link-arrow svg {
  transition: transform var(--fx-t) var(--fx-ease);
}
.k-link-arrow:hover {
  gap: 12px;
}
.k-link-arrow:hover svg {
  transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   2 · Metrics row
   A rule above each figure rather than a filled band: the numbers carry the
   section, so the background does not have to.
   -------------------------------------------------------------------------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(17px, 3vw, 38px);
}
.metric {
  position: relative;
  padding-top: 26px;
  border-top: 2px solid var(--ct-border);
  transition: border-color var(--fx-t) var(--fx-ease);
}
.metric:hover {
  border-top-color: var(--ct-viz);
}
.metric__num {
  font-family: var(--ct-font-display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-size: clamp(2.464rem, 5.4vw, 4.048rem);
  background: linear-gradient(
    115deg,
    var(--ct-ink) 8%,
    var(--ct-primary) 52%,
    var(--ct-viz) 96%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.metric__title {
  font-size: 0.924rem;
  font-weight: 700;
  margin: 16px 0 6px;
}
.metric__text {
  margin: 0;
  font-size: 0.836rem;
  line-height: 1.6;
  color: var(--ct-muted);
}

/* --------------------------------------------------------------------------
   3 · How-it-works row: numbered circles across one line
   -------------------------------------------------------------------------- */
.howto {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(19px, 3vw, 34.5px);
}
.howto__step {
  position: relative;
  z-index: 1;
  text-align: center;
}
.howto__badge {
  width: 66px;
  height: 66px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--ct-border);
  color: var(--ct-primary);
  font-family: var(--ct-font-display);
  font-weight: 700;
  font-size: 1.012rem;
  transition: all var(--fx-t) var(--fx-ease);
}
.howto__step:hover .howto__badge {
  border-color: var(--ct-viz);
  background: var(--ct-viz);
  color: #fff;
  transform: translateY(-4px) scale(1.05);
}
.howto__title {
  font-size: 0.924rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.howto__text {
  margin: 0;
  font-size: 0.836rem;
  line-height: 1.6;
  color: var(--ct-muted);
}

/* --------------------------------------------------------------------------
   4 · Dense card grid
   Kore's "everything in one place" pattern: small cards, four to a row, each
   an icon tile, a name, one line, and an Explore link that only shows its
   arrow on hover.
   -------------------------------------------------------------------------- */
.kcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.kcard {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-r);
}
.kcard__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--ct-r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent, var(--ct-viz)) 12%, #fff);
  color: color-mix(in srgb, var(--accent, var(--ct-viz)) 82%, #000);
  margin-bottom: 4px;
}
.kcard__name {
  font-family: var(--ct-font-display);
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0;
}
.kcard__text {
  margin: 0;
  font-size: 0.792rem;
  line-height: 1.55;
  color: var(--ct-muted);
  flex: 1;
}
.kcard__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.757rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--accent, var(--ct-viz)) 82%, #000);
}
.kcard__go svg {
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity var(--fx-t) var(--fx-ease),
    transform var(--fx-t) var(--fx-ease);
}
.kcard:hover .kcard__go svg {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   5 · Split section: copy and a list on one side, media on the other
   -------------------------------------------------------------------------- */
.ksplit {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.ksplit--rev .ksplit__copy {
  order: 2;
}
.ksplit__title {
  font-size: clamp(1.32rem, 2.4vw, 1.76rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.ksplit__text {
  margin: 0 0 22px;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ct-muted);
}
/* The stacked row list Kore puts under a split heading. */
.krows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.krow {
  display: grid;
  grid-template-columns: 34px 1fr 16px;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-r);
  transition:
    border-color var(--fx-t) var(--fx-ease),
    background var(--fx-t) var(--fx-ease);
}
.krow:hover,
.krow.is-on {
  border-color: color-mix(in srgb, var(--accent, var(--ct-viz)) 42%, #fff);
  background: color-mix(in srgb, var(--accent, var(--ct-viz)) 5%, #fff);
}
.krow__icon {
  width: 34px;
  height: 34px;
  border-radius: var(--ct-r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent, var(--ct-viz)) 12%, #fff);
  color: color-mix(in srgb, var(--accent, var(--ct-viz)) 82%, #000);
}
.krow__name {
  display: block;
  font-family: var(--ct-font-display);
  font-size: 0.836rem;
  font-weight: 700;
  line-height: 1.25;
}
.krow__text {
  display: block;
  font-size: 0.739rem;
  line-height: 1.45;
  color: var(--ct-muted);
  margin-top: 2px;
}
.krow__go {
  color: var(--ct-muted);
}

/* The media half, with a stat card floating over its lower edge. */
.ksplit__media {
  position: relative;
  border-radius: var(--ct-r-lg);
  overflow: hidden;
  border: 1px solid var(--ct-border);
  background: var(--ct-grey);
}
.ksplit__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ksplit__stat {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-r-sm);
  padding: 11px 14px;
  font-size: 0.792rem;
}
.ksplit__stat b {
  font-family: var(--ct-font-display);
  font-weight: 700;
}
.ksplit__stat span {
  color: var(--ct-muted);
}

/* --------------------------------------------------------------------------
   6 · Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .clx-head--split {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }
  .ksplit,
  .ksplit--rev {
    grid-template-columns: 1fr;
  }
  .ksplit--rev .ksplit__copy {
    order: 0;
  }
}

/* ==========================================================================
   7 · Feature explorer: vertical tab rail
   Ported from new_kore_website/assets/css/feature-explorer.css (.trx-tabs).
   Kore stands the tabs up in a rail on the left and gives the panel the whole
   right-hand side as one soft card, rather than running the tabs across the
   top as a row of pills. Loaded after style.css, so this wins.
   ========================================================================== */
.clx-tabs {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
  align-items: start;
  /* the shell the horizontal version needed */
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.clx-tabs__nav {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 1px;
  padding: 0;
  border: 0;
  background: none;
}

.clx-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 7px 11px;
  font-family: var(--ct-font-body);
  font-size: 0.854rem;
  font-weight: 500;
  color: var(--ct-muted);
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}
.clx-tab:hover {
  background: var(--ct-grey);
  border-color: transparent;
  color: var(--ct-ink);
  transform: none;
}
.clx-tab.is-active {
  background: var(--ct-grey);
  border-color: transparent;
  color: var(--ct-ink);
  font-weight: 600;
  transform: none;
}
.clx-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--ct-grey);
  color: var(--ct-ink);
  flex: none;
  transition: background 0.18s ease;
}
.clx-tab.is-active .clx-tab__icon {
  background: #fff;
  color: var(--ct-primary);
}
.clx-tab__label {
  min-width: 0;
}

.clx-tabs__panels {
  display: grid;
}
.clx-panel.is-active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  background: var(--ct-paper-2);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-r-lg);
  padding: 40px;
}

@media (max-width: 900px) {
  /* Below the split the rail lies back down as a scrollable row, which reads
     better than a tall column of tabs above a panel. */
  .clx-tabs {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .clx-tabs__nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .clx-tabs__nav::-webkit-scrollbar {
    display: none;
  }
  .clx-tab {
    width: auto;
    flex: 0 0 auto;
  }
  .clx-tab__icon {
    display: none;
  }
  .clx-panel.is-active {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 26px;
  }
}

/* ==========================================================================
   8 · Quote slider
   Ported from new_kore_website (section_quotes + .slider/.quote in pages.css).
   A paper band holding a drag-and-arrow row of testimonial cards: ghost
   quote mark, the words, stars, a hairline, then who said it.
   ========================================================================== */
.clx-section--paper {
  background: var(--ct-paper);
}

.slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 1fr);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  /* overflow-x:auto also clips vertically, so the cards' hover lift needs
     headroom inside the scroller; the negative margin keeps the section
     spacing exactly where it was. */
  padding: 10px 0 14px;
  margin-top: -10px;
}
.slider__track::-webkit-scrollbar {
  display: none;
}
.slider__track.is-grabbing {
  cursor: grabbing;
  scroll-snap-type: none;
}
.slider__track > * {
  scroll-snap-align: start;
}
.slider__nav {
  display: flex;
  gap: 10px;
  margin-top: 26px;
}
.slider__btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--ct-border);
  color: var(--ct-ink);
  display: grid;
  place-items: center;
  transition: all var(--fx-t) var(--fx-ease);
}
.slider__btn:hover:not(:disabled) {
  background: var(--ct-ink);
  color: #fff;
  border-color: var(--ct-ink);
}
.slider__btn:disabled {
  opacity: 0.32;
  cursor: default;
}

.quote {
  background: #fff;
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-r-lg);
  padding: 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--fx-t) var(--fx-ease),
    border-color var(--fx-t) var(--fx-ease);
}
.quote:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--ct-viz) 34%, var(--ct-border));
}
.quote__mark {
  font-family: var(--ct-font-display);
  font-size: 4.4rem;
  line-height: 0.7;
  color: var(--ct-border);
  margin-bottom: 6px;
}
.quote__text {
  color: #2a3a4f;
  font-size: 0.854rem;
  line-height: 1.62;
  flex: 1;
  margin: 0;
}
.quote__stars {
  color: var(--ct-accent);
  letter-spacing: 2.5px;
  font-size: 0.748rem;
  margin-top: 20px;
}
.quote__who {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--ct-border);
}
/* No portrait photography exists, so the avatar slot carries initials drawn
   from a data attribute: decoration, not content. */
.quote__av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ct-primary) 10%, #fff);
  color: var(--ct-primary);
  font-family: var(--ct-font-display);
  font-weight: 700;
  font-size: 0.774rem;
}
.quote__av::before {
  content: attr(data-i);
}
.quote__name {
  font-weight: 600;
  font-size: 0.827rem;
  color: var(--ct-ink);
}
.quote__role {
  font-size: 0.722rem;
  color: var(--ct-muted);
}

/* ==========================================================================
   9 · FAQ, restyled to Kore's accordion (pages.css .faq)
   Same markup and JS; these override the pill look in style.css. The open
   item picks up an accent-tinted border, the icon is a hairline circle that
   fills navy when open, and the answer sits in muted body type.
   ========================================================================== */
.faq-section {
  background: #fff;
  border-top: 0;
}
/* Kore runs the list the full container width, so the cards line up with
   the header and every other section edge. */
.faq-border {
  max-width: none;
}
.faq-item {
  margin-bottom: 10px;
  transition: border-color var(--fx-t) var(--fx-ease);
}
.faq-item.is-open {
  border-color: color-mix(in srgb, var(--ct-viz) 34%, var(--ct-border));
}
.faq-question {
  padding: 20px 24px;
  font-size: 0.915rem;
  letter-spacing: -0.015em;
  gap: 20px;
}
.faq-icon {
  border-width: 1px;
  border-color: var(--ct-border);
  color: var(--ct-ink);
}
/* The circle is an indicator, not a button of its own: no hover state. */
.faq-question:hover .faq-icon {
  border-color: var(--ct-border);
  color: var(--ct-ink);
}
.faq-answer {
  padding: 0 24px;
}
.faq-item.is-open .faq-answer {
  padding: 0 24px 22px;
}
.faq-answer p {
  font-weight: 400;
  font-size: 0.854rem;
  line-height: 1.65;
  max-width: 78ch;
}
/* Open state carries Kore's accent blue, not the site navy. */
.faq-item.is-open .faq-icon {
  background: #10537e;
  border-color: #10537e;
  color: #fff;
}