/* =============================================================================
   Conversational Access — styles
   Everything is namespaced under .kn-ci so nothing can leak into the mirrored
   Kuehne+Nagel page. Colours and type are the site's own tokens, sampled from
   its stylesheet, so the overlay reads as part of the product rather than as
   something bolted on.
   ========================================================================== */

/* The brand face, from a stable path the mirror writes on every run, so this
   stylesheet stands on its own (the gallery uses it without the site's CSS). */
@font-face {
  font-family: 'SuisseIntlRegular';
  src: url('/app/fonts/SuisseIntl-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SuisseIntlRegular';
  src: url('/app/fonts/SuisseIntl-SemiBold.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

.kn-ci,
.kn-ci *,
.kn-ci *::before,
.kn-ci *::after {
  box-sizing: border-box;
}

:root {
  --knci-navy: #002954;
  --knci-navy-100: #003369;
  --knci-navy-070: #4c7096;
  --knci-navy-045: #8ca3bb;
  --knci-navy-025: #bfccd9;
  --knci-navy-010: #e5ebf0;
  --knci-navy-005: #f2f5f7;

  --knci-blue: #0073e9;
  --knci-blue-110: #0068d2;
  --knci-blue-025: #bfdcf9;
  --knci-blue-010: #e5f1fd;
  --knci-blue-005: #f2f8fe;

  --knci-cyan: #0099da;
  --knci-green: #08c792;
  --knci-ok: #24a148;
  --knci-ok-bg: #def1e4;
  --knci-warn: #e26f01;
  --knci-warn-bg: #fdf6f0;
  --knci-red: #c41b24;
  --knci-red-bg: #f9e8e9;
  --knci-white: #fff;

  --knci-font: SuisseIntlRegular, 'Suisse Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;

  --knci-radius: 10px;
  --knci-radius-sm: 8px;
  --knci-shadow: 0 18px 48px rgba(0, 41, 84, 0.18), 0 2px 6px rgba(0, 41, 84, 0.08);
  --knci-ring: inset 0 0 0 1px var(--knci-navy-010);
}

/* A class that sets `display` outranks the hidden attribute's UA rule, so make
   the attribute win wherever we use it to toggle our own elements. */
.kn-ci [hidden],
.kn-ci[hidden] {
  display: none !important;
}

.kn-ci {
  font-family: var(--knci-font);
  color: var(--knci-navy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@keyframes knciUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes knciDot {
  0%,
  60%,
  100% {
    opacity: 0.2;
  }
  30% {
    opacity: 1;
  }
}
@keyframes knciPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 115, 233, 0.35);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(0, 115, 233, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 115, 233, 0);
  }
}
@keyframes knciSpin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------- controls -- */

.kn-ci button {
  font-family: inherit;
  cursor: pointer;
}

.knci-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--knci-radius-sm);
  background: var(--knci-blue);
  color: #fff;
  font: 600 15px/1.2 var(--knci-font);
  padding: 12px 22px;
  transition: background 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}
.knci-btn:hover {
  background: var(--knci-blue-110);
}
.knci-btn:active {
  transform: translateY(1px);
}
.knci-btn[disabled] {
  background: var(--knci-navy-025);
  cursor: default;
}
.knci-btn--ghost {
  background: transparent;
  color: var(--knci-navy);
  box-shadow: inset 0 0 0 1px var(--knci-navy-025);
}
.knci-btn--ghost:hover {
  background: var(--knci-navy-005);
}
.knci-btn--sm {
  padding: 8px 14px;
  font-size: 14px;
}

.knci-input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  font: 400 16px/1.4 var(--knci-font);
  color: var(--knci-navy);
  background: #fff;
  border: 0;
  border-radius: var(--knci-radius-sm);
  box-shadow: inset 0 0 0 1px var(--knci-navy-025);
  outline: none;
}
.knci-input:focus {
  box-shadow: inset 0 0 0 2px var(--knci-blue);
}
.knci-input::placeholder {
  color: var(--knci-navy-045);
}

.knci-chip {
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--knci-navy);
  font: 400 13.5px/1.3 var(--knci-font);
  padding: 8px 14px;
  box-shadow: inset 0 0 0 1px var(--knci-navy-025);
  transition: background 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
}
.knci-chip:hover {
  background: var(--knci-blue-005);
  box-shadow: inset 0 0 0 1px var(--knci-blue-025);
}
.knci-chip--follow {
  background: var(--knci-blue-010);
  color: var(--knci-blue-110);
  box-shadow: none;
  font-weight: 500;
}
.knci-chip--follow:hover {
  background: var(--knci-blue-025);
}

.knci-mic {
  width: 46px;
  height: 46px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--knci-navy-025);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--knci-navy-070);
  transition: background 0.15s ease, color 0.15s ease;
}
.knci-mic:hover {
  background: var(--knci-navy-005);
  color: var(--knci-navy);
}
.knci-mic[data-on='true'] {
  background: var(--knci-blue);
  color: #fff;
  box-shadow: none;
  position: relative;
}
/* A ring that tracks the microphone level. The recording ends itself when the
   speaker stops, so it matters that the interface is visibly listening — a static
   button gives no clue whether it can hear anything. Falls back to a slow pulse
   when there is no level to show. */
.knci-mic[data-on='true']::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid var(--knci-blue);
  opacity: calc(0.25 + 0.75 * var(--knci-level, 0));
  transform: scale(calc(1 + 0.16 * var(--knci-level, 0)));
  transition: transform 0.08s linear, opacity 0.08s linear;
  pointer-events: none;
}
.knci-mic[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ panel -- */

.knci-panel {
  position: fixed;
  z-index: 2147483000;
  width: min(880px, calc(100vw - 32px));
  max-height: min(78vh, 900px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--knci-radius);
  box-shadow: var(--knci-shadow);
  overflow: hidden;
  animation: knciUp 0.22s ease both;
}

.knci-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: #fff;
  box-shadow: inset 0 -1px 0 var(--knci-navy-010);
  flex: none;
}
.knci-head__mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(140deg, var(--knci-blue), var(--knci-navy-100));
  flex: none;
}
.knci-head__title {
  font: 600 15px/1.3 var(--knci-font);
  margin: 0;
}
.knci-head__sub {
  flex: 1;
  font: 400 13px/1.3 var(--knci-font);
  color: var(--knci-navy-070);
  margin: 0;
}
.knci-iconbtn {
  border: 0;
  background: none;
  padding: 6px;
  line-height: 0;
  border-radius: 6px;
  color: var(--knci-navy-070);
}
.knci-iconbtn:hover {
  background: var(--knci-navy-005);
  color: var(--knci-navy);
}
.knci-iconbtn[data-on='true'] {
  color: var(--knci-blue);
  background: var(--knci-blue-010);
}

