/* PRO laptop slide: rebuilt from mipic.co/for-artists/ (src/sell/sell.css, PRO card) for the deck.
   Needs ../fonts/fonts.css (Unbounded, Inter, Geist Mono). One custom property drives everything: --open, 0 = shut, 1 = open. */
.pro-slide{--out:cubic-bezier(.4,0,.6,1); position:relative; background:#0a0a0a; color:#fff; padding:clamp(28px,5vw,64px); font-family:Inter, system-ui, sans-serif; overflow:hidden}
.pro-eyebrow{margin:0 0 18px; font:800 12px/1 Unbounded, Impact, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.62)}
.pro-title{margin:0 0 clamp(28px,4vw,56px); text-align:left; font:800 clamp(28px,3.8vw,56px)/.95 Unbounded, Impact, sans-serif; letter-spacing:-.04em; text-transform:uppercase}

/* the laptop: its own width is the unit (cqw), so every part scales together */
.pro-laptop{position:relative; width:min(100%,960px); margin:0 auto; container-type:inline-size;
  perspective:500cqw; perspective-origin:50% 58cqw}
/* PRO sits BEHIND the lid (z 0), centred, its foot just above the hinge: the opening lid rises in front of it and hides it */
.pro-word{position:absolute; left:0; right:0; top:46cqw; z-index:0; margin:0; transform:translateY(-50%); text-align:center;
  font:800 30cqw/1 Unbounded, Impact, sans-serif; letter-spacing:-.04em; text-transform:uppercase; color:#fff; pointer-events:none}
.pro-lid{position:relative; z-index:2; padding:1.6% 1.6% 2.4%; border-radius:18px 18px 6px 6px;
  background:linear-gradient(#2b2c2f,#1a1b1d); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 70px rgba(0,0,0,.55);
  transform-origin:50% 100%; transform:rotateX(calc((1 - var(--open,1)) * -88deg)); will-change:transform}
.pro-lid::before{content:""; position:absolute; top:.75%; left:50%; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:#3b3c40}
.pro-screen{position:relative; overflow:hidden; border-radius:6px; background:#000}
.pro-bar{display:flex; align-items:center; gap:6px; height:26px; padding:0 10px; background:#1f2023; border-bottom:1px solid rgba(255,255,255,.08)}
.pro-bar i{flex:none; width:9px; height:9px; border-radius:50%; background:#3e3f43}
.pro-bar span{margin:0 auto; padding:3px 14px; border-radius:7px; background:#2b2c30; font:500 11px/1.2 Inter, sans-serif; color:rgba(255,255,255,.72); transform:translateX(-14px); white-space:nowrap}
/* the screen wakes once the lid is about half up */
.pro-screen img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top;
  opacity:clamp(0, calc((var(--open,1) - .45) * 2.2), 1)}
/* the aluminium back: shows only while the lid lies shut (a thin silver bar), gone by --open .15 */
.pro-shell{position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg,#d4d6da,#9b9ea3);
  opacity:clamp(0, calc(1 - (var(--open,1) - .03) * 8), 1)}
.pro-base{position:relative; z-index:1; width:116%; height:clamp(10px,1.6vw,18px); margin-left:-8%; border-radius:0 0 22px 22px;
  background:linear-gradient(180deg,#dcdee1 0%,#aaadb2 55%,#7c7f84 100%); box-shadow:0 18px 30px rgba(0,0,0,.45)}
.pro-base::before{content:""; position:absolute; top:0; left:50%; width:16%; height:42%; transform:translateX(-50%); border-radius:0 0 10px 10px; background:linear-gradient(#9da0a5,#c0c3c7)}
.pro-laptop figcaption{margin-top:20px; text-align:center; font:500 11px/1.5 "Geist Mono", monospace; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.6)}

/* the six PRO tiles: the site's reveal (fade + rise 32px, 1s / 1.2s, 80 ms apart), started once the lid is open */
.pro-tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:clamp(32px,4vw,56px) 0 0; padding:0; list-style:none}
.pro-tiles li{padding:22px 22px 24px; border-radius:8px; background:#141414; border:1px solid rgba(255,255,255,.12); display:grid; gap:8px; align-content:start}
.pro-tiles b{font:800 14px/1.1 Unbounded, sans-serif; letter-spacing:-.01em; text-transform:uppercase}
.pro-tiles span{font:400 14px/1.45 Inter, sans-serif; color:rgba(255,255,255,.62)}
.pro-tiles small{font:500 10px/1 "Geist Mono", monospace; letter-spacing:.2em; color:rgba(255,255,255,.45)}
@media (max-width:760px){.pro-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pro-motion .pro-tiles li{opacity:0; transform:translate3d(0,32px,0); transition:opacity 1s var(--out), transform 1.2s var(--out); transition-delay:calc(var(--i,0) * 80ms)}
.pro-motion .pro-slide.is-open .pro-tiles li{opacity:1; transform:none}

/* PDF / print and reduced motion: the final state, laptop open, PRO hidden, tiles in */
@media print{
  .pro-laptop{--open:1 !important}
  .pro-tiles li{opacity:1 !important; transform:none !important; transition:none !important}
  .pro-slide{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* deck integration: cap content width, mobile first-card 10px from screen edge */
.pro-inner{max-width:1240px; margin:0 auto}
@media (max-width:760px){ .pro-slide{padding:40px 10px} }

/* deck: laptop plays as an intro OVERLAY over the existing 6-card carousel, then fades to reveal it */
.pro-stage{position:relative}
.pro-intro{position:absolute; inset:0; z-index:6; display:grid; place-items:center; background:#0a0a0a; border-radius:25px; transition:opacity .9s ease; padding:24px}
.pro-intro.is-hidden{opacity:0; pointer-events:none}
.pro-intro .pro-laptop{width:min(90%,900px); margin:0}
.pro-intro .pro-laptop{--open:0}
@media print{ .pro-intro{display:none} }
/* mobile: skip the laptop intro entirely — the 6-card carousel shows straight away */
@media (max-width:767px){ .pro-intro{display:none !important} }