:root body.user-service #homeSquadPurchasePromo.home-purchase-popup { width:560px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 40px); padding:0; border:1px solid var(--ui-line); border-radius:16px; background:var(--ui-surface); color:var(--ui-ink); overflow:auto; box-shadow:0 24px 80px #0004; }
#homeSquadPurchasePromo.home-purchase-popup::backdrop { background:rgb(0 0 0 / .55); }
#homeSquadPurchasePromo.home-purchase-popup .hpp-close { position:absolute; z-index:2; right:12px; top:12px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--ui-line); border-radius:50%; background:var(--ui-surface); color:var(--ui-ink); cursor:pointer; }
#homeSquadPurchasePromo.home-purchase-popup .hpp-close svg { width:20px; height:20px; }
#homeSquadPurchasePromo.home-purchase-popup .hpp-preview { position:relative; height:230px; overflow:hidden; background:#dce9e4; }
#homeSquadPurchasePromo.home-purchase-popup .hpp-preview img { position:absolute; width:620px; max-width:none; height:auto; top:36px; left:42px; transform:rotate(-8deg); border-radius:8px; border:1px solid #d6ddda; box-shadow:0 12px 30px #163c3029; }
#homeSquadPurchasePromo.home-purchase-popup .hpp-preview::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 60%,var(--ui-surface)); }
#homeSquadPurchasePromo.home-purchase-popup .hpp-body { position:relative; padding:8px 32px 24px; }
#homeSquadPurchasePromo.home-purchase-popup .hpp-label { font-size:11px; font-weight:700; color:var(--ui-muted); }
#homeSquadPurchasePromo.home-purchase-popup h2 { margin:12px 0; font-size:30px; line-height:1.3; letter-spacing:-.04em; }
#homeSquadPurchasePromo.home-purchase-popup p { margin:0; color:var(--ui-muted); font-size:14px; font-weight:400; line-height:1.7; }
#homeSquadPurchasePromo.home-purchase-popup .hpp-actions { display:grid; margin-top:24px; }
#homeSquadPurchasePromo.home-purchase-popup a { display:flex; justify-content:center; align-items:center; min-height:48px; font-size:13px; font-weight:700; }
#homeSquadPurchasePromo.home-purchase-popup .hpp-primary { gap:20px; background:var(--ui-accent); color:var(--ui-on-accent); border-radius:6px; text-decoration:none; }
#homeSquadPurchasePromo.home-purchase-popup .hpp-example { color:var(--ui-muted); text-underline-offset:4px; }
#homeSquadPurchasePromo.home-purchase-popup :is(a,button):focus-visible { outline:2px solid var(--ui-focus); outline-offset:3px; }
#homeSquadPurchasePromo.home-purchase-popup[open] { animation:hpp-enter 240ms ease-out; }
@keyframes hpp-enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media(max-width:767px) { #homeSquadPurchasePromo.home-purchase-popup .hpp-preview { height:180px; } #homeSquadPurchasePromo.home-purchase-popup .hpp-preview img { width:510px; left:20px; } #homeSquadPurchasePromo.home-purchase-popup .hpp-body { padding:8px 22px 16px; } #homeSquadPurchasePromo.home-purchase-popup h2 { font-size:25px; } }
@media(prefers-reduced-motion:reduce) { #homeSquadPurchasePromo.home-purchase-popup[open] { animation:none; } }

#homeSquadPurchasePromo.home-purchase-popup [hidden] { display:none !important; }
#homeSquadPurchasePromo.home-purchase-popup .hpp-footer { display:flex; justify-content:flex-end; padding:8px 20px; border-top:1px solid var(--ui-line); }
#homeSquadPurchasePromo.home-purchase-popup .hpp-footer button { min-height:44px; padding:0 8px; border:0; background:transparent; color:var(--ui-muted); cursor:pointer; font-size:13px; }
#homeSquadPurchasePromo.home-purchase-popup .hpp-ad-label { position:absolute; z-index:2; top:21px; left:12px; padding:4px 8px; border-radius:4px; background:rgb(0 0 0 / .78); color:#fff; font-size:12px; line-height:18px; pointer-events:none; }
#homeSquadPurchasePromo.home-purchase-popup .hpp-ad-link { display:block; min-height:0; }
#homeSquadPurchasePromo.home-purchase-popup .hpp-ad-link img { display:block; width:100%; height:auto; max-height:calc(100dvh - 104px); object-fit:contain; }

body.user-service:has(#homeSquadPurchasePromo.home-purchase-popup[open]) { overflow:hidden; }

#homeSquadPurchasePromo.home-purchase-popup h2, #homeSquadPurchasePromo.home-purchase-popup .hpp-body p { white-space:pre-line; }

/* Image ads float over the backdrop; only the artwork has a visible surface. */
:root body.user-service #homeSquadPurchasePromo.home-purchase-popup:has(.hpp-ad-link) { background:transparent; border:0; border-radius:0; box-shadow:none; outline:none; }
#homeSquadPurchasePromo.home-purchase-popup:has(.hpp-ad-link) .hpp-close { background:transparent; color:#fff; border:0; border-radius:4px; }
#homeSquadPurchasePromo.home-purchase-popup:has(.hpp-ad-link) .hpp-close svg { width:24px; height:24px; filter:drop-shadow(0 1px 2px #000) drop-shadow(0 0 1px #000); }
#homeSquadPurchasePromo.home-purchase-popup:has(.hpp-ad-link) .hpp-footer { padding:0 4px; border:0; background:transparent; }
#homeSquadPurchasePromo.home-purchase-popup:has(.hpp-ad-link) .hpp-footer button { color:#fff; text-shadow:0 1px 3px #000; }
#homeSquadPurchasePromo.home-purchase-popup:has(.hpp-ad-link) .hpp-footer button:hover { text-decoration:underline; text-underline-offset:3px; }
#homeSquadPurchasePromo.home-purchase-popup .hpp-ad-link img { border-radius:12px; }