/* ==========================================================================
   CLARITASK — KORE PRODUCT-PAGE LAYER
   Ported from new_kore_website/assets/css/pages.css: the application-page
   anatomy (crm.php and friends). Three patterns live here:

     .p-hero   accent-tinted hero with breadcrumbs and a split headline
     .p-nav    sticky in-page pill nav that tracks where you are
     .steps    the sticky-scroll story: the copy scrolls in steps on one side
               while a pinned frame on the other swaps to match

   Loaded after style.css, so these win where both describe the same thing.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Product hero
   -------------------------------------------------------------------------- */
.p-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(34.5px, 4.6vw, 62px) 0 clamp(32px, 3.4vw, 50px);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ct-viz) 7%, #fff) 0%,
    #fff 42%
  );
}
.p-hero__head {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}

/* The product shot that leads the page, between the hero buttons and the
   sticky sub-nav. Wider than the copy above it, and never cropped: the whole
   board is the point. A hairline keeps its white edges off the white hero. */
.p-hero__media {
  position: relative;
  z-index: 2;
  max-width: 1220px;
  margin: clamp(29px, 4vw, 51.5px) auto 0;
}
.p-hero__shot {
  display: block;
  width: 100%;
  height: auto;
  /* Same device frame as the home hero: a 12px band of #0c1c2c, so the
     screenshot reads as a screen rather than as a bordered picture. */
  border: 12px solid #0c1c2c;
  background: #0c1c2c;
  border-radius: var(--ct-r-lg);
}
/* A near-square capture would make the hero taller than the viewport. This
   holds it to a band and crops from the top, where the screen actually is;
   what is cut is the empty area below the content. */
.p-hero__shot--crop {
  max-height: 620px;
  object-fit: cover;
  object-position: top center;
}
/* A soft accent bloom behind the shot, so it lifts off the hero instead of
   sitting flat on it. */
.p-hero__halo {
  position: absolute;
  inset: 6% 4% 14%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--ct-viz) 26%, transparent),
    transparent 64%
  );
  filter: blur(60px);
  z-index: -1;
}
.p-hero__crumbs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 0.722rem;
  color: var(--ct-muted);
  margin-bottom: 20px;
}
.p-hero__crumbs a:hover {
  color: var(--ct-primary);
}
.p-hero__crumbs span {
  color: #8593a6;
}
.p-hero__title {
  font-size: clamp(2.024rem, 5vw, 3.52rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin: 18px 0 0;
  text-wrap: balance;
}
.p-hero__title em {
  font-style: normal;
  color: var(--ct-primary);
}
.p-hero__lede {
  margin: 20px auto 0;
  font-size: clamp(0.898rem, 1.25vw, 1.056rem);
  line-height: 1.6;
  color: var(--ct-muted);
  max-width: 62ch;
}
.p-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

/* --------------------------------------------------------------------------
   2 · Sticky in-page nav
   Parks under the header, or at the very top once the header has slid away
   (--sticky-top is flipped by the header script).
   -------------------------------------------------------------------------- */
.p-nav {
  position: sticky;
  top: var(--sticky-top);
  transition: top 0.42s var(--fx-ease);
  z-index: 60;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-block: 1px solid var(--ct-border);
}
.p-nav__inner {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px 0;
}
.p-nav__inner::-webkit-scrollbar {
  display: none;
}
.p-nav__inner > a {
  padding: 8px 15px;
  border-radius: var(--ct-r-pill);
  font-size: 0.774rem;
  font-weight: 500;
  color: var(--ct-muted);
  white-space: nowrap;
  transition: all var(--fx-t) var(--fx-ease);
}
.p-nav__inner > a:hover {
  color: var(--ct-ink);
  background: var(--ct-grey);
}
.p-nav__inner > a.is-on {
  background: var(--ct-primary);
  color: #fff;
  font-weight: 600;
}
.p-nav__cta {
  margin-left: auto;
  padding-left: 16px;
}
.p-nav .ct-btn {
  padding: 9px 16px;
  font-size: 0.748rem;
}

/* --------------------------------------------------------------------------
   3 · Sticky-scroll story
   .steps is a tall scroll track; .steps__stage pins inside it while scroll
   position picks the step. See initSteps in js/kore-fx.js.
   -------------------------------------------------------------------------- */
.steps {
  position: relative;
}
.steps__stage {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(26px, 5vw, 67px);
  align-items: center;
  position: sticky;
  top: calc(var(--sticky-top) + var(--subnav-h, 0px) + 20px);
  transition: top 0.42s var(--fx-ease);
}
.steps__list {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1vw, 12px);
}