.knci-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  scrollbar-width: thin;
}
.knci-thread::-webkit-scrollbar {
  width: 10px;
}
.knci-thread::-webkit-scrollbar-thumb {
  background: var(--knci-navy-025);
  border-radius: 999px;
  border: 3px solid #fff;
}

.knci-foot {
  flex: none;
  padding: 14px 20px 16px;
  background: var(--knci-navy-005);
  box-shadow: inset 0 1px 0 var(--knci-navy-010);
}
.knci-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.knci-row {
  display: flex;
  gap: 10px;
  align-items: center;
  /* It is often a flex child of another row, so it has to claim the width. */
  flex: 1;
  width: 100%;
  min-width: 0;
}

/* ------------------------------------------------------------------ thread -- */

.knci-user {
  display: flex;
  justify-content: flex-end;
}
.knci-user > span {
  max-width: 78%;
  padding: 11px 15px;
  border-radius: 12px 12px 3px 12px;
  background: var(--knci-navy-010);
  font: 400 15px/1.55 var(--knci-font);
}

.knci-bot {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.knci-bot__mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex: none;
  margin-top: 2px;
  background: linear-gradient(140deg, var(--knci-blue), var(--knci-navy-100));
}
.knci-bot__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.knci-lead {
  margin: 0;
  font: 400 16px/1.62 var(--knci-font);
  text-wrap: pretty;
}
.knci-lead__caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--knci-blue);
  vertical-align: -0.18em;
  margin-left: 2px;
  animation: knciDot 1s steps(1) infinite;
}

.knci-typing {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 22px;
}
.knci-typing > span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--knci-navy-070);
  animation: knciDot 1.2s infinite;
}
.knci-typing > span:nth-child(2) {
  animation-delay: 0.15s;
}
.knci-typing > span:nth-child(3) {
  animation-delay: 0.3s;
}
.knci-status {
  font: 400 13px/1.4 var(--knci-font);
  color: var(--knci-navy-070);
}

.knci-err {
  border-radius: var(--knci-radius-sm);
  background: var(--knci-red-bg);
  color: #7d1218;
  padding: 12px 14px;
  font: 400 14px/1.5 var(--knci-font);
}

/* ------------------------------------------------------------------ blocks -- */

.knci-card {
  border-radius: var(--knci-radius-sm);
  background: #fff;
  box-shadow: var(--knci-ring), 0 1px 3px rgba(0, 41, 84, 0.05);
  animation: knciUp 0.3s ease both;
  overflow: hidden;
}
.knci-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: var(--knci-navy-005);
  box-shadow: inset 0 -1px 0 var(--knci-navy-010);
}
.knci-card__title {
  margin: 0;
  font: 600 14.5px/1.3 var(--knci-font);
  flex: 1;
}
.knci-card__body {
  padding: 18px;
}
.knci-demo {
  font: 600 10px/1 var(--knci-font);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--knci-navy-070);
  background: var(--knci-navy-010);
  border-radius: 999px;
  padding: 5px 9px;
  flex: none;
}
.knci-badge {
  font: 600 11.5px/1 var(--knci-font);
  border-radius: 999px;
  padding: 5px 10px;
  flex: none;
  background: var(--knci-ok-bg);
  color: #146630;
}

/* facts / steps / checklist ------------------------------------------------ */

.knci-facts {
  display: flex;
  flex-direction: column;
}
.knci-facts > div {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  padding: 13px 0;
  box-shadow: inset 0 -1px 0 var(--knci-navy-010);
}
.knci-facts > div:last-child {
  box-shadow: none;
  padding-bottom: 0;
}
.knci-facts b {
  font: 600 14.5px/1.5 var(--knci-font);
}
.knci-facts span {
  font: 400 14.5px/1.62 var(--knci-font);
  color: #33475c;
}

.knci-steps {
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: knci;
}
.knci-steps > li {
  list-style: none;
  counter-increment: knci;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  padding: 11px 0;
}
.knci-steps > li::before {
  content: counter(knci);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--knci-blue-010);
  color: var(--knci-blue-110);
  font: 600 13px/26px var(--knci-font);
  text-align: center;
}
.knci-steps b {
  display: block;
  font: 600 14.5px/1.45 var(--knci-font);
  margin-bottom: 3px;
}
.knci-steps span {
  font: 400 14.5px/1.6 var(--knci-font);
  color: #33475c;
}

.knci-check {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.knci-check label {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.knci-check label:hover {
  background: var(--knci-navy-005);
}
.knci-check input {
  margin: 3px 0 0;
  width: 17px;
  height: 17px;
  accent-color: var(--knci-blue);
}
.knci-check b {
  display: block;
  font: 500 14.5px/1.45 var(--knci-font);
}
.knci-check input:checked + div b {
  text-decoration: line-through;
  color: var(--knci-navy-045);
}
.knci-check span {
  font: 400 13.5px/1.55 var(--knci-font);
  color: var(--knci-navy-070);
}

/* compare ----------------------------------------------------------------- */

.knci-tablewrap {
  overflow-x: auto;
}
.knci-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 14px/1.5 var(--knci-font);
  min-width: 420px;
}
.knci-table th,
.knci-table td {
  text-align: left;
  padding: 11px 14px;
  box-shadow: inset 0 -1px 0 var(--knci-navy-010);
  vertical-align: top;
}
.knci-table thead th {
  font: 600 13px/1.3 var(--knci-font);
  background: var(--knci-navy-005);
  color: var(--knci-navy);
  white-space: nowrap;
}
.knci-table tbody th {
  font: 500 14px/1.5 var(--knci-font);
  color: var(--knci-navy-070);
  white-space: nowrap;
}
.knci-table tbody tr:last-child th,
.knci-table tbody tr:last-child td {
  box-shadow: none;
}

/* on this page ----------------------------------------------------------- */

.knci-onpage {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.knci-onpage__row {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 10px 10px 10px 8px;
  border-radius: 7px;
  font-family: var(--knci-font);
  color: inherit;
}
button.knci-onpage__row:hover {
  background: var(--knci-blue-005);
}
button.knci-onpage__row:hover .knci-onpage__mark {
  background: var(--knci-blue);
  color: #fff;
}
.knci-onpage__mark {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--knci-blue-010);
  color: var(--knci-blue-110);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: background 0.15s ease, color 0.15s ease;
}
.knci-onpage__row b {
  display: block;
  font: 600 14.5px/1.4 var(--knci-font);
}
.knci-onpage__row > span > span {
  font: 400 13.5px/1.55 var(--knci-font);
  color: var(--knci-navy-070);
}

/* The section the assistant scrolled to, marked briefly so it is obvious which
   one moved into view. */
.knci-spot {
  animation: knciSpot 2.4s ease both;
}
@keyframes knciSpot {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 rgba(0, 115, 233, 0);
  }
  12%,
  62% {
    box-shadow: inset 0 0 0 3px rgba(0, 115, 233, 0.55);
  }
}

