/* hubApps page · product family showcase.
   Replaces the monogram cards with the products' own marks and colours on a glass surface.
   Each card carries its tints as --gm-c1..3 (the same variables the header menu uses), so the
   mark, the glow and the list markers all come from the product. */
.product-catalog.hubapps-family {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.3vw, 22px);
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 var(--gutter, 5vw) clamp(90px, 9vw, 150px);
}

.hubapps-family .catalog-card {
  --tint: var(--gm-c1, #9aa1ad);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 2vw, 34px);
  overflow: hidden;
  border: 1px solid #ffffff14;
  border-radius: 30px;
  background:
    linear-gradient(180deg, #ffffff0d 0%, #ffffff05 38%, #ffffff02 100%),
    #0b0c0f;
  box-shadow: inset 0 1px 0 #ffffff14, 0 30px 60px -40px #000;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), border-color .35s ease, box-shadow .45s ease;
}
/* The product's light, low in the corner at rest, rising on hover. */
.hubapps-family .catalog-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40% -30% auto auto;
  width: 120%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 34%, transparent), transparent 72%);
  opacity: .42;
  transform: translate3d(0, 0, 0) scale(.9);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
/* A hairline of the product colour along the top edge. */
.hubapps-family .catalog-card::after {
  content: "";
  position: absolute;
  inset: 0 12% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tint) 80%, #fff 0%), transparent);
  opacity: .55;
  pointer-events: none;
}

.hubapps-family .catalog-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: clamp(24px, 2.2vw, 34px); }
.hubapps-family .catalog-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid color-mix(in srgb, var(--tint) 30%, #ffffff1f);
  border-radius: 20px;
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--tint) 26%, transparent), transparent 70%),
    #ffffff08;
  box-shadow: inset 0 1px 0 #ffffff1c, 0 12px 30px -18px color-mix(in srgb, var(--tint) 70%, transparent);
  color: var(--tint);
  font-size: 0;
}
.hubapps-family .catalog-mark svg { display: block; width: 34px; height: 34px; overflow: visible; }
/* Multi-colour marks take their second and third tints at rest, as the menu does on hover. */
.hubapps-family .catalog-mark .hub-apps__sh-bar:nth-of-type(2),
.hubapps-family .catalog-mark .hub-apps__ch:nth-of-type(2) { fill: var(--gm-c2, var(--gm-c1)); }
.hubapps-family .catalog-mark .hub-apps__sh-bar:nth-of-type(3),
.hubapps-family .catalog-mark .hub-apps__bubble { fill: var(--gm-c3, var(--gm-c1)); }
.hubapps-family .catalog-index { color: #7f8591; font: 400 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; font-variant-numeric: tabular-nums; }

.hubapps-family .catalog-card > .page-kicker {
  margin: 0 0 14px;
  color: #f0efeb;
  font: 500 16px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -.01em;
  text-transform: none;
}
.hubapps-family .catalog-card h2 {
  margin: 0 0 16px;
  color: #f4f2ee;
  font: 300 clamp(26px, 2.05vw, 36px)/1.08 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hubapps-family .catalog-card > p:not(.page-kicker) { margin: 0 0 26px; color: #a4a9b3; font-size: 15px; line-height: 1.6; text-wrap: pretty; }

.hubapps-family .catalog-card ul { display: grid; gap: 11px; margin: 0 0 30px; padding: 20px 0 0; border-top: 1px solid #ffffff12; list-style: none; }
.hubapps-family .catalog-card li { display: grid; grid-template-columns: 7px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 0; border: 0; color: #d5d7dc; font-size: 14px; line-height: 1.45; }
.hubapps-family .catalog-card li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 12px color-mix(in srgb, var(--tint) 70%, transparent); transform: translateY(-1px); }

.hubapps-family .catalog-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-top: auto; }
.hubapps-family .catalog-actions .text-link { min-height: 40px; gap: 10px; border-bottom: 0; font-size: 14px; }
.hubapps-family .catalog-actions .catalog-preview {
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--tint) 45%, #ffffff26);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tint) 12%, #ffffff05);
  transition: background .3s ease, border-color .3s ease;
}
.hubapps-family .catalog-actions .catalog-preview svg { width: 16px; height: 16px; }
.hubapps-family .catalog-actions .catalog-site { color: #b9bdc6; }
.hubapps-family .catalog-actions .catalog-site svg { width: 15px; height: 15px; }
.hubapps-family .catalog-actions a:focus-visible { outline: 2px solid var(--tint); outline-offset: 4px; border-radius: 999px; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hubapps-family .catalog-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--tint) 32%, #ffffff1f); box-shadow: inset 0 1px 0 #ffffff1f, 0 40px 80px -46px color-mix(in srgb, var(--tint) 55%, #000); }
  .hubapps-family .catalog-card:hover::before { opacity: .9; transform: scale(1.08); }
  .hubapps-family .catalog-actions .catalog-preview:hover { background: color-mix(in srgb, var(--tint) 24%, #ffffff08); border-color: var(--tint); }
}

@media (max-width: 1280px) {
  .product-catalog.hubapps-family { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .product-catalog.hubapps-family {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 12px;
    padding-inline: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
  }
  .product-catalog.hubapps-family::-webkit-scrollbar { display: none; }
  .hubapps-family .catalog-card { scroll-snap-align: start; border-radius: 26px; }
  .hubapps-family .catalog-mark { width: 56px; height: 56px; border-radius: 18px; }
  .hubapps-family .catalog-mark svg { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hubapps-family .catalog-card, .hubapps-family .catalog-card::before { transition: none; }
}