.landing{position:relative;overflow-x:clip}.act{--p:0;position:relative}.stage{isolation:isolate;gap:clamp(1rem,3vw,2.5rem);min-height:max(100svh,36rem);padding:clamp(1.5rem,5vw,4rem) clamp(1.25rem,6vw,5rem);display:grid;position:relative;overflow:hidden}.act--hero{--draw:1}.act--two{--draw:var(--p);--title:clamp(0, calc(var(--p) / .15), 1);--his:clamp(0, calc((var(--p) - .15) / .3), 1);--hers:clamp(0, calc((var(--p) - .45) / .3), 1)}.act--sealed{--draw:var(--p);--wipe:clamp(0, calc((var(--p) - .05) / .55), 1)}.act--peak{--draw:clamp(0, calc(var(--p) / .3), 1);--flap:clamp(0, calc(var(--p) / .32), 1);--rise:clamp(0, calc((var(--p) - .32) / .36), 1);--words:clamp(0, calc((var(--p) - .7) / .2), 1)}@media (prefers-reduced-motion:no-preference){.act--hero{height:150svh}.act--two{height:200svh}.act--sealed{height:150svh}.act--peak{height:290svh}.stage{height:100svh;min-height:34rem;position:sticky;top:0}}@media (prefers-reduced-motion:reduce){.act--hero{--p:0;--draw:1}.act--two,.act--sealed,.act--peak{--p:1;--draw:1}.scroll-hint,.peak-kicker{display:none}}.act-trail{z-index:-1;pointer-events:none;width:100%;height:100%;clip-path:inset(0 0 calc((1 - var(--draw)) * 100%) 0);position:absolute;inset:0}.act-trail__dash{fill:none;stroke:var(--trail);stroke-width:12px;stroke-linecap:round;stroke-dasharray:20 26;vector-effect:non-scaling-stroke}.hero-caption{text-align:center;font-size:var(--text-hand);padding:.5rem .25rem .75rem;line-height:1.15}.hero-grid{align-content:center;justify-items:center}.hero-copy{justify-self:stretch;max-width:36rem}.hero-stack{aspect-ratio:1/.92;width:min(100%,34rem,62svh);position:relative}.hero-stack>*{position:absolute}.hero-rear{inset-inline-end:0;width:80%;rotate:-3deg;transform:translateY(calc(var(--p) * -4%)) scale(calc(1 + var(--p) * .04));top:2%}.hero-front{inset-inline-start:2%;z-index:2;width:40%;rotate:7deg;transform:translateY(calc(var(--p) * -38%)) rotate(calc(var(--p) * -10deg));bottom:0}.hero-front .hero-caption{font-size:1.35rem}.tape{background:color-mix(in srgb, var(--trail) 70%, white);opacity:.85;width:38%;height:20px;position:absolute;top:-10px;left:50%;translate:-50%;rotate:-4deg}.scroll-hint{inset-inline:0;text-align:center;opacity:calc(1 - clamp(0, calc(var(--p) / .15), 1));position:absolute;bottom:1rem}.two-grid{grid-template-columns:1fr;grid-template-areas:"title""photo""his""hers";align-content:center;justify-items:center;row-gap:1rem}.two-title{text-align:center;opacity:var(--title);transform:translateY(calc((1 - var(--title)) * 12px));grid-area:title}.two-photo{grid-area:photo;width:min(100%,27rem,55.2svh);rotate:1.5deg}.caption-card{background:var(--surface);border-radius:18px;flex-direction:column;gap:.2rem;width:min(100%,19rem);padding:.9rem 1.15rem 1rem;display:flex;box-shadow:0 0 0 1px #3b2a1f0f,0 14px 30px -18px #3b2a1f80}.caption-card__quote{font-size:1.6rem;line-height:1.15}.caption-card--his{opacity:var(--his);rotate:-2.5deg;transform:translateX(calc((1 - var(--his)) * -3rem));grid-area:his;justify-self:start}.caption-card--hers{opacity:var(--hers);rotate:2deg;transform:translateX(calc((1 - var(--hers)) * 3rem));grid-area:hers;justify-self:end}.sealed-grid{align-content:center;justify-items:center}.sealed-copy{justify-self:stretch;max-width:32rem}.envelopes{clip-path:inset(-2rem calc((1 - var(--wipe)) * 100%) -2rem -2rem);gap:clamp(.75rem,2vw,1.5rem);padding:1rem .5rem 2.5rem;display:flex}.envelope{aspect-ratio:1.45;background:linear-gradient(180deg, color-mix(in srgb, var(--sunken) 80%, white), var(--sunken));place-items:end center;width:clamp(9rem,26vw,14rem);padding-bottom:.9rem;display:grid;position:relative;box-shadow:0 1px 1px #3b2a1f14,0 14px 26px -14px #3b2a1f73}.envelope:before{content:"";background:color-mix(in srgb, var(--sunken) 70%, var(--edge));clip-path:polygon(0 0,100% 0,50% 100%);height:58%;position:absolute;inset:0 0 auto}.envelope__label{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1}.envelope--his{rotate:-4deg}.envelope--hers{translate:0 1.75rem;rotate:3deg}.seal{border-radius:50%;width:24px;height:24px;position:absolute;top:46%;left:50%;translate:-50% -50%;box-shadow:inset 0 -3px #0000002e}.peak-grid{text-align:center;grid-template-rows:auto 1fr auto;justify-items:center}.peak-kicker{opacity:calc(1 - var(--flap))}.letter-slot{place-items:end center;width:100%;min-height:0;display:grid}.letter{aspect-ratio:1.55;perspective:900px;--spread:46%;width:min(100%,30rem,42svh);position:relative}.letter>*{position:absolute}.letter__back{background:color-mix(in srgb, var(--sunken) 75%, var(--edge));border-radius:4px;inset:0}.letter__front{z-index:4;background:linear-gradient(180deg, color-mix(in srgb, var(--sunken) 85%, white), var(--sunken));clip-path:polygon(0 0,50% 46%,100% 0,100% 100%,0 100%);border-radius:4px;inset:0;box-shadow:0 18px 34px -20px #3b2a1f8c}.letter__flap{transform-origin:50% 0;background:color-mix(in srgb, var(--sunken) 60%, var(--edge));clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:hidden;height:58%;inset:0 0 auto}.letter__flap--closed{z-index:5;transform:rotateX(calc(var(--flap) * 178deg))}.letter__flap--open{z-index:2;transform:rotateX(calc(var(--flap) * 178deg - 180deg));background:color-mix(in srgb, var(--sunken) 80%, var(--edge))}.seal--flap{background:#d32f2f;top:82%}.letter__photos{z-index:3;inset:0}.letter__photo{width:46%;position:absolute;bottom:6%}.letter__caption{text-align:center;padding:.45rem .2rem .6rem;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.15}.letter__photo--a{transform:translate(calc(var(--rise) * var(--spread) * -1), calc(var(--rise) * -138%)) rotate(calc(var(--rise) * -6deg));inset-inline-start:4%}.letter__photo--b{transform:translate(calc(var(--rise) * var(--spread)), calc(var(--rise) * -130%)) rotate(calc(var(--rise) * 5deg));inset-inline-end:4%}.peak-copy{opacity:var(--words);transform:translateY(calc((1 - var(--words)) * 14px))}.act--close{padding:4rem 1.25rem 6rem}.ahead{justify-content:center;gap:clamp(.6rem,2vw,1.25rem);margin-bottom:3rem;display:flex}.ahead__stop{aspect-ratio:.86;border:2px dashed var(--edge);background:color-mix(in srgb, var(--page) 70%, white);text-align:center;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;width:clamp(6rem,27vw,9.5rem);padding:.5rem;display:flex}.ahead__stop:first-child{rotate:-3deg}.ahead__stop:nth-child(2){translate:0 .75rem;rotate:2deg}.ahead__stop:nth-child(3){rotate:-1.5deg}@media (min-width:56rem){.hero-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center}.hero-stack{width:min(100%,40rem,80svh)}.two-grid{grid-template-columns:1fr auto 1fr;grid-template-areas:"title title title""his photo hers";align-items:center;column-gap:clamp(1rem,3vw,3rem)}.two-photo{width:min(32rem,36vw,74.4svh)}.caption-card--his{justify-self:end;margin-block-end:18%}.caption-card--hers{justify-self:start;margin-block-start:18%}.caption-card--his{transform:translateX(calc((1 - var(--his)) * -3rem))}.caption-card--hers{transform:translateX(calc((1 - var(--hers)) * 3rem))}.sealed-grid{align-items:center}.letter{width:min(34rem,44vw,48svh)}.sealed-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.envelope{width:clamp(11rem,21vw,19rem)}}@media (min-width:56rem) and (max-height:44rem){.hero-stack{width:min(100%,30rem,72svh)}.two-photo{width:min(26rem,32vw,62.4svh)}}@media (max-width:26rem){.caption-card__quote{font-size:1.35rem}}@media (max-width:55.99rem){.letter{--spread:12%}.caption-card--his{transform:translateX(calc((1 - var(--his)) * -1.5rem))}.caption-card--hers{transform:translateX(calc((1 - var(--hers)) * 1.5rem))}}.hero-copy,.sealed-copy,.two-title,.peak-copy,.peak-kicker{background:var(--page);box-shadow:0 0 1.5rem 1.25rem var(--page);border-radius:1.5rem;position:relative}.ahead__stop .hand-caveat{white-space:nowrap;font-size:clamp(1.2rem,3.6vw,1.6rem);line-height:1.1}.topbar{z-index:20;padding:max(.6rem, env(safe-area-inset-top)) clamp(1rem, 5vw, 3rem) .6rem;background:color-mix(in srgb, var(--page) 88%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb, var(--ink) 8%, transparent);justify-content:space-between;align-items:center;gap:1rem;display:flex;position:sticky;top:0}.topbar__mark{letter-spacing:-.01em;font-size:1.25rem;font-weight:600}.topbar__cta{min-height:2.6rem;padding-block:.45rem;font-size:.95rem}.band{padding:clamp(4rem,9vw,7.5rem) clamp(1.25rem,6vw,5rem);scroll-margin-top:5.5rem}.band--sunken{background:color-mix(in srgb, var(--sunken) 55%, var(--page))}.band__inner{max-width:68rem;margin-inline:auto}.band__inner--narrow{max-width:44rem}.steps{counter-reset:step;grid-template-columns:1fr;gap:1.25rem;display:grid}.step{padding-top:2.6rem;position:relative}.step__n{top:1.15rem;background:var(--ink);width:2.1rem;height:2.1rem;color:var(--cream-50);font-family:var(--font-display);border-radius:50%;place-items:center;font-size:1.05rem;font-weight:700;display:grid;position:absolute;inset-inline-start:1.15rem}.step h3{margin-top:.6rem}.chips{flex-wrap:wrap;gap:.6rem;display:flex}.chip{background:color-mix(in srgb, var(--surface) 80%, transparent);border:1px solid color-mix(in srgb, var(--edge) 55%, transparent);font-size:var(--text-caption);color:var(--ink-muted);border-radius:999px;padding:.45rem .9rem}.preview__frame{background:var(--page);border-radius:28px;max-width:30rem;max-height:min(34rem,78svh);margin-inline:auto;padding:clamp(1rem,3vw,2rem) clamp(.75rem,3vw,2rem) 0;overflow:hidden;box-shadow:0 0 0 1px #2e231c14,0 30px 60px -40px #2e231ccc;-webkit-mask-image:linear-gradient(#000 72%,#0000 100%);mask-image:linear-gradient(#000 72%,#0000 100%)}.preview{text-align:center}.facts{grid-template-columns:1fr;gap:1.25rem;display:grid}.faq{padding:1.1rem 1.25rem}.faq__q{cursor:pointer;justify-content:space-between;align-items:center;gap:1rem;min-height:2.75rem;font-weight:600;list-style:none;display:flex}.faq__q::-webkit-details-marker{display:none}.faq__chev{width:1rem;height:1rem;transition:rotate .2s var(--ease-out);flex:none}.faq[open] .faq__chev{rotate:180deg}.footer{padding:clamp(3rem, 7vw, 5rem) clamp(1.25rem, 6vw, 5rem) calc(clamp(3rem, 7vw, 5rem) + env(safe-area-inset-bottom));text-align:center;border-top:1px solid color-mix(in srgb, var(--ink) 8%, transparent)}@media (min-width:52rem){.steps,.facts{grid-template-columns:repeat(3,minmax(0,1fr))}}.act--two{--his:clamp(.25, calc((var(--p) - .12) / .3), 1);--hers:clamp(.25, calc((var(--p) - .45) / .3), 1);--title:clamp(.35, calc(var(--p) / .15), 1)}.act--peak{--words:clamp(.35, calc((var(--p) - .55) / .2), 1)}@media (prefers-reduced-motion:no-preference){.act--peak{height:240svh}}
