/* ====================================================
   CLARITASK × CLARITICK — integration page
   Scoped with the .ctk- prefix so it can never leak into
   the shared marketing styles. Follows the site's flat
   language: 5px radius, 1px light borders, no shadows.
   ==================================================== */

.ctk {
  --ctk-task: #002574; /* Claritask   */
  --ctk-tick: #0087e2; /* Claritick   */
  --ctk-tick-deep: #103254;
  --ctk-ok: #16a34a;
  --ctk-warn: #f5a623;
  --ctk-hot: #dc2626;
  --ctk-violet: #8b5cf6;
  --ctk-line: var(--ct-border);
  --ctk-soft: #f8fafc;
}

/* Arrow for buttons that jump to a section further down THIS page, so it
   points where it actually takes you. Overrides the sideways hover nudge. */
.ct-btn:hover .ct-btn__arrow--down {
  transform: translateY(3px);
}

/* ----------------------------------------------------
   Small shared atoms
   ---------------------------------------------------- */
.ctk-brandpill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r-pill);
  padding: 6px 12px 6px 8px;
  font-weight: 800;
  font-size: 12.5px;
  color: var(--ct-dark);
  white-space: nowrap;
}
.ctk-brandpill img {
  width: 16px;
  height: 16px;
  display: block;
}
.ctk-brandpill--tick {
  border-color: color-mix(in srgb, var(--ctk-tick) 32%, #fff);
  color: var(--ctk-tick-deep);
}
.ctk-brandpill--task {
  border-color: color-mix(in srgb, var(--ctk-task) 26%, #fff);
  color: var(--ctk-task);
}

.ctk-dirtag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--ct-r-pill);
  padding: 4px 9px;
  background: color-mix(in srgb, var(--c, var(--ctk-tick)) 12%, #fff);
  color: color-mix(in srgb, var(--c, var(--ctk-tick)) 82%, #000);
  border: 1px solid color-mix(in srgb, var(--c, var(--ctk-tick)) 24%, #fff);
  white-space: nowrap;
  align-self: flex-start;
}

.ctk-mini {
  color: var(--ct-muted);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 10px 0 0;
}

/* ====================================================
   1 · HERO BRIDGE
   Two product panels with a live sync bridge between.
   ==================================================== */
.ctk-hero__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 22px;
}
.ctk-hero__logos a {
  display: inline-flex;
  align-items: center;
  border-radius: var(--ct-r-sm);
  transition: opacity 0.2s ease;
}
.ctk-hero__logos a:hover {
  opacity: 0.7;
}
.ctk-hero__logos a:focus-visible {
  outline: 2px solid var(--ctk-tick);
  outline-offset: 4px;
}
.ctk-hero__logos img {
  height: 30px;
  width: auto;
  display: block;
}
.ctk-hero__x {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ctk-line);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--ct-muted);
  font-size: 13px;
  flex: 0 0 auto;
}

.ctk-bridge {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 132px 1fr;
  align-items: stretch;
  gap: 0;
  max-width: 1040px;
  margin: 0 auto;
}

.ctk-panel {
  background: #fff;
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 268px;
  position: relative;
  z-index: 2;
}
/* Each panel holds a real screen now instead of drawn rows: centred, never
   upscaled past its own pixels, and framed so it reads as a screenshot rather
   than as part of the panel. */
/* Anchor for the monitor stand under each bridge shot; the margin is the
   stand's own height, so the direction tag below keeps clear of it. */
.ctk-panel__shotwrap {
  position: relative;
  display: block;
  margin-bottom: 24px;
}
.ctk-panel__shot {
  display: block;
  /* The two captures have different native shapes, so left them to their own
     heights the panels no longer lined up. One box for both, cropped from the
     top left, keeps the pair level either side of the sync hub. */
  width: 100%;
  /* height:auto is required, not tidiness: without it the img keeps the height
     attribute from the markup and aspect-ratio is ignored. */
  height: auto;
  /* One box for both so the pair stays level, but the whole screen is kept:
     the two captures are 1.34:1 and 1.51:1, and this sits between them so each
     gives up about a dozen pixels of margin instead of losing content. The
     spare space is white, which is what both screenshots have at their edges,
     so it reads as part of the screen rather than as a band. */
  /* aspect-ratio: 71 / 50; */
  object-fit: contain;
  object-position: center;
  background: #fff;
  margin: 0 auto;
  /* Slimmer band: these two sit at about 420px, a third of the hero shot. */
  border: 7px solid #0c1c2c;
  border-radius: 14px;
  background: #0c1c2c;
}
.ctk-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ctk-line);
}
.ctk-panel__head img {
  width: 18px;
  height: 18px;
}
.ctk-panel__head b {
  font-family: var(--ct-font-display);
  font-size: 13px;
  font-weight: 800;
}
.ctk-panel__head span {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--ct-muted);
}

