/* Page styles for the Rootinin landing page (layout, menu, hero animation). */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#f7f5fd}
a{color:#4a2fb8}a:hover{color:#3a2494}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
details[open] .lp-chev{transform:rotate(180deg)}
.lp-grid4,.lp-grid2x2{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.lp-grid4,.lp-grid2x2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.lp-grid4{grid-template-columns:repeat(4,minmax(0,1fr))}}
header{overflow-x:clip}
.lp-stage{position:relative;width:100%;max-width:480px;height:660px;margin:0 auto}
.lp-phone{position:absolute;width:288px;height:600px}
.lp-screen{width:360px;height:750px;box-sizing:border-box;transform:scale(.8);transform-origin:top left;border:8px solid #171039;border-radius:40px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.lp-phone--kid{left:0;top:44px;z-index:2;transform:rotate(-7deg);animation:lp-kid 10s ease-in-out infinite}
.lp-phone--ortu{right:0;top:0;z-index:1;transform:rotate(6deg) translateX(14px) scale(.92);filter:brightness(.78);animation:lp-ortu 10s ease-in-out infinite}
@keyframes lp-kid{0%,40%{z-index:2;transform:rotate(-7deg);filter:brightness(1)}50%,90%{z-index:1;transform:rotate(-9deg) translateX(-14px) scale(.92);filter:brightness(.78)}100%{z-index:2;transform:rotate(-7deg);filter:brightness(1)}}
@keyframes lp-ortu{0%,40%{z-index:1;transform:rotate(6deg) translateX(14px) scale(.92);filter:brightness(.78)}50%,90%{z-index:2;transform:rotate(5deg);filter:brightness(1)}100%{z-index:1;transform:rotate(6deg) translateX(14px) scale(.92);filter:brightness(.78)}}
@media (prefers-reduced-motion:reduce){.lp-phone{animation:none !important}}
@media (max-width:639px){.lp-stage{max-width:340px;height:500px}.lp-phone{width:216px;height:450px}.lp-screen{transform:scale(.6)}.lp-phone--kid{top:34px}}
.lp-burger{display:none}
@media (max-width:1079px){.lp-links{display:none !important}.lp-burger{display:inline-grid !important}}
@media (min-width:1080px){.lp-mobile-menu{display:none !important}}
@media (max-width:639px){section{padding-top:56px !important;padding-bottom:56px !important}.lp-hero{padding-top:16px !important;gap:40px !important}.lp-logo{height:40px !important}header{padding-bottom:64px !important}}
