/* Home Pro card: scoped styling; inherit the existing grid and 3:2 footprint. */
.mode.pro-premium {
  --accent: #edc979;
  border-color: #d8b46b;
  background: #052a23;
  box-shadow: inset 0 0 0 1px #ffe8a921, 0 5px 19px #0004;
}
.mode.pro-premium .pro-art {
  background:
    radial-gradient(ellipse at 50% 30%, #aa864c35, transparent 58%),
    repeating-linear-gradient(125deg, #d8b76d03 0 1px, transparent 1px 7px),
    linear-gradient(135deg, #103a2f, #031c18 72%);
}
.mode.pro-premium .pro-art::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #eac77d30;
  border-radius: 10px;
  pointer-events: none;
}
/* Approved salon banner crown only: source crop (120,112), 228 × 120.
   Excludes the baked banner title and the lower shield's baked subtitle. */
.pro-card-crown {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 70%;
  max-width: 228px;
  aspect-ratio: 228 / 120;
  transform: translateX(-50%);
  background: url('../assets/pro/approved-salon-v51.png') no-repeat;
  background-size: 695.61404% auto;
  background-position: 8.83652% 12.84404%;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 52%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 52%, transparent 75%);
}
.pro-card-label {
  position: absolute;
  top: 12px;
  right: 14px;
  color: #f1d79d;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.mode.pro-premium .mode-copy {
  background: linear-gradient(transparent, #031c18d9 38%, #031b18f5);
}
.mode.pro-premium h3 { color: #ffe3a6; }
.mode.pro-premium p { color: #d9e7df; }
.mode.pro-premium .arrow {
  color: #ffe3a6;
  border-color: #e9c47999;
  background: #d8b46b16;
}
.mode.pro-premium::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, #ffe5a600 43%, #ffe5a622 50%, #ffe5a600 57%, transparent 64%);
  transform: translateX(-110%);
  animation: home-pro-glint 12s ease-in-out 3s infinite;
}
@keyframes home-pro-glint {
  0%, 76% { transform: translateX(-110%); opacity: 0; }
  80% { opacity: 1; }
  94%, 100% { transform: translateX(110%); opacity: 0; }
}
@media (hover: hover) {
  .mode.pro-premium:hover {
    border-color: #ffe0a0;
    box-shadow: inset 0 0 0 1px #ffe8a935, 0 7px 25px #d6aa5429;
  }
}
.mode.pro-premium:focus-visible {
  outline-color: #ffe3a6;
  box-shadow: 0 0 0 2px #062a22, 0 0 22px #d6aa5433;
}
@media (prefers-reduced-motion: reduce) {
  .mode.pro-premium::after { animation: none; opacity: 0; }
}