.apps-directory {
  font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
.directory-header { background: rgba(243,238,228,.90); }
.directory-brand { display: grid; text-decoration: none; line-height: 1.15; }
.directory-brand strong { font-size: 20px; }
.directory-brand span { margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.directory-intro { padding: 34px 0 12px; }
.directory-intro h1 { max-width: 820px; }
.app-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}
.app-directory-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: rgba(252,248,241,.94);
  box-shadow: var(--shadow);
}
.app-card-logo-wrap {
  display: grid;
  place-items: center;
  height: 310px;
  padding: 20px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
  background: #FCF8F1;
}
.dark-logo-wrap {
  background: #102A43;
}
.app-card-logo-wrap img {
  width: 100%;
  height: 100%;
  max-width: 330px;
  max-height: 270px;
  object-fit: contain;
  display: block;
}
.noscript-card .app-card-logo-wrap img { max-width: 330px; max-height: 270px; }
.staypawsed-card .app-card-logo-wrap img { max-width: 315px; max-height: 270px; }
.app-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 28px;
}
.app-card-content h2 {
  margin-bottom: 14px;
  font-size: clamp(31px, 4vw, 44px);
}
.app-card-content p:not(.eyebrow) {
  margin-bottom: 24px;
  color: var(--muted);
}
.app-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: auto;
}
.app-card-actions .button {
  min-height: 52px;
  border-radius: 10px;
  padding: 0 20px;
}
.app-card-content .button {
  align-self: flex-start;
}
.app-store-badge {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
}
.app-store-badge img {
  width: auto;
  height: 52px;
  display: block;
}
.app-store-coming-soon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 20px;
  background: rgba(243,235,220,.68);
  color: var(--muted);
  font-weight: 900;
  cursor: default;
  user-select: none;
}
.snowy-button {
  position: absolute;
  z-index: 2;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 10px 16px rgba(31,41,51,.14));
}
.snowy-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 1;
  transition: opacity .5s ease, transform .22s ease;
}
.snowy-image.is-fading { opacity: 0; }
.snowy-button.is-petting .snowy-image { transform: scale(1.02); }
.snowy-hint {
  position: absolute;
  bottom: calc(100% + var(--snowy-message-y, 0px));
  left: calc(50% + var(--snowy-message-x, 0px));
  z-index: 3;
  display: block;
  width: clamp(140px, 105%, 190px);
  color: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .08em;
  text-align: center;
  text-transform: lowercase;
  white-space: normal;
  pointer-events: none;
  opacity: .82;
  transform: translateX(-50%);
  transition: opacity .35s ease;
}
.snowy-hint.is-hidden { opacity: 0; }
.directory-footer { margin-top: 34px; }
@media (max-width: 760px) {
  .directory-nav { display: none; }
  .app-card-grid { grid-template-columns: 1fr; gap: 24px; }
  .app-card-logo-wrap { height: 250px; padding: 20px; }
  .app-card-logo-wrap img { max-height: 210px; }
  .app-card-actions {
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
  }
  .app-store-badge img { height: 50px; }
  .app-store-coming-soon { align-self: flex-start; }
  .snowy-hint {
    top: calc(100% + var(--snowy-message-y, 0px));
    right: calc(0px - var(--snowy-message-x, 0px));
    bottom: auto;
    left: auto;
    width: clamp(110px, 115%, 140px);
    color: var(--dark-text);
    font-size: 11px;
    text-align: center;
    transform: none;
  }
}