/* financials (analyst numbers) ------------------------------------------- */

.knci-badge--reported {
  background: var(--knci-blue-010);
  color: var(--knci-blue-110);
}
.knci-fin__unit {
  font: 400 12px/1.4 var(--knci-font);
  color: var(--knci-navy-070);
}
.knci-fin {
  font-variant-numeric: tabular-nums;
}
.knci-fin th[scope='row'] {
  font: 500 14px/1.45 var(--knci-font);
  color: var(--knci-navy);
  white-space: normal;
}
.knci-fin__note {
  display: block;
  font: 400 12px/1.45 var(--knci-font);
  color: var(--knci-navy-070);
  margin-top: 2px;
}
.knci-fin__num {
  text-align: right;
  white-space: nowrap;
}
.knci-fin td.knci-fin__num {
  font: 500 14.5px/1.5 var(--knci-font);
}
.knci-fin__num i {
  font: 400 11.5px/1 var(--knci-font);
  font-style: normal;
  color: var(--knci-navy-045);
}
.knci-fin td.knci-fin__prior {
  color: var(--knci-navy-070);
  font-weight: 400;
}
.knci-fin td.knci-fin__delta {
  font-weight: 600;
}
.knci-fin td.knci-fin__delta[data-dir='up'] {
  color: #146630;
}
.knci-fin td.knci-fin__delta[data-dir='down'] {
  color: #a3151d;
}
.knci-fin td.knci-fin__delta[data-dir='flat'] {
  color: var(--knci-navy-070);
}

/* stats / chart ----------------------------------------------------------- */

.knci-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 22px;
}
.knci-stats b {
  display: block;
  font: 600 34px/1.05 var(--knci-font);
  letter-spacing: -0.02em;
  color: var(--knci-navy);
}
.knci-stats i {
  display: block;
  font: 600 14px/1.4 var(--knci-font);
  font-style: normal;
  margin: 6px 0 3px;
}
.knci-stats span {
  font: 400 13px/1.5 var(--knci-font);
  color: var(--knci-navy-070);
}

.knci-chart {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.knci-chart__row {
  display: grid;
  grid-template-columns: minmax(90px, 168px) 1fr 78px;
  gap: 12px;
  align-items: center;
}
.knci-chart__label {
  font: 400 13px/1.4 var(--knci-font);
  color: var(--knci-navy-070);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.knci-chart__track {
  height: 12px;
  border-radius: 999px;
  background: var(--knci-navy-010);
  overflow: hidden;
}
.knci-chart__bar {
  /* An <i> is inline by default, and width and height do not apply to an inline
     box — which is why the bars rendered empty. */
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--knci-blue), var(--knci-cyan));
  width: 0;
  transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.knci-chart__val {
  font: 500 13px/1.4 var(--knci-font);
  text-align: right;
}
.knci-chart__unit {
  font: 400 12px/1.4 var(--knci-font);
  color: var(--knci-navy-045);
  margin: 0 0 4px;
}

/* timeline ---------------------------------------------------------------- */

.knci-timeline {
  display: flex;
  flex-direction: column;
}
.knci-timeline > div {
  display: grid;
  grid-template-columns: 118px 18px 1fr;
  gap: 10px;
}
/* The gap between two entries belongs to the text column, not to the row: put it
   on the row and the connector cannot reach through it, which leaves the line
   hanging short of the next dot instead of joining them. */
.knci-timeline__body {
  padding-bottom: 20px;
}
.knci-timeline > div:last-child .knci-timeline__body {
  padding-bottom: 0;
}
/* The connector lives inside the marker column and is centred by flex, so it
   tracks the dot instead of being positioned with a magic offset. */
.knci-timeline__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}
.knci-timeline__dot {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 999px;
  background: var(--knci-blue);
  margin-top: 5px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--knci-blue-025);
}
.knci-timeline__line {
  flex: 1;
  width: 2px;
  min-height: 16px;
  /* Starts just below the dot's white ring and runs all the way down. */
  margin: 4px 0 -2px;
  background: var(--knci-navy-010);
}
.knci-timeline__when {
  font: 500 13px/1.5 var(--knci-font);
  color: var(--knci-navy-070);
  text-align: right;
}
.knci-timeline b {
  display: block;
  font: 600 14.5px/1.45 var(--knci-font);
}
.knci-timeline span {
  font: 400 14px/1.6 var(--knci-font);
  color: #33475c;
}

/* alert ------------------------------------------------------------------- */

.knci-alert {
  display: flex;
  gap: 13px;
  border-radius: var(--knci-radius-sm);
  padding: 15px 17px;
  animation: knciUp 0.3s ease both;
}
.knci-alert svg {
  flex: none;
  margin-top: 1px;
}
.knci-alert b {
  display: block;
  font: 600 14.5px/1.4 var(--knci-font);
  margin-bottom: 3px;
}
.knci-alert span {
  font: 400 14px/1.6 var(--knci-font);
}
.knci-alert--info {
  background: var(--knci-blue-005);
  color: #0b3f74;
  box-shadow: inset 0 0 0 1px var(--knci-blue-025);
}
.knci-alert--warning {
  background: var(--knci-warn-bg);
  color: #7a3c00;
  box-shadow: inset 0 0 0 1px #f5d9bd;
}
.knci-alert--success {
  background: var(--knci-ok-bg);
  color: #12572b;
  box-shadow: inset 0 0 0 1px #b9e2c6;
}

