/* «Квест за подарком»: новогодний бумажный коллаж. Текст на листочках написан от руки, служебный текст простой. */
@font-face{font-family:Prata;src:url(wf/Prata.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Great Vibes';src:url(wf/GreatVibes.woff2) format('woff2');font-display:swap}
@font-face{font-family:Neucha;src:url(wf/Neucha.woff2) format('woff2');font-display:swap}
@font-face{font-family:Caveat;src:url(wf/Caveat.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Roboto;src:url(wf/Roboto-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Roboto;src:url(wf/Roboto-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Roboto;src:url(wf/Roboto-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --wine:#7B0F1F;--wine-d:#5A0A16;--forest:#1D4A38;--forest-d:#143528;--cream:#FFF7E6;--paper:#F3EFE6;
  --ink:#2B2024;--soft:#5B4F50;--pen:#22317F;--gold:#E7B75A;--berry:#C2182B;--line:rgba(34,49,127,.16);
  --serif:Prata,Georgia,serif;--script:'Great Vibes',cursive;--hand:Neucha,'Comic Sans MS',cursive;--pen-f:Caveat,cursive;--sans:Roboto,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html{overflow-x:hidden}
body{font:400 17px/1.55 var(--sans);color:var(--ink);background:var(--forest-d);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
ul{list-style:none}
[hidden]{display:none!important}
.wrap{width:min(1240px,100%);margin:0 auto;padding:0 32px;position:relative}
.ico{display:inline-block;flex:none;width:1.25em;height:1.25em;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.deco{position:absolute;pointer-events:none;user-select:none}
.clip{position:absolute;width:30px;top:-22px;left:30px;z-index:3;pointer-events:none}

/* секции и рваные края */
.sec,footer{position:relative;overflow-x:clip}
.how{overflow:visible;z-index:2}
.wine,.forest{color:var(--cream)}
.wine{background:radial-gradient(60% 40% at 50% 55%,#8E1628 0,transparent 100%),var(--wine)}
.forest{background:var(--forest)}
.paper{background:var(--paper) url(art/paper.webp) center/cover}
.tear{position:absolute;left:50%;transform:translateX(-50%);width:max(100%,1200px);max-width:none;height:clamp(84px,9vw,150px);object-fit:cover;pointer-events:none;z-index:4}
.make .tear.below{display:none}
.paper-open .make .tear.below{display:block}
.tear.above{bottom:calc(100% - 1px);object-position:center bottom}
.tear.below{top:calc(100% - 1px);object-position:center top}
.garland{position:absolute;left:0;width:100%;max-width:none;height:clamp(150px,13.5vw,240px);object-fit:cover;z-index:6;pointer-events:none;filter:drop-shadow(0 8px 10px rgba(30,10,10,.32))}

/* заголовки */
.head{text-align:center;margin-bottom:64px}
.head.left{text-align:left;margin-bottom:30px}
h2{font:400 clamp(38px,4.6vw,62px)/1.12 var(--serif);color:var(--wine)}
h2 em{font:400 1.32em/1 var(--script);color:var(--gold);padding:0 .08em}
.head.light h2{color:var(--cream)}
.sub{font:700 clamp(25px,2.4vw,32px)/1.15 var(--pen-f);color:var(--forest);margin-top:12px}
.head.light .sub{color:var(--gold)}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:19px 38px;border:0;border-radius:999px;background:var(--cream);color:var(--wine);font:700 18px/1 var(--sans);text-decoration:none;cursor:pointer;box-shadow:0 5px 0 #C9B48A,0 16px 26px rgba(30,4,10,.34);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 #C9B48A,0 20px 30px rgba(30,4,10,.36)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #C9B48A}
.btn:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn.wine{background:var(--berry);color:#fff;box-shadow:0 5px 0 var(--wine-d),0 16px 24px rgba(90,10,22,.28)}
.btn.wine:hover{box-shadow:0 7px 0 var(--wine-d),0 20px 28px rgba(90,10,22,.3)}
.btn.small{padding:14px 24px;font-size:16px}
.btn.off{opacity:.45;cursor:not-allowed}

/* листочки: всё, что на бумаге, написано от руки */
.note{position:relative;background:#FFFBF0 url(art/note.webp) center/cover;color:var(--pen);font:400 clamp(20px,1.7vw,23px)/1.42 var(--hand);border-radius:3px;box-shadow:0 2px 3px rgba(40,20,20,.18),0 16px 30px rgba(40,10,14,.3)}
.note .to{font-size:1.14em;color:var(--wine)}
.note .sig{font:700 1.36em/1.1 var(--pen-f);text-align:right;color:var(--wine)}
.lined{background-image:repeating-linear-gradient(180deg,transparent 0 calc(var(--lh) - 1px),var(--line) calc(var(--lh) - 1px) var(--lh)),url(art/note.webp);background-size:auto,cover;background-position:0 var(--top,18px),center;line-height:var(--lh)}
.rcard{padding:26px 24px 20px}
.rcard::before{content:"";position:absolute;inset:9px;border:1.5px dashed rgba(123,15,31,.42);border-radius:5px;pointer-events:none}
.rcard .no{font:700 1.3em/1 var(--pen-f);color:var(--berry);margin-bottom:10px}
.rcard p{color:var(--pen)}
.rcard .go{font:700 1.18em/1.1 var(--pen-f);color:var(--forest);margin-top:12px}
.tape{position:absolute;top:-15px;left:50%;width:118px;height:30px;margin-left:-59px;transform:rotate(-3deg);z-index:2;opacity:.94;background:repeating-linear-gradient(-45deg,#1f6a4b 0 9px,#f7efdc 9px 18px);clip-path:polygon(0 0,3% 16%,0 32%,3% 48%,0 64%,3% 80%,0 100%,100% 100%,97% 84%,100% 68%,97% 52%,100% 36%,97% 20%,100% 0);box-shadow:0 2px 4px rgba(0,0,0,.2)}
.tape.gold{background:repeating-linear-gradient(90deg,#e7b75a 0 10px,#fbeec6 10px 20px)}
.tape.plaid{background:url(art/plaid.webp) center/170px;width:170px;margin-left:-85px;height:36px;top:-18px}

/* первый экран */
.hero{background:var(--wine-d) url(art/hero-bg.webp) center/cover;color:var(--cream);padding-bottom:128px}
.lights{position:absolute;top:-34px;left:50%;transform:translateX(-50%);width:max(100%,1300px);max-width:none;pointer-events:none;z-index:1}
.snow::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background-image:radial-gradient(2px 2px at 40px 60px,#fff,transparent),radial-gradient(1.6px 1.6px at 190px 140px,#fff,transparent),radial-gradient(2.4px 2.4px at 300px 40px,#fff,transparent),radial-gradient(1.5px 1.5px at 120px 260px,#fff,transparent),radial-gradient(2px 2px at 270px 300px,#fff,transparent);background-size:360px 360px;opacity:.5;animation:fall 26s linear infinite}
@keyframes fall{from{background-position:0 0}to{background-position:60px 360px}}
.top{display:flex;align-items:center;gap:36px;padding-top:64px;z-index:5}
.logo{display:flex;align-items:center;gap:10px;font:400 25px/1 var(--serif);color:var(--cream);text-decoration:none;margin-right:auto}
.logo img{width:40px}
nav{display:flex;gap:30px}
nav a{font:500 16px/1 var(--sans);color:var(--cream);text-decoration:none;opacity:.88}
nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:48px;align-items:center;padding-top:30px;padding-bottom:40px;z-index:3}
.eyebrow{font:700 clamp(24px,2.1vw,29px)/1.15 var(--pen-f);color:var(--gold);margin-bottom:20px}
h1{font:400 clamp(70px,8.8vw,132px)/.98 var(--serif);color:var(--cream);text-shadow:0 6px 24px rgba(30,0,8,.45)}
h1 em{display:block;font:400 clamp(66px,8vw,122px)/1.06 var(--script);color:var(--gold);margin-left:.1em}
.lead{font:400 clamp(18px,1.5vw,21px)/1.5 var(--sans);max-width:520px;margin:20px 0 30px}
.cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cta-note{font:700 25px/1.08 var(--pen-f);color:var(--gold);max-width:210px}
.facts{display:flex;gap:10px 24px;flex-wrap:wrap;margin-top:34px;font:500 15.5px/1.2 var(--sans)}
.facts li{display:flex;align-items:center;gap:8px}
.facts .ico{color:var(--gold)}

/* коллаж первого экрана: всё считается от ширины блока */
.stage{position:relative;container-type:inline-size;aspect-ratio:1/1.1;z-index:2}
.stage .note{font-size:clamp(13.5px,3.5cqw,21.5px);position:absolute}
.s-sprig1{left:-11%;top:-5%;width:58%;transform:rotate(-10deg);filter:drop-shadow(0 12px 12px rgba(20,0,5,.42))}
.s-sprig2{right:-13%;top:34%;width:50%;transform:rotate(172deg);filter:drop-shadow(0 12px 12px rgba(20,0,5,.42))}
.h-letter{left:5%;top:4%;width:68%;--lh:1.72em;--top:1em;padding:1em 1.5em 1.2em 1.7em;transform:rotate(-2.4deg);z-index:2}
.h-letter .clip{width:6.5%;left:auto;right:7%;top:-9%}
.s-stamp{right:2%;top:2%;width:20%;transform:rotate(7deg);z-index:3;filter:drop-shadow(0 6px 8px rgba(20,0,5,.4))}
.s-ball{right:3%;top:27%;width:17%;transform:rotate(9deg);z-index:3;filter:drop-shadow(0 10px 10px rgba(20,0,5,.42))}
.h-c1{right:0;top:55%;width:47%;transform:rotate(3deg);z-index:4;padding:1.5em 1.3em 1.1em}
.h-c2{left:1%;top:60%;width:47%;transform:rotate(-3.5deg);z-index:5;padding:1.5em 1.3em 1.1em}
.s-seal{left:40%;top:49%;width:13%;transform:rotate(-12deg);z-index:6;filter:drop-shadow(0 6px 7px rgba(20,0,5,.45))}
.s-berries{right:2%;bottom:-13%;width:16%;z-index:6;filter:drop-shadow(0 8px 9px rgba(20,0,5,.42))}

/* как это работает */
.how{padding:170px 0 180px}
.how .garland{top:0;transform:translateY(-50%)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.step{position:relative;background:#FFFBF0 url(art/note.webp) center/cover;padding:30px 28px 34px;box-shadow:0 2px 3px rgba(40,20,20,.14),0 18px 32px rgba(70,40,30,.2);color:var(--pen);font:400 20.5px/1.38 var(--hand)}
.step:nth-child(1){transform:rotate(-1.4deg)}
.step:nth-child(2){transform:rotate(1deg) translateY(16px)}
.step:nth-child(3){transform:rotate(-.8deg)}
.step .n{display:block;font:400 54px/1 var(--serif);color:var(--berry);margin-top:20px}
.step h3{font:700 33px/1.05 var(--pen-f);color:var(--wine);margin:2px 0 8px}
.pic{height:190px;border-radius:3px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.tags{background:var(--wine);flex-wrap:wrap;gap:9px;padding:18px;align-content:center}
.tags span{background:#FFFBF0;color:var(--pen);padding:7px 14px;font:400 19px/1 var(--hand);border-radius:3px;box-shadow:0 3px 6px rgba(0,0,0,.28)}
.tags span:nth-child(odd){transform:rotate(-2deg)}
.tags span:nth-child(even){transform:rotate(2deg)}
.sheets{background:var(--forest)}
.sheets span{position:absolute;width:104px;height:138px;background:#FFFBF0;box-shadow:0 8px 14px rgba(0,0,0,.34);color:var(--wine);font:700 21px/1 var(--pen-f);padding-top:16px;text-align:center}
.sheets span:nth-child(1){transform:translateX(-82px) rotate(-9deg)}
.sheets span:nth-child(2){transform:translateY(-2px) rotate(1deg);z-index:1}
.sheets span:nth-child(3){transform:translateX(82px) rotate(9deg)}
.quote{background:var(--gold);padding:18px;color:var(--ink);font:700 33px/1.1 var(--pen-f);text-align:center}
.quote q{quotes:"«" "»"}

/* сборка квеста */
.make{padding:110px 0 190px}
.gen{position:relative;max-width:960px;margin:0 auto}
.g-wreath{left:-175px;top:-120px;width:300px;z-index:0;filter:drop-shadow(0 12px 14px rgba(0,0,0,.35))}
.g-ball{right:-92px;top:80px;width:118px;transform:rotate(8deg);z-index:0;filter:drop-shadow(0 10px 12px rgba(0,0,0,.35))}
.form-sheet{position:relative;z-index:2;background:#FFFBF0 url(art/note.webp) center/cover;color:var(--ink);padding:48px 56px 44px;box-shadow:0 26px 46px rgba(0,0,0,.34);border-radius:4px}
.q{font:400 clamp(24px,2.3vw,30px)/1.2 var(--serif);color:var(--wine);margin-bottom:16px}
.who{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.who button,.ages button{font:400 21px/1 var(--hand);padding:13px 20px;border-radius:6px;border:1.5px solid #D8C9A8;background:#fff;color:var(--pen);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.who button:hover,.ages button:hover,.place:hover{border-color:var(--berry)}
.who button.on,.ages button.on{background:var(--wine);border-color:var(--wine);color:#fff}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-bottom:36px}
.field label{display:block;font:500 15px/1.2 var(--sans);color:var(--soft);margin-bottom:8px}
.namebox{width:100%;font:400 30px/1.2 var(--hand);color:var(--pen);background:transparent;border:0;border-bottom:2px solid var(--pen);padding:5px 2px 7px;border-radius:0;outline-offset:6px}
.namebox::placeholder{color:rgba(34,49,127,.3)}
.ages{display:flex;gap:9px}
.hint{font:400 16px/1.45 var(--sans);color:var(--soft);margin:-8px 0 18px}
.places{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:26px}
.place{position:relative;display:flex;align-items:center;gap:9px;min-height:56px;padding:9px 12px;border:1.5px solid #D8C9A8;border-radius:6px;background:#fff;color:var(--pen);font:400 19px/1.08 var(--hand);cursor:pointer;user-select:none;transition:background .15s,border-color .15s}
.place .ico{color:var(--berry);width:23px;height:23px}
.place.on{background:#FBE9E2;border-color:var(--berry)}
.place .num{position:absolute;right:-7px;top:-9px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--berry);color:#fff;font:700 14px/1 var(--sans);box-shadow:0 2px 5px rgba(0,0,0,.28)}
.place.own{border-style:dashed;justify-content:center;color:var(--soft)}
.gen-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cnt{font:700 26px/1.1 var(--pen-f);color:var(--forest)}

/* предпросмотр и покупка */
.ready{padding:150px 0 200px}
.ready-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:center}
.deck{display:grid;grid-template-columns:1fr 1fr;gap:30px 26px;align-items:start}
.d-letter{--lh:1.72em;--top:1.1em;padding:1.1em 1.4em 1.3em 1.5em;transform:rotate(-1.3deg);min-height:100%}
.deck-cards{display:grid;gap:30px}
.d1{transform:rotate(1.2deg)}
.d2{transform:rotate(-1deg)}
.locked{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:16px 20px;color:var(--soft);font-size:19px;box-shadow:0 8px 16px rgba(60,30,20,.14)}
.locked .ico{color:var(--wine);width:26px;height:26px}
.prep{grid-column:1/-1;background:var(--gold);color:var(--ink);padding:24px 26px 22px;box-shadow:0 12px 22px rgba(70,40,10,.24);transform:rotate(-.4deg)}
.prep h3{font:400 clamp(23px,2.2vw,29px)/1.2 var(--serif);color:var(--wine-d);margin-bottom:12px}
.prep ul{display:grid;gap:9px;font:500 16.5px/1.38 var(--sans)}
.prep li{display:flex;gap:11px;align-items:flex-start}
.prep .ico{color:var(--wine-d);margin-top:1px}
.demo{display:flex;align-items:center;gap:18px;margin-top:18px}
.demo .btn{flex:none}
.demo-msg{font:400 14.5px/1.4 var(--sans)}
.pdf-help{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;font:500 15px/1.4 var(--sans)}
.pdf-help p{flex-basis:100%}
.btn.ghost{background:#fff;color:var(--wine);border:1.5px solid var(--wine);box-shadow:none;padding:12px 18px;font-size:15px}
.btn.ghost:hover{transform:none;box-shadow:none;background:#FBE9E2}
.inapp{margin-top:12px;font:700 15px/1.4 var(--sans);color:var(--wine-d)}
.agree{display:flex;gap:11px;align-items:flex-start;margin-bottom:16px;font:500 15.5px/1.35 var(--sans);cursor:pointer;border-radius:5px;padding:9px 10px;margin-left:-10px;margin-right:-10px}
.agree input{flex:none;width:21px;height:21px;margin-top:1px;accent-color:var(--gold)}
.agree.need{background:rgba(231,183,90,.28);outline:2px solid var(--gold)}
.keep{display:grid;gap:10px;background:#FBF1DC;border-radius:5px;padding:14px 16px;font:400 15.5px/1.4 var(--sans);color:var(--ink);justify-items:start}
.ord{font:500 16px/1.3 var(--sans)}
.ord b{font-weight:700;color:var(--wine)}
.done-form textarea{font:400 21px/1.3 var(--hand);color:var(--pen);padding:11px 14px;border:1.5px solid #D8C9A8;border-radius:6px;background:#fff;width:100%;resize:vertical}
.done-form label small{font-weight:400}
.resume{position:relative;z-index:5;background:var(--gold);color:var(--ink);font:500 15.5px/1.3 var(--sans);text-align:center;padding:10px 16px}
.resume a{color:var(--wine-d);font-weight:700}
.buy-wrap{position:relative}
.envelope{position:absolute;inset:-16px -14px 24px 34px;background:var(--wine);transform:rotate(5deg);box-shadow:0 12px 26px rgba(60,10,10,.3)}
.buy{position:relative;background:var(--forest);color:var(--cream);padding:42px 36px 32px;box-shadow:0 20px 36px rgba(20,30,20,.34)}
.buy .clip{left:auto;right:36px;width:32px}
.buy h2{color:var(--cream);font-size:clamp(34px,3.2vw,44px)}
.buy h2 em{display:block;margin-left:.1em}
.buy ul{display:grid;gap:11px;margin:18px 0 20px;font:500 16.5px/1.32 var(--sans)}
.buy li{display:flex;gap:11px;align-items:flex-start}
.buy li .ico{color:var(--gold);margin-top:1px}
.price{font:400 48px/1 var(--serif);color:var(--gold);margin-bottom:18px}
.buy .btn{width:100%}
.fine{font:400 14.5px/1.45 var(--sans);opacity:.85;margin-top:18px;text-align:center}

.done{padding:150px 0 200px}
.done-box{position:relative;max-width:580px;margin:0 auto;background:#FFFBF0 url(art/note.webp) center/cover;padding:48px 44px 40px;text-align:center;box-shadow:0 20px 36px rgba(70,40,30,.24)}
.done-box h2 em{color:var(--berry)}
.done-msg{font:400 22px/1.35 var(--hand);color:var(--pen);margin:12px 0 22px}
.done-form{display:grid;gap:16px;text-align:left}
.done-form label{display:grid;gap:7px;font:500 15px/1.2 var(--sans);color:var(--soft)}
.done-form input,.done-form select{font:400 23px/1.2 var(--hand);color:var(--pen);padding:12px 14px;border:1.5px solid #D8C9A8;border-radius:6px;background:#fff;width:100%}
.done-own{display:grid;gap:16px}
.done-get{margin-top:6px}
.done .fine{color:var(--soft);opacity:1}

/* почему работает */
.why{padding:120px 0 190px}
.tips{display:grid;grid-template-columns:repeat(3,1fr);gap:46px 34px}
.tips article{position:relative;filter:drop-shadow(0 12px 14px rgba(30,0,8,.38))}
.tips article::before{content:"";position:absolute;inset:0;background:#FFFBF0 url(art/note.webp) center/cover;clip-path:polygon(0 0,100% 0,100% 94%,96% 97%,90% 94%,84% 98%,77% 95%,70% 99%,63% 95%,56% 98%,48% 94%,41% 98%,34% 95%,27% 99%,20% 95%,13% 98%,7% 94%,0 97%)}
.tips article:nth-child(odd){transform:rotate(-1deg)}
.tips article:nth-child(even){transform:rotate(1.1deg)}
.tips h3,.tips p{position:relative}
.tips h3{font:700 33px/1.05 var(--pen-f);color:var(--wine);padding:30px 56px 6px 26px}
.tips p{font:400 20.5px/1.36 var(--hand);color:var(--pen);padding:0 26px 40px}
.tips .clip{left:auto;right:26px;top:-20px;width:26px}

/* вопросы */
.faq{padding:120px 0 210px}
.faq-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:64px;align-items:center}
.qa{display:grid;gap:12px}
details{border:1px solid rgba(255,247,230,.42);border-radius:5px;background:rgba(10,30,22,.2)}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;font:500 18px/1.3 var(--sans);cursor:pointer}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--berry);color:#fff;font:500 21px/1 var(--sans)}
details[open] summary::after{content:"–"}
details p{padding:0 20px 18px;font:400 16.5px/1.5 var(--sans);color:rgba(255,247,230,.9)}
.faq-art{position:relative;min-height:400px;container-type:inline-size}
.f-note{position:absolute;left:0;top:16%;width:64%;padding:1.5em 1.5em 1.3em;transform:rotate(-3deg);z-index:2;color:var(--pen)}
.f-note a{color:var(--wine);word-break:break-all}
.f-berries{right:-8%;top:-10%;width:36%;z-index:3;filter:drop-shadow(0 10px 12px rgba(0,0,0,.36))}
.f-ginger{right:4%;bottom:-2%;width:30%;transform:rotate(7deg);z-index:3;filter:drop-shadow(0 10px 12px rgba(0,0,0,.36))}

/* подвал */
footer{position:relative;background:var(--forest-d) url(art/plaid.webp) 0 0/230px;padding:120px 0 74px;color:var(--ink)}
footer .garland{top:-74px}
.foot-card{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr);gap:44px;align-items:center;background:#FFFBF0 url(art/note.webp) center/cover;padding:38px 46px;width:min(1176px,calc(100% - 64px));box-shadow:0 20px 40px rgba(0,0,0,.42)}
.foot-wreath{width:190px}
.foot-logo{font:400 32px/1.1 var(--serif);color:var(--wine)}
.foot-hand{font:700 27px/1.1 var(--pen-f);color:var(--forest);margin:5px 0 18px}
.foot-info{font:400 15.5px/1.5 var(--sans);color:var(--soft);display:grid;gap:9px}
.foot-info a{color:var(--wine)}
.links{display:flex;flex-wrap:wrap;gap:4px 18px}
.copy{font-size:14px}

/* нижняя кнопка на телефоне */
.sticky{display:none}

@media (max-width:1320px){.g-wreath,.g-ball{display:none}}
@media (max-width:1020px){
  nav{display:none}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:26px}
  .stage{max-width:620px;width:100%;margin:26px auto 40px}
  .s-sprig1{top:0;left:-7%}
  .steps{grid-template-columns:1fr;max-width:560px;margin:0 auto;gap:52px}
  .step:nth-child(2){transform:rotate(1deg)}
  .ready-grid,.faq-grid{grid-template-columns:minmax(0,1fr)}
  .buy-wrap{max-width:520px;width:100%;margin:0 auto}
  .tips{grid-template-columns:1fr 1fr}
  .foot-card{grid-template-columns:auto minmax(0,1fr);gap:26px 30px}
  .foot-info{grid-column:1/-1}
  .faq-art{max-width:460px;width:100%;margin:0 auto}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .wrap{padding:0 16px}
  .top{padding-top:46px;gap:12px}
  .logo{font-size:21px}
  .logo img{width:32px}
  .top .btn{display:none}
  .hero{padding-bottom:74px}
  .hero-grid{padding-top:34px}
  .h-letter .clip{display:none}
  .stage{aspect-ratio:auto;display:flex;flex-direction:column;margin:22px auto 26px;padding-bottom:6px}
  .stage .note{position:relative;left:auto;right:auto;top:auto;font-size:18.5px}
  .h-letter{width:94%;transform:rotate(-1.5deg)}
  .h-c1{width:80%;align-self:flex-end;margin-top:30px;transform:rotate(2deg);padding:1.5em 1.3em 1.1em}
  .h-c2,.s-stamp,.s-ball{display:none}
  .s-sprig1{top:-6px;left:-16%;width:52%}
  .s-sprig2{top:auto;bottom:6%;right:auto;left:-26%;width:52%;transform:rotate(-30deg)}
  .s-seal{left:auto;right:3%;top:-14px;width:54px;z-index:3}
  .s-berries{left:-1%;right:auto;bottom:-5px;width:17%}
  .cta{flex-direction:column;align-items:stretch;gap:14px}
  .cta .btn{width:100%}
  .cta-note{max-width:none;text-align:center}
  .facts{gap:8px 16px;font-size:14.5px}
  .how{padding:110px 0 130px}
  .head{margin-bottom:44px}
  .make{padding:70px 0 120px}
  .form-sheet{padding:34px 18px 28px}
  .who button{flex:1 1 30%;padding:13px 8px;font-size:20px}
  .row2{grid-template-columns:1fr;gap:22px}
  .ages{display:grid;grid-template-columns:repeat(3,1fr)}
  .ages button{padding:13px 4px}
  .places{grid-template-columns:1fr 1fr}
  .place{font-size:18px;padding:8px 10px}
  .gen-foot .btn{width:100%}
  .ready,.done{padding:90px 0 130px}
  .deck{grid-template-columns:minmax(0,1fr)}
  .prep{padding:20px 18px}
  .demo{flex-direction:column;align-items:stretch;gap:10px}
  .d-letter{min-height:0}
  .envelope{inset:-10px -4px 20px 20px}
  .buy{padding:38px 22px 26px}
  .why{padding:70px 0 130px}
  .tips{grid-template-columns:1fr;gap:38px}
  .faq{padding:70px 0 140px}
  .faq-grid{gap:44px}
  summary{padding:14px 16px;font-size:17px}
  footer{padding:90px 0 110px}
  footer .garland{top:-50px}
  .foot-card{width:calc(100% - 28px);padding:28px 20px;grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center}
  .foot-wreath{width:150px}
  .foot-info{justify-items:center}
  .links{justify-content:center}
  .sticky{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:40;align-items:center;justify-content:space-between;gap:12px;background:var(--forest-d);color:var(--cream);border-radius:999px;padding:8px 8px 8px 20px;box-shadow:0 12px 30px rgba(0,0,0,.4);transition:transform .25s ease}
  .sticky.away{transform:translateY(150%)}
  .sticky b{font:400 21px/1 var(--serif);color:var(--gold)}
  .sticky small{display:block;font:500 11.5px/1.2 var(--sans);opacity:.8;margin-top:3px}
  .sticky .btn{box-shadow:none;padding:13px 17px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .snow::after{animation:none}
  .btn{transition:none}
}