.steps__item {
  /* A button, so a step can be jumped to directly. Native anchor jumps have
     to clear the header and the sticky sub-nav. */
  scroll-margin-top: calc(var(--header-h) + var(--subnav-h, 0px) + 90px);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  position: relative;
  padding: 18px 24px 18px 28px;
  border-radius: var(--ct-r-lg);
  border: 1px solid transparent;
  background: transparent;
  transition:
    background-color 0.5s var(--fx-ease),
    border-color 0.5s var(--fx-ease);
}
.steps__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 3px;
  background: var(--ct-border);
  transition: background-color 0.5s var(--fx-ease);
}
/* The step's one interactive element: the label button. The card itself is
   a plain div (a button may not contain headings or lists, and ARIA flattens
   a button's descendants for screen readers); clicks anywhere on the card
   still bubble to the shared handler. */
.steps__numbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
}
.steps__numbtn:focus-visible {
  outline: 2px solid var(--ct-viz);
  outline-offset: 3px;
}
.steps__item.is-active {
  background: #fff;
  border-color: var(--ct-border);
}
.steps__item.is-active::before {
  background: var(--ct-viz);
}
.steps__num {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #657386;
  transition: color 0.5s var(--fx-ease);
}
.steps__num i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ct-grey);
  font-style: normal;
  font-size: 0.686rem;
  color: var(--ct-muted);
  transition: all 0.5s var(--fx-ease);
}
.steps__item.is-active .steps__num {
  color: var(--ct-primary);
}
.steps__item.is-active .steps__num i {
  background: var(--ct-primary);
  color: #fff;
}
.steps__title {
  font-family: var(--ct-font-display);
  font-size: 1.091rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 8px 0 7px;
}
.steps__text {
  color: var(--ct-muted);
  font-size: 0.836rem;
  line-height: 1.6;
  margin: 0;
}
/* The bullet list each area carries, tucked under the step copy. */
.steps__item .clx-panel__list {
  margin-top: 10px;
}

/* In pinned mode the inactive steps recede so the active one reads first.
   Only the decoration dims: a group opacity would take the copy itself below
   AA contrast, and it stays real content throughout. */
.steps.is-pinned .steps__item:not(.is-active)::before {
  opacity: 0.45;
}
.steps.is-pinned .steps__item:not(.is-active) .steps__num i {
  opacity: 0.55;
}
.steps.is-pinned .steps__item:not(.is-active) .steps__title {
  color: var(--ct-muted);
  transition: color 0.45s var(--fx-ease);
}
.steps.is-pinned .steps__item:not(.is-active):hover .steps__title {
  color: var(--ct-ink);
}

/* The pinned frame the mocks swap inside. */
.steps__media {
  align-self: center;
}
.steps__frame {
  /* 4:3 was drawn for the old square-ish mocks. The real captures are about
     1.9:1, so a 4:3 box left deep empty bands above and below every shot and
     made the whole story taller than it needed to be. 9:5 is the shallowest
     box that still fits the tallest capture at full width. */
  --ar-w: 9;
  --ar-h: 5;
  position: relative;
  width: 100%;
  margin-inline: auto;
  aspect-ratio: var(--ar-w) / var(--ar-h);
  border-radius: var(--ct-r-xl);
  overflow: hidden;
  border: 1px solid var(--ct-border);
  background: var(--ct-paper-2);
}
.steps__shot {
  position: absolute;
  inset: 0;
  /* The mock sits as a composed card inside the frame rather than being
     stretched edge to edge: these were drawn for small boxes, and pulled to
     the full frame their insides drift apart. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(15.5px, 3.5vw, 36px);
}
/* Hiding is gated on the JS marker, and visibility rides along so an
   inactive mock leaves the accessibility tree instead of merely turning
   invisible. */
.js-anim .steps__shot {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  transition:
    opacity 0.6s var(--fx-ease),
    transform 0.8s var(--fx-ease),
    visibility 0s linear 0.6s;
  pointer-events: none;
}
.js-anim .steps__shot.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
  pointer-events: auto;
}
/* The invisible stacked mocks must not keep their loops running. */
.js-anim .steps__shot:not(.is-active) .mui *,
.js-anim .steps__shot:not(.is-active) .mui::after {
  animation-play-state: paused !important;
}
/* The one step still drawn rather than captured fills its frame exactly like
   the screenshots do, in the same device band, so the four steps read as one
   set instead of three photos and a small floating card. */