/* links / locations / contacts ------------------------------------------- */

.knci-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px;
  animation: knciUp 0.3s ease both;
}
.knci-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: var(--knci-radius-sm);
  background: #fff;
  box-shadow: var(--knci-ring);
  padding: 15px 16px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
a.knci-tile:hover {
  box-shadow: inset 0 0 0 1px var(--knci-blue-025), 0 6px 18px rgba(0, 41, 84, 0.09);
  transform: translateY(-1px);
}
.knci-tile b {
  font: 600 14.5px/1.4 var(--knci-font);
}
.knci-tile span {
  font: 400 13.5px/1.55 var(--knci-font);
  color: var(--knci-navy-070);
}
.knci-tile em {
  font: 400 12.5px/1.4 var(--knci-font);
  font-style: normal;
  color: var(--knci-navy-045);
  margin-top: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.knci-tile__act {
  font: 500 13.5px/1.4 var(--knci-font);
  color: var(--knci-blue);
  margin-top: 2px;
}
.knci-avatar {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--knci-blue-010);
  color: var(--knci-blue-110);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 13.5px/1 var(--knci-font);
  flex: none;
}

/* tracking --------------------------------------------------------------- */

.knci-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  padding: 16px 18px;
  box-shadow: inset 0 -1px 0 var(--knci-navy-010);
}
.knci-meta > div > p:first-child {
  margin: 0 0 3px;
  font: 400 12px/1.4 var(--knci-font);
  color: var(--knci-navy-070);
}
.knci-meta > div > p:last-child {
  margin: 0;
  font: 500 14px/1.4 var(--knci-font);
}

.knci-legs {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.knci-legs > div {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 12px;
  align-items: center;
}
.knci-legs__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--knci-navy-010);
}
.knci-legs__dot[data-done='true'] {
  background: var(--knci-ok);
}
.knci-legs__dot[data-done='false'] {
  background: var(--knci-navy-025);
}
.knci-legs__label {
  font: 400 14px/1.5 var(--knci-font);
}
.knci-legs > div[data-done='false'] .knci-legs__label {
  color: var(--knci-navy-070);
}
.knci-legs__when {
  font: 400 13px/1.5 var(--knci-font);
  color: var(--knci-navy-070);
  text-align: right;
  white-space: nowrap;
}

/* schedule: departures to choose from --------------------------------------- */

.knci-deps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: knciUp 0.3s ease both;
}
.knci-dep {
  display: grid;
  grid-template-columns: 1.15fr 1.4fr 0.7fr auto 26px;
  gap: 14px;
  align-items: center;
  text-align: left;
  border: 0;
  border-radius: var(--knci-radius-sm);
  background: #fff;
  box-shadow: var(--knci-ring);
  padding: 13px 15px;
  cursor: pointer;
  font: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.knci-dep:hover {
  box-shadow: inset 0 0 0 1px var(--knci-blue-025), 0 6px 18px rgba(0, 41, 84, 0.09);
}
.knci-dep[aria-pressed='true'] {
  box-shadow: inset 0 0 0 2px var(--knci-blue), 0 8px 22px rgba(0, 115, 233, 0.14);
}
.knci-dep b {
  display: block;
  font: 600 14px/1.4 var(--knci-font);
  color: var(--knci-navy);
}
.knci-dep span span,
.knci-dep > span > span {
  font: 400 12.5px/1.45 var(--knci-font);
  color: var(--knci-navy-070);
}
.knci-dep__transit {
  text-align: right;
}
.knci-dep__space {
  justify-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  font: 600 11.5px/1.5 var(--knci-font);
  white-space: nowrap;
}
.knci-dep__space--open {
  background: rgba(8, 199, 146, 0.14);
  color: #067a5b;
}
.knci-dep__space--tight {
  background: rgba(255, 176, 32, 0.18);
  color: #8a5a00;
}
.knci-dep__space--waitlist {
  background: rgba(214, 62, 62, 0.13);
  color: #a02525;
}
/* The tick only appears on the chosen departure, so the row reads as a choice
   rather than as a link. */
.knci-dep__pick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--knci-navy-005);
  color: var(--knci-navy-025);
  transition: background 0.15s ease, color 0.15s ease;
}
.knci-dep[aria-pressed='true'] .knci-dep__pick {
  background: var(--knci-blue);
  color: #fff;
}

/* cutoffs: deadlines that count down ---------------------------------------- */

.knci-cuts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: knciUp 0.3s ease both;
}
.knci-cut__ref {
  font: 500 12.5px/1.5 var(--knci-font);
  color: var(--knci-navy-070);
  margin-bottom: 8px;
}
.knci-cut {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  box-shadow: inset 0 -1px 0 var(--knci-navy-010);
}
.knci-cut:last-child {
  box-shadow: none;
}
.knci-cut__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--knci-navy-025);
  transition: background 0.3s ease;
}
.knci-cut__what b {
  display: block;
  font: 600 14px/1.45 var(--knci-font);
  color: var(--knci-navy);
}
.knci-cut__what span {
  font: 400 12.5px/1.5 var(--knci-font);
  color: var(--knci-navy-070);
}
.knci-cut__time {
  text-align: right;
}
/* Tabular figures, so a ticking second does not shuffle the row. */
.knci-cut__left {
  display: block;
  font: 600 14px/1.4 var(--knci-font);
  font-variant-numeric: tabular-nums;
  color: var(--knci-navy);
}
.knci-cut__time span {
  font: 400 12px/1.5 var(--knci-font);
  color: var(--knci-navy-045);
}
.knci-cut[data-urgency='soon'] .knci-cut__dot {
  background: #ffb020;
}
.knci-cut[data-urgency='soon'] .knci-cut__left {
  color: #8a5a00;
}
.knci-cut[data-urgency='now'] .knci-cut__dot {
  background: #d63e3e;
  animation: knciPulse 1.4s infinite;
}
.knci-cut[data-urgency='now'] .knci-cut__left {
  color: #a02525;
}
.knci-cut[data-urgency='gone'] {
  opacity: 0.55;
}
.knci-cut[data-urgency='gone'] .knci-cut__left {
  text-decoration: line-through;
}

