@import url(psst-mobile.css);
@import url(psst-motion.css);
@import url(psst-why.css);
/* psst overrides on top of lemon's original home.css */
.psst-logo{display:inline-flex;align-items:center;gap:10px;line-height:1}
.psst-logo__eye{display:inline-block;width:42px;height:42px;background:url(../img/psst/psst-mark.svg) 0 50%/auto 42px no-repeat}
.psst-logo__word{font-family:DINEngschriftStd,sans-serif;font-size:31px;letter-spacing:.08em;color:#fff;padding-top:4px;text-transform:uppercase}
.psst-logo--footer{opacity:1;gap:8px}
.psst-logo--footer img{width:38px;height:35px}
.psst-logo--footer .psst-logo__word{font-size:26px;color:#fff;opacity:.505}

.psst-hero{position:relative;display:inline-block}
.psst-hero__bubble{position:absolute;left:76%;top:9%;width:17%;transform:rotate(6deg)}

.btn-badge .psst-badge{display:block}
.home-demand__badge.psst-badge{width:7.5rem;height:auto;right:auto!important;left:17.5rem;top:-1.6rem!important}

/* lemon's mobile menu: plugin css shows it under 768px, js/menu.js opens it; hidden on desktop */@media (min-width:768px){#responsive-menu-container,#responsive-menu-button{display:none}}

/* longer psst CTA than lemon's "match me with a dev": keep it inside the button on phones */
@media screen and (max-width:600px){.home-hero__btn .btn{width:auto!important;padding-left:1rem!important;padding-right:1rem!important;font-size:.8rem!important}}

/* "subscribe to waitlist" is longer than lemon's "subscribe" */
#mc-embedded-subscribe{width:auto!important;padding-left:2rem!important;padding-right:2rem!important}
@media screen and (max-width:600px){.home-demand__badge.psst-badge{left:auto!important;right:1rem!important;top:0!important;width:6rem}}

/* fewer ticker items than lemon (AIs only): shorter loop so it moves a bit faster */
.home-lang__list{animation-duration:28s!important}

/* feature trio: psst icons vary a lot in width, so center each one over its title (lemon left-aligned them) */
.home-features .feature{text-align:center}
.home-features .feature__icon{display:flex;justify-content:center}

/* julien's quote is shorter than lemon's: shrink the bubble to the text (desktop) */
@media screen and (min-width:601px){.testimonial2__quote{height:14.25rem!important;padding-bottom:4.25rem!important;background-size:100% 100%!important}}

/* step 2's praying cherub reads bigger than its neighbours: scale it down a touch, layout untouched */
.home-steps .step-2 .step__icon img{transform:scale(.88)}

/* burning-dashboards art: sit centred against the paragraphs it illustrates, not pinned to their top (desktop) */
@media screen and (min-width:601px){.home-resume__content{align-items:center}.home-resume__image{margin-top:6.75rem}}

/* tom's bubble: lemon left ~1px of right padding, so text ran past the cut-paper edge (desktop) */
@media screen and (min-width:601px){.testimonial4__quote{padding-right:2.25rem!important;padding-top:2.25rem!important}}

/* t-rex hover: lemon's two hands swapped directions, the front (right) hand now lifts and the back one dips */
@keyframes psst-t-rex1{0%,to{transform:none}65%{transform:translate(-1.25rem,-1.4375rem) rotate(15deg)}}
@keyframes psst-t-rex2{0%,to{transform:none}65%{transform:rotate(-15deg)}}
.t-rex:hover .t-rex__hand1{animation-name:psst-t-rex1}
.t-rex:hover .t-rex__hand2{animation-name:psst-t-rex2}
/* mobile menu panel in psst dress: black, big DIN links clear of the close button */
@media (max-width:767px){body #responsive-menu-container{background:#000;padding-top:6rem!important}
body #responsive-menu-container #responsive-menu,body #responsive-menu-container #responsive-menu-wrapper,body #responsive-menu-container #responsive-menu li{background:none;margin:0;padding:0}
body #responsive-menu-container #responsive-menu li a{display:block;height:auto!important;line-height:1.1!important;padding:.6rem 1.5rem!important;background:none!important;border:0!important;font-family:DINEngschriftStd,sans-serif;font-size:2.5rem;text-transform:uppercase;color:#fff;text-decoration:none}
body #responsive-menu-container #responsive-menu li a:hover,body #responsive-menu-container #responsive-menu li a:focus-visible{color:#dcff02;background:none}}