/* Ticket row (Claritick side) */
.ctk-ticket {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r);
  padding: 9px 10px;
  background: var(--ctk-soft);
}
.ctk-ticket__id {
  font-weight: 800;
  font-size: 10px;
  color: #fff;
  background: var(--ctk-tick);
  border-radius: var(--ct-r-pill);
  padding: 3px 6px;
  flex: 0 0 auto;
  letter-spacing: 0.02em;
}
.ctk-ticket__body {
  min-width: 0;
  flex: 1;
}
.ctk-ticket__body b {
  display: block;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ct-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ctk-ticket__body i {
  font-style: normal;
  display: block;
  font-size: 10px;
  color: var(--ct-muted);
  font-weight: 700;
  margin-top: 3px;
}
.ctk-ticket--live {
  border-color: color-mix(in srgb, var(--ctk-tick) 40%, #fff);
  background: color-mix(in srgb, var(--ctk-tick) 6%, #fff);
}

/* The bridge itself */
.ctk-bridge__wire {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ctk-bridge__rail {
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--ctk-line) 0 8px,
    transparent 8px 14px
  );
  transform: translateY(-50%);
}
.ctk-bridge__hub {
  position: relative;
  z-index: 3;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--ctk-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: 800;
  font-size: 9.5px;
  color: var(--ct-muted);
  text-align: center;
  line-height: 1.2;
}
.ctk-bridge__hub svg {
  width: 22px;
  height: 22px;
  color: var(--ctk-tick);
  animation: ctk-spin 6s linear infinite;
}
@keyframes ctk-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Packets travelling both ways along the rail */
.ctk-packet {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--p, var(--ctk-tick));
  margin-top: -5px;
  z-index: 4;
  opacity: 0;
}
.ctk-packet--r {
  animation: ctk-run-r 3.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.ctk-packet--l {
  animation: ctk-run-l 3.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes ctk-run-r {
  0% {
    left: -6px;
    opacity: 0;
    transform: scale(0.4);
  }
  12% {
    opacity: 1;
    transform: scale(1);
  }
  88% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    left: calc(100% + 6px);
    opacity: 0;
    transform: scale(0.4);
  }
}
@keyframes ctk-run-l {
  0% {
    right: -6px;
    opacity: 0;
    transform: scale(0.4);
  }
  12% {
    opacity: 1;
    transform: scale(1);
  }
  88% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    right: calc(100% + 6px);
    opacity: 0;
    transform: scale(0.4);
  }
}

/* Task card (Claritask side) */
.ctk-tcard {
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r);
  padding: 9px 10px;
  background: #fff;
}
.ctk-tcard__top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.ctk-tcard b {
  display: block;
  font-size: 11.5px;
  line-height: 1.35;
}
.ctk-tcard__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  font-size: 10px;
  font-weight: 800;
  color: var(--ct-muted);
}
.ctk-linkchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--ctk-tick) 32%, #fff);
  background: color-mix(in srgb, var(--ctk-tick) 8%, #fff);
  color: var(--ctk-tick-deep);
  border-radius: var(--ct-r-pill);
  padding: 3px 7px;
  font-weight: 800;
  font-size: 9.5px;
}
.ctk-linkchip img {
  width: 10px;
  height: 10px;
}

/* ====================================================
   2 · TWO PLATFORMS, ONE LOOP
   ==================================================== */
.ctk-duo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
}
.ctk-duo__card {
  background: #fff;
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-radius);
  padding: 26px;
  height: 100%;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}
.ctk-duo__card:hover {
  transform: translateY(-4px);
}
.ctk-duo__logo {
  height: 26px;
  width: auto;
  display: block;
  margin-bottom: 16px;
}
.ctk-duo__role {
  display: inline-block;
  /* Uppercase label on real copy: kept above the readable floor. */
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c, var(--ctk-tick)) 78%, #000);
  background: color-mix(in srgb, var(--c, var(--ctk-tick)) 10%, #fff);
  border-radius: var(--ct-r-pill);
  padding: 5px 10px;
  margin-bottom: 12px;
}
.ctk-duo__card h3 {
  font-size: 18.5px;
  font-weight: 800;
  margin: 0 0 10px;
}
.ctk-duo__card > p {
  color: var(--ct-muted);
  font-size: 13px;
  line-height: 1.65;
  margin: 0 0 16px;
}
.ctk-duo__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ctk-duo__list li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ct-ink);
}
.ctk-duo__list li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c, var(--ctk-tick));
  flex: 0 0 auto;
  margin-top: 7px;
}
.ctk-duo__join {
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ct-muted);
  font-weight: 800;
  font-size: 11px;
  text-align: center;
}
.ctk-duo__join svg {
  width: 40px;
  height: 40px;
  color: var(--ctk-tick);
}
.ctk-duo__join span {
  line-height: 1.35;
}

/* ====================================================
   3 · FLOW PLAYER  (the step-by-step centrepiece)
   ==================================================== */
