.hero-art { aspect-ratio: 3 / 2; border-radius: 28px; background: var(--hp-cyan); overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; }
      .hero-art .shot { width: 100%; height: 100%; object-fit: cover; display: block; }
      .mech { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
      .play { background: #fff; border-radius: 20px; box-shadow: var(--shadow-card); overflow: hidden; padding: 0 0 24px; display: flex; flex-direction: column; }
      .play .pthumb { aspect-ratio: 4/3; overflow: hidden; }
      .play .pthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .play .plab { font-size: var(--fs-micro); letter-spacing: 1.2px; text-transform: uppercase; color: var(--hp-muted); font-weight: 700; margin: 20px 24px 0; }
      .play h3 { margin: 6px 24px 0; font-size: 20px; font-weight: 600; color: var(--hp-ink); }
      .play p { margin: 8px 24px 0; font-size: 14px; line-height: 21px; color: var(--hp-body); }
      .mech .m { background: #fff; border-radius: 18px; box-shadow: var(--shadow-card); padding: 22px; display: flex; align-items: flex-start; gap: 18px; }
      .mech .m > div { flex: 1; min-width: 0; }
      .mech .ic { width: 88px; height: 88px; object-fit: contain; display: block; flex-shrink: 0; }
      .mech h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--hp-ink); }
      .mech p { margin: 0 0 8px; font-size: 13px; line-height: 19px; color: var(--hp-body); }
      .mech .ct { font-size: var(--fs-micro); letter-spacing: .04em; text-transform: uppercase; color: var(--hp-muted); font-weight: 700; }
      @media (max-width:900px){ .mech { grid-template-columns: 1fr 1fr; } }
      @media (max-width:600px){ .mech { grid-template-columns: 1fr; } }
      .gcard.lock { display: block; }