/* InstantTempMail final frontend production polish — 2026-08-03 */
:root{--itm-ease:cubic-bezier(.2,.75,.25,1);--itm-shadow:0 18px 48px rgba(15,73,61,.10)}

/* Homepage spacing and card depth */
.clean-home-hero{padding-top:clamp(54px,7vw,92px)!important;padding-bottom:clamp(44px,6vw,78px)!important}
.clean-home-hero .mail-tool{margin-top:clamp(26px,4vw,44px)!important}
.benefits .feature-card{transition:transform .24s var(--itm-ease),box-shadow .24s var(--itm-ease),border-color .24s ease;will-change:transform}
.benefits .feature-card:hover{transform:translateY(-7px);box-shadow:0 24px 54px rgba(15,73,61,.13);border-color:rgba(12,161,125,.22)}
.benefits .feature-card .feature-icon{transition:transform .24s var(--itm-ease),box-shadow .24s ease}
.benefits .feature-card:hover .feature-icon{transform:translateY(-2px) scale(1.06);box-shadow:0 12px 25px rgba(15,73,61,.12)}

/* How it works: footer-consistent finishing touches */
#how-it-works .how-panel{box-shadow:0 28px 68px rgba(4,55,46,.22),inset 0 1px 0 rgba(255,255,255,.14)}
#how-it-works .steps article{transition:transform .22s var(--itm-ease),background .22s ease,border-color .22s ease}
#how-it-works .steps article:hover{transform:translateX(5px)}

/* Blog card consistency */
.blog-simple-grid{align-items:stretch}
.blog-simple-card{height:100%;overflow:hidden;transition:transform .24s var(--itm-ease),box-shadow .24s var(--itm-ease),border-color .24s ease}
.blog-simple-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(15,73,61,.12);border-color:rgba(12,161,125,.22)}
.blog-simple-card .blog-card-image{display:block;aspect-ratio:1200/630;overflow:hidden;background:#edf7f3}
.blog-simple-card .blog-card-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .38s var(--itm-ease)}
.blog-simple-card:hover .blog-card-image img{transform:scale(1.035)}
.blog-simple-card>div{display:flex;flex-direction:column;min-height:154px}
.blog-simple-card .blog-read-button{margin-top:auto}

/* Article media stability and readability */
.article-hero-image{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;object-position:center;background:#edf7f3}
.article-prose img:not(.article-hero-image){max-width:100%;height:auto}
.article-prose h2{scroll-margin-top:105px}
.continue-reading-item img{aspect-ratio:3/2;object-fit:cover;background:#edf7f3}

/* Core Web Vitals-friendly rendering for below-fold sections */
@supports (content-visibility:auto){
  .benefits,.how-section,.faq-preview,.home-blog,.blog-layout-shell{content-visibility:auto;contain-intrinsic-size:700px}
}

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid rgba(18,184,134,.34);outline-offset:3px}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .benefits .feature-card,.benefits .feature-card .feature-icon,#how-it-works .steps article,.blog-simple-card,.blog-simple-card .blog-card-image img{transition:none!important;transform:none!important}
  html{scroll-behavior:auto!important}
}

@media(max-width:760px){
  .clean-home-hero{padding-top:42px!important;padding-bottom:38px!important}
  .blog-simple-card>div{min-height:auto}
}