/* The rail is the home page's feature explorer: no card per row, just a tight
   column of quiet rows, the live one lit by a soft grey pill and a white tile.
   The stage on the right is one big tinted card, same as .clx-panel. */
.ctk-flow {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
  align-items: start;
}
.ctk-flow__steps {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ctk-flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 9px 11px;
  width: 100%;
  overflow: hidden;
  color: var(--ct-muted);
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}
.ctk-flow__step:hover,
.ctk-flow__step.is-on {
  background: var(--ct-grey);
  color: var(--ct-ink);
}
.ctk-flow__num {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ct-grey);
  color: var(--ct-ink);
  border: 0;
  flex: none;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}
/* The live step lifts its tile out of the pill, the way the active feature tab
   does. Every other row stays identical, played or not, so the rail reads as
   one quiet column with a single lit row. */
.ctk-flow__step.is-on .ctk-flow__num {
  background: #fff;
  color: var(--ctk-tick);
}
.ctk-flow__label {
  min-width: 0;
  font-family: var(--ct-font-body);
  font-size: 0.854rem;
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
}
.ctk-flow__step.is-on .ctk-flow__label {
  font-weight: 600;
}

.ctk-flow__stage {
  position: relative;
  background: var(--ct-paper-2);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-r-lg);
  padding: 40px;
  min-height: 470px;
  display: flex;
  flex-direction: column;
}
.ctk-flow__scene {
  display: none;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.ctk-flow__scene.is-on {
  display: flex;
  animation: ctk-fade 0.45s ease both;
}

/* ONE frame for all six steps. The wrapper is the frame: the full width of the
   stage, the same height at any given viewport, wearing the bezel. Each
   capture sits inside it with object-fit: contain — whole, undistorted,
   centred — so switching steps changes the picture and never the layout. The
   frame's inner ground is white, which is what every one of these screens has
   at its own edges. */
.ctk-scene__device {
  position: relative;
  width: 100%;
  max-width: calc(min(540px, 62vh) * 516 / 354);
  margin: 0 auto 24px;
  flex: none;
}
.ctk-scene__shotwrap {
  margin: 0;
  /* A true 16:9 at every size: the height comes from the width, and when the
     height cap binds on a short window the width cap binds with it, in the
     same ratio, so the frame scales down instead of flattening out. */
  width: 100%;
  /* The designer now delivers every capture at 516x354, so the frame takes
     that exact ratio and the shots fill it edge to edge, no letterbox. */
  /* aspect-ratio: 516 / 354; */
  max-height: min(540px, 62vh);
  max-width: none;
  margin-inline: 0;
  flex: none;
  border: 10px solid #0c1c2c;
  border-radius: var(--ct-r-lg);
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ctk-scene__shot {
  display: block;
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  object-position: center;
  border: 0;
  border-radius: 0;
}
@keyframes ctk-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.ctk-scene__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ctk-line);
}
.ctk-scene__head h3 {
  font-size: 15px;
  font-weight: 800;
  margin: 0;
  flex: 1 1 auto;
  min-width: 200px;
}
.ctk-scene__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  flex: 1;
  align-items: stretch;
}
.ctk-scene__grid--single {
  grid-template-columns: 1fr;
}
.ctk-scene__note {
  margin-top: auto;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  background: var(--ct-grey);
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r);
  padding: 11px 13px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ct-ink);
}
.ctk-scene__note svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--ctk-tick);
}
.ctk-scene__note b {
  font-weight: 800;
}

/* Window chrome used inside scenes */
.ctk-win {
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ctk-win__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--ct-grey);
  border-bottom: 1px solid var(--ctk-line);
  font-size: 11px;
  font-weight: 800;
  color: var(--ct-muted);
}
.ctk-win__bar img {
  width: 14px;
  height: 14px;
}
.ctk-win__bar .ctk-win__url {
  margin-left: auto;
  font-weight: 700;
  font-size: 10px;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 48%;
}
.ctk-win__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  font-size: 11.5px;
}

.ctk-field {
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r);
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ct-ink);
  background: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ctk-field span.lbl {
  color: var(--ct-muted);
  font-weight: 800;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ctk-field--sel::after {
  content: "▾";
  margin-left: auto;
  color: #94a3b8;
}
.ctk-field.is-active {
  border-color: var(--ctk-tick);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ctk-tick) 30%, #fff);
}

.ctk-btnrow {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: auto;
  padding-top: 4px;
}
.ctk-fakebtn {
  border-radius: var(--ct-r-pill);
  padding: 7px 14px;
  font-weight: 800;
  font-size: 10.5px;
  background: var(--ctk-tick);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ctk-fakebtn--ghost {
  background: #fff;
  color: var(--ct-muted);
  border: 1px solid var(--ctk-line);
}
.ctk-fakebtn--task {
  background: var(--ctk-task);
}
.ctk-fakebtn--pulse {
  animation: ctk-pulse 2.2s ease-in-out infinite;
}
@keyframes ctk-pulse {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: translateY(-2px);
  }
}

