/* ==========================================================================
   THE DEMO WALL

   Six boxes across the top of the homepage. Five hold a live product running
   in a small browser monitor, drawn fresh on every load from the eleven that
   exist, so no two visits show the same five. The sixth is fixed: it says
   what the platform is and sends you to the full list.

   This replaced a single large laptop that showed one product at a time. The
   laptop was readable but it could only ever argue for one app; the wall
   argues for the platform, which is the thing the page is selling. It is also
   lighter: PHP enqueues only the five products it picked, where the laptop
   loaded all eleven to show one.

   At this size a product is a picture rather than something you read, so each
   monitor carries a badge naming what just happened inside it.
   ========================================================================== */

.kwall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 26px;
}

/* ---------------- one product box ---------------- */
.kwall__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 14px 0;
  border-radius: 18px;
  transition: transform 0.2s var(--ease, ease);
}
.kwall__card:hover {
  transform: translateY(-2px);
}

/* the monitor */
.kwall__frame {
  position: relative;
  flex: none;
  margin-bottom: 13px;
  border-radius: 11px;
  /* background: var(--blue-900, #072a44);
  box-shadow: 0 14px 30px -22px rgba(15, 32, 51, 0.9); */
  background: #EFEFEF;
}
.kwall__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px 6px;
}
.kwall__bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4a5561;
  flex: none;
}
.kwall__bar i:nth-child(1) {
  background: #ec6a5e;
}
.kwall__bar i:nth-child(2) {
  background: #f4bf4f;
}
.kwall__bar i:nth-child(3) {
  background: #61c554;
}
.kwall__bar span {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 500;
  color: #8c98a6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kwall__screen {
  position: relative;
  /* The stage below is a fixed 1380 x 840 desktop canvas, so the window keeps
     that ratio and the scale factor is the only thing that changes. */
  aspect-ratio: 1380 / 840;
  margin: 0 4px 4px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  /* Cut off mid-row otherwise, same as the product boxes. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}
/* A full-size desktop canvas, shrunk. The products inside are built for a
   1380px viewport and pin themselves to their container, so they are given
   exactly that and then scaled as one piece. */
.kwall__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1380px;
  height: 840px;
  transform: scale(var(--kw, 0.3));
  transform-origin: top left;
}
.kwall__stage .clk-demo-wrap,
.kwall__stage .clk-demo-device-screen {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
}
.kwall__stage .kore-demo__pane.is-on {
  position: absolute;
  inset: 0;
}

/* ---------------- the floating badge ---------------- */
.kwall__badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 14px);
  padding: 5px 10px 5px 8px;
  border-radius: 99px;
  background: #fff;
  border: 1px solid #eaeef3;
  box-shadow: 0 10px 22px -12px rgba(15, 32, 51, 0.55);
  font-size: 10px;
  font-weight: 600;
  color: #16202b;
  white-space: nowrap;
  /* The pill floats over the corner of a working product. Without this it
     would swallow every click that lands underneath it. */
  pointer-events: none;
  animation: kwallFloat 4.6s ease-in-out infinite;
}
.kwall__badge--tl {
  left: -9px;
  top: 30px;
}
/* Offset so the two pills never bob in step with each other. */
.kwall__badge--br {
  right: -9px;
  bottom: 12px;
  animation-delay: -2.3s;
}
.kwall__badge svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--kwall-accent, #1f5db5);
}
/* The second pill carries a live dot rather than repeating the first's
   product mark. */
