/* Thriving Stars - scroll site. Look: "Sunshine" (apricot, coral, teal). */
/* fonts are kept inside the site, so pages load fast and nothing is fetched from Google */
@font-face{font-family:"Baloo 2";font-weight:700;font-display:swap;src:url(../fonts/baloo-2-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-weight:800;font-display:swap;src:url(../fonts/baloo-2-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Mulish";font-weight:400;font-display:swap;src:url(../fonts/mulish-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Mulish";font-weight:700;font-display:swap;src:url(../fonts/mulish-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Mulish";font-weight:800;font-display:swap;src:url(../fonts/mulish-latin-800-normal.woff2) format("woff2")}
:root{
  --paper:#FFF8F1; --apricot:#FFD8C4; --coral:#D2483C; --coral-d:#B4382D;
  --teal:#1F8178; --ink:#2B2340; --muted:#57506E; --sun:#FFE28F; --mint:#C9E9E2;
  --P:min(46vh,24.5vw);                   /* one page of the 3D book */
  --head:"Baloo 2",system-ui,sans-serif; --body:"Mulish",system-ui,sans-serif;
}
@media (max-width:899px){ :root{ --P:min(43vw,26vh); } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.55;overflow-x:hidden}
img{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--head);font-weight:800;line-height:1;margin:0;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}

/* ---------- top bar ---------- */
.top{position:fixed;z-index:20;left:0;right:0;top:0;height:68px;padding:0 max(4vw,18px);display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.top > *{pointer-events:auto}
.top.solid{background:rgba(255,248,241,.94);box-shadow:0 1px 0 rgba(43,35,64,.08);pointer-events:auto}
/* the logo: a smiling star and bouncy letters */
.logo{display:flex;align-items:center;gap:.35rem;font-family:var(--head);font-weight:800;font-size:1.6rem;line-height:1;text-decoration:none;color:var(--ink)}
.logo svg{width:2.5rem;height:2.5rem;flex:none;transform:rotate(-8deg);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.logo:hover svg{transform:rotate(14deg) scale(1.08)}
.logo .w{display:inline-flex;padding-top:.12em}
.logo .w + .w{margin-left:.26em;color:var(--coral)}
.logo .w i{font-style:normal;display:inline-block}
.logo .w i:nth-child(odd){transform:translateY(-.045em) rotate(-4deg)}
.logo .w i:nth-child(even){transform:translateY(.05em) rotate(3deg)}
.nav{display:flex;gap:1.6rem;align-items:center;font-weight:700;font-size:.98rem}
.nav a{text-decoration:none;padding:.35rem 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--coral)}
.nav .pill{background:var(--ink);color:#fff;padding:.5rem 1rem;border-radius:999px;border:0;white-space:nowrap}
.nav .pill:hover{background:var(--teal)}
@media (max-width:1040px){ .nav{gap:1.1rem;font-size:.92rem} }
@media (max-width:899px){ .nav a:not(.pill){display:none} .top{height:60px} .logo{font-size:1.38rem} .logo svg{width:2.15rem;height:2.15rem} }

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--head);font-weight:700;font-size:1.12rem;line-height:1;
  padding:.95rem 1.5rem .85rem;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background-color .15s ease}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.go{background:var(--coral);color:#fff;box-shadow:0 5px 0 var(--coral-d)}
.btn.go:hover{background:#DD5347}
.btn.quiet{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn.quiet:hover{background:var(--sun)}
.btn svg{width:1.05rem;height:1.05rem}

/* ---------- the show: one stage for every featured book ---------- */
.show{position:relative}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background-color:var(--paper);transition:background-color .55s ease;--doodle:var(--coral)}
.sun{position:absolute;left:50%;top:50%;width:calc(var(--P)*2.05);height:calc(var(--P)*2.05);margin:calc(var(--P)*-1.025) 0 0 calc(var(--P)*-1.025);border-radius:50%;background:var(--apricot);will-change:transform,opacity}

/* small playful shapes on the canvas, in the open book's own colour */
.doodles{position:absolute;inset:0;pointer-events:none;color:var(--doodle);transition:color .55s ease}
.doodles svg{position:absolute;width:var(--w,44px);height:var(--w,44px);opacity:.42;animation:float 6s ease-in-out infinite}
.doodles svg:nth-child(2n){animation-duration:7.5s;animation-delay:-2s}
.doodles svg:nth-child(3n){animation-duration:9s;animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-10px) rotate(calc(var(--r,0deg) + 8deg))}}

.scene{position:absolute;inset:0;perspective:2400px;perspective-origin:50% 44%;pointer-events:none}
.rig{position:absolute;left:50%;top:50%;width:var(--P);height:var(--P);margin:calc(var(--P)/-2) 0 0 calc(var(--P)/-2);transform-style:preserve-3d;will-change:transform,opacity;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.book{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.cast{position:absolute;top:-3%;bottom:-6%;right:-4%;left:-4%;background:rgba(43,35,64,.34);filter:blur(calc(var(--P)*.06));transform:translateZ(-2px);border-radius:8px}

.leaf,.board{position:absolute;inset:0;transform-origin:0 50%;transform-style:preserve-3d;will-change:transform}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--pg,#F6F0DB);overflow:hidden}
.face img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.face.bk{transform:translateZ(calc(var(--t)*-1)) rotateY(180deg)}
/* the soft shadow in the fold of the book */
.face::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(43,35,64,.26),rgba(43,35,64,.07) 6%,rgba(43,35,64,0) 17%)}
.face.bk::after{transform:scaleX(-1)}
.sh{position:absolute;inset:0;background:#4A3626;opacity:0;pointer-events:none}
/* hard cover: a little bigger than the pages */
.hard > .face{box-shadow:0 0 0 calc(var(--P)*.013) var(--cover);border-radius:2px}
.hard > .face.ft::after{background:linear-gradient(90deg,rgba(43,35,64,.20),rgba(255,255,255,.16) 3.2%,rgba(43,35,64,.12) 5%,rgba(43,35,64,0) 9%)}
/* edges that give each leaf its thickness */
.e{position:absolute;background-color:#FBF6E6;
  background-image:repeating-linear-gradient(0deg,rgba(43,35,64,.13) 0 1px,transparent 1px 2px)}
.er{left:100%;top:0;width:var(--t);height:100%;transform-origin:0 50%;transform:rotateY(90deg);
  background-image:repeating-linear-gradient(90deg,rgba(43,35,64,.13) 0 1px,transparent 1px 2px)}
.eb{left:0;top:100%;width:100%;height:var(--t);transform-origin:50% 0;transform:rotateX(-90deg)}
.hard > .e{background:var(--cover);background-image:linear-gradient(rgba(43,35,64,.18),rgba(43,35,64,.18))}
/* inside of the cover */
.endpaper{position:absolute;inset:0;background-color:var(--end);
  background-image:radial-gradient(rgba(255,255,255,.22) 12%,transparent 13%);background-size:calc(var(--P)*.09) calc(var(--P)*.09);
  display:flex;align-items:center;justify-content:center}
.plate{width:66%;background:#FFFDF6;border-radius:calc(var(--P)*.03);padding:calc(var(--P)*.06) calc(var(--P)*.05);text-align:center;
  box-shadow:0 0 0 calc(var(--P)*.008) rgba(43,35,64,.9) inset;transform:rotate(-2deg)}
.plate b{display:block;font-family:var(--head);font-weight:800;font-size:calc(var(--P)*.075);line-height:1.02;color:var(--ink)}
.plate span{display:block;margin-top:calc(var(--P)*.03);font-size:calc(var(--P)*.04);font-weight:700;color:var(--muted);line-height:1.2}

/* a plain page that the pop-ups stand on */
.stagepg{position:absolute;inset:0;background-color:var(--stage,var(--pg));
  background-image:radial-gradient(120% 90% at 50% 80%,rgba(255,255,255,.3),rgba(255,255,255,0) 62%),radial-gradient(rgba(255,255,255,.2) 11%,transparent 12%);
  background-size:auto,calc(var(--P)*.11) calc(var(--P)*.11)}
/* pop-ups and paper bits */
.popups{position:absolute;left:-100%;top:0;width:200%;height:100%;transform-style:preserve-3d;pointer-events:none}
.pop{position:absolute;transform-origin:50% 100%;opacity:0;will-change:transform,opacity;max-width:none;
  filter:drop-shadow(0 calc(var(--P)*.012) calc(var(--P)*.02) rgba(43,35,64,.28))}
.cf{position:absolute;left:50%;top:62%;width:calc(var(--P)*.044);height:calc(var(--P)*.025);border-radius:2px;opacity:0;will-change:transform,opacity}

/* more covers peeking out behind the crowd on the first screen */
.peeks{position:absolute;left:50%;top:50%;width:0;height:0;will-change:transform,opacity}
.peeks a{position:absolute;display:block;width:calc(var(--P)*.42);height:calc(var(--P)*.42);margin:calc(var(--P)*-.21) 0 0 calc(var(--P)*-.21);
  left:calc(var(--P)*var(--x));top:calc(var(--P)*var(--y));transform:rotate(var(--r));transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.peeks a:hover{transform:rotate(var(--r)) translateY(-8%)}
.peeks img{display:block;width:100%;height:100%;object-fit:cover;border-radius:3px;box-shadow:0 10px 18px -8px rgba(43,35,64,.5)}

/* words of the first screen */
.intro{position:absolute;z-index:5;left:max(6vw,24px);top:46%;width:min(35rem,42vw);transform:translateY(-50%);will-change:transform,opacity}
.intro .by{font-weight:800;color:var(--teal);font-size:1.02rem;margin-bottom:.8rem}
.intro h1{font-size:clamp(2.5rem,5.1vw,4.5rem);line-height:.96}
.intro h1 em{font-style:normal;color:var(--coral);white-space:nowrap}
.intro .lede{margin-top:1.15rem;font-size:clamp(1.03rem,1.3vw,1.22rem);color:var(--muted);max-width:31rem}
.how{list-style:none;margin:1.35rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem .6rem;counter-reset:how}
.how li{counter-increment:how;display:inline-flex;align-items:center;gap:.5rem;background:#fff;border-radius:999px;padding:.34rem .95rem .34rem .36rem;font-weight:800;font-size:.98rem;box-shadow:0 3px 0 rgba(43,35,64,.10)}
.how li::before{content:counter(how);display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--sun);font-family:var(--head);font-size:1.05rem;padding-top:.1em}
.how li:nth-child(2)::before{background:var(--mint)}
.how li:nth-child(3)::before{background:var(--apricot)}
.how li:nth-child(1){transform:rotate(-1.5deg)} .how li:nth-child(3){transform:rotate(1.5deg)}
.intro .also{margin-top:1.1rem;font-weight:700;color:var(--ink);font-size:1rem}
.intro .also a{font-weight:800;text-underline-offset:.25em;text-decoration-thickness:2px;text-decoration-color:var(--coral)}

/* words beside the open book */
.panel{position:absolute;z-index:5;right:max(4.5vw,28px);top:46%;width:min(27rem,33vw);transform:translateY(-50%) translateX(26px);opacity:0;visibility:hidden;
  transition:opacity .2s ease,transform .3s ease,visibility 0s .2s}
.panel.on{opacity:1;visibility:visible;transform:translateY(-50%);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.9,.3,1.2),visibility 0s}
.need{display:inline-block;background:var(--ink);color:#fff;font-weight:800;font-size:.9rem;padding:.38rem .85rem;border-radius:999px;margin-bottom:.9rem;transform:rotate(-2deg)}
.panel h2{font-size:clamp(2rem,3.5vw,3.2rem)}
.panel .line{margin-top:.75rem;font-weight:800;font-size:1.13rem;color:var(--teal);filter:brightness(.82)}
.panel .about{margin-top:.7rem;color:var(--ink);font-size:1.06rem;max-width:26rem}
.panel .acts{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.8rem}
.panel .acts .short{display:none}
.peekline{margin-top:1.35rem;display:flex;align-items:center;gap:.7rem;font-weight:800;font-size:.98rem}
.peekline button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:.7rem;padding:.35rem .9rem .35rem .5rem;border-radius:999px;background:rgba(255,255,255,.7)}
.peekline button:hover{background:#fff}
.peekline button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.dots{display:inline-flex;gap:.3rem}
.dots i{width:.62rem;height:.62rem;border-radius:50%;background:rgba(43,35,64,.22);transition:background-color .2s,transform .2s}
.dots i.on{background:var(--coral);transform:scale(1.25)}
.peekline svg{width:1.1rem;height:1.1rem;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}

/* ---------- the picker: always on screen ---------- */
.picker{position:absolute;z-index:8;left:50%;bottom:max(2.2vh,14px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 28px);
  background:#fff;border-radius:28px;padding:.6rem .9rem .75rem;box-shadow:0 10px 30px -8px rgba(43,35,64,.28),0 0 0 1px rgba(43,35,64,.06)}
.picker .q{font-family:var(--head);font-weight:800;font-size:1.16rem;line-height:1.1;text-align:center;margin:.1rem 0 .5rem}
.picker .q span{background:linear-gradient(transparent 62%,var(--sun) 62%);padding:0 .15em}
.chips{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding:3px 2px 2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:.5rem;background:var(--paper);border:2px solid rgba(43,35,64,.14);border-radius:999px;padding:.24rem .9rem .24rem .26rem;
  font-family:var(--head);font-weight:700;font-size:1.03rem;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .2s cubic-bezier(.3,1.7,.5,1),background-color .15s,border-color .15s}
.chip img{width:2.15rem;height:2.15rem;border-radius:50%;object-fit:cover;flex:none}
.chip span{padding-top:.12em}
.chip:hover{transform:translateY(-3px) rotate(-1.5deg);background:var(--sun);border-color:var(--ink)}
.chip[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.all{padding:.24rem .95rem;min-height:calc(2.15rem + .48rem + 4px);background:#fff;border-color:var(--ink)}
.chip.all svg{width:1rem;height:1rem}

@media (max-width:899px){
  .intro{left:6vw;right:6vw;width:auto;top:72px;transform:none}
  .intro .by{margin-bottom:.4rem;font-size:.93rem}
  .intro h1{font-size:clamp(2rem,9.2vw,2.9rem)}
  .intro .lede{margin-top:.7rem;font-size:.98rem;line-height:1.45}
  .how{margin-top:.75rem;gap:.4rem}
  .how li{font-size:.84rem;padding:.22rem .7rem .22rem .26rem;gap:.35rem}
  .how li::before{width:1.45rem;height:1.45rem;font-size:.9rem}
  .intro .also{display:none}
  .panel,.panel.on{left:6vw;right:6vw;width:auto;top:calc(60px + var(--P)*1.74);transform:none}
  .panel{transform:translateY(16px)}
  .panel h2{font-size:clamp(1.75rem,7.6vw,2.3rem)}
  .panel .line{display:none}
  .panel .about{font-size:.98rem;line-height:1.45;margin-top:.5rem}
  .panel .acts{margin-top:.95rem;gap:.6rem;flex-wrap:nowrap}
  .panel .acts .long{display:none} .panel .acts .short{display:inline}
  .need{margin-bottom:.55rem;font-size:.84rem}
  .btn{font-size:1rem;padding:.82rem 1.05rem .72rem}
  .peekline{margin-top:.8rem;font-size:.9rem}
  .picker{left:0;right:0;bottom:0;transform:none;width:auto;max-width:none;border-radius:22px 22px 0 0;padding:.55rem 0 calc(.7rem + env(safe-area-inset-bottom))}
  .picker .q{font-size:1.05rem;margin-bottom:.4rem}
  .chips{padding:3px 14px 2px}
  .chip{font-size:.98rem}
  .chip img{width:1.95rem;height:1.95rem}
}
@media (max-width:899px) and (max-height:720px){ .intro .lede{display:none} .panel .about{display:none} }
@media (max-width:399px){ .logo{font-size:1.2rem} .logo svg{width:1.9rem;height:1.9rem} .nav .pill{padding:.45rem .8rem;font-size:.86rem} }

/* ---------- after the show: library, free pages, videos, custom story, family ---------- */
.more{position:relative;z-index:9;background:var(--paper);border-radius:44px 44px 0 0;margin-top:-100vh;box-shadow:0 -18px 40px rgba(43,35,64,.10);overflow:hidden}
.sec{max-width:76rem;margin:0 auto;padding:clamp(3.2rem,7vw,5.5rem) max(6vw,24px)}
.sec h2{font-size:clamp(2rem,4vw,3.2rem);max-width:20ch}
.sec .lede{margin-top:.9rem;color:var(--muted);font-size:1.13rem;max-width:36rem}
.tag{display:inline-block;font-weight:800;color:var(--teal);font-size:1rem;margin-bottom:.6rem}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.filters .chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.lib{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));gap:2.8rem 2rem}
.lib li{perspective:900px}
.lib li[hidden]{display:none}
.sb{display:block;text-decoration:none}
.sb .plank{display:block;height:12px;background:var(--apricot);margin:0 -.6rem;border-radius:3px;box-shadow:0 6px 0 rgba(43,35,64,.07)}
.sb .bk3{position:relative;display:block;aspect-ratio:1;transform:rotateY(-22deg);transform-origin:20% 50%;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sb .bk3 img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px;box-shadow:0 14px 22px -10px rgba(43,35,64,.45)}
.sb .bk3::after{content:"";position:absolute;left:100%;top:1%;height:98%;width:12px;transform-origin:0 50%;transform:rotateY(90deg);
  background:#FBF6E6 repeating-linear-gradient(90deg,rgba(43,35,64,.14) 0 1px,transparent 1px 3px)}
.sb:hover .bk3,.sb:focus-visible .bk3{transform:rotateY(-6deg) translateY(-8px)}
.sb .n{display:block;margin-top:1rem;font-weight:800;color:var(--teal);font-size:.93rem;line-height:1.25}
.sb .t{display:block;font-family:var(--head);font-weight:700;font-size:1.18rem;line-height:1.1;margin-top:.2rem}
.sb .l{display:block;color:var(--muted);font-size:.93rem;line-height:1.35;margin-top:.25rem}
.sb .buy{display:inline-block;margin-top:.7rem;background:var(--coral);color:#fff;font-family:var(--head);font-weight:700;font-size:.98rem;line-height:1;padding:.62rem 1rem .52rem;border-radius:999px;box-shadow:0 4px 0 var(--coral-d)}
.sb:hover .buy{background:#DD5347}
.watch{display:inline-flex;align-items:center;gap:.35rem;margin-top:.7rem;font-weight:800;font-size:.92rem;text-underline-offset:.2em}
.watch svg{width:.9rem;height:.9rem;color:var(--coral)}
.all{margin-top:2.4rem}

.band.sunny{background:var(--sun)}
.sec.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 4rem;align-items:center}
.signup label{display:block;font-weight:800;margin-bottom:.4rem}
.signup .row{display:flex;flex-wrap:wrap;gap:.7rem}
.signup input{flex:1 1 14rem;min-width:0;font:inherit;padding:.85rem 1.1rem;border-radius:999px;border:2px solid var(--ink);background:#fff;color:var(--ink)}
.signup .fine{margin-top:.9rem;font-size:.95rem;color:var(--ink)}

.vids{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:2rem;max-width:60rem}
.vids a{display:block;text-decoration:none}
.vids .thumb{position:relative;display:block;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:var(--mint);box-shadow:0 12px 22px -12px rgba(43,35,64,.45)}
.vids .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.vids a:hover .thumb img{transform:scale(1.05)}
.vids .thumb i{position:absolute;left:50%;top:50%;width:3.4rem;height:3.4rem;margin:-1.7rem 0 0 -1.7rem;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--coral);box-shadow:0 6px 14px rgba(43,35,64,.3)}
.vids .thumb svg{width:1.5rem;height:1.5rem;margin-left:.15rem}
.vids .t{display:block;font-family:var(--head);font-weight:700;font-size:1.18rem;line-height:1.1;margin-top:.9rem}
.vids .n{display:block;font-weight:800;color:var(--teal);font-size:.92rem;margin-top:.2rem}

.soon{background:var(--mint);border-radius:36px;padding:clamp(1.8rem,5vw,3.5rem);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2rem 3rem;align-items:center}
.soon .lede{color:var(--ink)}
.soon .lede + .lede{margin-top:.7rem}
.soon .acts{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem}
.soon .acts a.text{font-weight:800;text-underline-offset:.25em;text-decoration-thickness:2px;text-decoration-color:var(--coral)}
/* Nihan's own book opens as this part scrolls into view */
.mini{--P:min(13.5rem,19vw);--t:5px;--cover:#F3E6C4;--pg:#FBF3DC;position:relative;height:calc(var(--P)*1.5);perspective:1800px}
.mbook{position:absolute;left:50%;top:50%;width:var(--P);height:var(--P);margin:calc(var(--P)/-2) 0 0 calc(var(--P)/-2);transform-style:preserve-3d;will-change:transform}
.mini .cap{position:absolute;left:0;right:0;bottom:0;text-align:center;font-weight:800;font-size:.95rem;color:var(--teal);filter:brightness(.8)}
.js-reveal .steps li{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.9,.3,1.3)}
.js-reveal .steps li.in{opacity:1;transform:none}
@media (max-width:860px){ .soon{grid-template-columns:1fr} .mini{--P:min(12.5rem,38vw);order:-1} }
.steps{list-style:none;counter-reset:st;margin:1.5rem 0 1.8rem;padding:0;display:grid;gap:.8rem;max-width:36rem}
.steps li{counter-increment:st;display:flex;gap:.8rem;align-items:flex-start;font-weight:700}
.steps li::before{content:counter(st);flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:#fff;font-family:var(--head);font-weight:800;padding-top:.1em}

.family{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1.25fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.family .ph{position:relative;aspect-ratio:4/5}
.family .ph.a{aspect-ratio:10/7}
.family .ph::before{content:"";position:absolute;inset:0;border-radius:36px;background:var(--apricot);transform:translate(-7%,5%) rotate(-2deg)}
.family .ph.b::before{background:var(--sun);transform:translate(7%,5%) rotate(2deg)}
.family .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:36px;box-shadow:0 14px 34px rgba(43,35,64,.18)}
.family .words{text-align:center;display:grid;gap:1rem;justify-items:center}
.family .words h2{max-width:none}
.family .words p{font-size:1.12rem;max-width:30rem}
.family .tag{margin:0}
@media (max-width:860px){
  .sec.two{grid-template-columns:1fr}
  .family{grid-template-columns:1.45fr 1fr}
  .family .words{grid-column:1 / -1;grid-row:1}
  .lib{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem 1.4rem}
}
.foot{position:relative;z-index:9;padding:2rem max(6vw,24px) 2.6rem;background:var(--apricot);font-weight:700;display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;font-size:.98rem}

/* ---------- calm version (visitors who switched movement off) ---------- */
.calm .show{height:auto !important}
.calm .more{margin-top:0;border-radius:0;box-shadow:none}
.calm .pin{position:relative;height:auto;overflow:visible;padding:100px max(6vw,24px) 60px}
.calm .intro{position:static;transform:none;width:auto;max-width:38rem}
.calm .scene,.calm .sun,.calm .doodles,.calm .peeks,.calm .panel{display:none}
.calm .picker{position:static;transform:none;margin:2rem 0 0;max-width:100%;width:auto;border-radius:22px;padding:.7rem .9rem .8rem}
.calm .chips{flex-wrap:wrap}
.cards{display:grid;gap:2.2rem;margin-top:3rem}
.card{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:1.6rem;align-items:center;padding:1.4rem;border-radius:24px;background:var(--accent)}
.card img{border-radius:4px;box-shadow:0 14px 22px -10px rgba(43,35,64,.45)}
.card .panel{display:block;position:static;opacity:1;visibility:visible;transform:none;width:auto}
.card .peekline{display:none}
@media (max-width:640px){ .card{grid-template-columns:1fr} .card img{max-width:14rem} }