/* Kronos detail pass: mascot details, larger product marks, cleaner FAQ and glass CTA. */

/* The gift mascot rule must not turn the third step number back into normal flow. */
.kx-steps .kx-step:last-child > .kx-n {
  position: absolute !important;
  z-index: 2 !important;
  top: 20px;
  right: 22px;
  line-height: 1;
  pointer-events: none;
}
.kx-steps .kx-step:last-child::after { width: 120px; height: 184px; right: -2px; }
.kx-feats .kx-feat:last-child { min-height: 158px; padding-right: 90px; }
.kx-feats .kx-feat:last-child::after { width: 104px; height: 108px; right: -5px; bottom: -5px; }

/* Make service marks feel like a considered logo system, not tiny toolbar glyphs. */
#main-nav-links .kx-mi .pl-i:first-child,
#kx-strip .kx-mi .pl-i:first-child { width: 21px !important; height: 21px !important; stroke-width: 1.9; }
#main-nav-links .kx-mi, #kx-strip .kx-mi { gap: 8px; }
.kx-t .kx-tl2 {
  width: 66px; height: 66px; margin-bottom: 8px; border-radius: 20px;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.12), rgba(255,255,255,.025) 65%), #050505;
  border-color: rgba(255,255,255,.17);
  box-shadow: 0 12px 28px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.1);
}
.kx-t .kx-tl2 img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.kx-t .kx-tl2 svg { width: 46px !important; height: 46px !important; overflow: visible; stroke-width: 1.8; }
.kx-t::before { width: 150px; height: 130px; left: auto; right: -36px; top: -28px; filter: blur(32px) saturate(1.35); opacity: .28; }
.kx-t:hover:not(:disabled)::before { opacity: .52; }

/* Real product logos from the catalogue become soft artwork behind the crisp mark. */
#pl-grid { gap: 14px; }
#pl-grid .pl-card {
  isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  min-height: 208px; padding: 16px 16px 14px !important; gap: 0;
  border-radius: 22px !important; border-color: #292929 !important;
  background: #090909 !important;
  transition: transform .24s cubic-bezier(.22,1,.36,1), border-color .24s, box-shadow .24s;
}
#pl-grid .pl-card::before,
#pl-grid .pl-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
#pl-grid .pl-card::before {
  z-index: 0;
  background-image: var(--pl-card-image);
  background-position: 84% 18%; background-size: 78% auto; background-repeat: no-repeat;
  opacity: .36; filter: blur(14px) saturate(1.18);
  transform: scale(1.13);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.7) 48%, transparent 94%);
  transition: opacity .25s, transform .35s;
}
#pl-grid .pl-card::after {
  z-index: 0;
  background: linear-gradient(180deg, rgba(4,4,4,.08) 0%, rgba(7,7,7,.54) 42%, #090909 78%);
}
#pl-grid .pl-card > * { position: relative; z-index: 1; }
#pl-grid .pl-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.5) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.42) !important;
}
#pl-grid .pl-card:hover::before { opacity: .42; transform: scale(1.2); }
#pl-grid .pl-card .pl-lg {
  width: 80px; height: 80px; margin: 0 0 auto;
  border-radius: 22px; object-fit: contain; padding: 7px;
  background: rgba(5,5,5,.66) !important; border: 1px solid rgba(255,255,255,.17);
  box-shadow: 0 10px 28px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .2s;
}
#pl-grid .pl-card:hover .pl-lg { transform: translateY(-2px) scale(1.045); border-color: rgba(255,255,255,.32); }
#pl-grid .pl-card .pl-lg.pl-art { color: #f5f5f5; font-size: 23px; }
#pl-grid .pl-card .pl-nm {
  width: 100%; min-height: 38px !important; margin-top: 13px;
  padding: 0 !important; font: 700 14px/1.28 Inter,system-ui,sans-serif !important;
  text-align: left; letter-spacing: -.015em;
}
#pl-grid .pl-card .pl-tp {
  padding: 0 !important; margin-top: 5px; font: 600 10px/1.3 Inter,system-ui,sans-serif !important;
  letter-spacing: .09em; text-align: left; color: #969696 !important;
}
#pl-grid .pl-card.pl-preorder {
  position: relative; border-color: rgba(222,205,166,.64) !important;
  background: radial-gradient(140% 90% at 100% 0%,rgba(191,157,97,.2),transparent 62%),#0b0b0b !important;
  box-shadow: inset 0 0 0 1px rgba(222,205,166,.12),0 0 30px rgba(191,157,97,.09) !important;
}
#pl-grid .pl-card.pl-preorder::after { background: linear-gradient(180deg,rgba(9,8,6,.02),rgba(9,8,6,.2) 45%,#090807 88%); }
#pl-grid .pl-preorder-tag {
  position: absolute !important; z-index: 2 !important; top: 15px; right: 14px;
  padding: 6px 8px; border: 1px solid rgba(238,222,187,.42); border-radius: 999px;
  background: linear-gradient(135deg,#e2d4b3,#9d8960); color: #17140f;
  font: 800 8px/1 Inter,system-ui,sans-serif; letter-spacing: .12em;
  box-shadow: 0 3px 18px rgba(191,157,97,.18);
}
#pl-grid .pl-card.pl-preorder .pl-nm { color: #f5e9ce !important; }