.kwall__live {
  width: 6px;
  height: 6px;
  flex: none;
  margin-left: 2px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: kwallPulse 2.4s ease-out infinite;
}
@keyframes kwallPulse {
  70% {
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}
/* Two labels in the same slot, cross-fading, so the badge keeps reporting
   something new without the pill changing width mid-swap. */
.kwall__badge b {
  position: relative;
  display: grid;
  font-weight: 600;
}
.kwall__badge b span {
  grid-area: 1 / 1;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.kwall__badge b span:nth-child(2) {
  opacity: 0;
  transform: translateY(4px);
}
.kwall__badge.is-alt b span:nth-child(1) {
  opacity: 0;
  transform: translateY(-4px);
}
.kwall__badge.is-alt b span:nth-child(2) {
  opacity: 1;
  transform: none;
}

@keyframes kwallFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .kwall__badge,
  .kwall__live {
    animation: none;
  }
  .kwall__badge b span {
    transition: none;
  }
}

/* ---------------- the card's own words ---------------- */
.kwall__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink, #0f2033);
  text-decoration: none;
}
.kwall__name svg {
  width: 13px;
  height: 13px;
  color: #9fb0c0;
  transition:
    transform 0.2s var(--ease, ease),
    color 0.2s var(--ease, ease);
}
.kwall__card:hover .kwall__name svg {
  transform: translateX(3px);
  color: var(--kwall-accent, #1f5db5);
}
/* ---------------- the sixth box ---------------- */
.kwall__cta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 24px;
  border-radius: 18px;
  background:
    radial-gradient(
      120% 100% at 100% 0%,
      var(--blue, #10537e) 0%,
      rgba(16, 83, 126, 0) 58%
    ),
    linear-gradient(160deg, var(--blue-deep, #0a3b5c), var(--blue-900, #072a44));
  color: #fff;
}
.kwall__pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 11.5px;
  font-weight: 600;
}
.kwall__pill svg {
  width: 14px;
  height: 14px;
  color: var(--cyan, #00b4e5);
}
/* The site sets a colour on every h3, so this one has to say white out
   loud or it renders near-black on the dark card. */
.kwall__cta h3 {
  color: #fff;
  margin: 18px 0 0;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.kwall__cta p {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #a6c0d4;
}
.kwall__cta .kwall__grow {
  flex: 1;
  min-height: 18px;
}
.kwall__go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 18px;
  border-radius: 11px;
  background: #fff;
  color: var(--blue-900, #072a44);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition:
    transform 0.2s var(--ease, ease),
    box-shadow 0.2s var(--ease, ease);
}
.kwall__go svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s var(--ease, ease);
}
.kwall__go:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.8);
}
.kwall__go:hover svg {
  transform: translateX(3px);
}
.kwall__note {
  margin: 12px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: #7d9cb4;
}

/* ---------------- narrow ---------------- */

/* Every product switches to its own mobile layout at 900px, and it reads the
   real viewport to decide, not this canvas. Scaling a 1380px canvas down here
   would therefore stretch a phone layout across a desktop width. Below that
   line the stage stops being a shrunken desktop and becomes a real window at
   real size, so each product draws the phone layout it was built for. */
@media (max-width: 900px) {
  .kwall__screen {
    aspect-ratio: 3 / 4;
  }
  .kwall__stage {
    width: 100%;
    height: 100%;
    transform: none;
  }
  /* One pill, not two: at this width they would only collide. And it sits on
     the browser chrome rather than in the window, because the empty right
     half of that bar is the only part of the box with nothing behind it. At
     the foot of the window it was landing on whatever the product had drawn
     there, and crowding the back-to-top button on the way. */
  .kwall__badge--tl {
    display: none;
  }
  .kwall__badge--br {
    top: 4px;
    bottom: auto;
    left: auto;
    right: -7px;
  }
}

@media (max-width: 1180px) {
  .kwall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .kwall__cta h3 {
    font-size: 22px;
  }
}
@media (max-width: 720px) {
  .kwall {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 20px;
  }
  /* One card per row, but the window inside is a phone, so it is kept to a
     phone's width and centred. Left to fill the row it reached 619px at a
     700px viewport, and the 3/4 ratio made that 825px tall: six of those was
     five thousand pixels of wall before anything else on the page. */
  .kwall__card {
    width: min(100%, 420px);
    margin-inline: auto;
    padding: 11px 11px 13px;
    border-radius: 15px;
  }
  .kwall__badge {
    font-size: 11px;
    padding: 6px 11px 6px 9px;
  }
  .kwall__cta {
    padding: 22px 18px;
  }
  .kwall__cta h3 {
    font-size: 20px;
  }
}

/* ---------------- the title row and its eye ---------------- */
.kwall__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e6eaef;
}
.kwall__head .kwall__name {
  flex: 1;
  min-width: 0;
}
/* Sits on the right, level with the product name, and opens the monitor at a
   size you can actually work in. */
