/* DEV sync with Figma, 2026-10-13, preserve base stylesheet */
@font-face{font-family:'TT Milks Casual Pie';src:url('assets/tt-milks-casual-pie-base.ttf') format('truetype');font-style:normal;font-weight:400 900;font-display:swap}
:root{--display:'TT Milks Casual Pie','Rubik','Montserrat',sans-serif;--pink:#f5e8ef;--red:#d80d38}
h1,h2,.hero h1,.modal-copy h2,.character-name,.how-title,.final-cta h2{font-family:var(--display);font-weight:900;letter-spacing:0}
.hero h1{line-height:1.12;letter-spacing:0}.hero h1 small{letter-spacing:0}
.hero-kicker,.hero h1{text-transform:uppercase}
.price-badge{width:228px;height:133px;border:5px solid #fff;border-radius:38px;right:30px;bottom:35px;box-shadow:0 10px 19px rgba(173,24,72,.25);transform:rotate(-8deg);overflow:hidden;gap:0}
.price-badge:before{content:"";position:absolute;right:-26px;top:-24px;background:#f34a72;opacity:.28;width:130px;height:130px;border-radius:50%}
.price-badge:after{content:none;display:none}
.price-badge strong{font:900 79px/1 var(--display);position:relative;z-index:1}
.price-badge span{display:block!important;font:900 13px/1.2 'Rubik',sans-serif;margin-top:0;position:relative;z-index:1;text-align:center}
#how.how-section{position:relative;background:#f5e8ef;overflow:hidden;padding:28px 0 22px;min-height:715px}
.how-container{position:relative;z-index:1}
.wave-corner{position:absolute;z-index:0;pointer-events:none;height:auto;object-fit:contain;display:block}
.wave-left{width:365px;left:0;top:0}
.wave-right{width:393px;right:0;top:-4px}
.how-title{text-align:center;color:var(--red);font-size:clamp(42px,5.2vw,69px);line-height:1.05;text-transform:uppercase;margin:0 auto 95px}
.how-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;min-height:389px}
.how-step{position:relative;min-height:389px}
.how-dot{position:absolute;left:0;top:0;width:61px;height:61px;display:grid;place-items:center;background:var(--red);color:#fff;font:900 39px/1 var(--display);border-radius:50%}
.how-step-copy{margin-left:80px;padding-top:2px;min-width:0}
.how-step h3{font:800 24px/1.34 'Nunito','Rubik',sans-serif;text-transform:none;letter-spacing:0;margin:0 0 13px}
.how-price{display:block;color:var(--red);font:900 38px/1.15 'Nunito','Rubik',sans-serif;white-space:nowrap}
.how-original-price{font-size:15px;margin:9px 0 0;line-height:1.2}
.how-illustration{position:absolute;object-fit:contain}
.how-step-1 .how-illustration{width:275px;height:240px;left:28px;top:150px}
.how-step-2 .how-illustration{width:260px;height:247px;left:70px;top:150px}
.how-step-3 .how-illustration{width:265px;height:260px;left:80px;top:129px}
.how-ruble{position:absolute;right:12px;top:255px;display:grid;place-items:center;width:94px;height:94px;border-radius:50%;background:var(--red);color:#fff;font:900 38px/1 'Nunito','Rubik',sans-serif}
.how-note{font-size:16px;line-height:1.35;text-align:center;padding:12px 20px;background:#fff5fa;border-radius:999px;margin:5px 36px 0}
.how-regional{font-size:13px;line-height:1.2;text-align:center;color:var(--red);margin:8px 0 0}
.region-section h2{text-transform:uppercase}.collection-section h2,.faq-section h2{font-family:var(--display)}
.collection-section .character-name,.modal-copy h2{font-family:var(--display)}
.character-card.card-picnic img{position:absolute;left:10px;top:23px;width:286px;height:274px;max-width:none;margin:0;object-fit:contain}
.character-card.card-picnic .character-name{position:absolute;top:285px;left:0;right:0;text-align:center;margin:0}
.character-card.card-picnic .character-caption{position:absolute;top:321px;left:0;right:0;margin:0}
.character-card.card-picnic:hover img{transform:scale(1.035)}
.character-card .card-index,.character-card .rare-tag{z-index:2}
.modal-caption{display:none}.modal-copy h2{font-size:43px;line-height:1.04;letter-spacing:0}
.modal-copy h3{font-size:22px;line-height:1.28;max-width:275px;margin-top:49px;margin-bottom:20px}
.modal-copy p{position:absolute;top:216px;left:0;width:276px;margin:0}
.is-picnic .modal-art{top:71px;right:0;width:371px;height:363px}
.is-picnic .modal-art img{width:371px;height:363px}
.final-cta .cta-panel{min-height:290px;padding:42px 48px}
.final-cta .cta-copy{max-width:850px}
.final-cta .cta-copy h2{text-transform:uppercase;color:#fff;font-size:42px;line-height:1.15}
.final-cta .cta-copy p{font-size:17px;line-height:1.4;max-width:680px}
.final-cta .cta-copy .eyebrow{color:#fff}
@media(max-width:1100px){.how-title{margin-bottom:90px}.how-step h3{font-size:21px}.how-step-copy{margin-left:68px}.how-dot{width:56px;height:56px;font-size:34px}.how-illustration{max-width:65%}}
@media(max-width:740px){
 .hero h1{font-size:clamp(42px,13.3vw,54px);margin-bottom:6px}.hero h1 small{font-size:.72em}
 .price-badge{width:132px;height:96px;right:0;bottom:26px;border:3px solid white;border-radius:30px;box-shadow:0 6px 12px rgba(173,24,72,.25)}
 .price-badge strong{font-size:57px}.price-badge span{font-size:9px}.price-badge:before{width:65px;height:65px;right:-12px;top:-9px}
 #how.how-section{padding:98px 0 16px;min-height:1007px}
 .wave-left{width:164px;left:0;top:0}.wave-right{width:164px;right:0;top:0}
 .how-title{font-size:clamp(31px,10.25vw,40px);line-height:1.05;margin-bottom:42px}
 .how-steps{display:flex;flex-direction:column;gap:0;min-height:0}
 .how-step{height:226px;min-height:0;border-bottom:2px solid #f1ced8;flex-shrink:0}
 .how-step:nth-child(2){height:218px}.how-step:nth-child(3){height:247px;border-bottom:0}
 .how-dot{left:3px;top:0;width:49px;height:49px;font-size:30px}
 .how-step-copy{margin-left:64px;padding:0;position:relative;z-index:1}
 .how-step h3{font-size:18px;line-height:1.45;margin:0 0 10px}
 .how-price{font-size:29px;line-height:1.15}
 .how-original-price{font-size:12px;margin:6px 0 0}
 .how-step-1 .how-illustration{left:90px;top:85px;width:177px;height:150px;max-width:none}
 .how-step-2 .how-illustration{left:182px;top:15px;width:180px;height:182px;max-width:none}
 .how-step-3 .how-illustration{left:138px;top:54px;width:200px;height:200px;max-width:none}
 .how-ruble{right:10px;top:135px;width:58px;height:58px;font-size:25px}
 .how-note{font-size:13px;line-height:1.45;padding:12px 10px;margin:9px 0 0;border-radius:18px}
 .how-regional{font-size:11px;line-height:1.35;margin:10px 0}
 .region-section h2{font-size:clamp(25px,6.8vw,30px)}
 .character-card.card-picnic img{top:0;left:-9px;width:206px;height:314px;max-width:none;position:absolute;margin:0}
 .character-card.card-picnic .character-name{position:absolute;top:auto;bottom:13px;left:0;right:0;z-index:2;font-size:12px}
 .character-card.card-picnic:hover img{transform:scale(1.025)}
 .modal-copy h2{font-size:35px}
 .modal-copy h3{top:375px;left:0;width:306px;max-width:306px;font-size:17px;margin:0}
 .modal-copy p{top:416px;left:0;width:306px;text-align:center}
 .is-picnic .modal-art{top:108px;left:15px;right:auto;width:325px;height:325px}
 .is-picnic .modal-art img{width:325px;height:325px}
 .final-cta .cta-panel{min-height:342px;align-items:flex-start;padding:28px 21px}
 .final-cta .cta-copy{width:100%;text-align:center}
 .final-cta .cta-copy .eyebrow{font-size:13px}
 .final-cta .cta-copy h2{font-size:clamp(30px,9.3vw,36px);line-height:1.17;margin-top:18px;margin-bottom:32px}
 .final-cta .cta-copy p{font-size:15px;margin:0 auto;max-width:302px}
 .final-cta .cta-copy .btn{top:232px;left:0;width:calc(100vw - 92px);max-width:302px;font-size:14px}
}
@media(max-width:355px){.how-title{font-size:32px}.how-step-1 .how-illustration{width:145px;left:105px}.how-step-2 .how-illustration{width:156px;left:170px}.how-step-3 .how-illustration{width:176px;left:127px}.character-card.card-picnic img{width:188px;height:287px;left:-7px}.final-cta .cta-copy .btn{width:calc(100vw - 74px)}}


/* DEV visual corrections, 2026-10-14 */
.final-cta .cta-panel{position:relative;isolation:isolate}
.final-cta .cta-package{position:absolute;right:32px;bottom:14px;width:260px;height:260px;object-fit:contain;z-index:1;pointer-events:none;filter:drop-shadow(0 10px 12px rgba(46,0,14,.22));transform:rotate(-5deg)}
.final-cta .cta-copy{position:relative;z-index:2;max-width:calc(100% - 295px)}
.is-picnic #modal-tagline{font-size:19px;line-height:1.35;letter-spacing:-.15px;max-width:270px;overflow:visible;white-space:normal;word-break:normal}
@media(max-width:740px){
 .final-cta .cta-copy{max-width:100%;z-index:2}
 .final-cta .cta-package{width:128px;height:128px;right:2px;bottom:-5px;opacity:.94;z-index:1}
 .is-picnic #modal-tagline{font-size:17px;max-width:306px;width:306px}
}
