.pc-grid, .pc-grid * { margin: 0; padding: 0; box-sizing: border-box; }

.pc-grid {
  --pc-ink: #f2efea;
  --pc-dim: #b9b4ac;
  --pc-dim-2: #7d7871;
  --pc-accent: #cfa886;
  
  --pc-live: #8fd493;
  --pc-live-ring: rgba(111,191,115,.34);
  --pc-card-bg: #16161b;
  --pc-line: rgba(242,239,234,.10);
  --pc-r: 14px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 12px;
  color: var(--pc-ink);
}

.pc-card { position: relative; aspect-ratio: 4/5; border-radius: var(--pc-r); overflow: hidden; background: var(--pc-card-bg); cursor: pointer; border: 1px solid var(--pc-line); transition: transform .3s, border-color .3s; }
.pc-card:hover { transform: translateY(-3px); border-color: rgba(207,168,134,.36); }
.pc-card video, .pc-card img.pc-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc-card video { opacity: 0; transition: opacity .5s; }
.pc-card video.on { opacity: 1; }
.pc-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,14,.55) 0%, transparent 30%, rgba(11,11,14,.35) 58%, rgba(11,11,14,.93) 100%); }
.pc-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px 15px; }
.pc-name { font-size: 18px; font-weight: 500; line-height: 1.2; }
.pc-tag { color: var(--pc-dim); font-size: 12.5px; line-height: 1.42; margin-top: 6px; min-height: 2.8em; }
.pc-proof { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(242,239,234,.13); font-size: 11.5px; color: var(--pc-accent); letter-spacing: .01em; }


.pc-grid {
  --pc-hover-benefit: none;  
  --pc-hover-lift: 0px;      
}
.pc-body { transition: transform .34s cubic-bezier(.4,0,.2,1); }


.pc-card:hover .pc-body { transform: translateY(var(--pc-hover-lift, -12px)); }

.pc-grow { display: var(--pc-hover-benefit, grid); grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.4,0,.2,1); }
.pc-card:hover .pc-grow { grid-template-rows: 1fr; }
.pc-benefit {
  overflow: hidden; opacity: 0; transition: opacity .26s .06s;
  font-size: 14px; line-height: 1.5; color: var(--pc-ink); text-wrap: balance;
}
.pc-card:hover .pc-benefit { opacity: 1; }
.pc-benefit::before { content: ""; display: block; height: 13px; }

.pc-shade, .pc-name, .pc-badge { transition: background .3s, color .3s, border-color .3s; }
.pc-card:hover .pc-shade {
  background: linear-gradient(180deg, rgba(11,11,14,.72) 0%, rgba(11,11,14,.62) 34%, rgba(11,11,14,.95) 100%);
}

.pc-card:hover .pc-name { color: var(--pc-accent); }
.pc-card:hover .pc-badge.live,
.pc-card:hover .pc-badge.learn { background: rgba(207,168,134,.18); color: var(--pc-accent); border-color: rgba(207,168,134,.4); }


@media (hover: none) { .pc-benefit { display: none; } }

.pc-badge, .pc-state { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; backdrop-filter: blur(8px); }
.pc-badge { position: absolute; top: 10px; left: 10px; }
.pc-badge.live { background: rgba(111,191,115,.16); color: var(--pc-live); border: 1px solid rgba(111,191,115,.3); }
.pc-badge.learn { background: rgba(207,168,134,.16); color: var(--pc-accent); border: 1px solid rgba(207,168,134,.32); }
.pc-badge.uni { background: rgba(207,168,134,.9); color: #17120c; border: 1px solid var(--pc-accent); }

.pc-card.is-universal { border-color: rgba(207,168,134,.42); }
.pc-card.is-universal:hover { border-color: var(--pc-accent); }


.pc-state { position: absolute; top: 10px; right: 10px; z-index: 2; }
.pc-state.active { background: rgba(143,212,147,.92); color: #12240f; border: 1px solid var(--pc-live); }
.pc-state.lock { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; background: rgba(11,11,14,.6); color: var(--pc-ink); border: 1px solid var(--pc-line); }
.pc-state.lock svg { width: 12px; height: 12px; }


.pc-card.is-active { border-color: var(--pc-live); box-shadow: 0 0 0 2px var(--pc-live-ring); }
.pc-card.is-active:hover { border-color: var(--pc-live); box-shadow: 0 0 0 2px rgba(111,191,115,.55), 0 10px 30px rgba(111,191,115,.2); }

.pc-card.is-active:hover .pc-badge.live { background: rgba(111,191,115,.2); color: var(--pc-live); border-color: rgba(111,191,115,.42); }


.pc-veil {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 12px;
  padding: 26px; background: rgba(11,11,14,.95); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .32s; pointer-events: none; z-index: 3;
}

.pc-body { transition: opacity .3s; }
.pc-card.is-learn:hover .pc-body { opacity: 0; }
.pc-card.is-learn:hover .pc-veil,
.pc-card.is-learn:focus-visible .pc-veil { opacity: 1; }
.pc-veil .lv-ico { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--pc-accent); border-top-color: transparent; animation: pc-spin 2.4s linear infinite; }
@keyframes pc-spin { to { transform: rotate(360deg) } }
.pc-veil b { font-family: var(--pc-font-head, inherit); font-size: 17px; font-weight: 400; color: var(--pc-accent); }
.pc-veil p { font-size: 13px; line-height: 1.5; color: var(--pc-dim); }
.pc-veil .lv-benefit { color: var(--pc-ink); }
.pc-veil .lv-base { font-size: 11.5px; color: var(--pc-dim-2); border-top: 1px solid var(--pc-line); padding-top: 11px; margin-top: 2px; }

@media (hover: none) { .pc-veil { display: none; } }


@media (max-width: 1180px) {
  .pc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .pc-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .pc-tag { display: none; }
  .pc-name { font-size: 15px; }
  
  .pc-state { top: 34px; right: auto; left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-card video { display: none; }
  .pc-veil .lv-ico { animation: none; }
}