.kwall__eye {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #e6eaef;
  border-radius: 9px;
  background: #fff;
  color: #7d8d9c;
  cursor: pointer;
  transition:
    border-color 0.15s var(--ease, ease),
    color 0.15s var(--ease, ease),
    background 0.15s var(--ease, ease);
}
.kwall__eye svg {
  width: 15px;
  height: 15px;
}
.kwall__eye:hover {
  border-color: var(--kwall-accent, #1f5db5);
  color: var(--kwall-accent, #1f5db5);
  background: #f5f9fd;
}
.kwall__eye:focus-visible {
  outline: 2px solid var(--kwall-accent, #1f5db5);
  outline-offset: 2px;
}

/* ---------------- the full-size view ---------------- */
.kwall-modal {
  position: fixed;
  inset: 0;
  /* Over the sticky header, which sits at 1100, and over the to-top and chat
     buttons at 900. Anything less and the title bar hides behind the nav. */
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4.5vh, 56px) clamp(12px, 3vw, 40px);
}
.kwall-modal[hidden] {
  display: none;
}
.kwall-modal__back {
  position: absolute;
  inset: 0;
  background: rgba(7, 42, 68, 0.78);
  backdrop-filter: blur(3px);
  animation: kwallFade 0.2s ease both;
}
.kwall-modal__box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 14px;
  /* Same light chrome as the card it opened from. */
  background: #efefef;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  animation: kwallRise 0.24s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
@keyframes kwallFade {
  from {
    opacity: 0;
  }
}
@keyframes kwallRise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
}
@media (prefers-reduced-motion: reduce) {
  .kwall-modal__back,
  .kwall-modal__box {
    animation: none;
  }
}
.kwall-modal__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 10px 14px;
}
.kwall-modal__dots {
  display: flex;
  gap: 6px;
}
.kwall-modal__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4a5561;
}
.kwall-modal__dots i:nth-child(1) {
  background: #ec6a5e;
}
.kwall-modal__dots i:nth-child(2) {
  background: #f4bf4f;
}
.kwall-modal__dots i:nth-child(3) {
  background: #61c554;
}
.kwall-modal__url {
  font-size: 12px;
  font-weight: 500;
  color: #8c98a6;
}
.kwall-modal__t {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink, #0b1524);
}
.kwall-modal__x {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(15, 32, 51, 0.07);
  color: #5b6b7c;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.kwall-modal__x svg {
  width: 15px;
  height: 15px;
}
.kwall-modal__x:hover {
  background: var(--cyan, #00b4e5);
  color: #fff;
}
.kwall-modal__body {
  position: relative;
  /* Not flex: 1. demo-wall.js sets an exact width and height here so the box
     shrink-wraps the product, and a flex basis of zero would win over both. */
  flex: none;
  /* The stage inside keeps the canvas ratio, so the window does too and the
     product is never letterboxed against a black band. */
  margin: 0;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  background: #fff;
}
/* While a monitor is in the modal, the card it came from keeps its shape
   rather than collapsing to nothing. */
.kwall__screen.is-empty {
  background: #f3f6f9;
}

@media (max-width: 900px) {
  .kwall-modal {
    padding: 10px 8px;
  }
  .kwall-modal__box {
    width: 100%;
  }
  /* No canvas to shrink-wrap here, so the body goes back to filling whatever
     is left under the title bar instead of being given an exact size. */
  .kwall-modal__body {
    flex: 1;
    min-height: 0;
    width: auto;
    height: auto;
  }
  .kwall-modal__box {
    height: 100%;
  }
  .kwall-modal__t {
    display: none;
  }
  /* The title carried the auto margin that pushed everything to the right of
     it over. Hiding the title took the margin with it and left the close
     button sitting against the address instead of in the corner, so the
     button takes the margin over here. */
  .kwall-modal__x {
    margin-left: auto;
  }
}

/* A thumb needs more than the 30px a pointer is happy with. Last in the file
   because the base .kwall__eye rule is declared after the phone block above,
   and at equal specificity source order decides. */
@media (max-width: 720px), (hover: none) {
  .kwall__eye {
    width: 40px;
    height: 40px;
  }
}

/* Same on the wall: below this the pill on the chrome bar would sit on the
   address, and the card title underneath already names the product. */
@media (max-width: 380px) {
  .kwall__bar span {
    display: none;
  }
}