/* Comment / note bubbles */
.ctk-bubble {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r);
  padding: 9px 10px;
  background: var(--ctk-soft);
}
.ctk-bubble__av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 9.5px;
  background: var(--a, var(--ctk-tick));
}
.ctk-bubble__av img {
  width: 13px;
  height: 13px;
}
.ctk-bubble p {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ct-ink);
}
.ctk-bubble p em {
  font-style: normal;
  font-weight: 800;
}
.ctk-bubble time {
  display: block;
  font-size: 9.5px;
  color: var(--ct-muted);
  font-weight: 700;
  margin-top: 4px;
}
.ctk-bubble--system {
  background: color-mix(in srgb, var(--ctk-tick) 6%, #fff);
  border-color: color-mix(in srgb, var(--ctk-tick) 26%, #fff);
}

/* Sequenced reveal inside a scene */
.ctk-flow__scene.is-on .ctk-seq {
  opacity: 0;
  animation: ctk-seq-in 0.5s ease forwards;
}
.ctk-flow__scene.is-on .ctk-seq-1 {
  animation-delay: 0.25s;
}
.ctk-flow__scene.is-on .ctk-seq-2 {
  animation-delay: 0.75s;
}
.ctk-flow__scene.is-on .ctk-seq-3 {
  animation-delay: 1.3s;
}
.ctk-flow__scene.is-on .ctk-seq-4 {
  animation-delay: 1.9s;
}
@keyframes ctk-seq-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Board mini used in scene 5 */
.ctk-miniboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ctk-minicol {
  background: var(--ct-grey);
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r);
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 118px;
}
.ctk-minicol__h {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--ct-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ctk-minicard {
  background: #fff;
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r-pill);
  padding: 7px 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}
.ctk-minicard--move {
  animation: ctk-hop 6s ease-in-out infinite;
  border-color: color-mix(in srgb, var(--ctk-tick) 45%, #fff);
}
@keyframes ctk-hop {
  0%,
  18% {
    transform: none;
  }
  30%,
  100% {
    transform: none;
  }
}

/* ====================================================
   4 · SYNC MATRIX
   ==================================================== */
.ctk-matrix {
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-radius);
  overflow: hidden;
  background: #fff;
}
.ctk-matrix__head,
.ctk-matrix__row {
  display: grid;
  grid-template-columns: 1.2fr 150px 1.2fr;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
}
.ctk-matrix__head {
  background: var(--ct-grey);
  border-bottom: 1px solid var(--ctk-line);
  font-family: var(--ct-font-display);
  font-weight: 800;
  font-size: 13px;
}
.ctk-matrix__head span:last-child {
  text-align: right;
}
.ctk-matrix__head .ctk-matrix__mid {
  text-align: center;
  color: var(--ct-muted);
  /* Column heading, uppercase: held at the readable floor. */
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ctk-matrix__row + .ctk-matrix__row,
.ctk-matrix__row:first-of-type {
  border-top: 1px solid var(--ctk-line);
}
.ctk-matrix__row:hover {
  background: var(--ctk-soft);
}
.ctk-matrix__cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.ctk-matrix__cell--r {
  flex-direction: row-reverse;
  /* row-reverse flips the main axis, so flex-start IS the right-hand edge.
     flex-end would pack the row against the left and leave a ragged gutter. */
  justify-content: flex-start;
  text-align: right;
}
.ctk-matrix__cell b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 2px;
}
.ctk-matrix__cell i {
  font-style: normal;
  display: block;
  color: var(--ct-muted);
  font-size: 13px;
  line-height: 1.5;
}
.ctk-matrix__ic {
  width: 30px;
  height: 30px;
  border-radius: var(--ct-r-pill);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--c, var(--ctk-tick)) 12%, #fff);
  color: color-mix(in srgb, var(--c, var(--ctk-tick)) 80%, #000);
}
.ctk-matrix__ic svg {
  width: 15px;
  height: 15px;
}
.ctk-matrix__mid {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ctk-arrow {
  position: relative;
  width: 100%;
  max-width: 148px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ctk-arrow__line {
  position: absolute;
  left: 0;
  right: 6px;
  top: 50%;
  height: 2px;
  background: var(--ctk-line);
  transform: translateY(-50%);
}
/* Arrowhead, drawn with borders so it always matches the line colour */
.ctk-arrow__line::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 0;
  height: 0;
  border-left: 7px solid var(--ctk-line);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: translateY(-50%);
}
.ctk-arrow--l .ctk-arrow__line {
  left: 6px;
  right: 0;
}
.ctk-arrow--l .ctk-arrow__line::after {
  right: auto;
  left: -6px;
  border-left: none;
  border-right: 7px solid var(--ctk-line);
}
.ctk-arrow__dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--d, var(--ctk-tick));
  /* Parked and invisible until the row scrolls in, otherwise an unanimated
     dot lands at its static position and reads as a stray blob. */
  opacity: 0;
}
.ctk-matrix__row.is-in .ctk-arrow__dot {
  animation: ctk-slide-r 2.4s ease-in-out infinite;
}
.ctk-arrow--l .ctk-arrow__dot {
  animation-name: ctk-slide-l !important;
}
.ctk-arrow--both .ctk-arrow__dot:nth-child(3) {
  animation-name: ctk-slide-l !important;
  animation-delay: 1.2s !important;
}
@keyframes ctk-slide-r {
  0% {
    left: 4px;
    opacity: 0;
  }
  20%,
  60% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 30px);
    opacity: 0;
  }
}
@keyframes ctk-slide-l {
  0% {
    left: calc(100% - 30px);
    opacity: 0;
  }
  20%,
  60% {
    opacity: 1;
  }
  100% {
    left: 4px;
    opacity: 0;
  }
}
.ctk-arrow__cap {
  position: relative;
  z-index: 2;
  background: #fff;
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r-pill);
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 800;
  color: var(--ct-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ctk-matrix__row:hover .ctk-arrow__cap {
  background: var(--ctk-soft);
}
/* No glyph on desktop, the drawn arrowhead already carries the direction.
   The stacked layout adds one back further down, where the line is hidden. */

/* ====================================================
   5 · STATUS MAPPER
   ==================================================== */
.ctk-map {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 22px;
  align-items: center;
}
.ctk-mapper {
  position: relative;
  background: #fff;
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-radius);
  padding: 20px;
}
.ctk-mapper__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ctk-line);
}
.ctk-mapper__head b {
  font-family: var(--ct-font-display);
  font-size: 13px;
  font-weight: 800;
}
.ctk-mapper__grid {
  display: grid;
  grid-template-columns: 1fr 74px 1fr;
  gap: 10px;
  align-items: center;
}
.ctk-mapper__col b {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ct-muted);
  margin-bottom: 8px;
}
.ctk-mapper__col--r b {
  text-align: right;
}
.ctk-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r);
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 800;
  background: #fff;
  margin-bottom: 8px;
  transition:
    border-color 0.25s ease,
    background 0.25s ease;
}
.ctk-chip:last-child {
  margin-bottom: 0;
}
.ctk-chip .ctk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, #94a3b8);
  flex: 0 0 auto;
}
.ctk-mapper__col--r .ctk-chip {
  flex-direction: row-reverse;
  text-align: right;
}
.ctk-chip.is-lit {
  border-color: var(--ctk-tick);
  background: color-mix(in srgb, var(--ctk-tick) 6%, #fff);
}
.ctk-chip__lock {
  margin-left: auto;
  font-size: 9px;
  color: var(--ct-muted);
  font-weight: 800;
}
.ctk-mapper__col--r .ctk-chip__lock {
  margin-left: 0;
  margin-right: auto;
}
.ctk-mapper__wires {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ctk-mapper__wires path {
  fill: none;
  stroke: var(--ctk-line);
  stroke-width: 1.6;
}
.ctk-mapper__wires path.is-lit {
  stroke: var(--ctk-tick);
  stroke-width: 2;
}
.ctk-mapper__mid {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding-top: 22px;
}
.ctk-mapper__mid span {
  font-size: 10px;
  font-weight: 800;
  color: var(--ct-muted);
  text-align: center;
  line-height: 1.3;
}

.ctk-rules {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ctk-rule {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r);
  padding: 14px 16px;
}
.ctk-rule__ic {
  width: 34px;
  height: 34px;
  border-radius: var(--ct-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--c, var(--ctk-tick)) 12%, #fff);
  color: color-mix(in srgb, var(--c, var(--ctk-tick)) 80%, #000);
}
.ctk-rule__ic svg {
  width: 16px;
  height: 16px;
}
.ctk-rule b {
  display: block;
  font-family: var(--ct-font-display);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 4px;
}
.ctk-rule p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ct-muted);
}

/* ====================================================
   6 · FILE SYNC
   ==================================================== */
.ctk-files {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: center;
}
.ctk-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r);
  padding: 12px 14px;
  background: #fff;
  width: 100%;
  text-align: left;
}
.ctk-toggle__label {
  font-size: 13px;
  font-weight: 800;
}
.ctk-toggle__label i {
  display: block;
  font-style: normal;
  font-weight: 700;
  font-size: 11.5px;
  color: var(--ct-muted);
  margin-top: 3px;
}
.ctk-switch {
  margin-left: auto;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  flex: 0 0 auto;
  transition: background 0.25s ease;
}
.ctk-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ctk-toggle.is-on .ctk-switch {
  background: var(--ctk-ok);
}
.ctk-toggle.is-on .ctk-switch::after {
  transform: translateX(18px);
}