/* priorities: the trade-off configurator ------------------------------------ */

.knci-prio {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: knciUp 0.3s ease both;
}
.knci-prio__axes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 22px;
  padding: 14px 16px;
  border-radius: var(--knci-radius-sm);
  background: var(--knci-navy-005);
}
.knci-prio__axis {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.knci-prio__axis b {
  font: 600 13px/1.4 var(--knci-font);
  color: var(--knci-navy);
}
.knci-prio__axis > span > span {
  display: block;
  font: 400 11.5px/1.4 var(--knci-font);
  color: var(--knci-navy-045);
}
.knci-prio__axis input[type='range'] {
  width: 100%;
  accent-color: var(--knci-blue);
}
.knci-prio__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.knci-prio__item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-radius: var(--knci-radius-sm);
  background: #fff;
  box-shadow: var(--knci-ring);
  padding: 13px 15px;
  transition: box-shadow 0.2s ease;
}
/* The leader is stated, not just implied by position: the list reorders as the
   sliders move, and a rank that only exists as an ordering is easy to miss. */
.knci-prio__item[data-rank='1'] {
  box-shadow: inset 0 0 0 2px var(--knci-blue), 0 8px 22px rgba(0, 115, 233, 0.12);
}
.knci-prio__top {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.knci-prio__top b {
  flex: 1;
  font: 600 14.5px/1.4 var(--knci-font);
  color: var(--knci-navy);
}
.knci-prio__rank {
  font: 600 10.5px/1.5 var(--knci-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--knci-navy-045);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--knci-navy-005);
  white-space: nowrap;
}
.knci-prio__item[data-rank='1'] .knci-prio__rank {
  color: #fff;
  background: var(--knci-blue);
}
.knci-prio__score {
  font: 600 13px/1.4 var(--knci-font);
  font-variant-numeric: tabular-nums;
  color: var(--knci-navy-070);
}
.knci-prio__bar {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--knci-navy-010);
  overflow: hidden;
}
.knci-prio__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--knci-blue) 0%, #0099da 100%);
  transition: width 0.25s ease;
}
.knci-prio__detail {
  font: 400 13px/1.55 var(--knci-font);
  color: var(--knci-navy-070);
}

/* locations: a locator map above cards that carry a photo of the city -------- */

.knci-places {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: knciUp 0.3s ease both;
}
.knci-places__map {
  height: 210px;
  border-radius: var(--knci-radius-sm);
  overflow: hidden;
  background: #f4f8fb;
  box-shadow: var(--knci-ring);
}
.knci-places__map kn-locator-map {
  display: block;
  width: 100%;
  height: 100%;
}
.knci-places__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.knci-place {
  display: flex;
  flex-direction: column;
  border-radius: var(--knci-radius-sm);
  background: #fff;
  box-shadow: var(--knci-ring);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.knci-place:hover {
  box-shadow: inset 0 0 0 1px var(--knci-blue-025), 0 8px 22px rgba(0, 41, 84, 0.1);
  transform: translateY(-1px);
}
/* The photo well doubles as the fallback: a K+N gradient with the city
   initials, which the photograph covers once it has decoded. */
.knci-place__shot {
  position: relative;
  height: 116px;
  background: linear-gradient(135deg, var(--knci-navy) 0%, var(--knci-blue) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.knci-place__initials {
  font: 600 26px/1 var(--knci-font);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
}
.knci-place__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.knci-place__img.is-on {
  opacity: 1;
}
/* Photo credit: required by Unsplash, and it reads as care rather than clutter
   when it sits quietly in the corner of the image. */
.knci-place__credit {
  position: absolute;
  right: 7px;
  bottom: 6px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 20, 41, 0.42);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.9);
  font: 400 10.5px/1.5 var(--knci-font);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.25s ease 0.15s;
}
.knci-place__img.is-on ~ .knci-place__credit {
  opacity: 1;
}
.knci-place__credit:hover {
  background: rgba(0, 20, 41, 0.62);
  color: #fff;
}
.knci-place__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 15px 15px;
}
.knci-place__head {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.knci-place__head b {
  display: block;
  font: 600 14.5px/1.35 var(--knci-font);
}
.knci-place__head span {
  font: 400 12.5px/1.45 var(--knci-font);
  color: var(--knci-navy-045);
}
.knci-place__pin {
  color: var(--knci-blue);
  display: flex;
  padding-top: 1px;
}
.knci-place__role {
  font: 500 13px/1.5 var(--knci-font);
  color: var(--knci-navy);
}
.knci-place__note {
  font: 400 13px/1.55 var(--knci-font);
  color: var(--knci-navy-070);
}
.knci-place .knci-tile__act {
  margin-top: 3px;
}

/* route map -------------------------------------------------------------- */

.knci-map {
  height: 300px;
  background: #f4f8fb;
}
.knci-map kn-route-map {
  display: block;
  width: 100%;
  height: 100%;
}
.knci-route__foot {
  padding: 18px;
  box-shadow: inset 0 1px 0 var(--knci-navy-010);
}
.knci-route__top {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 13px;
}
.knci-route__top div {
  flex: 1;
  min-width: 0;
}
.knci-route__lane {
  margin: 0 0 3px;
  font: 600 14.5px/1.4 var(--knci-font);
}
.knci-route__note {
  margin: 0;
  font: 400 13px/1.5 var(--knci-font);
  color: var(--knci-navy-070);
}
/* While a mode card is hovered, the note says which routing is on screen. */
.knci-route__note--preview {
  color: var(--knci-blue-110);
  font-weight: 500;
}
.knci-route__pct {
  margin: 0;
  font: 600 28px/1 var(--knci-font);
  letter-spacing: -0.02em;
}
.knci-progress {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--knci-navy-010);
  overflow: hidden;
  margin-bottom: 10px;
}
.knci-progress > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--knci-blue), var(--knci-cyan));
  transition: width 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.knci-route__legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 400 12.5px/1.4 var(--knci-font);
  color: var(--knci-navy-070);
  margin-bottom: 15px;
  flex-wrap: wrap;
}
.knci-route__delta {
  font: 600 11.5px/1.3 var(--knci-font);
  color: #146630;
  background: var(--knci-ok-bg);
  border-radius: 999px;
  padding: 4px 10px;
}
.knci-route__delta[data-late='true'] {
  color: #7a3c00;
  background: var(--knci-warn-bg);
}

