/* Liminal case. Built on the VB24 markup and sheet, so the case format applies
   by itself; only what VB24 does not have lives here. Source: Figma
   "Portfolio project", frame 1535:4466. */
.lim-img { display: block; width: 100%; height: auto; }
.lim-logo { display: block; width: 52px; height: 52px; } /* the liquid glass icon, frame 1647:4207, at the size of .vb24-hero__logo; no wordmark on the case */

/* First screen, frame 1535:4467. The mockups are wider than the column: they run past the container and shrink only
   where they would reach the window edge. */
.lim-hero-mock { grid-column: 2; height: auto; }
@media (min-width: 1101px) {
  html .case-liminal .vb24-hero__inner { position: relative; min-height: 466.4px; } /* the first screen ends at 540, top bar included */
  html .case-liminal .vb24-hero__text { padding: 27.9px 0 0 7px; }
  html .case-liminal .lim-hero-mock { position: absolute; grid-column: auto; top: 0.4px; left: 426.8px; width: min(752.6px, calc(50vw + 109px)); max-width: none; margin: 0; }
  /* Key numbers, frame 1535:4483: 27 under the first screen, a 228 card, 30 under it. */
  html .case-liminal .vb24-keynums { padding: 27px 0 30px; }
  html .case-liminal .vb24-keynums__card { align-items: center; min-height: 228px; padding: 44px 48px; }
  html .case-liminal .vb24-stat__value { line-height: 77px; }
  html .case-liminal .vb24-stat__from { font-size: 64px; line-height: 77px; }
  html .case-liminal .vb24-stat__caption { font-size: 17px; line-height: 21px; }
}
html .case-liminal .vb24-hero__title { margin-top: 33px; } /* 33 under the icon, frame 1535:4467 */
.lim-meta { display: grid; grid-template-columns: 202px 1fr; row-gap: 39.8px; }
html .vb24-hero__meta.lim-meta { margin-top: 41.4px; column-gap: 0; }
html .case-liminal .lim-meta :is(dt, dd) { line-height: 18px; }
html .case-liminal .lim-meta dt { color: #555466; }
html .case-liminal .lim-meta dd { margin-top: 5px; color: #9695aa; }
.lim-meta__note { color: #555466; }
.case-liminal .vb24-stat__caption { text-align: center; }

.lim-slot {
  display: grid;
  place-content: center;
  gap: 8px;
  min-height: 523px;
  padding: 24px;
  border-radius: 20px;
  background: #2f2e3e;
  color: #9695aa;
  font-size: 16px;
  text-align: center;
}
.lim-slot__title { font-size: 17px; color: var(--cf-soft); }

/* Before / after slider: drag the frame, js/modules/compare.js writes --pos.
   Both images are the same 1040x522 screen; the one on top is cut at the line. */
.lim-compare {
  --pos: 30%;
  --ink: #252233;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  cursor: ew-resize;
  touch-action: pan-y;       /* the page still scrolls under a vertical swipe */
  user-select: none;
  -webkit-user-select: none;
}
.lim-compare__img { display: block; width: 100%; height: auto; pointer-events: none; }
.lim-compare__img--before {
  position: absolute;
  inset: 0;
  height: 100%;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.lim-compare__line {
  position: absolute;
  inset-block: 0;
  left: var(--pos);
  width: 4px;
  margin-left: -2px;
  background: var(--ink);
}
.lim-compare__handle {
  position: absolute;
  top: 50%;
  left: clamp(28px, var(--pos), calc(100% - 28px));   /* stays whole at the edges */
  display: grid;
  place-items: center;
  width: 56px;
  height: 32px;
  margin: -16px 0 0 -28px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--cf-soft);
  font-size: 17px;
  line-height: 1;
}
.lim-compare__tag {
  position: absolute;
  bottom: 14px;
  left: 14px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cf-soft);
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}
.lim-compare__tag--after { right: 14px; left: auto; }
/* Keyboard and screen readers only: the pointer drives the frame itself. */
.lim-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.lim-compare__range:focus-visible ~ .lim-compare__handle { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 1100px) {
  .lim-hero-mock { width: 100%; max-width: 100%; margin: 24px 0 0; grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .lim-hero-mock { grid-column: 1; margin-top: 0; }
  html .vb24-hero__meta.lim-meta { grid-template-columns: minmax(0, 1fr); }
  .lim-slot { min-height: 240px; }
}