@font-face{font-family:Story;src:local('Georgia')}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-snap-type:y proximity}@media(hover:hover) and (pointer:fine){html{scroll-snap-type:none}}section[id],#main{scroll-margin-top:28px}body{margin:0;background:#faf7f0;color:#2d463d;font:16px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}button{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #bd8e4e;outline-offset:5px}button{color:inherit}img{display:block;max-width:100%}.wrap{width:min(1200px,calc(100% - 100px));margin-inline:auto}.header{height:112px;display:flex;align-items:center;justify-content:space-between;gap:32px}.logo{display:flex;align-items:center;font-family:Georgia,serif;font-size:29px;line-height:1;letter-spacing:-1px;white-space:nowrap}.logo-star{font-size:48px;color:#aa8548;margin-right:9px;line-height:1}.logo-caption{display:block;font:10px/1.4 -apple-system,sans-serif;text-transform:uppercase;letter-spacing:1.4px;margin-top:9px;color:#7c8273}.header nav{display:flex;gap:32px;font-size:15px}.header nav a:hover,.text-link:hover{color:#aa763d}.hero{position:relative;min-height:660px;overflow:hidden;background:#f7f1e6}.hero-art{position:absolute;right:0;top:0;width:80%;height:100%;object-fit:cover;object-position:right 53%}.hero-wash{position:absolute;inset:0;background:linear-gradient(90deg,#faf7f0 0%,#faf7f0f7 24%,#faf7f099 39%,transparent 60%)}.hero-inner{position:relative;min-height:660px;display:flex;align-items:center}.hero-copy{padding:38px 0 66px;width:630px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:2.4px;font-weight:600;color:#8c7955;margin:0 0 22px;display:block}.hero .eyebrow{display:flex;align-items:center;gap:10px}.eyebrow>span{width:6px;height:6px;background:#ad8c4e;border-radius:50%}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:400}h1{font-size:clamp(45px,4.6vw,67px);line-height:1.13;letter-spacing:-2.5px;margin-bottom:26px}em{font-weight:400;color:#a78245}h2{font-size:43px;line-height:1.2;letter-spacing:-1.2px;margin-bottom:20px}h3{font-size:24px;line-height:1.3;letter-spacing:-.4px;margin-bottom:13px}.intro{font-size:17px;line-height:1.9;color:#68736a;margin-bottom:30px}.actions{display:flex;align-items:center;gap:25px}.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;background:#365747;border:1px solid #365747;color:#fffaf0;padding:16px 24px;border-radius:6px;font-size:15px;transition:background .2s,transform .2s;min-height:48px}.button:hover{background:#254435;transform:translateY(-2px)}.button span{font-size:18px}.text-link{display:inline-flex;align-items:center;gap:9px;font-size:14px}.play-outline{border:1px solid #a6afa0;border-radius:50%;width:28px;height:28px;display:grid;place-items:center}.hero-note{margin-top:35px;font-size:13px;color:#8a8c78;display:flex;align-items:center;gap:10px}.hero-note span{font-size:24px;color:#b3965e}.image-note{position:absolute;right:55px;bottom:25px;font:italic 18px Georgia;color:#fef9e9;text-shadow:0 1px 9px #284237}.image-note span{font-size:28px;margin-left:10px}.ribbon{display:flex;flex-wrap:wrap;row-gap:10px;justify-content:center;gap:65px;padding:24px 25px;border-top:1px solid #e5ddcc;border-bottom:1px solid #e5ddcc;color:#77806d;font-size:13px;letter-spacing:.35px;background:#f5f1e7}.section{padding-top:96px;padding-bottom:96px}.section-heading{text-align:center;margin-bottom:48px}.section-heading p:not(.eyebrow){color:#81867b;font-size:16px}.section-heading .eyebrow{margin-bottom:15px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.feature-picture{height:270px;border-radius:120px 120px 7px 7px;overflow:hidden;position:relative;margin-bottom:25px;background:#eee6d5}.feature-picture img{width:100%;height:100%;object-fit:cover}.lera-picture img{object-position:50% 8%}.family-picture img{object-position:80% 50%}.feature-number{font-size:11px;letter-spacing:1.8px;color:#a68c63;display:block;margin-bottom:11px}.feature h3{font-size:23px}.feature p{font-size:15px;color:#7c8277;line-height:1.8;margin-bottom:0}.example{background:#223e38;color:#f5f0df;position:relative;overflow:hidden}.example:after{content:'✧';position:absolute;right:4%;top:30px;font-size:90px;color:#bb9a5c33;pointer-events:none}.example .eyebrow{color:#c7b581}.example h2{font-size:47px}.example em{color:#d4b779}.light-button{background:#eee6ce;border-color:#eee6ce;color:#284638}.light-button:hover{background:#dfd0ac}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;position:relative}.steps:before{content:'';position:absolute;left:25px;right:25px;top:26px;border-top:1px dashed #ccc7b5}.steps article{position:relative}.step-number{display:grid;place-items:center;border:1px solid #dcd8c5;border-radius:50%;background:#faf7f0;width:53px;height:53px;margin-bottom:22px;font:italic 26px Georgia;color:#a5864c;box-shadow:0 0 0 9px #faf7f0}.steps h3{font-size:24px}.steps p{font-size:15px;color:#7c8277;line-height:1.8}.about{max-width:800px;text-align:center;padding-bottom:83px}.about-star{font-size:57px;color:#b29962;display:block;margin-bottom:18px}.about h2{font-size:40px}.about>p:not(.eyebrow){max-width:610px;margin:0 auto 19px;font-size:16px;line-height:1.9;color:#7c8277}.signature{font:italic 20px Georgia;color:#a38955;display:block;margin-top:30px}.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}.questions details{border-bottom:1px solid #e1dfd2}.questions summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-size:15px;cursor:pointer;gap:18px}.questions summary::-webkit-details-marker{display:none}.questions summary span{font-size:23px;color:#a69269;font-weight:300}.questions details[open] summary span{transform:rotate(45deg)}.questions details p{font-size:14px;color:#7a8476;padding-right:30px;line-height:1.9}.contact{text-align:center;background:#f0eddf;padding:65px 25px 60px;position:relative;overflow:hidden}.contact:before,.contact:after{content:'✧';position:absolute;color:#b59a6333;font-size:240px;top:15%;left:6%;transform:rotate(-15deg)}.contact:after{left:auto;right:8%;font-size:160px;top:32%}.contact>*{position:relative;z-index:1}.contact-stars{font-size:42px;color:#b99b5f;margin-bottom:13px}.contact .eyebrow{font-size:11px}.contact h2{font-size:49px}.contact p:not(.eyebrow){font-size:16px;color:#7f8575;margin-bottom:26px}.contact-note{font:italic 15px Georgia;display:block;color:#92917a;margin-top:23px}.footer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:35px;padding-bottom:35px}.footer .logo{font-size:24px}.footer .logo-star{font-size:36px}.footer .logo-caption{font-size:9px}.footer p,.footer>span{font-size:12px;color:#919585;margin:0}dialog{background:#faf7f0;border:1px solid #d8decb;border-radius:18px;color:#304a3d;width:min(500px,calc(100% - 32px));padding:40px;box-shadow:0 25px 100px #172b3655;max-height:90vh}dialog::backdrop{background:#182e2cc4;backdrop-filter:blur(5px)}dialog h2{font-size:35px}dialog>p:not(.eyebrow){font-size:15px;color:#7e8576}.close-dialog{position:absolute;top:27px;right:28px;display:grid;width:40px;height:40px;place-items:center;padding:0;background:none;border:0;font-size:30px;line-height:1}dialog .eyebrow{margin-bottom:10px}dialog h2{margin-bottom:0}dialog h2:focus{outline:none}.close-dialog:hover{color:#a78245}.skip{position:fixed;top:-80px;z-index:10;background:#fff;padding:10px}.skip:focus{top:0}
@media(min-width:1500px){.hero-art{width:76%}.hero,.hero-inner{min-height:740px}}@media(max-width:1100px){.wrap{width:calc(100% - 60px)}.header nav{gap:18px;font-size:13px}.logo{font-size:25px}.hero-art{width:95%}.hero-wash{background:linear-gradient(90deg,#faf7f0 0%,#faf7f0e8 26%,#faf7f05c 52%,transparent 75%)}.hero-copy{width:530px}.ribbon{gap:28px;font-size:12px}.feature-picture{height:230px}.feature h3{font-size:20px}.steps{gap:25px}.footer>span{display:none}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header{height:85px;gap:12px}.header nav{display:none}.logo{font-size:24px}.logo-caption{font-size:8px;letter-spacing:1px}.logo-star{font-size:39px;margin-right:5px}.hero,.hero-inner{min-height:820px}.hero-inner{align-items:flex-start}.hero-art{width:100%;height:490px;top:auto;bottom:0;object-position:70% 50%}.hero-wash{background:linear-gradient(180deg,#faf7f0 0%,#faf7f0 34%,#faf7f000 64%)}.hero-copy{width:100%;padding:35px 0 0}.hero .eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:19px}h1{font-size:46px;line-height:1.12;letter-spacing:-1.8px;margin-bottom:20px}.intro{font-size:13px;line-height:1.8;max-width:350px}.desktop{display:none}.actions{gap:17px;flex-wrap:wrap}.button{font-size:13px;padding:14px 20px;gap:12px}.text-link{font-size:11px}.hero-note,.text-link{color:#6b4e2b}.hero-note{margin-top:19px;font-size:10px;text-shadow:0 0 8px #faf7f0,0 0 2px #faf7f0}.hero-note span{color:inherit}.image-note{bottom:20px;right:20px;font-size:15px}.ribbon{display:grid;grid-template-columns:1fr 1fr;gap:13px 18px;padding:21px 20px;font-size:11px;text-align:center}.section{padding-top:63px;padding-bottom:63px}h2{font-size:34px}.section-heading{margin-bottom:33px}.section-heading p:not(.eyebrow){font-size:12px}.eyebrow{font-size:10px;letter-spacing:1.8px}.feature-grid{gap:32px;grid-template-columns:1fr}.feature{display:grid;grid-template-columns:125px 1fr;column-gap:20px}.feature-picture{grid-row:1/4;height:175px;margin:0;border-radius:65px 65px 5px 5px}.family-picture img{object-position:100% 50%}.dacha-picture img{object-position:25% 50%}.feature-number{margin:12px 0 8px;font-size:10px;letter-spacing:1px}.feature h3{font-size:21px;margin-bottom:10px}.feature p{font-size:12px;line-height:1.65}.example h2{font-size:37px}.steps{grid-template-columns:1fr 1fr;gap:30px 25px}.steps:before{display:none}.step-number{width:43px;height:43px;font-size:22px;margin-bottom:18px}.steps h3{font-size:23px}.steps p{font-size:12px;margin:0}.about h2{font-size:32px}.about>p:not(.eyebrow){font-size:13px}.about-star{font-size:40px}.signature{font-size:18px}.faq{grid-template-columns:1fr;gap:15px}.faq h2 br{display:none}.questions summary{font-size:12px;line-height:1.6}.contact{padding:45px 20px}.contact h2{font-size:39px}.contact .eyebrow{font-size:10px;letter-spacing:1.1px}.contact:before{font-size:150px;left:-40px}.contact:after{font-size:110px;right:-35px;top:60%}.footer{flex-direction:column;gap:19px;padding-block:28px}dialog{padding:33px 25px}.close-dialog{top:19px;right:13px}dialog h2{font-size:31px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}


@media(max-width:760px){h1{font-size:40px;line-height:1.15}.hero-wash{background:linear-gradient(180deg,#faf7f0 0%,#faf7f0 36%,#faf7f000 64%)}}

/* One story, three formats. */
.formats{padding:64px 0 18px}.formats-heading{max-width:900px;margin:0 auto 36px;text-align:center}.formats-heading h2{font-size:48px}.formats-heading>p:last-child{color:#c0cebf;line-height:1.85;margin:0 auto;max-width:610px}.format-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.format-tabs button{text-align:left;border:1px solid #ffffff26;border-radius:10px 10px 0 0;padding:18px 21px;background:#ffffff05;color:#e4e8db;font-size:15px;line-height:1.5}.format-tabs button>span{display:block;font-size:11px;letter-spacing:1px;color:#c6b687;margin-bottom:6px}.format-tabs button[aria-selected=true]{background:#f0eddf;color:#284638;border-color:#f0eddf}.format-tabs button[aria-selected=true]>span{color:#79653b}.format-tabs button:hover{border-color:#d4b779}.format-panel{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;grid-template-areas:"copy media" "cta media";align-items:center;gap:28px 60px;padding:42px;background:#ffffff05;border:1px solid #ffffff26;border-radius:0 0 12px 12px;min-height:510px}.format-copy{grid-area:copy;align-self:start;max-width:440px}.format-panel>.button{grid-area:cta;justify-self:start}.format-media{grid-area:media}.format-copy .eyebrow{font-size:10px;margin-bottom:16px}.format-copy h3{font-size:35px;line-height:1.2;margin-bottom:20px}.format-copy>p{font-size:14px;color:#c0cebf;line-height:1.8}.format-copy .format-detail{font-size:13px;color:#b3c2b4;margin:23px 0}.format-media{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}.digital-preview{padding-top:10px}.preview-caption{font-size:11px;color:#b4c3b2;text-align:center;line-height:1.6}
@media(max-width:1000px){.format-panel{gap:24px 30px;padding:30px}.format-tabs button{padding:16px 13px;font-size:13px}.format-copy h3{font-size:30px}}
@media(max-width:760px){.formats{padding:44px 0 14px}.formats-heading h2{font-size:36px}.formats-heading>p:last-child{font-size:13px}.formats-heading .eyebrow{font-size:9px}.format-tabs{gap:5px}.format-tabs button{padding:12px 8px;font-size:11px;border-radius:7px 7px 0 0}.format-tabs button>span{font-size:9px;letter-spacing:0;line-height:1.4}.format-panel{grid-template-columns:1fr;padding:27px 20px;gap:35px;min-height:0}.format-copy{max-width:none}.format-copy h3{font-size:30px}.format-copy>p{font-size:13px}.format-media{padding:10px 0 0;gap:24px}}

.paper-photos{position:relative;width:100%;max-width:540px}.photo-strip{display:flex;gap:14px;width:100%;aspect-ratio:1.45;overflow:hidden;border-radius:12px;touch-action:pan-y}.photo-strip figure{flex:0 0 100%;margin:0;overflow:hidden;border-radius:12px;box-shadow:0 18px 45px #08202b66;transform:translateX(calc(var(--photo,0) * (-100% - 14px)));transition:transform .45s ease}.photo-strip.is-jumping figure{transition:none}.photo-strip img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}.strip-nav{position:absolute;top:50%;transform:translateY(-50%);display:grid;width:38px;height:38px;place-items:center;padding:0;border:1px solid #f8ebd538;border-radius:50%;color:#fdf6e6;background:#0b1d1866;font-size:20px;line-height:1;opacity:.65;transition:opacity .2s,background .2s;backdrop-filter:blur(6px)}.strip-nav:hover{opacity:1;background:#0b1d18a6}.strip-nav--prev{left:12px}.strip-nav--next{right:12px}.preview-caption{display:block;margin-top:12px}

.film-preview{width:100%;max-width:540px;gap:0}.film-frame{position:relative;width:100%}.film-video{display:block;width:100%;aspect-ratio:3/2;border-radius:12px;background:#0b1d18;box-shadow:0 18px 45px #08202b66;object-fit:cover}

.personal{padding-top:70px;padding-bottom:70px}.personal .section-heading{margin-bottom:34px}.personal .feature-picture{height:225px;margin-bottom:18px}@media(max-width:760px){.personal{padding-top:48px;padding-bottom:48px}.personal .section-heading{margin-bottom:26px}.personal .feature-picture{height:158px}}

/* Письмо выходит из вертикального конверта слева направо. */
.about{position:relative;isolation:isolate;max-width:1180px;padding:28px 0;margin-inline:auto;border:0;border-radius:0;background:none;text-align:center}
.about:after{position:absolute;right:4%;bottom:4px;left:12%;z-index:-1;height:55px;border-radius:50%;content:'';background:#324a3c24;filter:blur(22px)}
.about-letter{position:relative;z-index:1;width:100%;min-height:560px;padding:48px 56px 44px;overflow:hidden;border:1px solid #e0dccf;border-radius:8px 15px 15px 8px;background-color:#f8f4e9;background-image:radial-gradient(circle at 16% 18%,#ffffffbd,transparent 27%),repeating-linear-gradient(12deg,#65584308 0 1px,transparent 1px 5px);box-shadow:0 20px 42px #35493d20,inset 0 0 0 1px #ffffff9e;transform:rotate(-.15deg)}
.about-letter:before{position:absolute;inset:12px;content:'';pointer-events:none;border:1px solid #bca77920;border-radius:5px 10px 10px 5px}
.about-letter>*{position:relative;z-index:1}
.about-intro{display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:center;gap:42px}
.about-heading{text-align:center}
.about-heading .about-star{margin-bottom:12px}
.about-heading .eyebrow{margin-bottom:15px}
.about-heading h2{margin-bottom:0}
.about-body{max-width:760px;margin:28px auto 0;text-align:center}
.about-body p{margin:0 auto 17px;color:#7c8277;font-size:15px;line-height:1.85}
.about-body .signature{margin-top:26px}
.about-portrait{width:260px;margin:0;transform:translateX(clamp(-134px,calc(139.6px - 19vw),-60px)) rotate(1.2deg)}
.about-portrait img{width:100%;aspect-ratio:1;object-fit:cover;border:0;border-radius:0;background:transparent;box-shadow:none;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 72% 74% at 50% 48%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 72% 74% at 50% 48%,#000 62%,transparent 100%)}







@media(max-width:1000px) and (min-width:761px){.about{padding:25px 0}.about-letter{width:100%;min-height:520px;padding:42px 40px 40px}.about-intro{grid-template-columns:minmax(0,1fr) 190px;gap:25px}.about h2{font-size:34px}.about-body{margin-top:24px}.about-body p{font-size:14px}.about-portrait{width:190px;transform:translateX(-24px) rotate(1.2deg)}}
@media(max-width:760px){.about{padding:10px 0}.about-letter{width:100%;min-height:0;padding:30px 20px 36px;border-radius:8px}.about-letter:before{inset:8px}.about-intro{grid-template-columns:1fr;gap:14px}.about-heading{grid-row:2}.about-heading .eyebrow{margin-bottom:12px}.about h2{font-size:29px}.about-portrait{grid-row:1;width:min(100%,180px);margin:0 auto;transform:none}.about-body{margin-top:22px}.about-body p{font-size:13px;line-height:1.8}.about-star{font-size:36px;margin-bottom:10px}.signature{font-size:17px}}

.format-panel{background:#f0eddf;border-color:#f0eddf;color:#2b4438}.format-panel .eyebrow{color:#84703f}.format-panel h3{color:#25402f}.format-panel h3 em{color:#a3762f}.format-copy>p{color:#4e5f4d}.format-copy .format-detail{color:#6d7a68}.format-panel .preview-caption{color:#7b8574}.format-panel .light-button{background:#2f5142;border-color:#2f5142;color:#fdf7e8}.format-panel .light-button:hover{background:#22412f}

/* Планшет с первым разворотом электронной сказки. */
.tablet-preview{position:relative;display:block;width:min(100%,540px);padding:4px;transform:rotate(-2deg);transition:transform .4s ease;filter:drop-shadow(0 24px 22px #17271f45)}
.tablet-preview:hover{transform:rotate(0) translateY(-5px)}
.media-prompt{position:absolute;top:-44px;left:-30px;z-index:6;display:flex;white-space:nowrap;align-items:flex-start;gap:4px;color:#a3762f;font:italic 24px/1 'Segoe Print','Chalkboard SE','Bradley Hand','Comic Sans MS',cursive;letter-spacing:.02em;pointer-events:none;text-shadow:0 1px #fffaf0;transform:rotate(-4deg)}
.media-prompt svg{width:88px;height:54px;margin-top:1px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tablet-body{position:relative;display:block;padding:16px 19px;border:1px solid #7c817d;border-radius:28px;background:linear-gradient(145deg,#3e4541,#171b19 52%,#353b38);box-shadow:inset 0 1px 1px #ffffff42,inset 0 -1px 2px #0000008f,0 5px 0 #111512}
.tablet-screen{position:relative;display:block;aspect-ratio:1.5;overflow:hidden;border:1px solid #080a09;border-radius:12px;background:#c9ded4;box-shadow:0 0 0 1px #ffffff17,inset 0 0 15px #00000024}
.tablet-spread{display:block;width:100%;height:100%;object-fit:cover}











.tablet-screen-gloss{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(118deg,#ffffff1f,transparent 19% 76%,#ffffff0d);box-shadow:inset 0 0 10px #0000001f}
.tablet-camera{position:absolute;top:50%;left:6px;width:5px;height:5px;border-radius:50%;background:#090b0a;box-shadow:inset 0 0 0 1px #61716a,0 0 4px #80a48a38;transform:translateY(-50%)}
.tablet-side-button{position:absolute;top:28%;right:-3px;width:3px;height:17%;border-radius:0 3px 3px 0;background:#242a27;box-shadow:1px 0 #666c68}
@media(max-width:760px){.tablet-preview{width:min(100%,440px)}.paper-photos{max-width:440px}.film-preview{max-width:440px}.media-prompt{top:-36px;left:2px;font-size:19px}.media-prompt svg{width:72px;height:45px}.tablet-body{padding:11px 14px;border-radius:21px}.tablet-screen{border-radius:8px}.tablet-camera{left:4px;width:4px;height:4px}}

@media(max-width:760px){.about-intro{grid-template-columns:minmax(0,1fr) 112px;gap:12px;align-items:center}.about-heading{grid-row:auto;text-align:center}.about-portrait{grid-row:auto;width:112px;margin:0;transform:translateX(-4px) rotate(1.2deg)}.about-star{font-size:26px;margin-bottom:8px}.about-heading .eyebrow{font-size:8px;letter-spacing:1.2px;margin-bottom:9px}.about h2{font-size:22px;letter-spacing:-.6px}}

/* Плашка заказа догоняет читателя при прокрутке. */.order-dock{position:fixed;right:26px;bottom:26px;z-index:40;display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .35s ease,transform .35s ease}.order-dock.is-visible{opacity:1;transform:none;pointer-events:auto}.order-float{display:flex;align-items:center;gap:12px;padding:13px 20px 13px 16px;border:1px solid #2c4a3b;border-radius:999px;background:#365747;color:#fffaf0;text-align:left;box-shadow:0 14px 34px #16281f4d;transition:background .2s}.order-float:hover{background:#254435}.order-float__star{font-size:22px;color:#e8c580;line-height:1}.order-float__text{display:flex;flex-direction:column;gap:2px;font-size:15px;line-height:1.2}.order-float__text small{color:#c9d6c6;font-size:11px;letter-spacing:.02em}@media(max-width:760px){.order-dock{right:14px;left:14px;bottom:14px;gap:8px}.order-float{flex:1;justify-content:center;padding:11px 16px}.order-float__text{font-size:14px}.order-float__text small{font-size:10px}}@media(prefers-reduced-motion:reduce){.order-dock{transition:none}}

.messengers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0 0}.messenger{display:flex;flex-direction:column;align-items:center;gap:9px;padding:20px 14px;border:1px solid #dbe0d2;border-radius:10px;background:#fffcf5;color:#304a3d}.messenger__icon{display:grid;width:46px;height:46px;place-items:center;border-radius:50%;background:#eef1e8;color:#365747}.messenger__icon svg{width:24px;height:24px;fill:currentColor}.messenger__icon--max{font:600 19px Georgia,serif}.messenger__name{font-size:14px}

.footer{flex-wrap:wrap}
a.messenger{transition:border-color .2s,transform .2s}a.messenger:hover{border-color:#bd8e4e;transform:translateY(-2px)}
/* Форматы: страницу листают вниз — панели едут вбок (сдвиг задаёт landing.js через --pos). Блок = (число остановок --stops,
   из landing.js: панели + по одной на каждое фото бумажной книги) × высота закреплённой части; .format-stops — остановки
   scroll-snap: флик встаёт на следующей, не пролетает. Остановки действуют только на тач-устройствах: с мышью/тачпадом snap
   выключен (html выше) — Chrome после каждой серии щелчков колеса тянул страницу назад к остановке, и медленная прокрутка
   не двигалась вовсе; блоки при этом остаются закреплёнными, сцены и шаги меняются по прокрутке. */.formats{overflow:visible}.formats-scroll{position:relative;height:calc(var(--stops,5) * 100vh);height:calc(var(--stops,5) * 100svh)}.formats-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center}.format-stops{position:absolute;inset:0;pointer-events:none}.format-stops span{display:block;height:100vh;height:100svh;scroll-snap-align:start;scroll-snap-stop:always}.format-viewport{overflow:hidden}.format-track{display:flex;gap:24px;transform:translateX(calc(var(--pos,0) * (-100% - 24px)));transition:transform .9s cubic-bezier(.65,0,.35,1);will-change:transform}.format-track>.format-panel{flex:0 0 100%}
@media(max-width:760px){.formats-sticky{justify-content:flex-start;padding:18px 0 20px}.format-tabs button{padding:10px 8px;line-height:1.35}.format-tabs button>span{display:none}.format-viewport{flex:1;min-height:0}.format-track{height:100%}.format-track>.format-panel{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:22px 18px 18px}.format-copy h3{font-size:25px;margin-bottom:12px}.format-copy>p{margin-bottom:10px}.format-copy .format-detail{margin:0 0 12px}.format-track>.format-panel>.button{align-self:flex-start}.format-media{flex:1;min-height:0;padding:24px 0 0;container-type:size}.tablet-preview{width:min(100%,440px,(100cqh - 20px) * 1.5)}.paper-photos{width:min(100%,100cqh * 1.45)}.film-frame{width:min(100%,(100cqh - 50px) * 3 / 2)}}
/* Компактные виды на телефоне — по реальной высоте закреплённой части (container query), а не по @media (height): Safari и
   Chrome на Android считают высоту для @media по-разному (с панелями браузера или без), а 100svh у всех «малая». До 720 px
   (iPhone 16/16e в Safari ≈ 660, типичный Android ≈ 650–700) — без второго абзаца, иначе медиа сжимается до марки; до 600 — ещё теснее. */
@media(max-width:760px){.formats-sticky{container:formats / size}}
@container formats (max-height:720px){.format-copy .format-detail{display:none}.format-copy h3{font-size:23px;margin-bottom:10px}.format-track>.format-panel{gap:14px;padding:20px 18px 16px}.format-media{padding-top:30px}.format-panel .preview-caption{display:none}.film-frame{width:min(100%,(100cqh - 6px) * 3 / 2)}}
@container formats (max-height:600px){.format-track>.format-panel{gap:12px;padding:16px 16px 14px}.format-copy .eyebrow{display:none}.format-copy h3{font-size:22px;margin-bottom:8px}.format-copy>p{font-size:12px;line-height:1.6}}
/* Низкий экран (телефон боком, зум, маленькое окно): панель целиком не помещается в закреплённые 100svh — блок не закрепляем,
   остановок нет, панели переключают вкладки. Те же пороги — в formatsPinned в landing.js. */@media(min-width:761px) and (max-height:640px),(max-width:760px) and (max-height:560px){.formats-scroll{height:auto}.formats-sticky{position:static;height:auto;container-type:normal}.format-stops{display:none}.format-media{flex:none;container-type:normal}}

/* Касание на телефоне не оставляет «наведённое» состояние: карточка в окне и кнопки не залипают. */@media(hover:none){.button:hover,a.messenger:hover{transform:none}a.messenger:hover{border-color:#dbe0d2}.format-tabs button:hover{border-color:#ffffff26}.format-tabs button[aria-selected=true]:hover{border-color:#f0eddf}}
/* Подсказки «Нажми / Полистай / Посмотри» время от времени дважды кивают к картинке — как палец, который показывает, куда нажать. */@keyframes prompt-nudge{0%,62%,100%{translate:0 0}70%,86%{translate:5px 4px}78%{translate:0 0}}.media-prompt{animation:prompt-nudge 3.2s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.media-prompt{animation:none}}
/* «Как рождается волшебство»: блок закреплён, как форматы, — четыре остановки scroll-snap (.how-stops), по одной на шаг:
   блок = 4 × высота закреплённой части. Шаги проявляются по одному (scroll-driven animation, без JS) по пути блока через экран
   (cover: 0 % — блок входит снизу, 100 % — ушёл сверху; закреплён с 20 % до 80 %, остановки на 20/40/60/80 %): шаг 1 — 12–20 %
   (пока блок встаёт), 2 — 26–34 %, 3 — 46–54 %, 4 — 66–74 %. Без поддержки animation-timeline (Firefox) шаги видны сразу. */
.how-scroll{position:relative;height:400vh;height:400svh}.how-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:safe center}.how-stops{position:absolute;inset:0;pointer-events:none}.how-stops span{display:block;height:100vh;height:100svh;scroll-snap-align:start;scroll-snap-stop:always}
@supports (animation-timeline:view()){.how-scroll{view-timeline:--how block}.steps article{animation:step-in linear both;animation-timeline:--how;animation-range:cover 12% cover 20%}.steps article:nth-child(2){animation-range:cover 26% cover 34%}.steps article:nth-child(3){animation-range:cover 46% cover 54%}.steps article:nth-child(4){animation-range:cover 66% cover 74%}@keyframes step-in{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}}
@media(prefers-reduced-motion:reduce){.steps article{animation:none}}
/* Низкий экран (сетка шагов 2×2 с заголовком не помещается в экран ниже ~680 px; на десктопе — ниже 640): не закрепляем,
   остановок нет, шаги видны сразу, отступы секции как у обычной. */@media(min-width:761px) and (max-height:640px),(max-width:760px) and (max-height:680px){.how-scroll{height:auto}.how-sticky{position:static;height:auto;padding:64px 0}.how-stops{display:none}.steps article{animation:none}}
/* Телефон обычной высоты (в Safari 100svh ≈ 660–720 px из-за панелей браузера, а media query видит полную высоту): закреплённые
   заголовок + сетка 2×2 (~790 px) не влезают — без вводного абзаца и с тесными зазорами (~580 px). Полный вид — от 800 px высоты закреплённой части (container query ниже). */
@media(max-width:760px){.how-sticky{container:how / size}}
@container how (max-height:800px){.how-sticky .section-heading{margin-bottom:22px}.how-sticky .section-heading p:not(.eyebrow){display:none}.how-sticky .steps{gap:18px 20px}.how-sticky .step-number{margin-bottom:12px}.how-sticky .steps h3{font-size:21px;margin-bottom:8px}}
@container how (max-height:640px){.how-sticky .section-heading{margin-bottom:14px}.how-sticky h2{font-size:28px;margin-bottom:0}.how-sticky .steps{gap:12px 18px}.how-sticky .step-number{width:36px;height:36px;font-size:19px;margin-bottom:8px}.how-sticky .steps h3{font-size:19px;margin-bottom:5px}.how-sticky .steps p{font-size:11.5px;line-height:1.55}}
@media(min-width:761px) and (max-height:640px),(max-width:760px) and (max-height:680px){.how-sticky{container-type:normal}}
/* «Включи звук» — кнопка-подсказка в углу мультика: он запускается без звука, а кнопка звука в родном плеере мелкая и в разных
   браузерах в разных углах. Покачивается, как «Посмотри»; JS показывает её, пока мультик играет без звука, клик включает звук. */
.sound-prompt{position:absolute;top:12px;right:12px;z-index:6;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 11px;border:1px solid #f8ebd538;border-radius:999px;color:#fdf6e6;background:#0b1d1899;font:italic 18px/1 'Segoe Print','Chalkboard SE','Bradley Hand','Comic Sans MS',cursive;letter-spacing:.02em;text-shadow:0 1px 2px #0b1d18;cursor:pointer;backdrop-filter:blur(6px);animation:prompt-nudge 3.2s ease-in-out infinite}.sound-prompt[hidden]{display:none}.sound-prompt svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.sound-prompt:hover{background:#0b1d18cc}}@media(max-width:760px){.sound-prompt{top:8px;right:8px;padding:8px 12px 8px 10px;font-size:15px}.sound-prompt svg{width:19px;height:19px}}@media(prefers-reduced-motion:reduce){.sound-prompt{animation:none}}
/* Фото бумажной книги: точки под лентой — какое из трёх фото открыто; на телефоне стрелки крупнее (46 px — цель для пальца) и не бледные. */
.strip-dots{display:flex;justify-content:center;gap:8px;margin-top:-14px}.strip-dots i{width:7px;height:7px;border-radius:50%;background:#2b443833;transition:background .2s,transform .2s}.strip-dots i.is-active{background:#a3762f;transform:scale(1.3)}
@media(max-width:760px){.strip-nav{width:46px;height:46px;font-size:26px;opacity:.92}.strip-nav--prev{left:8px}.strip-nav--next{right:8px}.strip-dots{margin-top:-8px}}
/* Соцсети — в подвале и под кнопкой заказа. Значки как иконки приложений на телефоне, чтобы узнавались сразу. */
.socials{display:flex;gap:8px}.socials a{display:block;width:33px;height:33px;border-radius:24%;overflow:hidden;box-shadow:0 1px 4px #2d463d2e;transition:transform .2s}.socials svg{display:block;width:100%;height:100%}@media(hover:hover){.socials a:hover{transform:translateY(-2px)}}.socials a{background:#365747}.socials path{fill:#fffaf0}.socials .yt path+path{fill:#365747}.socials .rt path:first-child{fill:#bd8e4e}
.header nav{margin-left:auto}.header .socials{display:flex;gap:8px;margin-left:0}.header .socials a{width:30px;height:30px}@media(max-width:760px){.header .socials{gap:6px}.header .socials a{width:26px;height:26px}.header .logo-caption{white-space:normal;text-wrap:balance}}