@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
:root{color-scheme:light;--navy:#142b43;--blue:#224d75;--copy:#516577;--paper:#f7f9fb}*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;font-family:Manrope,'Segoe UI',sans-serif;color:var(--navy);-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}a{color:inherit}::selection{background:#ccdfef}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #518ac4;outline-offset:5px}.gift-page{min-height:100svh;display:grid;grid-template-columns:.9fr 1.1fr}.gift-intro{position:sticky;top:0;min-height:100svh;height:100svh;padding:52px clamp(35px,5vw,90px);display:flex;flex-direction:column;background:var(--navy);color:#fff;overflow:hidden}.gift-brand{align-self:flex-start;background:#fff;padding:18px 21px;border-radius:3px}.gift-brand img{display:block;width:185px;height:auto}.gift-heading{margin:auto 0;padding:56px 0 100px}.gift-heading h1{font-size:clamp(62px,6.4vw,105px);line-height:1.02;letter-spacing:-.045em;font-weight:500;margin:0;animation:letter-arrive 1.15s cubic-bezier(.16,1,.3,1) both}.gift-heading p{font-size:16px;line-height:1.75;color:#c8dbea;margin:32px 0 0;animation:letter-arrive 1.15s .12s cubic-bezier(.16,1,.3,1) both}.gift-signature{position:absolute;bottom:25px;right:55px;font-family:Georgia,serif;font-style:italic;font-size:clamp(95px,10vw,155px);letter-spacing:-.08em;color:#91b4d1;transform:rotate(-8deg);opacity:.44;pointer-events:none}.gift-letter{padding:clamp(52px,6vw,95px) clamp(36px,6vw,110px) 70px;max-width:870px;align-self:center}.gift-letter article{max-width:590px;animation:letter-arrive .95s .12s cubic-bezier(.16,1,.3,1) both}.gift-letter h2{font-size:26px;font-weight:600;letter-spacing:-.025em;margin:0 0 25px}.gift-letter p{font-size:15px;line-height:1.9;color:var(--copy);margin:0 0 19px}.gift-letter strong{color:var(--navy);font-weight:700}.gift-letter .letter-signoff{margin-top:26px;margin-bottom:0}.gift-access{border-top:1px solid #cad7e2;padding-top:29px;margin-top:34px;animation:letter-arrive .95s .24s cubic-bezier(.16,1,.3,1) both}.gift-access label{display:block;font-weight:600;font-size:13px;margin-bottom:11px}.password-field{display:flex;align-items:center;min-height:55px;border:1px solid #8ba4b9;border-radius:4px;background:#fff}.password-field:focus-within{border-color:#1c4e7d;box-shadow:0 0 0 2px #1c4e7d1c}.password-field input{width:100%;min-width:0;padding:16px;color:var(--navy);border:0;outline:0;font-size:16px;background:none;border-radius:4px}.password-field:has(input:focus-visible){outline:3px solid #518ac4;outline-offset:3px}.password-reveal{border:0;background:transparent;color:#496780;padding:13px;display:grid;place-items:center}.password-reveal svg{width:21px;height:21px}.gift-letter .access-error{font-size:12px;line-height:1.6;color:#9b302b;margin:9px 0 0}.access-error:empty{display:none}.open-gift{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;border:0;border-radius:4px;padding:18px 21px;background:var(--navy);color:#fff;font-size:14px;font-weight:700;transition:background .2s,transform .2s}.open-gift:hover{background:#24567e;transform:translateY(-2px)}.open-gift:disabled{opacity:.7;cursor:wait}.open-gift svg{width:21px;height:21px;flex:none}.gift-letter:has(.access-error:not(:empty)) .password-field{border-color:#9b302b}@keyframes letter-arrive{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@media(min-width:1600px){.gift-letter{max-width:920px}.gift-letter p{font-size:16px}.gift-intro{padding-top:65px}}
@media(max-width:1050px){.gift-page{grid-template-columns:.83fr 1.17fr}.gift-intro{padding:35px}.gift-brand img{width:155px}.gift-heading h1{font-size:67px}.gift-letter{padding:45px 38px}.gift-letter p{font-size:14px}}
@media(max-width:760px){.gift-page{display:block}.gift-intro{position:relative;min-height:0;height:auto;padding:27px 24px 50px}.gift-brand{padding:13px 16px}.gift-brand img{width:156px}.gift-heading{margin:0;padding:48px 0 0}.gift-heading h1{font-size:clamp(49px,9vw,68px);line-height:1.05;letter-spacing:-.035em}.gift-heading h1 br:last-child{display:none}.gift-heading h1 br:last-child:after{content:' '}.gift-heading p{font-size:13px;margin:22px 0 0}.gift-signature{font-size:100px;right:30px;bottom:25px}.gift-letter{padding:42px 24px 48px;max-width:650px;margin:auto}.gift-letter h2{font-size:25px}.gift-letter p{font-size:14px;line-height:1.85;margin-bottom:18px}.gift-access{margin-top:30px}.gift-letter .letter-signoff{margin-top:24px}}
@media(max-width:380px){.gift-intro{padding-inline:18px}.gift-letter{padding-inline:18px}.gift-heading h1{font-size:47px}.gift-signature{font-size:82px;right:20px}.open-gift{font-size:12px;padding-inline:17px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.gift-signature{opacity:.62}
@media(max-width:760px){.gift-heading h1 br:last-child{display:inline}.gift-heading h1 br:last-child:after{content:none}.gift-signature{font-size:80px;right:22px}}
@media(max-width:380px){.gift-signature{font-size:64px}}
.gift-maker{position:absolute;right:clamp(35px,5vw,90px);bottom:36px;width:min(64%,256px)}.gift-maker img{display:block;width:100%;height:auto}.gift-access{border-top:0;margin-top:0;padding-top:0}.gift-letter{width:100%}
@media(max-width:760px){.gift-maker{position:static;width:220px;max-width:70%;margin:32px 0 0 auto}.gift-heading{padding-bottom:0}}