/* Payment strip: clear method labels plus the existing Kronos mascot. */
.kx-paystrip {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 178px; margin: 0 0 24px; padding: 28px 194px 28px 30px;
  border: 1px solid #303030; border-radius: 26px;
  background: radial-gradient(520px 260px at 85% 50%, rgba(255,255,255,.075), transparent 70%), linear-gradient(145deg,#101010,#060606 68%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.kx-paycopy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.kx-paycopy > span { color: #a3a3a3; font: 700 10px/1 Inter,system-ui,sans-serif; letter-spacing: .16em; }
.kx-paycopy > b { color: #fff; font: 750 clamp(18px,2vw,23px)/1.2 Inter,system-ui,sans-serif; letter-spacing: -.025em; }
.kx-payoptions { display: flex; flex-wrap: wrap; gap: 9px; }
.kx-payoptions i {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 15px;
  border: 1px solid #343434; border-radius: 14px;
  background: linear-gradient(140deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  color: #f2f2f2; font: 650 13px/1 Inter,system-ui,sans-serif; font-style: normal;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .2s,border-color .2s,background .2s;
}
.kx-payoptions i:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.48); background: rgba(255,255,255,.09); }
.kx-payoptions .pl-i { width: 21px; height: 21px; color: #fff; stroke-width: 1.8; }
.kx-pay-bear {
  position: absolute; z-index: 0; right: 12px; bottom: -17px;
  width: 178px; height: 178px; object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.56));
  animation: kdp-bear-bob 7s ease-in-out infinite;
}
@keyframes kdp-bear-bob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-1deg); } }