.ctk-filebox {
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-radius);
  background: #fff;
  padding: 18px;
}
.ctk-filebox__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ct-muted);
  margin-bottom: 12px;
}
.ctk-filelist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 190px;
}
.ctk-file {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r);
  padding: 9px 11px;
  background: var(--ctk-soft);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.35s ease,
    transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ctk-file.is-in {
  opacity: 1;
  transform: none;
}
.ctk-file__ic {
  width: 28px;
  height: 28px;
  border-radius: var(--ct-r-pill);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: var(--c, #64748b);
}
.ctk-file b {
  display: block;
  font-size: 12px;
}
.ctk-file i {
  font-style: normal;
  display: block;
  font-size: 10.5px;
  color: var(--ct-muted);
  font-weight: 700;
  margin-top: 2px;
}
.ctk-file__badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--ct-r-pill);
  padding: 3px 7px;
  background: color-mix(in srgb, var(--ctk-tick) 12%, #fff);
  color: var(--ctk-tick-deep);
  white-space: nowrap;
}
.ctk-file__empty {
  border: 1px dashed var(--ctk-line);
  border-radius: var(--ct-r-sm);
  padding: 26px 14px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--ct-muted);
}

/* ====================================================
   7 · NOTIFICATIONS + EMAIL
   ==================================================== */
