.cover{--book-rx:3deg;--book-ry:-9deg;isolation:isolate;padding:clamp(10px,1.2vw,18px);transform:perspective(1450px) rotateX(var(--rx,var(--book-rx))) rotateY(var(--ry,var(--book-ry))) rotateZ(1.2deg);filter:none;transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.cover:after{content:"";position:absolute;pointer-events:none}
.cover:after{inset:0;z-index:3;border:1px solid transparent;background:linear-gradient(115deg,#ffffffd9,#ffe66e 28%,#5ee7ff 55%,transparent 74%) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;clip-path:polygon(0 0,96% 0,100% 4%,100% 96%,96% 100%,4% 100%,0 96%);opacity:.72;filter:drop-shadow(0 0 12px #8befff)}
.cover img{position:relative;z-index:1;box-shadow:7px 5px 0 #edf6ff,13px 10px 0 #9cafcc,22px 19px 0 #08215a,0 32px 65px #00103b8a;clip-path:polygon(.4% 0,100% 0,100% 99.2%,0 100%)}
.cover figcaption{position:relative;z-index:4;margin-top:30px;color:#f3f7ff;text-shadow:0 0 18px #7ceaff}
.cover:hover{transform:perspective(1450px) rotateX(var(--rx,1deg)) rotateY(var(--ry,-2deg)) rotateZ(0) translateY(-8px)}

.values-band{position:relative;isolation:isolate;overflow:hidden;transition:color .5s ease,background-color .5s ease,box-shadow .5s ease}
.values-band:before{content:"";position:absolute;inset:-120% -25%;z-index:-1;background:conic-gradient(from 180deg at var(--band-x,50%) 50%,#003399 0 20%,#ffe600 33%,#fff6a0 40%,#ffd500 48%,#003399 66%);opacity:0;transform:translateX(-20%) rotate(-7deg);transition:opacity .55s ease;animation:mystic-band 4s ease-in-out infinite paused}
.values-band:hover,.values-band:focus-within{color:#08256d;background:#ffe500;box-shadow:0 0 55px #ffe60080,inset 0 0 42px #fff5a0}
.values-band:hover:before,.values-band:focus-within:before{opacity:1;animation-play-state:running}
.values-band:hover i{color:#fff;text-shadow:0 0 8px #fff,0 0 22px #fff19b;transform:rotate(90deg) scale(1.25)}
.values-band i{transition:transform .55s ease,color .4s ease,text-shadow .4s ease}

.pages-impact{isolation:isolate;overflow:hidden}.pages-impact__number{position:relative;display:inline-grid;place-items:start;margin:0 .08em 0 0;padding:0;border:0;color:#ffe500;background:transparent;font:900 1.55em/.72 Arial,sans-serif;letter-spacing:-.07em;vertical-align:-.04em;cursor:pointer;text-shadow:0 5px 0 #916400,0 0 24px #ffe60062;transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s}
.pages-impact__number:before{content:"";position:absolute;inset:-18px -25px;background:linear-gradient(105deg,transparent 25%,#fff 45%,#fff7aa 50%,transparent 72%);transform:translateX(-140%) skewX(-14deg);mix-blend-mode:screen;pointer-events:none}
.pages-impact__number span{position:absolute;left:50%;top:calc(100% + 14px);width:max-content;max-width:180px;padding:7px 10px;color:#062c7d;background:#ffe500;font:900 8px/1.2 Arial,sans-serif;letter-spacing:.14em;opacity:0;transform:translate(-50%,8px);transition:opacity .25s,transform .25s;box-shadow:0 0 24px #ffe6008c}
.pages-impact__number:hover,.pages-impact__number:focus-visible{transform:translateY(-5px) scale(1.08) rotate(-2deg);filter:brightness(1.15);outline:none}
.pages-impact__number:hover:before,.pages-impact__number:focus-visible:before{animation:number-shine 1.15s ease infinite}
.pages-impact__number:hover span,.pages-impact__number:focus-visible span{opacity:1;transform:translate(-50%,0)}
.pages-impact.is-activated{box-shadow:0 0 0 2px #ffe500,0 28px 70px #00113c9c,0 0 55px #ffe6004d!important}

.facts>div{position:relative;min-height:150px;padding:24px 92px 24px 24px;overflow:visible;transition:transform .32s cubic-bezier(.2,.8,.2,1),background .32s,box-shadow .32s}
.facts>div:hover{z-index:2;transform:translateY(-8px);background:#fff;box-shadow:0 24px 55px #082a7030}
.fact-complete{position:absolute;right:18px;top:50%;display:grid;width:66px;aspect-ratio:1;place-items:center;border-radius:18px;background:linear-gradient(145deg,#eaffb7 0%,#8df32f 43%,#16a83c 100%);box-shadow:inset 6px 6px 12px #ffffffaa,inset -7px -8px 13px #087c35aa,0 15px 25px #067b3847,0 0 0 1px #ffffff;opacity:0;transform:translateY(-42%) perspective(300px) rotateY(-42deg) rotateX(18deg) scale(.65);transition:opacity .22s,transform .4s cubic-bezier(.18,.9,.22,1.2)}
.fact-complete:after{content:"";position:absolute;inset:6px;border-radius:14px;background:linear-gradient(115deg,#ffffffae,transparent 42%);mix-blend-mode:screen}
.fact-complete svg{position:relative;z-index:1;width:54px;overflow:visible;filter:drop-shadow(0 4px 2px #08733299)}
.fact-complete path{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:62;stroke-dashoffset:62}
.facts>div:hover .fact-complete{opacity:1;transform:translateY(-50%) perspective(300px) rotateY(-10deg) rotateX(7deg) scale(1)}
.facts>div:hover .fact-complete path{animation:draw-check .42s .12s cubic-bezier(.2,.8,.2,1) forwards}

@keyframes mystic-band{0%,100%{transform:translateX(-22%) rotate(-7deg)}50%{transform:translateX(22%) rotate(7deg)}}
@keyframes number-shine{to{transform:translateX(140%) skewX(-14deg)}}
@keyframes draw-check{to{stroke-dashoffset:0}}
@media(max-width:700px){.cover{padding:8px}.cover:before{transform:translate(10px,10px)}.values-band{padding-block:22px}.pages-impact__number span{display:none}}
@media(prefers-reduced-motion:reduce){.values-band:before,.pages-impact__number:before,.fact-complete path{animation:none!important}.cover{transform:none!important}.pages-impact__number{transition:none}.facts>div:hover .fact-complete path{stroke-dashoffset:0}}

/* Keep the facts inside their grid rather than expanding the mobile canvas. */
html{overflow-x:clip}
body{max-width:100%;overflow-x:clip}
.facts{grid-template-columns:repeat(3,minmax(0,1fr))}
.facts>div{min-width:0}
.facts strong,.facts span{overflow-wrap:anywhere}
.edition-intro>*{min-width:0}
@media(max-width:1050px){
 .facts>div{padding:24px 20px 100px}
 .fact-complete{top:auto;bottom:20px;right:20px;transform:perspective(300px) rotateY(-42deg) scale(.65)}
 .facts>div:hover .fact-complete{transform:perspective(300px) rotateY(-10deg) scale(1)}
}
@media(max-width:700px){
 .facts{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:32px;padding-top:28px}
 .facts>div{min-height:120px;padding:22px 86px 22px 20px}
 .facts strong{font-size:clamp(26px,7vw,36px);line-height:1.15}
 .facts span{font-size:16px;line-height:1.45}
 .fact-complete{width:50px;right:16px;bottom:auto;top:50%;opacity:1;transform:translateY(-50%)}
 .fact-complete svg{width:42px}
 .fact-complete path{stroke-dashoffset:0}
 .facts>div:hover{transform:none}
 .facts>div:hover .fact-complete{transform:translateY(-50%)}
}