.subscription-scene{margin-block:38px 58px;padding-block:48px;color:var(--ink);background:var(--paper)}
.subscription-scene .subscription-layout{display:grid;grid-template-columns:.9fr 1.2fr;gap:55px;align-items:center}
.subscription-scene .subscription-copy h2{font-size:clamp(40px,4.2vw,60px);font-weight:700;line-height:1.15;letter-spacing:-.06em}
.subscription-scene .subscription-copy>p{font-size:20px;line-height:1.6;margin-top:25px;letter-spacing:-.035em}
.subscription-scene .subscription-paper-stage{position:relative;height:530px;isolation:isolate;overflow:clip;overflow-clip-margin:18px}
.subscription-scene .subscription-desk{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;clip-path:polygon(2% 0,98% 1%,100% 93%,94% 97%,82% 95%,70% 99%,57% 96%,43% 100%,29% 97%,17% 99%,0 96%);z-index:-1}
.subscription-scene .subscription-piece{position:absolute;transform:rotate(var(--paper-angle));transform-origin:50% 70%;background:#fffdf8;box-shadow:3px 7px 12px #24242327}
.subscription-scene .subscription-receipt{width:43%;padding:23px 24px 25px;border-top:5px solid #242423}
.subscription-scene .subscription-receipt a{display:block;width:fit-content;text-decoration:none}
.subscription-scene .subscription-receipt a:hover{text-decoration:underline;text-underline-offset:4px}
.subscription-scene .subscription-receipt a:focus-visible{outline:2px solid #242423;outline-offset:5px}
.subscription-scene .subscription-brand{display:block;font-size:27px;font-weight:700;line-height:1.2}
.subscription-scene .subscription-plan{display:block;font-size:17px;line-height:1.4;margin-top:9px}
.subscription-scene .subscription-price{display:flex;align-items:baseline;gap:9px;margin-top:20px;white-space:nowrap}
.subscription-scene .subscription-price strong{font-size:58px;line-height:1;letter-spacing:-.055em}
.subscription-scene .subscription-price span{font-size:20px;font-weight:700}
.subscription-scene .subscription-claude{left:3%;top:8%;--paper-angle:-6deg;--from-x:-300px;--from-y:-80px;--from-angle:-25deg;--delay:0s}
.subscription-scene .subscription-chatgpt{right:2%;top:19%;--paper-angle:5deg;--from-x:300px;--from-y:-120px;--from-angle:24deg;--delay:0s}
.subscription-scene .subscription-tool{padding:15px 21px;font-size:34px;line-height:1.2;font-weight:700;letter-spacing:-.055em;white-space:nowrap}
.subscription-scene .subscription-higgsfield{left:8%;top:59%;--paper-angle:-4deg;--from-x:-280px;--from-y:30px;--from-angle:-22deg;--delay:.8s}
.subscription-scene .subscription-newtake{right:5%;top:72%;--paper-angle:4deg;--from-x:280px;--from-y:-70px;--from-angle:22deg;--delay:.8s}
.subscription-scene.is-armed:not(.has-played) .subscription-piece{opacity:0;pointer-events:none}
@keyframes subscription-paper-arrive{
 0%{opacity:0;transform:translate(var(--from-x),var(--from-y)) rotate(var(--from-angle))}
 12%{opacity:1}
 58%{opacity:1;transform:translate(0,17px) rotate(calc(var(--paper-angle) + 2deg))}
 78%{opacity:1;transform:translate(0,-13px) rotate(calc(var(--paper-angle) - 2deg))}
 100%{opacity:1;transform:translate(0,0) rotate(var(--paper-angle))}
}
.subscription-scene.has-played .subscription-piece{animation:subscription-paper-arrive .65s cubic-bezier(.22,.64,.35,1) both;animation-delay:var(--delay)}
.subscription-scene.has-played .subscription-tool{animation-duration:.6s}
@media(max-width:1000px){
 .subscription-scene .subscription-layout{gap:30px;grid-template-columns:.9fr 1.1fr}
 .subscription-scene .subscription-paper-stage{height:465px}
 .subscription-scene .subscription-receipt{padding:18px 17px 20px;width:44%}
 .subscription-scene .subscription-brand{font-size:23px}
 .subscription-scene .subscription-plan{font-size:15px}
 .subscription-scene .subscription-price{gap:6px;margin-top:18px}
 .subscription-scene .subscription-price strong{font-size:46px}
 .subscription-scene .subscription-price span{font-size:16px}
 .subscription-scene .subscription-tool{font-size:29px;padding:14px 17px}
 .subscription-scene .subscription-copy>p{font-size:17px}
}
@media(max-width:640px){
 .subscription-scene{margin-block:20px 34px;padding-block:34px 20px}
 .subscription-scene .subscription-layout{display:block}
 .subscription-scene .subscription-copy h2{font-size:39px;line-height:1.17;letter-spacing:-.065em}
 .subscription-scene .subscription-copy>p{font-size:16px;line-height:1.55;margin-top:19px}
 .subscription-scene .subscription-paper-stage{height:405px;margin-top:31px;overflow-clip-margin:10px}
 .subscription-scene .subscription-desk{object-position:50% 65%}
 .subscription-scene .subscription-receipt{width:44%;padding:18px 15px 20px;border-top-width:4px}
 .subscription-scene .subscription-brand{font-size:21px}
 .subscription-scene .subscription-plan{font-size:14px;margin-top:8px}
 .subscription-scene .subscription-price{gap:5px;margin-top:20px}
 .subscription-scene .subscription-price strong{font-size:38px}
 .subscription-scene .subscription-price span{font-size:13px}
 .subscription-scene .subscription-claude{left:3%;top:5%;--from-x:-190px;--from-y:-55px}
 .subscription-scene .subscription-chatgpt{right:2%;top:18%;--from-x:190px;--from-y:-80px}
 .subscription-scene .subscription-tool{font-size:25px;padding:13px 17px}
 .subscription-scene .subscription-higgsfield{left:7%;top:58%;--from-x:-190px}
 .subscription-scene .subscription-newtake{right:5%;top:74%;--from-x:190px}
}
@media(prefers-reduced-motion:reduce){
 .subscription-scene .subscription-piece{animation:none!important;opacity:1!important;pointer-events:auto!important;transform:rotate(var(--paper-angle))!important}
}