.ctk-alerts {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 22px;
  /* stretch, so the feed and the email card end on the same line */
  align-items: stretch;
}
.ctk-notifpanel {
  background: #fff;
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.ctk-notifpanel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ct-muted);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ctk-line);
}
.ctk-notifpanel__head .ctk-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ctk-ok);
  font-size: 10.5px;
}
.ctk-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ctk-ok);
  animation: ctk-blink 1.8s ease-in-out infinite;
}
@keyframes ctk-blink {
  50% {
    opacity: 0.25;
  }
}
.ctk-notifs {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 246px;
  flex: 1;
}
.ctk-notif {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--ct-grey);
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r);
  padding: 10px 12px;
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ctk-notif.is-in {
  opacity: 1;
  transform: none;
}
.ctk-notif__ic {
  width: 26px;
  height: 26px;
  border-radius: var(--ct-r-pill);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: color-mix(in srgb, var(--c, var(--ctk-tick)) 14%, #fff);
  color: color-mix(in srgb, var(--c, var(--ctk-tick)) 82%, #000);
}
.ctk-notif b {
  display: block;
  font-size: 12.5px;
  line-height: 1.35;
}
.ctk-notif i {
  font-style: normal;
  display: block;
  font-size: 11px;
  color: var(--ct-muted);
  font-weight: 700;
  margin-top: 3px;
}
.ctk-notif time {
  margin-left: auto;
  font-size: 9.5px;
  color: #94a3b8;
  font-weight: 800;
  flex: 0 0 auto;
}

/* Email mock */
.ctk-email {
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-radius);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.ctk-email__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--ct-grey);
  border-bottom: 1px solid var(--ctk-line);
  font-size: 11px;
  font-weight: 800;
  color: var(--ct-muted);
}
.ctk-email__dots {
  display: inline-flex;
  gap: 5px;
}
.ctk-email__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e2e8f0;
  display: block;
}
.ctk-email__meta {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ctk-line);
  font-size: 12.5px;
}
.ctk-email__meta b {
  display: block;
  font-family: var(--ct-font-display);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px;
  line-height: 1.35;
}
.ctk-email__meta span {
  color: var(--ct-muted);
  font-weight: 700;
}
.ctk-email__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.ctk-email__logo {
  height: 22px;
  width: auto;
}
.ctk-email__body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ct-ink);
}
.ctk-email__card {
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r);
  padding: 13px 15px;
  background: var(--ctk-soft);
  font-size: 12.5px;
  line-height: 1.6;
}
.ctk-email__card b {
  font-weight: 800;
}
.ctk-email__btn {
  align-self: flex-start;
  background: var(--ctk-task);
  color: #fff;
  border-radius: var(--ct-r-pill);
  padding: 11px 20px;
  font-weight: 800;
  font-size: 12.5px;
}
.ctk-email__foot {
  margin-top: auto;
  font-size: 11px;
  color: var(--ct-muted);
  border-top: 1px solid var(--ctk-line);
  padding-top: 12px;
  line-height: 1.6;
}

/* ====================================================
   8 · TASK DETAIL MOCK (Claritick card inside a task)
   ==================================================== */