.knci-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--knci-navy-005);
  border: 0;
  border-radius: var(--knci-radius-sm);
  padding: 12px 14px;
  font: 400 14px/1.45 var(--knci-font);
  color: var(--knci-navy);
}
.knci-toggle:hover {
  background: var(--knci-navy-010);
}
.knci-toggle__sw {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--knci-navy-025);
  transition: background 0.16s ease;
  flex: none;
}
.knci-toggle[data-on='true'] .knci-toggle__sw {
  background: var(--knci-ok);
}
.knci-toggle__sw > i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  transition: left 0.16s ease;
}
.knci-toggle[data-on='true'] .knci-toggle__sw > i {
  left: 19px;
}

/* incoterms ------------------------------------------------------------- */

.knci-seg {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.knci-seg button {
  border: 0;
  border-radius: 6px;
  padding: 8px 13px;
  font: 600 13px/1.2 var(--knci-font);
  background: var(--knci-navy-005);
  color: var(--knci-navy);
  box-shadow: inset 0 0 0 1px var(--knci-navy-010);
}
.knci-seg button[aria-pressed='true'] {
  background: var(--knci-navy);
  color: #fff;
  box-shadow: none;
}
.knci-stages {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin: 16px 0 14px;
}
.knci-stage {
  border-radius: 6px;
  padding: 10px 9px 12px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 0.22s ease, color 0.22s ease;
}
.knci-stage[data-who='seller'] {
  background: var(--knci-blue);
  color: #fff;
}
.knci-stage[data-who='buyer'] {
  background: var(--knci-navy-005);
  color: #33475c;
  box-shadow: inset 0 0 0 1px var(--knci-navy-010);
}
.knci-stage i {
  font: 600 9.5px/1.3 var(--knci-font);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}
.knci-stage span {
  font: 400 11.5px/1.35 var(--knci-font);
}
.knci-summary {
  margin: 0;
  font: 400 14px/1.62 var(--knci-font);
  color: #33475c;
}

/* landed cost ----------------------------------------------------------- */

.knci-landed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 700px) {
  .knci-landed {
    grid-template-columns: 1fr;
  }
  .knci-stages {
    grid-template-columns: repeat(3, 1fr);
  }
  .knci-facts > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.knci-landed__lbl {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.knci-landed__lbl span {
  font: 400 12px/1.4 var(--knci-font);
  color: var(--knci-navy-070);
}
.knci-landed__lbl b {
  font: 600 15px/1.4 var(--knci-font);
}
.knci-range {
  width: 100%;
  accent-color: var(--knci-blue);
  margin: 0 0 18px;
}
.knci-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.knci-line > span {
  flex: 1;
  font: 400 13px/1.6 var(--knci-font);
  color: var(--knci-navy-070);
}
.knci-line > b {
  font: 500 15px/1.4 var(--knci-font);
}
.knci-line--total {
  padding-top: 12px;
  margin-top: 4px;
  box-shadow: inset 0 1px 0 var(--knci-navy-010);
}
.knci-line--total > span {
  font-weight: 600;
  color: var(--knci-navy);
}
.knci-line--total > b {
  font: 600 22px/1.2 var(--knci-font);
  letter-spacing: -0.02em;
}
.knci-fine {
  margin: 10px 0 0;
  font: 400 12px/1.5 var(--knci-font);
  color: var(--knci-navy-045);
}

/* modes ----------------------------------------------------------------- */

.knci-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  animation: knciUp 0.3s ease both;
}
.knci-mode {
  text-align: left;
  border: 0;
  border-radius: var(--knci-radius-sm);
  background: #fff;
  padding: 17px;
  box-shadow: var(--knci-ring);
  transition: box-shadow 0.15s ease;
}
.knci-mode[aria-pressed='true'] {
  box-shadow: inset 0 0 0 2px var(--knci-blue), 0 6px 18px rgba(0, 115, 233, 0.13);
}
.knci-mode__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 14.5px/1.4 var(--knci-font);
  margin-bottom: 9px;
}
.knci-mode__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex: none;
}
.knci-mode__price {
  margin: 0 0 13px;
  font: 600 21px/1.1 var(--knci-font);
  letter-spacing: -0.02em;
}
.knci-mode__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.knci-mode__bar > i {
  width: 44px;
  font: 400 11px/1.3 var(--knci-font);
  font-style: normal;
  color: var(--knci-navy-070);
  flex: none;
}
.knci-mode__bar > span {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--knci-navy-010);
}
.knci-mode__bar > span > u {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  text-decoration: none;
}
.knci-mode__bar > b {
  width: 62px;
  text-align: right;
  font: 500 12px/1.3 var(--knci-font);
  flex: none;
}
.knci-mode__note {
  margin: 9px 0 0;
  font: 400 12.5px/1.5 var(--knci-font);
  color: var(--knci-navy-070);
}

/* quote form ------------------------------------------------------------ */

.knci-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.knci-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.knci-field > span {
  font: 400 12px/1.4 var(--knci-font);
  color: var(--knci-navy-070);
}
.knci-field > input,
.knci-field > select {
  height: 42px;
  padding: 0 11px;
  font: 400 14px/1.4 var(--knci-font);
  color: var(--knci-navy);
  background: #fff;
  border: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--knci-navy-025);
  outline: none;
  font-family: var(--knci-font);
}
.knci-field > input:focus,
.knci-field > select:focus {
  box-shadow: inset 0 0 0 2px var(--knci-blue);
}
.knci-result {
  margin-top: 16px;
  padding-top: 16px;
  box-shadow: inset 0 1px 0 var(--knci-navy-010);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  animation: knciUp 0.3s ease both;
}
.knci-result > div {
  flex: 1;
  min-width: 180px;
}
.knci-result b {
  display: block;
  font: 600 19px/1.3 var(--knci-font);
}
.knci-result span {
  font: 400 13px/1.5 var(--knci-font);
  color: var(--knci-navy-070);
}

/* slots ---------------------------------------------------------------- */

