/* KProof: six custom letters and a red/blue K, at their original proportions. */
.brand-mark,
.app-top img,
.route-proof img,
.protocol-node img,
.principle-mark {
  aspect-ratio: 789 / 144;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.brand {min-height: 44px;}
.brand-mark {width: 160px;}
.footer-brand .brand-mark {width: 176px;}
.app-top img {width: 120px;}
.world-route {--route-badge-width: 160px; --route-badge-height: 64px;}
.world-route .route-proof,
.world-route.is-visible .route-proof {
  width: var(--route-badge-width);
  height: var(--route-badge-height);
  left: calc(var(--route-badge-width) / 2 + var(--route) * (100% - var(--route-badge-width)));
  border-radius: var(--kp-radius-medium);
}
.route-proof img {width: 136px;}
.protocol-node img {width: 110px;}
.principle-mark {width: min(100%, 430px);}

@media (max-width: 900px) {
  .world-route {--route-badge-width: 136px; --route-badge-height: 56px;}
  .route-proof img {width: 112px;}
}

@media (max-width: 600px) {
  .brand-mark {width: 144px;}
  .footer-brand .brand-mark {width: 164px;}
  .app-top img {width: 114px;}
  .world-route {--route-badge-width: 104px; --route-badge-height: 44px;}
  .route-proof img {width: 88px;}
  .protocol-node {flex-direction: column; gap: 8px;}
  .protocol-node img {width: 92px;}
  .principle-mark {width: min(100%, 310px);}
}

/* Shared brand rules used by both the product site and the downloadable guide. */
.brand-guide-link {margin-top: 24px; color: var(--kp-color-blue);}
.app-surface {border-radius: var(--kp-radius-large);}
.protocol-node {border-radius: var(--kp-radius-medium);}
.result-badge {border-radius: var(--kp-radius-pill);}
.use-section {padding-top: var(--kp-layout-section);}