.centered-home{position:relative;isolation:isolate;background:#e7e5e1;text-align:center}
.centered-home:before{content:"";position:fixed;inset:0 0 auto;height:100vh;height:100lvh;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#e7e5e1 0%,rgb(231 229 225 / .87) 24%,rgb(231 229 225 / .12) 65%,rgb(231 229 225 / .4)),url('/dear-photo/assets/meadow-background.webp') center bottom/cover no-repeat}
.home-header{display:flex;justify-content:center;padding:32px 20px 0}
.home-header .brand{font-weight:400;font-size:20px;gap:10px}
.home-header .brand img{width:32px;height:32px;border-radius:9px}
.home-stack{width:min(560px,calc(100% - 40px));margin:auto}
.home-intro{padding-top:40px}
.glass,.glass-tag{border:1px solid rgb(255 255 255 / .8);background:rgb(250 249 247 / .55);box-shadow:inset 0 1px 0 #ffffffa6,0 2px 5px #00000005,0 16px 44px #29292b0d;-webkit-backdrop-filter:blur(24px) saturate(.65);backdrop-filter:blur(24px) saturate(.65)}
.glass-tag{display:inline-block;border-radius:50px;padding:8px 16px;font:12px/1.5 var(--mono);color:#464449}
.home-intro h1{font-size:clamp(40px,6vw,62px);font-weight:400;letter-spacing:-.045em;margin:24px auto 18px}
.home-lede{max-width:31ch;margin:auto;font-size:17px;line-height:1.6;color:#464449;text-wrap:pretty}
.phone-glass{width:min(350px,100%);margin:36px auto 0;padding:20px 22px 22px;border-radius:38px;background:#e7e5e1;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.phone-glass img{width:255px;margin:auto;clip-path:inset(0 3% round 16% / 8%)}
.phone-glass figcaption{font:400 13px/1.6 var(--hand);margin:14px auto 0;max-width:25ch;text-wrap:balance}
.personal-note{border-radius:28px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px;margin:32px auto 0;max-width:420px}
.personal-note img{width:42px;height:42px}
.personal-note p{font:400 18px/1.6 var(--hand)}
.home-faq{padding:58px 0 36px}
.home-faq h2{font-size:27px;font-weight:400;margin-bottom:22px}
.faq-glass{border-radius:26px;padding:4px 22px;text-align:left}
.faq-glass details{padding:0;border-color:rgb(29 28 32 / .12)}
.faq-glass details:last-child{border:0}
.faq-glass summary{font-size:16px;font-weight:400;padding-block:20px;min-height:64px}
.faq-glass details p{font-size:15px;color:#454349;line-height:1.65;padding-right:8px}
.home-footer{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 20px 26px;font-size:13px}
.footer-links{display:flex;justify-content:center;gap:22px;border-radius:50px;padding:4px 22px}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
.home-footer button{border:0;background:transparent;color:var(--ink);font-size:12px;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:4px 12px;border-radius:22px;transition:background-color 140ms ease-out,box-shadow 140ms ease-out}
.home-footer p{margin:0}.home-footer .copyright{font-size:11px}
.centered-home .footer-wordmark{position:relative;height:24vw;max-height:350px;background:none;overflow:hidden}
.centered-home .footer-wordmark span{display:none}
.centered-home .footer-wordmark:before,.centered-home .footer-wordmark:after{content:"";position:absolute;inset:0 3%;transform:translateY(15%);pointer-events:none}
.centered-home .footer-wordmark:before{background:rgb(255 255 255 / .22);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);-webkit-mask:url('/dear-photo/assets/wordmark-mask.svg') center/100% 100% no-repeat;mask:url('/dear-photo/assets/wordmark-mask.svg') center/100% 100% no-repeat}
.centered-home .footer-wordmark:after{background:url('/dear-photo/assets/wordmark-edge.svg') center/100% 100% no-repeat;filter:drop-shadow(0 1px 1px rgb(29 28 32 / .35))}
@media(prefers-reduced-transparency:reduce){.centered-home .footer-wordmark:before{background:#777572;-webkit-backdrop-filter:none;backdrop-filter:none}}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass,.glass-tag{background:rgb(244 242 238 / .96)}}
@media(max-width:420px){.home-header{padding-top:24px}.home-intro{padding-top:28px}.phone-glass{padding:18px 16px;border-radius:30px}.phone-glass img{width:230px}.faq-glass{padding-inline:18px}.home-faq{padding-top:42px}}
@media(prefers-reduced-transparency:reduce){.glass,.glass-tag{background:#f4f2ee;-webkit-backdrop-filter:none;backdrop-filter:none}}

@media(hover:hover) and (pointer:fine){.home-footer button:hover{background:rgb(255 255 255 / .5);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .7);text-decoration-thickness:2px}}
.home-footer button:focus-visible{background:rgb(255 255 255 / .5);text-decoration-thickness:2px}
