/* First-screen extension. Real covers and pages remain separate from the UI. */
.hero.hero-products { grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:20px; min-height:680px; padding-top:48px; padding-bottom:24px; }
.hero-products h1 { font-size:clamp(3.3rem,5.2vw,5.1rem); letter-spacing:-.04em; line-height:1.12; margin-top:0; }
.hero-products .hero-copy { padding-bottom:30px; position:relative; z-index:2; }
.hero-products .hero-description { max-width:440px; margin-top:27px; font-size:1.125rem; line-height:1.65; }
.hero-products .hero-actions { gap:14px; margin-top:29px; }
.hero-products .hero-actions .button { min-height:56px; padding:15px 20px; }
.hero-products .button-outline { background:transparent; color:var(--green); border-color:#809484; }
.hero-products .button-outline:hover { background:#e9eee2; }
.hero-formats { color:var(--muted); font-size:.8125rem; letter-spacing:.08em; margin-top:22px; }
.hero-formats span { display:inline-block; margin-inline:10px; color:#936b3e; }
.hero-products .hero-visual { height:570px; width:100%; margin:0; overflow:visible; }
.hero-products .hero-visual::before { content:none; }
.product-stage { position:absolute; top:0; left:0; width:640px; height:570px; zoom:var(--scene-scale,.85); }
.product-stage::after { content:''; position:absolute; z-index:0; bottom:27px; left:15px; width:610px; height:32px; background:#25402c20; filter:blur(20px); border-radius:50%; pointer-events:none; }
.product-tablet { position:absolute; z-index:1; left:8px; top:116px; width:273px; height:400px; padding:12px 11px; background:linear-gradient(145deg,#89908e,#202627 20%,#121718 73%,#60696a); border:1px solid #87918c; border-radius:24px; box-shadow:inset 0 0 0 3px #141a19,7px 20px 28px -16px #12291f80; transform:perspective(1300px) rotateY(8deg) rotateZ(-5deg); transition:transform 650ms cubic-bezier(.2,.8,.2,1); }
.tablet-screen { height:100%; background:#fff; overflow:hidden; border-radius:14px; border:1px solid #d3d7ce; }
.tablet-screen img { width:100%; height:100%; object-fit:contain; }
.tablet-camera { position:absolute; width:5px; height:5px; border-radius:50%; background:#495452; top:5px; left:50%; }
.product-book { position:absolute; z-index:3; left:245px; top:27px; width:285px; height:427.5px; transform:perspective(1400px) rotateY(-13deg) rotateZ(-2deg); transform-origin:50% 95%; filter:drop-shadow(12px 25px 16px #1835253d); transition:transform 700ms cubic-bezier(.2,.8,.2,1); }
.book-cover { position:absolute; z-index:2; width:100%; height:100%; object-fit:cover; object-position:50% 50%; background:transparent; border-radius:1px 2px 2px 1px; }
.book-fold { position:absolute; z-index:3; inset:0; background:linear-gradient(90deg,#00160c26 0%,#ffffff08 1%,#0000 3%,#0000 98%,#00180c1a 100%); border-radius:inherit; pointer-events:none; }
.book-pages { position:absolute; z-index:1; width:40px; height:calc(100% - 4px); right:-40px; top:3px; transform:skewY(13deg); transform-origin:left top; border-top:1px solid #dad5c6; border-bottom:2px solid #b5b4a2; border-right:1px solid #c2c1ad; border-radius:0 2px 2px 0; background:repeating-linear-gradient(90deg,#e9e5d8 0px,#faf8ed 1px,#e4e0d2 1.6px,#f5f2e8 2.3px); box-shadow:inset 4px 0 7px #163e3130; }
.product-book::after { content:''; position:absolute; z-index:0; left:100%; top:3px; width:41px; height:calc(100% - 3px); background:#163c2c; transform:skewY(13deg); transform-origin:left top; border-radius:0 2px 3px 0; }
.product-phone.device { --phone-scale:.375; --bezel:6px; position:absolute; z-index:4; left:453px; top:207px; right:auto; width:calc(390px * var(--phone-scale) + 12px); height:calc(867px * var(--phone-scale) + 12px); padding:6px; transform:rotate(3deg); border-radius:25px; box-shadow:inset 0 0 0 1px #a0aaa1,inset 0 0 0 3px #111914,8px 22px 24px -13px #122c3e70; }
.product-phone .device-screen { width:calc(390px * var(--phone-scale)); height:calc(867px * var(--phone-scale)); --screen-radius:19px; border-radius:19px; }
.product-phone.device::after { border-width:4px; border-radius:22px; }
.product-phone .phone-glass { border-radius:19px; }
.product-caption { position:absolute; top:555px; left:0; width:640px; text-align:center; color:var(--muted); font-size:12px; letter-spacing:.045em; }
.product-caption .caption-dot { margin-inline:10px; }
.hero-products .hero-visual:hover .product-tablet { transform:perspective(1300px) rotateY(6deg) rotateZ(-4deg) translateY(-3px); }
.hero-products .hero-visual:hover .product-book { transform:perspective(1400px) rotateY(-10deg) rotateZ(-1.5deg) translateY(-4px); }
.product-benefits { grid-template-columns:repeat(3,minmax(0,1fr)); padding-block:22px; }
.product-benefits>div { justify-content:flex-start; gap:13px; }
.product-benefits svg { width:27px; height:27px; color:#4c7054; }
.product-benefits strong { display:block; font-family:var(--serif); font-size:1.05rem; font-weight:400; letter-spacing:-.02em; color:var(--ink); }
.product-benefits small { display:block; font-size:.8125rem; color:var(--muted); margin-top:2px; }
.book-formats { display:grid; grid-template-columns:.9fr 2.1fr; gap:28px; align-items:center; padding-top:28px; padding-bottom:30px; border-bottom:1px solid var(--line); scroll-margin-top:105px; }
.book-formats h2 { font-size:1.65rem; letter-spacing:-.035em; }
.book-format-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.book-format-link { display:flex; flex-direction:column; justify-content:center; text-decoration:none; padding:8px 20px; border-left:1px solid var(--line); min-height:75px; transition:background 200ms ease; }
.book-format-link strong { display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--serif); font-size:1.08rem; font-weight:400; line-height:1.35; }
.book-format-link svg { width:17px; height:17px; transition:transform 200ms ease; }
.book-format-link small { display:block; color:var(--muted); font-size:.8125rem; line-height:1.45; margin-top:5px; }
.book-format-link:hover { background:#eaf0e3; }
.book-format-link:hover svg { transform:translateX(3px); }
.book-format-link:last-child strong { color:#365b3d; }
.hero-products ~ .app-section { padding-top:80px; }
@media(min-width:1400px) { .hero.hero-products { gap:36px; } }
@media(max-width:1150px) { .hero.hero-products { gap:12px; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); min-height:580px; padding-top:38px; } .hero-products h1 { font-size:clamp(3.1rem,5.4vw,4.3rem); } .hero-products .hero-actions .button { padding:14px 16px; font-size:.9375rem; } .hero-products .hero-visual { height:470px; } .site-nav a { padding-inline:9px; } .book-formats { grid-template-columns:.8fr 2.2fr; gap:14px; } .book-format-link { padding-inline:14px; } .product-caption { font-size:13px; } }
@media(max-width:900px) and (min-width:701px) { .hero.hero-products { grid-template-columns:1fr; gap:0; padding-top:45px; } .hero-products .hero-copy { max-width:600px; } .hero-products h1 { font-size:4.1rem; } .hero-products .hero-visual { width:min(640px,100%); margin-inline:auto; height:570px; } .hero-products .hero-description { max-width:490px; } .hero-products .hero-actions { margin-top:24px; } .site-nav { gap:2px; } .brand { font-size:1rem; } .header-inner { gap:10px; } .site-nav a { padding-inline:8px; font-size:.875rem; } .book-formats { grid-template-columns:1fr; gap:15px; } .book-format-link:first-child { border-left:0; padding-left:0; } }
@media(max-width:700px) { .hero.hero-products { grid-template-columns:1fr; padding-top:31px; padding-bottom:14px; gap:5px; min-height:0; } .hero-products .hero-copy { padding-bottom:20px; } .hero-products h1 { font-size:clamp(2.75rem,11.6vw,4rem); margin-top:0; line-height:1.13; } .hero-products h1 br:nth-of-type(2) { display:initial; } .hero-products h1 em::before { content:none; } .hero-products .hero-description { font-size:1.0625rem; margin-top:22px; max-width:430px; } .hero-products .hero-actions { flex-direction:row; flex-wrap:wrap; gap:10px; margin-top:23px; } .hero-products .hero-actions .button { min-height:52px; padding:13px 16px; font-size:.9375rem; } .hero-formats { margin-top:19px; font-size:.75rem; letter-spacing:.07em; } .hero-products .hero-visual { margin:0 auto; width:100%; height:330px; } .product-phone.device { --bezel:6px; } .product-benefits { grid-template-columns:1fr; gap:17px; padding-block:25px; } .product-benefits>div { gap:15px; } .product-benefits strong { font-size:1.08rem; } .product-benefits small { font-size:.875rem; } .book-formats { grid-template-columns:1fr; padding-block:25px; gap:18px; } .book-formats h2 { font-size:1.7rem; } .book-format-links { grid-template-columns:1fr; } .book-format-link { min-height:76px; padding:14px 0; border-left:0; border-top:1px solid var(--line); } .book-format-link:first-child { border-top:0; padding-top:0; } .book-format-link strong { font-size:1.12rem; } .book-format-link small { font-size:.875rem; } .hero-products ~ .app-section { padding-top:58px; } .product-caption { font-size:20px; letter-spacing:0; } }
@media(prefers-reduced-motion:reduce) { .product-book,.product-tablet,.book-format-link,.book-format-link svg { transition:none; } .hero-products .hero-visual:hover .product-book { transform:perspective(1400px) rotateY(-13deg) rotateZ(-2deg); } .hero-products .hero-visual:hover .product-tablet { transform:perspective(1300px) rotateY(8deg) rotateZ(-5deg); } }

/* Shared paperback geometry: page depth projects 40px right and 9.24px down. */
.product-book::before { content:''; position:absolute; z-index:1; left:0; top:calc(100% - 1px); width:calc(100% + 40px); height:9.24px; clip-path:polygon(0 0,calc(100% - 40px) 0,100% 100%,40px 100%); background:repeating-linear-gradient(0deg,#cbc7b7 0px,#efecdf .7px,#d8d4c6 1.3px,#f4f0e5 1.9px); }
.book-back-edge { position:absolute; z-index:0; left:0; top:100%; width:calc(100% + 41px); height:9.47px; clip-path:polygon(0 0,calc(100% - 41px) 0,100% 100%,41px 100%); background:#123e2c; }