.page-apps .site-main {
  padding-right: clamp(5.5rem, 14vw, 10rem);
  max-width: min(100%, 56rem);
  padding-top: clamp(2rem, 6vw, 4.5rem);
}

.apps-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.15rem, 2.8vw, 1.75rem);
  align-items: stretch;
  perspective: 1100px;
}

.app-card {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: auto;
  min-height: clamp(22rem, 38vw, 26rem);
  width: 100%;
  padding: clamp(1.35rem, 2.8vw, 1.85rem);
  padding-right: clamp(2.5rem, 4vw, 3rem);
  border: 1px solid var(--edge);
  border-radius: 1.2rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--void-raised) 88%, transparent), var(--void-lift));
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent) inset,
    0 12px 32px rgba(0, 0, 0, 0.28);
  transition:
    border-color 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out);
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.app-card:hover,
.app-card:focus-visible {
  border-color: color-mix(in srgb, var(--acid) 42%, var(--edge));
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--acid) 18%, transparent) inset,
    0 22px 48px rgba(0, 0, 0, 0.42),
    0 0 0 1px color-mix(in srgb, var(--acid) 12%, transparent);
  outline: none;
}
.app-card.is-pressed {
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.35) inset,
    0 8px 18px rgba(0, 0, 0, 0.35);
}

.app-card-go {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.55rem;
  border: 1px solid var(--edge-strong);
  display: grid;
  place-items: center;
  color: var(--ink-mute);
  background: color-mix(in srgb, var(--void) 55%, transparent);
  backdrop-filter: blur(8px);
  transform: translateZ(36px);
  transition:
    color 200ms var(--ease-out),
    border-color 200ms var(--ease-out),
    background 200ms var(--ease-out);
}
.app-card-go svg {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}
.app-card:hover .app-card-go {
  color: var(--acid);
  border-color: color-mix(in srgb, var(--acid) 45%, var(--edge));
  background: color-mix(in srgb, var(--void-raised) 70%, transparent);
}

.app-mark {
  width: clamp(56px, 8vw, 72px);
  height: clamp(56px, 8vw, 72px);
  border-radius: 1rem;
  object-fit: cover;
  background: var(--void);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  flex: 0 0 auto;
  transform: translateZ(28px);
  transition: transform 280ms var(--ease-spring);
}
.app-card:hover .app-mark {
  transform: translateZ(40px) scale(1.04);
}
.app-mark-hilo {
  object-fit: contain;
  padding: 0.45rem;
  background: #111;
}

.app-copy {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  margin-top: 1.15rem;
  flex: 1 1 auto;
  min-height: 0;
  transform: translateZ(18px);
}
.app-copy h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
}
.app-slogan {
  font-weight: 700;
  color: var(--acid);
  font-size: 1rem;
}
.app-note {
  color: var(--ink-mute);
  font-size: 0.95rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.15rem !important;
}
.app-link {
  margin-top: auto;
  padding-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--ink);
  width: fit-content;
  font-size: 0.95rem;
  transform: translateZ(24px);
}
.app-card:hover .app-link { color: var(--acid); }
.app-link.is-soon { color: var(--ember); }
.app-card:hover .app-link.is-soon { color: var(--heat); }

@media (max-width: 900px) {
  .page-apps .site-main {
    padding-right: var(--pad);
  }
  .apps-list { grid-template-columns: 1fr; }
  .app-card {
    min-height: 20rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-card,
  .app-mark {
    transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
    transform: none !important;
  }
}

/* Load start — motion adds .is-ready / GSAP owns reveal */
.apps-list:not(.is-ready) .app-card {
  opacity: 0 !important;
  visibility: hidden !important;
}
.apps-list.is-ready .app-card {
  /* visibility unlocked; opacity stays with GSAP until tween */
  visibility: visible;
}
.reduce-motion .apps-list .app-card,
html.reduce-motion .apps-list .app-card {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}