/* ==========================================================================
   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 ---------------- */
/* The same outer box as .kwall__card, so the two sit on one grid without the
   sixth one announcing itself: the panel below lines up with their monitors
   and the foot lines up with their name row. It used to be a dark blue
   gradient, which made it the loudest thing on the wall. */
.kwall__cta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 14px 0;
  border-radius: 18px;
}
/* Stands in for .kwall__frame: same grey, same corner, same gap beneath, and
   flex: 1 so its bottom edge lands exactly where the monitors' does. */
.kwall__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 22px 22px 20px;
  margin-bottom: 13px;
  border-radius: 11px;
  background: #efefef;
}
/* Stands in for .kwall__head, down to the rule under it. */
.kwall__foot {
  display: flex;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid #e6eaef;
}
.kwall__pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 99px;
  background: #fff;
  border: 1px solid #e2e7ec;
  color: var(--ink, #0b1524);
  font-size: 11.5px;
  font-weight: 600;
}
.kwall__pill svg {
  width: 14px;
  height: 14px;
  color: var(--cyan, #00b4e5);
}
/* Sized to land the whole panel on the same height as a monitor beside it,
   so the sixth box is not the one that stretches the row. */
.kwall__cta h3 {
  color: var(--ink, #0b1524);
  margin: 14px 0 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.03em;
}
.kwall__cta p {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted, #5c6b80);
}
/* Kept a little under the space a monitor needs, so the product boxes set the
   row height and this one fills it, rather than the other way round. */
.kwall__cta .kwall__grow {
  flex: 1;
  min-height: 6px;
}
.kwall__go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 11px;
  /* Dark on the grey panel now, the way every other primary button on the
     site is. It was white, which only worked against the blue. */
  background: var(--ink, #0b1524);
  color: #fff;
  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 -14px rgba(11, 21, 36, 0.55);
}
.kwall__go:hover svg {
  transform: translateX(3px);
}
.kwall__note {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--muted, #5c6b80);
}

/* ---------------- 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;
  }
}
@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;
  }
  /* Stacked, so it takes the same width and the same frame as the product
     boxes above it rather than running the full row on its own. */
  .kwall__cta {
    width: min(100%, 420px);
    margin-inline: auto;
    padding: 11px 11px 13px;
    border-radius: 15px;
  }
  .kwall__panel {
    padding: 20px 18px 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.

   The one control on a card that is not the product name, and the only way to
   the full-size view, so it is sized to be found rather than to stay out of
   the way. */
.kwall__eye {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #e6eaef;
  border-radius: 12px;
  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),
    box-shadow 0.18s var(--ease, ease),
    transform 0.18s var(--ease-out-soft, var(--ease, ease));
}
.kwall__eye svg {
  width: 19px;
  height: 19px;
}
/* It grows and takes the product's colour as soon as the card is hovered, not
   only when the pointer reaches the button itself. Somebody reading a card is
   already looking at it, and that is the moment to say the screen above opens.

   Scaling up can never move the box out from under the cursor, so this cannot
   set off the hover-loss flicker a translate would. */
.kwall__eye:hover,
.kwall__card:hover .kwall__eye {
  border-color: var(--kwall-accent, #1f5db5);
  color: var(--kwall-accent, #1f5db5);
  background: #f5f9fd;
  transform: scale(1.16);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--kwall-accent, #1f5db5) 55%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .kwall__eye:hover,
  .kwall__card:hover .kwall__eye {
    transform: none;
  }
}
.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;
  }
}

/* The eye opens the demo full size in a modal, which is worth having on a
   desktop where the card is a shrunken 1380px canvas. On a phone it is not:
   below 900px the stage stops being a scaled-down desktop and becomes a real
   window at real size, so the card already shows the product as large as the
   screen allows and the modal has nothing more to offer. It comes off, and
   the title row is left to the product name.

   Between there and the desktop it stays, but a thumb needs more than the
   40px a pointer is happy with, and it cannot lean on the hover growth that
   tells a mouse user it is a button. 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) {
  .kwall__eye {
    display: none;
  }
}
@media (min-width: 721px) and (hover: none) {
  .kwall__eye {
    width: 44px;
    height: 44px;
  }
}

/* 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;
  }
}