.ctk-detail {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0;
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-radius);
  overflow: hidden;
  background: #fff;
}
.ctk-detail__main {
  padding: 22px;
  border-right: 1px solid var(--ctk-line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ctk-detail__side {
  padding: 22px;
  background: var(--ctk-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ctk-detail h3 {
  font-size: 16.5px;
  font-weight: 800;
  margin: 0;
  line-height: 1.35;
}
.ctk-detail__crumbs {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ct-muted);
}
.ctk-detail__body {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ct-muted);
  margin: 0;
}
.ctk-sidecard {
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r);
  background: #fff;
  padding: 12px 13px;
}
.ctk-sidecard__h {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ct-muted);
  margin-bottom: 10px;
}
.ctk-sidecard--tick {
  border-color: color-mix(in srgb, var(--ctk-tick) 34%, #fff);
}
.ctk-ticketbtn {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--ctk-tick) 34%, #fff);
  background: color-mix(in srgb, var(--ctk-tick) 6%, #fff);
  border-radius: var(--ct-r);
  padding: 10px 11px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ctk-tick-deep);
  transition: background 0.2s ease;
}
.ctk-ticketbtn:hover {
  background: color-mix(in srgb, var(--ctk-tick) 12%, #fff);
}
.ctk-ticketbtn img {
  width: 16px;
  height: 16px;
}
.ctk-ticketbtn svg {
  width: 13px;
  height: 13px;
  margin-left: auto;
}
.ctk-callout {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  border: 1px solid color-mix(in srgb, var(--ctk-warn) 40%, #fff);
  background: color-mix(in srgb, var(--ctk-warn) 9%, #fff);
  border-radius: var(--ct-r);
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.55;
}
.ctk-callout svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: color-mix(in srgb, var(--ctk-warn) 80%, #000);
}
.ctk-callout b {
  font-weight: 800;
}

/* ====================================================
   9 · SCENARIO TIMELINE
   ==================================================== */
.ctk-tl {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding-left: 8px;
}
.ctk-tl::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--ctk-line);
}
.ctk-tl__item {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  padding: 0 0 22px;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s ease,
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ctk-tl__item.is-in {
  opacity: 1;
  transform: none;
}
.ctk-tl__item:last-child {
  padding-bottom: 0;
}
.ctk-tl__dot {
  position: relative;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c, var(--ctk-tick));
  color: var(--c, var(--ctk-tick));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ctk-tl__dot svg {
  width: 16px;
  height: 16px;
}
.ctk-tl__card {
  background: #fff;
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-r);
  padding: 15px 17px;
}
.ctk-tl__card header {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.ctk-tl__card h4 {
  font-size: 13.5px;
  font-weight: 800;
  margin: 0;
}
.ctk-tl__card time {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  white-space: nowrap;
}
.ctk-tl__card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ct-muted);
}
.ctk-tl__card p + p {
  margin-top: 8px;
}

/* ====================================================
   10 · SAFETY / CONTROL CARDS
   ==================================================== */
.ctk-safe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.ctk-safe__card {
  background: #fff;
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-radius);
  padding: 22px;
  transition: transform 0.2s ease;
}
.ctk-safe__card:hover {
  transform: translateY(-4px);
}
.ctk-safe__ic {
  width: 40px;
  height: 40px;
  border-radius: var(--ct-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--c, var(--ctk-tick)) 12%, #fff);
  color: color-mix(in srgb, var(--c, var(--ctk-tick)) 80%, #000);
  margin-bottom: 14px;
}
.ctk-safe__ic svg {
  width: 19px;
  height: 19px;
}
.ctk-safe__card h3 {
  font-size: 14.5px;
  font-weight: 800;
  margin: 0 0 8px;
}
.ctk-safe__card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ct-muted);
}

/* ====================================================
   11 · SCREENSHOT GALLERY (designer drop-in slots)
   ==================================================== */
