@font-face{font-family:Instrument;src:url('/fonts/instrument-sans-regular.9a91efaa3599a6ef.woff2');font-display:swap}@font-face{font-family:Instrument;src:url('/fonts/instrument-sans-medium.9d3547da16d950d1.woff2');font-weight:500;font-display:swap}
/* Homepage rhythm and responsive alignment. Artwork/export styles are separate. */
:root{--layout-gap:clamp(32px,4.45vw,64px)}
.wrap{width:min(1240px,calc(100% - 64px))}
.section{padding-block:64px}
.section-head,.split,.pet-story,.how-bottom,.remembrance .split,.faq-layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-gap)}
.section-head{display:grid;margin-bottom:30px}
.section-head>*{min-width:0}
.section-head p{max-width:39ch}
.hero{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--layout-gap);row-gap:16px;padding-block:36px 44px;align-items:center}
.hero-copy{grid-column:1;grid-row:1;min-width:0}
.hero-copy>p{margin-block:22px;max-width:35ch}
.hero-copy .fine{margin-block:14px 0;max-width:none}
.hero-example{display:contents}
.hero-stage{grid-column:2;grid-row:1;padding:28px;display:grid;place-items:center;min-height:420px}
.hero-stage .frame{width:min(290px,100%)}
.stage-caption{grid-column:2;grid-row:2;display:block;margin:0;padding:0;font-size:14px;line-height:1.55;color:var(--muted)}
.stage-caption strong{display:block;color:var(--ink);font-weight:500;font-size:15px;margin-bottom:3px}
.stage-caption a{text-decoration-thickness:1px}
.hero-example>.audio-message{grid-column:2;grid-row:3;margin:0}
#recipients{padding-top:36px;border-top:1px solid var(--line)}
.recipient-grid{gap:30px 24px}
.mini-art{padding:18px clamp(20px,2.6vw,36px)}
.occasion-note{margin-top:28px}
.story-photo{aspect-ratio:6/5;max-height:500px;object-position:50% 35%}
.story-copy h2{margin-bottom:22px}
.story-copy .fine{margin-top:18px}
.pet-story{padding-top:48px;margin-top:48px}
.pet-story .pet-art{width:220px}
.steps,.giving-grid,.trust-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.how-bottom{margin-top:32px}
.magic p{margin-top:20px}
.magic .button.secondary{margin-top:20px}
.scan-scene{min-height:400px}
.style-card figcaption{margin-top:18px}
.swatches{margin-top:26px}
.giving-grid{margin-top:28px}
.print-guide{margin-top:28px}
.gift-photo{padding:0;min-height:0;aspect-ratio:21/9;max-height:460px;margin-top:28px;object-fit:cover}
.memory-pair{width:100%;padding:20px 12px 38px;gap:18px}
.trust-grid{margin-top:28px}
.proof{margin-top:36px;padding-top:24px}
.faq-list summary{padding-block:18px}
.closing{padding-block:64px}
footer{padding-top:36px}
@media(max-width:1100px){
 .wrap{width:calc(100% - 48px)}
 .hero{column-gap:36px}
 .hero-stage{padding:24px;min-height:400px}
 .hero h1{font-size:clamp(40px,4.3vw,60px)}
 .hero .actions{gap:8px}
 .hero .button{padding-inline:24px}
 .hear{padding-inline:0;font-size:16px}
 .section{padding-block:56px}
 .section-head,.split,.pet-story,.how-bottom,.remembrance .split,.faq-layout{gap:36px}
 .steps,.giving-grid,.trust-grid{gap:24px}
 .scan-scene{padding:24px 90px 24px 20px}
}
@media(max-width:860px){
 .hero{grid-template-columns:minmax(0,1fr);row-gap:20px;padding-block:32px 36px}
 .hero-copy{grid-column:1;grid-row:1}
 .hero-copy>p{max-width:48ch}
 .hero h1{font-size:clamp(40px,6.4vw,54px)}
 .hero-stage{grid-column:1;grid-row:2;min-height:0;padding:28px}
 .hero-stage .frame{width:min(285px,100%)}
 .stage-caption{grid-column:1;grid-row:3}
 .hero-example>.audio-message{grid-column:1;grid-row:4}
 .section{padding-block:48px}
 .section-head,.split,.pet-story,.how-bottom,.remembrance .split,.faq-layout{grid-template-columns:minmax(0,1fr);gap:24px}
 .section-head{margin-bottom:26px}
 .section-head p{max-width:55ch;margin:0}
 .recipient-grid,.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
 .mini-art{padding:18px 32px}
 .story-photo{aspect-ratio:3/2;max-height:460px}
 .pet-story{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);padding-top:36px;margin-top:36px;gap:28px}
 .pet-story .pet-art{width:min(220px,90%)}
 .steps,.giving-grid,.trust-grid{grid-template-columns:minmax(0,1fr);gap:24px}
 .steps li{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:18px;padding-top:18px}
 .steps .step-no{grid-row:span 2;margin-top:3px}
 .steps h3{margin:0 0 8px}
 .steps p{grid-column:2}
 .how-bottom{margin-top:28px}
 .scan-scene{min-height:400px;max-width:540px;width:100%;justify-self:center}
 .magic .split{gap:28px}
 .memory-pair{max-width:450px;justify-self:center;margin:0}
 .remembrance .story-copy{max-width:none}
 .proof{margin-top:28px}
 .closing{padding-block:48px}
}
@media(max-width:540px){
 .wrap{width:calc(100% - 40px)}
 header{height:72px}
 .hero{padding-block:28px 30px;row-gap:18px}
 .hero h1{font-size:39px;line-height:1.2}
 .hero-copy>p{font-size:18px;line-height:1.6;margin-block:18px}
 .hero-copy .fine{font-size:14px;margin-top:10px}
 .hero .actions{gap:8px 12px}
 .hero .button{min-height:56px;padding-inline:24px}
 .hear{font-size:16px;gap:8px;min-height:48px}
 .hero-stage{padding:24px}
 .hero-stage .frame{width:min(245px,100%)}
 .stage-caption{font-size:13px;line-height:1.55}
 .stage-caption strong{font-size:15px}
 .section{padding-block:40px}
 #recipients{padding-top:28px}
 .section-head{margin-bottom:24px;gap:16px}
 .section-head p{font-size:18px}
 .recipient-grid{gap:26px 16px}
 .mini-art{padding:12px 16px}
 .recipient p{font-size:16px}
 .recipient h3{font-size:18px;margin-top:12px}
 .sample-note{font-size:13px;line-height:1.5}
 .occasion-note{margin-top:24px}
 .story-photo{aspect-ratio:6/5}
 .pet-story{grid-template-columns:minmax(0,1fr);padding-top:28px;margin-top:28px;gap:24px}
 .pet-story .pet-art{width:190px}
 .story-copy h2{margin-bottom:20px}
 .scan-scene{min-height:360px;padding:24px 80px 24px 20px}
 .scan-scene .frame{max-width:210px}
 .phone{width:142px;right:12px;bottom:20px}
 .gallery-grid{gap:28px 16px}
 .style-card p{font-size:16px}
 .style-choice{font-size:15px}
 .swatches{gap:8px 14px;margin-top:24px}
 .giving-grid{margin-top:24px;gap:24px}
 .giving-grid article{padding-top:18px}
 .gift-photo{aspect-ratio:3/2;margin-top:24px}
 .memory-pair{max-width:350px;padding:12px 8px 30px}
 .includes li{padding-block:14px}
 .trust-grid{gap:24px}
 .faq-layout{gap:18px}
 .closing{padding:42px 20px}
 .closing p{margin-block:18px}
 footer{padding-top:32px;padding-bottom:104px}
 .footer-nav{margin-top:24px}
}
@media(prefers-reduced-motion:reduce){.hero-stage .frame{transform:none}}

/* Match the creator's typography, header, palette and rounded controls. */
:root{--paper:#FAF7F0;--ink:#202A24;--green:#1F3A2E;--line:#D9DCCF;--soft:#E8E9E1}
body{font-family:Instrument,Arial,sans-serif}h1,h2,.brand{font-family:'Libre Baskerville',Georgia,serif;letter-spacing:normal}h1{line-height:1.06}header.wrap{height:90px;width:100%;max-width:none;padding:0 5%;border:0}.brand{font-size:28px;letter-spacing:-1px}header nav{gap:24px}header nav a{font-size:18px}.button{border-radius:12px;min-height:60px;background:#1F3A2E}.button.secondary{background:#E8E9E1;border:0}.hero-stage,.style-card,.trust-grid>div{border-radius:22px}.hero-stage{background:#fffdf8;box-shadow:0 10px 35px #5D4A2910}
@media(max-width:760px){header.wrap{height:68px;padding:0 20px}.brand{font-size:24px}header nav{gap:18px}.hero h1{font-size:42px}}