.knci-slots__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 17px;
}
.knci-slots__head b {
  display: block;
  font: 600 14.5px/1.4 var(--knci-font);
}
.knci-slots__head span {
  font: 400 13px/1.5 var(--knci-font);
  color: var(--knci-navy-070);
}
.knci-times {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
  margin: 14px 0 16px;
}
.knci-times button {
  border: 0;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--knci-navy-025);
  padding: 11px 0;
  font: 500 14px/1.2 var(--knci-font);
  color: var(--knci-navy);
}
.knci-times button[aria-pressed='true'] {
  background: var(--knci-blue-010);
  box-shadow: inset 0 0 0 2px var(--knci-blue);
}
.knci-booked {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: var(--knci-radius-sm);
  background: var(--knci-ok-bg);
  padding: 16px 18px;
  animation: knciUp 0.3s ease both;
}
.knci-booked b {
  display: block;
  font: 600 14.5px/1.4 var(--knci-font);
  color: #12572b;
}
.knci-booked span {
  font: 400 13px/1.5 var(--knci-font);
  color: #2c6c4c;
}

/* sources / follow-ups ------------------------------------------------- */

.knci-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  animation: knciUp 0.3s ease both;
}
.knci-sources > i {
  font: 500 11.5px/1.4 var(--knci-font);
  font-style: normal;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--knci-navy-045);
  margin-right: 2px;
}
.knci-source {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 400 13px/1.4 var(--knci-font);
  color: var(--knci-navy);
  text-decoration: none;
  background: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: var(--knci-ring);
}
.knci-source:hover {
  box-shadow: inset 0 0 0 1px var(--knci-blue-025);
  background: var(--knci-blue-005);
}
.knci-source::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--knci-cyan);
  flex: none;
}
.knci-follow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  animation: knciUp 0.3s ease both;
}

/* --------------------------------------------------- variant 1a: the pill -- */

.knci-askpill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 6px 0 13px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  color: #fff;
  font: 400 14px/1 var(--knci-font);
  margin-right: 6px;
  max-width: 320px;
  transition: background 0.15s ease;
}
.knci-askpill:hover {
  background: rgba(255, 255, 255, 0.22);
}
.knci-askpill__ph {
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.knci-askpill__tag {
  font: 600 10.5px/1 var(--knci-font);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: #fff;
  color: var(--knci-blue-110);
  border-radius: 999px;
  padding: 6px 9px;
  flex: none;
}
.knci-askpill--onlight {
  background: var(--knci-navy-005);
  color: var(--knci-navy);
  box-shadow: inset 0 0 0 1px var(--knci-navy-025);
}
.knci-askpill--onlight:hover {
  background: var(--knci-navy-010);
}
.knci-askpill--onlight .knci-askpill__ph {
  color: var(--knci-navy-070);
  opacity: 1;
}
.knci-askpill--onlight .knci-askpill__tag {
  background: var(--knci-blue-010);
}

/* ------------------------------------------------- variant 1b: hero panel -- */

/* Vertical padding only: horizontal alignment comes from the site's own
   `container` class, so the panel sits on the same grid as the page. The top
   value is set at mount time from the real header height. */
.knci-hero {
  padding: 32px 0 8px;
  background: var(--knci-navy-005);
}
/* 1b is the variant where the assistant takes the hero, so the question is the
   only thing on it: centred, and given the room the campaign visual used to have.
   Once there is a conversation the panel switches to a left-aligned reading
   layout, because centred body text and centred answers are hard to read. */
.knci-hero__inner {
  border-radius: var(--knci-radius);
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--knci-blue), 0 16px 40px rgba(0, 115, 233, 0.12);
  padding: 46px 38px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.knci-hero__inner[data-knci-open='true'] {
  align-items: stretch;
  text-align: left;
  padding: 30px 34px 32px;
}
.knci-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  width: 100%;
}
.knci-hero__eyebrow > i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--knci-green);
  flex: none;
}
.knci-hero__eyebrow > span {
  font: 600 11.5px/1.3 var(--knci-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--knci-blue-110);
}
.knci-hero h2 {
  margin: 0 0 30px;
  font: 600 clamp(28px, 3.6vw, 46px) / 1.1 var(--knci-font);
  letter-spacing: -0.025em;
  max-width: 880px;
  text-wrap: balance;
  color: var(--knci-navy);
}
.knci-hero__inner[data-knci-open='true'] h2 {
  text-wrap: pretty;
}
/* The field is the whole proposition here, so it is the biggest thing on the
   page: full width up to a readable measure, tall enough to look typed into
   rather than searched with, and ringed so it reads as the primary control. */
.knci-hero__row {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 780px;
  margin-bottom: 20px;
  align-items: center;
}
.knci-hero__inner[data-knci-open='true'] .knci-hero__row {
  max-width: none;
}
.knci-hero__row .knci-input {
  height: 72px;
  font-size: 19px;
  padding: 0 24px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 2px var(--knci-blue-025);
  transition: box-shadow 0.15s ease;
}
.knci-hero__row .knci-input::placeholder {
  color: var(--knci-navy-045);
}
.knci-hero__row .knci-input:focus {
  box-shadow: inset 0 0 0 2px var(--knci-blue), 0 6px 18px rgba(0, 115, 233, 0.14);
}
.knci-hero__row .knci-btn {
  height: 72px;
  padding: 0 34px;
  font-size: 17px;
  border-radius: 16px;
}
.knci-hero__row .knci-mic {
  width: 62px;
  height: 62px;
}
.knci-hero__inner[data-knci-open='true'] .knci-hero__row .knci-input,
.knci-hero__inner[data-knci-open='true'] .knci-hero__row .knci-btn {
  height: 60px;
  font-size: 17px;
}
/* Centred with the field above it, and only as wide. */
.knci-hero .knci-suggest {
  justify-content: center;
  max-width: 780px;
}
.knci-hero__inner[data-knci-open='true'] .knci-suggest {
  justify-content: flex-start;
  max-width: none;
}
.knci-hero__thread {
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 4px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-bottom: 20px;
  scrollbar-width: thin;
  width: 100%;
  text-align: left;
}

/* --------------------------------------------- variant 1c: the full stage -- */