.ctk-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.ctk-shot {
  margin: 0;
  background: #fff;
  border: 1px solid var(--ctk-line);
  border-radius: var(--ct-radius);
  padding: 12px;
  transition: transform 0.2s ease;
}
.ctk-shot:hover {
  transform: translateY(-4px);
}
.ctk-shot__frame {
  border-radius: var(--ct-r);
  overflow: hidden;
  border: 1px solid var(--ctk-line);
  background: var(--ct-grey);
  aspect-ratio: 16 / 11;
  display: block;
}
.ctk-shot__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ctk-shot figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ct-muted);
}
.ctk-shot figcaption b {
  display: block;
  font-family: var(--ct-font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--ct-ink);
  margin-bottom: 4px;
}
.ctk-shot__tag {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 10px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ct-muted);
  background: var(--ct-grey);
  border: 1px dashed var(--ctk-line);
  border-radius: var(--ct-r-pill);
  padding: 3px 8px;
}

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width: 1080px) {
  .ctk-flow {
    grid-template-columns: 1fr;
  }
  /* Under the split the rail lies down and scrolls sideways rather than
     stacking into a block of pills, the way Kore runs its tab nav. */
  .ctk-flow__steps {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
  }
  .ctk-flow__steps::-webkit-scrollbar {
    display: none;
  }
  .ctk-flow__step {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .ctk-flow__stage {
    min-height: 0;
    padding: 26px;
  }
  .ctk-safe {
    grid-template-columns: repeat(2, 1fr);
  }
  .ctk-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .ctk-bridge {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ctk-bridge__wire {
    height: 96px;
  }
  .ctk-bridge__rail {
    left: 50%;
    right: auto;
    top: -8px;
    bottom: -8px;
    height: auto;
    width: 2px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(
      180deg,
      var(--ctk-line) 0 8px,
      transparent 8px 14px
    );
  }
  .ctk-packet--r {
    animation-name: ctk-run-d;
  }
  .ctk-packet--l {
    animation-name: ctk-run-u;
  }
  @keyframes ctk-run-d {
    0% {
      top: 0;
      left: 50%;
      margin-left: -5px;
      opacity: 0;
    }
    12%,
    88% {
      opacity: 1;
    }
    100% {
      top: 100%;
      left: 50%;
      margin-left: -5px;
      opacity: 0;
    }
  }
  @keyframes ctk-run-u {
    0% {
      top: 100%;
      left: 50%;
      margin-left: -5px;
      opacity: 0;
    }
    12%,
    88% {
      opacity: 1;
    }
    100% {
      top: 0;
      left: 50%;
      margin-left: -5px;
      opacity: 0;
    }
  }
  .ctk-duo {
    grid-template-columns: 1fr;
  }
  .ctk-duo__join {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
  }
  .ctk-duo__join svg {
    width: 28px;
    height: 28px;
    transform: rotate(90deg);
  }
  .ctk-map,
  .ctk-files,
  .ctk-alerts {
    grid-template-columns: 1fr;
  }
  .ctk-detail {
    grid-template-columns: 1fr;
  }
  .ctk-detail__main {
    border-right: none;
    border-bottom: 1px solid var(--ctk-line);
  }
  .ctk-matrix__head,
  .ctk-matrix__row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
  }
  .ctk-matrix__head {
    display: none;
  }
  /* Stacked: name the platform per cell and point the arrow downhill */
  .ctk-matrix__cell {
    position: relative;
    padding-top: 20px;
  }
  .ctk-matrix__cell::before {
    content: "Claritick";
    position: absolute;
    top: 0;
    left: 0;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ctk-tick);
  }
  .ctk-matrix__cell--r::before {
    content: "Claritask";
    color: var(--ctk-task);
  }
  .ctk-arrow__cap::after {
    content: "\00a0\2193";
  }
  .ctk-arrow--l .ctk-arrow__cap::after {
    content: none;
  }
  .ctk-arrow--l .ctk-arrow__cap::before {
    content: "\2191\00a0";
  }
  .ctk-matrix__cell--r {
    flex-direction: row;
    text-align: left;
    justify-content: flex-start;
  }
  .ctk-matrix__mid {
    justify-content: flex-start;
  }
  .ctk-arrow {
    max-width: none;
    justify-content: flex-start;
  }
  .ctk-arrow__line {
    display: none;
  }
  .ctk-arrow__dot {
    display: none;
  }
  .ctk-scene__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* Compact step chips so the stage stays within a thumb's reach */
  .ctk-flow__steps {
    gap: 7px;
  }
  .ctk-flow__step {
    grid-template-columns: 26px 1fr;
    gap: 9px;
    padding: 10px 11px;
    align-items: center;
  }
  .ctk-flow__num {
    width: 26px;
    height: 26px;
  }
  .ctk-flow__label {
    font-size: 12.5px;
  }
  .ctk-safe,
  .ctk-gallery {
    grid-template-columns: 1fr;
  }
  .ctk-hero__logos img {
    height: 24px;
  }
  .ctk-flow__stage {
    padding: 14px;
  }
  .ctk-duo__card,
  .ctk-mapper,
  .ctk-notifpanel,
  .ctk-filebox {
    padding: 18px;
  }
  .ctk-detail__main,
  .ctk-detail__side {
    padding: 18px;
  }
  .ctk-miniboard {
    grid-template-columns: 1fr;
  }
  .ctk-tl::before {
    left: 17px;
  }
  .ctk-tl__item {
    grid-template-columns: 36px 1fr;
    gap: 12px;
  }
  .ctk-mapper__grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .ctk-mapper__col--r .ctk-chip {
    flex-direction: row;
    text-align: left;
  }
  .ctk-mapper__col--r b {
    text-align: left;
    margin-top: 14px;
  }
  .ctk-mapper__mid {
    padding: 8px 0;
  }
  .ctk-mapper__mid span::before {
    content: "↓ ";
  }
  .ctk-mapper__wires {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ctk-packet,
  .ctk-bridge__hub svg,
  .ctk-arrow__dot,
  .ctk-fakebtn--pulse,
  .ctk-live::before,
  .ctk-minicard--move,
  .ctk-flow__scene.is-on .ctk-seq {
    animation: none !important;
  }
  .ctk-flow__scene.is-on .ctk-seq {
    opacity: 1;
  }
  .ctk-flow__scene.is-on {
    animation: none;
  }
  .ctk-tl__item,
  .ctk-file,
  .ctk-notif {
    opacity: 1;
    transform: none;
  }
}