.steps__shot .mui {
  width: 100%;
  height: 100%;
  max-height: 100%;
  border: 10px solid #0c1c2c;
  border-radius: var(--ct-r-lg);
}
.steps__shot:not(.steps__shot--photo) {
  padding: 14px;
}
/* Now that the mock fills the frame there is real space inside it, and the
   toast pill's margin-top:auto would pin it to the far bottom with the gauge
   stranded at the top. Centre the group instead. */
.steps__shot .mui--center {
  justify-content: center;
}
.steps__shot .mui--center .mui-toastpill {
  margin-top: 14px;
}
/* A real screenshot is wider than the frame is tall, so it sits across the
   full width and centres in the leftover space, framed like the mocks are. */
/* The drawn mocks were composed for a small box and need the breathing room;
   a screenshot only loses detail to it, so it keeps just enough to sit inside
   the frame rather than against it. */
.steps__shot--photo {
  padding: 14px;
}
.steps__photo {
  display: block;
  /* Full frame width, so every step reads at the same size and the browser can
     reserve the height from the width/height attributes: the story measures
     itself before these load, and a shot that grows afterwards would leave the
     pinned stage taller than the room it was told it had. */
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border: 10px solid #0c1c2c;
  border-radius: var(--ct-r-lg);
  background: #0c1c2c;
}
/* Captions sit under the frame, stacked in one grid cell and cross-fading
   with the shot they describe. */
.steps__caps {
  display: grid;
  margin-top: 12px;
}
.steps__cap {
  grid-area: 1 / 1;
}
.js-anim .steps__cap {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s var(--fx-ease),
    visibility 0s linear 0.4s;
}
.js-anim .steps__cap.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Without JavaScript nothing may hide: the frame relaxes into a stacked
   list of all four mocks, captions readable in order beneath it. */
html:not(.js-anim) .steps__frame {
  aspect-ratio: auto;
  display: grid;
  gap: 14px;
  padding: 14px;
}
html:not(.js-anim) .steps__shot {
  position: static;
  padding: 0;
}
html:not(.js-anim) .steps__cap {
  grid-area: auto;
}

/* On a tall enough screen the frame may not outgrow the viewport, or the
   pinned stage would be cropped and scroll away mid-story. */
@media (min-width: 1025px) {
  .steps__frame {
    max-width: calc(
      (100vh - var(--header-h) - var(--subnav-h, 0px) - 108px) * var(--ar-w) /
        var(--ar-h)
    );
    max-width: calc(
      (100svh - var(--header-h) - var(--subnav-h, 0px) - 108px) * var(--ar-w) /
        var(--ar-h)
    );
  }
}

/* Middle ground for a laptop: the list is taller than the window but the
   shot on its own is not. Pinning just the media keeps the frame on screen
   while the list scrolls past it, otherwise you reach step four and the
   picture it refers to is already gone. */
.steps.is-mediapin .steps__stage {
  position: static;
  align-items: start;
}
.steps.is-mediapin .steps__media {
  position: sticky;
  top: calc(var(--sticky-top) + var(--subnav-h, 0px) + 20px);
  /* Required, not cosmetic: .steps__media is centred by default, and a centred
     grid item fills its area, leaving sticky nothing to travel through. */
  align-self: start;
}
/* A sticky item can only travel inside its own column's box, and that box ends
   with the last step, so without this the shot lets go exactly as the final
   step comes up to be read. */
.steps.is-mediapin .steps__list {
  padding-bottom: clamp(140px, 28vh, 280px);
}

/* Stacked: the shot leads and nothing pins, a pinned stage would sit on top
   of the very text it illustrates. JS clears the track height to match. */
@media (max-width: 1024px) {
  .steps__stage {
    grid-template-columns: 1fr;
    position: static;
  }
  .steps__media {
    order: -1;
  }
  .steps__list {
    gap: clamp(15.5px, 3vw, 27.5px);
  }
  .steps.is-pinned .steps__stage {
    position: static;
  }
  .steps.is-pinned .steps__item {
    opacity: 1;
  }
}

/* Anchored sections have to clear the header plus the sticky sub-nav. */
.p-nav ~ * section[id],
.p-nav ~ section[id],
#feature-wall {
  scroll-margin-top: calc(var(--header-h) + 72px);
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .steps__shot,
  .js-anim .steps__cap {
    transition: none;
  }
  .steps__shot {
    transform: none;
  }
  .p-nav,
  .steps__stage {
    transition: none;
  }
}