/* FAQ becomes a deliberate support panel with accessible, spacious accordion rows. */
#faq-section.ks-faq { width: min(920px,calc(100% - 40px)); max-width: none !important; margin: 86px auto 100px !important; text-align: left !important; }
.ks-faq-toggle {
  width: 100%; min-height: 98px; display: flex; align-items: center; gap: 17px;
  padding: 19px 23px; text-align: left; cursor: pointer; color: #fff;
  border: 1px solid #303030; border-radius: 22px;
  background: radial-gradient(460px 180px at 10% 0%,rgba(255,255,255,.075),transparent 72%), linear-gradient(145deg,#101010,#070707);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  transition: border-color .22s,transform .22s,background .22s;
}
.ks-faq-toggle:hover { transform: translateY(-2px); border-color: #555; }
.ks-faq-mark { width: 50px; height: 50px; flex: 0 0 50px; display: grid; place-items: center; border-radius: 16px; border: 1px solid #393939; background: #111; color: #fff; }
.ks-faq-copy { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.ks-faq-copy b { font: 750 22px/1.15 Inter,system-ui,sans-serif; letter-spacing: -.03em; }
.ks-faq-copy small { color: #999; font: 450 13px/1.4 Inter,system-ui,sans-serif; }
.ks-faq-open { display: inline-flex; align-items: center; gap: 10px; color: #bbb; font: 600 12px/1 Inter,system-ui,sans-serif; }
#faq-section-arrow { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
#faq-section-body { margin-top: 14px; }
.ks-faq-list { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.ks-faq-item { overflow: hidden; border: 1px solid #282828; border-radius: 16px; background: #080808; transition: border-color .22s,background .22s; }
.ks-faq-item:hover { border-color: #454545; }
.ks-faq-item.open { border-color: #555; background: #0b0b0b; }
.ks-faq-q {
  width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 15px 19px; border: 0; background: transparent; color: #f5f5f5; cursor: pointer; text-align: left;
  font: 650 14px/1.4 Inter,system-ui,sans-serif;
}
.ks-faq-q > span:first-child { flex: 1; }
.ks-faq-plus { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border: 1px solid #333; border-radius: 11px; color: #c5c5c5; transition: transform .25s,border-color .2s,color .2s; }
.ks-faq-plus svg { transition: transform .25s; }
.ks-faq-item.open .ks-faq-plus { color: #fff; border-color: #5c5c5c; }
.ks-faq-item.open .ks-faq-plus svg { transform: rotate(45deg); }
.ks-faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.2,.8,.2,1); }
.ks-faq-answer > div { padding: 0 68px 19px 19px; color: #a4a4a4; font: 450 13px/1.7 Inter,system-ui,sans-serif; }

/* Steam continuation: black smoked glass, animated silver rim and a clearer wallet glyph. */
@property --kdp-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes kdp-rim { to { --kdp-angle: 360deg; } }
html body #steam-block .ks-sd-cta {
  height: 68px !important; overflow: hidden;
  border: 1px solid transparent !important; border-radius: 20px !important;
  background: linear-gradient(145deg,rgba(25,25,25,.98),rgba(8,8,8,.98)) padding-box,
    conic-gradient(from var(--kdp-angle),#292929 0%,#777 14%,#f2f2f2 22%,#373737 34%,#171717 58%,#8e8e8e 76%,#242424 90%,#292929 100%) border-box !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13),0 12px 30px rgba(0,0,0,.38),0 0 24px rgba(255,255,255,.045) !important;
  animation: kdp-rim 8s linear infinite !important;
  transition: transform .25s,box-shadow .25s !important;
}
html body #steam-block .ks-sd-cta::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(115deg,transparent 25%,rgba(255,255,255,.09) 50%,transparent 68%); transform: translateX(-120%); animation: kdp-sweep 5s ease-in-out infinite; pointer-events: none; }
@keyframes kdp-sweep { 0%,65% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
html body #steam-block .ks-sd-cta > * { position: relative; z-index: 1; }
html body #steam-block .ks-sd-cta .ico { width: 50px; height: 50px; background: linear-gradient(145deg,#202020,#0c0c0c) !important; border: 1px solid #464646 !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
html body #steam-block .ks-sd-cta .ico svg { width: 27px; height: 27px; }
html body #steam-block .ks-sd-cta .tx { color: #fff !important; }
html body #steam-block .ks-sd-cta .tx b { color: #fff !important; font-size: 16px; }
html body #steam-block .ks-sd-cta .tx small { color: #a7a7a7 !important; }
html body #steam-block .ks-sd-cta .go { width: 48px; height: 48px; background: #f3f3f3 !important; color: #090909 !important; animation: none; }
html body #steam-block .ks-sd-cta .go svg { width: 21px; height: 21px; }
html body #steam-block .ks-sd-cta:hover { transform: translateY(-2px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16),0 16px 36px rgba(0,0,0,.52),0 0 28px rgba(255,255,255,.09) !important; }
html body #steam-block .ks-sd-cta:hover .go { background: #fff !important; color: #000 !important; }
html body #steam-block .ks-sd-cta.off,
html body #steam-block .ks-sd-cta[disabled] { background: linear-gradient(145deg,#141414,#080808) padding-box,conic-gradient(from var(--kdp-angle),#272727,#424242,#252525,#272727) border-box !important; }

/* Keep both idle and hover CTA states dark; legacy skin hover rules used a white fill. */
html body #steam-block .ks-sd-cta,
html body #steam-block .ks-sd-cta:hover,
html body #steam-block .ks-sd-cta:focus-visible {
  background: linear-gradient(145deg,rgba(28,28,28,.99),rgba(8,8,8,.99)) padding-box,
    conic-gradient(from var(--kdp-angle),#383838 0%,#9a9a9a 15%,#f2f2f2 23%,#414141 38%,#202020 59%,#a7a7a7 78%,#303030 92%,#383838 100%) border-box !important;
  color: #fff !important;
}
html body #steam-block .ks-sd-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.19),0 17px 40px rgba(0,0,0,.58),0 0 32px rgba(255,255,255,.1) !important;
}
html body #steam-block .ks-sd-cta:active { transform: translateY(0) scale(.995) !important; }
html body #steam-block .ks-sd-cta .ico,
html body #steam-block .ks-sd-cta:hover .ico {
  background: linear-gradient(145deg,#202020,#0c0c0c) !important;
  border: 1px solid #505050 !important; color: #fff !important; transform: none !important;
}
html body #steam-block .ks-sd-cta .tx,
html body #steam-block .ks-sd-cta .tx b,
html body #steam-block .ks-sd-cta:hover .tx,
html body #steam-block .ks-sd-cta:hover .tx b { color: #fff !important; }
html body #steam-block .ks-sd-cta .tx small,
html body #steam-block .ks-sd-cta:hover .tx small { color: #aaa !important; }
html body #steam-block .ks-sd-cta .go,
html body #steam-block .ks-sd-cta:hover .go {
  background: #f3f3f3 !important; color: #090909 !important; transform: none !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18),0 4px 14px rgba(0,0,0,.4) !important;
  animation: none !important;
}
html body #steam-block .ks-sd-cta .go svg,
html body #steam-block .ks-sd-cta .go svg * { color: #090909 !important; stroke: #090909 !important; }
html body #steam-block .ks-sd-cta:focus-visible { outline: 2px solid #fff !important; outline-offset: 4px; }

/* Product marks in the top navigation: use the catalogue's real brand artwork. */
#main-nav-links .kx-mi .kx-brand-mi,
#kx-strip .kx-mi .kx-brand-mi {
  width: 25px; height: 25px; flex: 0 0 25px; display: block; object-fit: contain;
  padding: 2px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px; background: linear-gradient(145deg,#191919,#080808);
  filter: drop-shadow(0 2px 7px rgba(0,0,0,.42));
}
#main-nav-links .kx-mi[data-k="steam"] .kx-brand-mi,
#kx-strip .kx-mi[data-k="steam"] .kx-brand-mi { border-radius: 50%; padding: 1px; }
#main-nav-links .kx-mi[data-k="vpn"] span { font-size: 12px; letter-spacing: -.025em; }

/* Branded catalogue tiles get a restrained colour field and larger, clearer marks. */
#pl-grid .pl-brand-steam { --pl-brand-rgb: 177,184,194; }
#pl-grid .pl-brand-playstation { --pl-brand-rgb: 0,112,209; }
#pl-grid .pl-brand-xbox { --pl-brand-rgb: 16,124,16; }
#pl-grid .pl-brand-steam::before,
#pl-grid .pl-brand-playstation::before,
#pl-grid .pl-brand-xbox::before {
  background-image: radial-gradient(ellipse at 78% 14%,rgba(var(--pl-brand-rgb),.3),transparent 58%),var(--pl-card-image,none);
  background-position: center,84% 18%; background-size: 100% 100%,78% auto;
  background-repeat: no-repeat; opacity: .48; filter: blur(9px) saturate(1.15);
}
#pl-grid .pl-brand-steam .pl-lg,
#pl-grid .pl-brand-playstation .pl-lg,
#pl-grid .pl-brand-xbox .pl-lg {
  width: 88px; height: 88px; padding: 4px; border-radius: 24px;
  background: radial-gradient(circle at 36% 26%,rgba(var(--pl-brand-rgb),.22),rgba(8,8,8,.82) 72%) !important;
  border-color: rgba(var(--pl-brand-rgb),.34); box-shadow: 0 12px 32px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.12);
}
#pl-grid .pl-brand-steam .pl-lg.pl-svgtile { display: grid; place-items: center; }
#pl-grid .pl-brand-steam .pl-lg.pl-svgtile svg { width: 61px !important; height: 61px !important; }
#pl-grid .pl-brand-playstation .pl-lg { padding: 3px; }
#pl-grid .pl-brand-xbox .pl-lg { padding: 6px; border-radius: 21px; }
#pl-grid .pl-brand-steam:hover,
#pl-grid .pl-brand-playstation:hover,
#pl-grid .pl-brand-xbox:hover { border-color: rgba(var(--pl-brand-rgb),.62) !important; }
@media (max-width: 560px) {
  #pl-grid .pl-brand-steam .pl-lg,
  #pl-grid .pl-brand-playstation .pl-lg,
  #pl-grid .pl-brand-xbox .pl-lg { width: 72px; height: 72px; border-radius: 20px; }
  #pl-grid .pl-brand-steam .pl-lg.pl-svgtile svg { width: 52px !important; height: 52px !important; }
}

@media (max-width: 760px) {
  .kx-steps .kx-step:last-child { padding-right: 116px; }
  .kx-steps .kx-step:last-child::after { width: 108px; height: 166px; }
  .kx-paystrip { min-height: 0; padding: 24px 124px 24px 20px; border-radius: 22px; }
  .kx-paycopy { gap: 10px; }
  .kx-payoptions { gap: 7px; }
  .kx-payoptions i { min-height: 40px; padding: 0 11px; font-size: 12px; }
  .kx-pay-bear { width: 132px; height: 142px; right: 0; bottom: -12px; }
}
@media (max-width: 560px) {
  #pl-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  #pl-grid .pl-card { min-height: 190px; padding: 13px 12px 12px !important; border-radius: 18px !important; }
  #pl-grid .pl-card .pl-lg { width: 66px; height: 66px; border-radius: 19px; }
  #pl-grid .pl-card .pl-nm { margin-top: 11px; font-size: 13px !important; min-height: 34px !important; }
  #pl-grid .pl-card .pl-tp { font-size: 9px !important; }
  .kx-t .kx-tl2 { width: 54px; height: 54px; border-radius: 16px; }
  .kx-t .kx-tl2 svg { width: 39px !important; height: 39px !important; }
  .kx-t small { max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; font-size: 9px !important; line-height: 1.25; padding: 2px 5px; border-radius: 8px; background: rgba(255,255,255,.07); }
  .kx-feats .kx-feat:last-child { padding-right: 90px; min-height: 148px; }
  .kx-feats .kx-feat:last-child::after { width: 96px; height: 98px; right: -7px; }
  .kx-paystrip { padding: 20px 92px 20px 15px; border-radius: 19px; }
  .kx-paycopy > b { max-width: 220px; font-size: 17px; }
  .kx-payoptions { max-width: 270px; }
  .kx-payoptions i { gap: 7px; min-height: 38px; padding: 0 9px; font-size: 11px; }
  .kx-payoptions .pl-i { width: 18px; height: 18px; }
  .kx-pay-bear { width: 112px; height: 122px; right: -7px; bottom: -10px; }
  #faq-section.ks-faq { width: calc(100% - 28px); margin: 60px auto 64px !important; }
  .ks-faq-toggle { min-height: 82px; gap: 12px; padding: 14px; border-radius: 18px; }
  .ks-faq-mark { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; }
  .ks-faq-copy b { font-size: 17px; }
  .ks-faq-copy small { font-size: 11px; }
  .ks-faq-open { gap: 4px; font-size: 0; }
  .ks-faq-q { min-height: 60px; padding: 13px 13px; font-size: 13px; }
  .ks-faq-answer > div { padding: 0 48px 16px 13px; font-size: 12px; }
  html body #steam-block .ks-sd-cta { height: 62px !important; border-radius: 17px !important; }
  html body #steam-block .ks-sd-cta .ico,
  html body #steam-block .ks-sd-cta .go { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .kx-pay-bear, html body #steam-block .ks-sd-cta,
  html body #steam-block .ks-sd-cta::before { animation: none !important; }
}

/* Kronos mascot artwork inside gaming brand cards */
#pl-grid .pl-card[data-a="vpn"] { --pl-brand-rgb:27,194,113; }
#pl-grid .pl-card[style*="--pl-brand-rgb"]::before {
  background-image:
    radial-gradient(ellipse at 82% 4%,rgba(var(--pl-brand-rgb),.5),transparent 54%),
    linear-gradient(145deg,transparent 47%,rgba(var(--pl-brand-rgb),.16) 49%,rgba(var(--pl-brand-rgb),.045) 55%,transparent 64%),
    var(--pl-card-image,none);
  background-position:center,center,88% 8%;
  background-size:100% 100%,100% 100%,82% auto;
  background-repeat:no-repeat;
  background-blend-mode:normal,normal,screen;
  opacity:.66; filter:blur(2px) saturate(1.3);
  mask-image:linear-gradient(180deg,#000 0%,#000 54%,rgba(0,0,0,.56) 82%,transparent 100%);
}
#pl-grid .pl-card[style*="--pl-brand-rgb"]::after {
  background:
    linear-gradient(145deg,transparent 48%,rgba(var(--pl-brand-rgb),.035) 54%,transparent 66%),
    linear-gradient(180deg,rgba(4,4,4,.05) 0%,rgba(7,7,7,.38) 48%,#090909 86%);
}
#pl-grid .pl-card[style*="--pl-brand-rgb"]:hover::before { opacity:.84; }
#pl-grid .pl-card[style*="--pl-brand-rgb"] .pl-lg {
  border-color:rgba(var(--pl-brand-rgb),.28);
  box-shadow:0 10px 28px rgba(0,0,0,.38),0 0 24px rgba(var(--pl-brand-rgb),.12),inset 0 1px 0 rgba(255,255,255,.08);
}
#pl-grid .pl-card[style*="--pl-brand-rgb"]:hover { border-color:rgba(var(--pl-brand-rgb),.62)!important; }
#pl-grid .pl-card[data-a="vpn"]::before {
  background-image:radial-gradient(ellipse at 82% 4%,rgba(27,194,113,.48),transparent 54%),linear-gradient(145deg,transparent 47%,rgba(27,194,113,.16) 49%,rgba(27,194,113,.045) 55%,transparent 64%);
}
#pl-grid .pl-card[data-a="vpn"]::after { background:linear-gradient(180deg,rgba(4,4,4,.02),rgba(7,7,7,.36) 48%,#090909 86%); }
#pl-grid .pl-card[style*="--pl-brand-rgb"] { background:radial-gradient(ellipse at 88% 2%,rgba(var(--pl-brand-rgb),.21),transparent 60%),#090909!important; }
#pl-grid .pl-card[style*="--pl-brand-rgb"]::before {
  background-image:linear-gradient(145deg,transparent 47%,rgba(var(--pl-brand-rgb),.13) 49%,rgba(var(--pl-brand-rgb),.035) 55%,transparent 64%);
  background-position:center; background-size:100% 100%; opacity:1; filter:none; mask-image:none;
}
#pl-grid .pl-card[style*="--pl-brand-rgb"] .pl-lg { position:relative; z-index:2; }
#pl-grid .pl-card[style*="--pl-brand-rgb"] .pl-nm,
#pl-grid .pl-card[style*="--pl-brand-rgb"] .pl-tp { position:relative; z-index:2; }
#pl-grid .pl-card > .pl-brand-art {
  position: absolute; z-index: 0; right: -2px; bottom: -3px;
  width: 72%; height: 100%; object-fit: contain; object-position: right bottom;
  opacity: .94; pointer-events: none;
  filter: brightness(1.16) contrast(1.06) drop-shadow(0 8px 18px rgba(0,0,0,.58));
  transition: transform .32s cubic-bezier(.2,.75,.25,1), opacity .2s ease;
}
#pl-grid .pl-brand-steam > .pl-brand-art { width: 76%; }
#pl-grid .pl-card:hover > .pl-brand-art { transform: translateY(-3px) scale(1.025); opacity: 1; }
@media (max-width: 560px) {
  #pl-grid .pl-card > .pl-brand-art { width: 110%; height: 105%; right: -12px; bottom: -6px; opacity: .9; }
  #pl-grid .pl-brand-steam > .pl-brand-art { width: 114%; }
}