.knci-stage-root {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  background: var(--knci-navy-005);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.knci-stage__top {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 clamp(20px, 4vw, 48px);
  height: 76px;
  background: #fff;
  box-shadow: inset 0 -1px 0 var(--knci-navy-010);
  flex: none;
}
.knci-stage__logo {
  height: 30px;
  flex: none;
}
.knci-stage__spacer {
  flex: 1;
}
.knci-stage__body {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  padding: 0 clamp(20px, 4vw, 48px);
  overflow: hidden;
}
.knci-stage__col {
  width: 100%;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.knci-stage__intro {
  padding: clamp(28px, 7vh, 84px) 0 0;
}
.knci-stage__intro > p {
  margin: 0 0 16px;
  font: 500 12.5px/1.4 var(--knci-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--knci-navy-070);
}
.knci-stage__intro > h1 {
  margin: 0 0 30px;
  font: 600 clamp(30px, 4.4vw, 54px) / 1.08 var(--knci-font);
  letter-spacing: -0.03em;
  text-wrap: pretty;
  color: var(--knci-navy);
}
.knci-stage__row {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
  align-items: center;
}
.knci-stage__row .knci-input {
  height: 66px;
  font-size: 18px;
  padding: 0 22px;
  box-shadow: inset 0 0 0 1px var(--knci-navy-025), 0 2px 8px rgba(0, 41, 84, 0.06);
}
.knci-stage__row .knci-btn {
  height: 66px;
  padding: 0 34px;
  font-size: 16.5px;
}
.knci-stage__row .knci-mic {
  width: 58px;
  height: 58px;
}
.knci-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px;
}
.knci-group > p {
  margin: 0 0 10px;
  font: 600 12.5px/1.4 var(--knci-font);
  color: var(--knci-navy-070);
}
.knci-group > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.knci-group button {
  border: 0;
  border-radius: var(--knci-radius-sm);
  background: #fff;
  box-shadow: var(--knci-ring);
  padding: 12px 14px;
  font: 400 14.5px/1.45 var(--knci-font);
  color: var(--knci-navy);
  text-align: left;
}
.knci-group button:hover {
  background: var(--knci-blue-005);
  box-shadow: inset 0 0 0 1px var(--knci-blue-025);
}
.knci-stage__convo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 30px;
}
.knci-stage__convohead {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex: none;
}
.knci-stage__convohead > p {
  margin: 0;
  flex: 1;
  font: 500 12.5px/1.4 var(--knci-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--knci-navy-070);
}
.knci-stage__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  scrollbar-width: thin;
}
.knci-stage__ask {
  flex: none;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 22px 0 26px;
}
.knci-stage__foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 15px clamp(20px, 4vw, 48px);
  background: #fff;
  box-shadow: inset 0 1px 0 var(--knci-navy-010);
  font: 400 13.5px/1.4 var(--knci-font);
  color: var(--knci-navy-070);
  flex-wrap: wrap;
}
.knci-stage__foot button {
  border: 0;
  background: none;
  font: 500 13.5px/1.4 var(--knci-font);
  color: var(--knci-blue);
  padding: 4px 0;
}
.knci-stage__foot button:hover {
  color: var(--knci-blue-110);
  text-decoration: underline;
}

.knci-classicbar {
  position: sticky;
  top: 0;
  z-index: 2147481000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px clamp(16px, 4vw, 48px);
  background: var(--knci-navy);
  color: #fff;
  font: 400 13px/1.4 var(--knci-font);
}
.knci-classicbar > span {
  opacity: 0.86;
}

/* ------------------------------------------------------- the match strip --- */

.knci-match {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: var(--knci-radius-sm);
  background: var(--knci-blue-005);
  box-shadow: inset 0 0 0 1px var(--knci-blue-025);
  padding: 14px 20px;
  margin: 24px clamp(16px, 4vw, 40px) 0;
  animation: knciUp 0.3s ease both;
  flex-wrap: wrap;
}
/* A spark, not a label: the sentence beside it already says what happened, and
   "MATCHED" in small caps read as a system code rather than an explanation. */
.knci-match > i {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--knci-blue-010);
  color: var(--knci-blue-110);
}
.knci-match > span {
  flex: 1;
  min-width: 200px;
  font: 400 14.5px/1.5 var(--knci-font);
  color: var(--knci-navy);
}
.knci-match b {
  font-weight: 600;
}

.knci-dim {
  transition: opacity 0.35s ease;
}

/* --------------------------------------------------- the variant switcher -- */

.knci-switch {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 2147483600;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border-radius: 999px;
  background: rgba(0, 41, 84, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 41, 84, 0.32);
  /* It floats over the page, so keep it quiet until it is wanted. */
  opacity: 0.5;
  transition: opacity 0.18s ease;
}
.knci-switch:hover,
.knci-switch:focus-within {
  opacity: 1;
}
.knci-switch > b {
  font: 600 10.5px/1 var(--knci-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  padding: 0 8px 0 6px;
}
.knci-switch button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font: 500 12.5px/1 var(--knci-font);
  padding: 8px 12px;
  transition: background 0.15s ease, color 0.15s ease;
}
.knci-switch button:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.knci-switch button[aria-pressed='true'] {
  background: #fff;
  color: var(--knci-navy);
}
.knci-switch__sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 2px;
}

/* the floating opener, for variants where the ask surface can scroll away */
.knci-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147483500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  background: var(--knci-blue);
  color: #fff;
  font: 600 14px/1 var(--knci-font);
  padding: 14px 20px;
  box-shadow: 0 12px 30px rgba(0, 115, 233, 0.35);
  transition: transform 0.15s ease, background 0.15s ease;
}
.knci-fab:hover {
  background: var(--knci-blue-110);
  transform: translateY(-1px);
}
.knci-fab[hidden] {
  display: none;
}

/* -------------------------------------------------------------- the toast -- */

.knci-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2147483640;
  background: var(--knci-navy);
  color: #fff;
  font: 400 13.5px/1.4 var(--knci-font);
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 41, 84, 0.3);
  animation: knciUp 0.2s ease both;
  max-width: min(560px, calc(100vw - 40px));
}

@media (max-width: 900px) {
  .knci-panel {
    inset: auto 8px 8px 8px !important;
    width: auto !important;
    max-height: 86vh;
  }
  .knci-facts > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .knci-timeline > div {
    grid-template-columns: 84px 18px 1fr;
  }
  .knci-switch > b {
    display: none;
  }
}