/* Playtable PO: generated artwork, real product previews, and process reassurance. */
.po-hero{grid-template-columns:1.02fr 1fr;gap:48px;padding:42px 0 30px}
.po-hero-copy,.po-hero-visual{min-width:0}
.po-hero-copy{animation:po-copy-arrive .65s ease-out both}
.po-hero .po-kicker{margin-bottom:16px}
.po-hero h1{font-size:clamp(40px,4.4vw,60px);line-height:1.1;letter-spacing:-1.7px}
.po-hero h1 span{position:relative;display:inline-block;isolation:isolate;color:#54745f}
.po-hero h1 span::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:2px;height:12px;border-radius:8px;background:#fbe69d;transform:rotate(-1deg)}
.po-hero-copy>p{max-width:455px;font-size:17px;line-height:1.7;margin:20px 0 24px}
.po-hero-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:455px;margin-top:17px}
.po-hero-meta .po-note{margin:0}
.po-motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border:1px solid #e5e8ee;border-radius:999px;padding:7px 10px;background:#fff;color:#526581;font-size:11px;line-height:1.3}
.po-motion-toggle svg{width:15px;height:15px;flex-shrink:0}
.po-motion-toggle:hover{background:#f0f4fb}
.po-hero-visual{animation:po-copy-arrive .8s ease-out both}
.po-adventure-art{position:relative;display:grid;place-items:center;height:260px;max-width:440px;margin:0 auto 14px}
.po-adventure-art::before{content:"";position:absolute;inset:20px 28px 8px;background:radial-gradient(ellipse at 50% 45%,#fff2cc 0%,#f7f4e9 63%,#eef3ed 100%);border-radius:48% 52% 45% 55%;transform:rotate(-6deg)}
.po-mascot{position:relative;display:block;width:330px;max-width:90%;height:auto;transform-origin:50% 75%;animation:po-parcel-float 4.8s ease-in-out infinite}
.po-art-spark{position:absolute;z-index:1;pointer-events:none;animation:po-spark-glow 5.2s ease-in-out infinite}
.po-art-spark-one{width:24px;height:24px;top:40px;left:8px;fill:#253f77}
.po-art-spark-two{width:20px;height:20px;right:8px;bottom:36px;fill:#e95745;animation-delay:-2.6s}
.po-hero .po-peek-wrap{padding:0;max-width:510px;margin:auto;background:transparent;border:0;border-radius:0}
.po-hero .po-peek-heading{justify-content:center;margin-bottom:12px;font-size:10px;letter-spacing:1px;color:#58715b}
.po-hero .po-peek{gap:12px;align-items:stretch}
.po-hero .po-peek-tile{--tilt:-3deg;padding:10px 9px 11px;gap:7px;border-color:#e4e5dc;box-shadow:0 4px 0 #dde3d43d;transform:rotate(var(--tilt));transition:transform .2s,box-shadow .2s;animation:po-preview-arrive .7s ease-out}
.po-hero .po-peek-tile:nth-child(2){--tilt:2deg;margin-top:0}
.po-hero .po-peek-tile:nth-child(3){--tilt:-2deg}
.po-hero .po-peek-tile:hover,.po-hero .po-peek-tile:focus-visible{transform:translateY(-4px) rotate(0);box-shadow:0 7px 14px #253f7712}
.po-hero .po-peek-tile img{height:88px;width:100%;object-fit:contain}
.po-hero .po-peek-tile>span{font-size:11px;line-height:1.35;min-height:30px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.po-hero .po-peek-caption{text-align:center;font-size:11px;margin:12px 0 0}
.po-trust-badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:0}
.po-trust-badges li{display:flex;align-items:center;gap:10px;min-width:0;padding:14px 12px;border:1px solid #eee4ce;border-radius:17px;background:#fff8e9}
.po-trust-badges li:nth-child(2){background:#f1f5ee;border-color:#e0e8d9}
.po-trust-badges li:nth-child(3){background:#eff3fc;border-color:#e0e6f2}
.po-trust-badges li:nth-child(4){background:#fff2ec;border-color:#f3e1d9}
.po-trust-badges img{width:62px;height:62px;flex:0 0 62px;object-fit:contain}
.po-trust-badges strong{display:block;font-size:14px;line-height:1.35;color:#253f77}
.po-trust-badges span{display:block;font-size:12px;line-height:1.5;color:#667186;margin-top:5px}
.po-trust-badges li:hover img{animation:po-badge-hop .45s ease-out}
.po-estimate-note{display:flex;align-items:flex-start;justify-content:center;gap:7px;font-size:12px;line-height:1.6;color:#6e7580;margin:14px 0 0}
.po-estimate-note svg{width:17px;height:17px;flex-shrink:0;margin-top:1px}
.po-main:not([data-motion="playing"]) .po-mascot,.po-main:not([data-motion="playing"]) .po-art-spark{animation-play-state:paused}
.po-main[data-motion="paused"] .po-trust-badges img{animation:none}
@keyframes po-copy-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes po-preview-arrive{from{opacity:0}to{opacity:1}}
@keyframes po-parcel-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes po-spark-glow{0%,100%{opacity:.6;transform:scale(.85)}50%{opacity:1;transform:scale(1.05)}}
@keyframes po-badge-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-4px)}70%{transform:translateY(-1px)}}
@media(max-width:1050px){
 .po-hero{gap:24px;padding-top:32px}
 .po-hero h1{font-size:clamp(37px,4.5vw,48px)}
 .po-adventure-art{height:235px}
 .po-mascot{width:300px}
 .po-trust-badges li{gap:8px;padding:12px 10px}
 .po-trust-badges img{width:48px;height:48px;flex-basis:48px}
 .po-trust-badges strong{font-size:13px}
 .po-trust-badges span{font-size:11px}
}
@media(max-width:760px){
 .po-hero{grid-template-columns:1fr;padding:28px 0 23px;gap:18px}
 .po-hero h1{font-size:clamp(34px,8.7vw,44px);max-width:550px;letter-spacing:-1.1px}
 .po-hero h1 span::after{height:9px;bottom:1px}
 .po-hero .po-kicker{margin-bottom:12px;font-size:11px}
 .po-hero-copy>p{font-size:15px;line-height:1.6;margin:14px 0 18px;max-width:550px}
 .po-hero-meta{margin-top:13px;max-width:550px}
 .po-hero-meta .po-note{font-size:12px}
 .po-hero-visual{display:grid;grid-template-columns:108px minmax(0,1fr);align-items:center;gap:12px;max-width:590px}
 .po-hero-visual:has(.po-peek-wrap[hidden]){display:block}
 .po-hero-visual:has(.po-peek-wrap[hidden]) .po-adventure-art{margin-inline:auto}
 .po-adventure-art{height:128px;width:108px;margin:0}
 .po-adventure-art::before{inset:20px -2px 15px}
 .po-mascot{width:108px;max-width:100%}
 .po-art-spark{display:none}
 .po-hero .po-peek-wrap{max-width:none;width:100%}
 .po-hero .po-peek-heading{font-size:9px;margin-bottom:8px;letter-spacing:.6px}
 .po-hero .po-peek{gap:7px}
 .po-hero .po-peek-tile{padding:7px 6px;gap:5px;border-radius:11px}
 .po-hero .po-peek-tile img{height:65px}
 .po-hero .po-peek-tile>span{font-size:10px;min-height:27px}
 .po-hero .po-peek-caption{display:none}
 .po-trust-badges{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .po-trust-badges li{padding:11px 10px;gap:8px;border-radius:14px}
 .po-trust-badges img{width:44px;height:44px;flex-basis:44px}
 .po-trust-badges strong{font-size:13px}
 .po-trust-badges span{font-size:11.5px;margin-top:4px;line-height:1.4}
 .po-estimate-note{justify-content:flex-start;font-size:11.5px;margin-top:12px}
 .po-collection{padding-top:32px}
}
@media(max-width:450px){
 .po-hero h1{font-size:clamp(32px,9vw,40px)}
 .po-hero-actions{display:grid;grid-template-columns:1.15fr 1fr;gap:9px}
 .po-hero-actions .button{padding:11px 10px;font-size:12px;gap:7px;min-width:0}
 .po-hero-visual{grid-template-columns:90px minmax(0,1fr);gap:9px}
 .po-adventure-art{width:90px;height:116px}
 .po-mascot{width:90px}
 .po-hero .po-peek-tile img{height:55px}
 .po-trust-badges li{padding:10px 8px;gap:6px}
 .po-trust-badges img{width:38px;height:38px;flex-basis:38px}
 .po-trust-badges strong{font-size:12.5px}
 .po-trust-badges span{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .po-hero-copy,.po-hero-visual,.po-mascot,.po-art-spark,.po-hero .po-peek-tile,.po-trust-badges li:hover img{animation:none}
 .po-hero .po-peek-tile,.preorder-page .button{transition:none}
 .po-hero .po-peek-tile:hover,.po-hero .po-peek-tile:focus-visible{transform:rotate(var(--tilt))}
 .po-motion-toggle{display:none}
}
@media(max-width:760px){
 .po-hero{padding:22px 0 20px;gap:16px}
 .po-hero .po-kicker{gap:8px;margin-bottom:10px;font-size:10px;letter-spacing:1px}
 .po-kicker svg{width:28px;height:28px;padding:6px;border-radius:8px}
 .po-hero h1{font-size:clamp(29px,8.3vw,38px);line-height:1.12;letter-spacing:-.9px}
 .po-hero-copy>p{margin:12px 0 16px;font-size:14px;line-height:1.6}
 .po-hero-actions{display:grid;grid-template-columns:1.12fr 1fr;gap:8px}
 .po-hero-actions .button{min-width:0;min-height:44px;padding:10px 9px;font-size:12px;line-height:1.3;gap:7px;border-radius:12px}
 .po-hero-meta{margin-top:12px;gap:8px;flex-wrap:nowrap}
 .po-hero-meta .po-note{font-size:11px;gap:7px}
 .po-motion-toggle{flex-shrink:0;padding:6px 8px;font-size:10px;gap:4px}
 .po-hero-visual{grid-template-columns:72px minmax(0,1fr);gap:10px;max-width:none}
 .po-adventure-art{width:72px;height:92px}
 .po-mascot{width:76px;max-width:none}
 .po-hero .po-peek-heading{font-size:8px;letter-spacing:.4px}
 .po-hero .po-peek-tile{padding:6px 5px;transform:none;box-shadow:0 3px 0 #dde3d43d}
 .po-hero .po-peek-tile img{height:48px}
 .po-hero .po-peek-tile>span{font-size:9px;min-height:25px}
}
