/* Official product graphic and showcase, scoped to .mp-product / .mp-showcase. */
.mp-product{position:relative;isolation:isolate;margin:0 auto;padding:0;max-width:100%}
.mp-product picture,.mp-product img{display:block;width:100%;height:auto}
.mp-product img{aspect-ratio:3/2;filter:drop-shadow(0 16px 26px #0a0b1f73)}
/* A soft circular violet halo radiating from the desktop monitor's centre; it stays behind the graphic. */
.mp-product-halo{position:absolute;z-index:-1;left:51%;top:34%;width:72%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,#a585d6a6 0%,#7a55ad59 28%,#5c3b8626 52%,transparent 70%);filter:blur(18px);opacity:.75;transition:opacity .8s ease}
.mp-product[data-reveal=pending]{opacity:0;transform:translateY(20px)}
.mp-product[data-reveal=pending] .mp-product-halo{opacity:.2}
.mp-product[data-reveal=shown]{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.22,.7,.25,1)}
.mp-product[data-reveal=shown] .mp-product-halo{opacity:1}

/* Sales letter introduction: centred, about 88% of the content width, up to 900px. */
.mp-product--hero{width:min(900px,88%);margin:56px auto 30px}

/* Customer portal welcome. */
.mp-product--portal{width:min(720px,100%);margin:26px auto 6px}

/* Premium product showcase beneath the introduction graphic. */
.mp-showcase{max-width:760px;margin:0 auto 64px;padding:0 8px;text-align:center}
.sales-page .mp-showcase h3{margin:0 auto 14px;font:500 clamp(26px,3vw,34px)/1.25 var(--serif);color:var(--ivory,#f8f1e7);text-wrap:balance}
.sales-page .mp-showcase p{max-width:680px;margin:0 auto;color:#ddd4e6;font-size:17px;line-height:1.85}
.mp-showcase-benefits{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 22px;list-style:none;margin:26px auto 0;padding:14px 24px;border:1px solid #a585d640;border-radius:999px;background:#10132966;width:max-content;max-width:100%}
.mp-showcase-benefits li{display:flex;align-items:center;gap:8px;margin:0;padding:0;font-size:12px;font-weight:700;letter-spacing:1.2px;white-space:nowrap;text-transform:uppercase;color:#f8f1e7}
.mp-showcase-benefits svg{flex:0 0 20px;width:20px;height:20px;color:var(--gold,#d6b16c);filter:drop-shadow(0 0 6px #d6b16c66)}

@media(max-width:700px){
 .mp-product--hero{width:100%;margin:36px auto 22px}
 .mp-showcase{margin-bottom:44px}
 .sales-page .mp-showcase p{font-size:16px}
 .mp-showcase-benefits{flex-direction:column;align-items:flex-start;gap:12px;border-radius:22px;padding:16px 22px}
 .mp-showcase-benefits li{font-size:12px;letter-spacing:1px;white-space:normal}
}
@media(prefers-reduced-motion:reduce){.mp-product{transition:none!important;transform:none!important;opacity:1!important}.mp-product .mp-product-halo{transition:none!important;opacity:1!important}}