@font-face{font-family:Nunito;src:url(nunito.woff2) format('woff2');font-display:swap}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#eef5f8;color:#0d2942;font:16px/1.5 Nunito,system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer}a{color:#125ca4}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #f6ac57;outline-offset:3px}[hidden]{display:none!important}.opening{min-height:100svh;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 52%,#267ac0 0,#1866aa 37%,#0d467e 75%,#0d2942 120%);color:white;text-align:center;padding:45px 18px 25px}.opening-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,#b5e6f71c 0 2px,transparent 3px),radial-gradient(circle at 85% 65%,#ffdfac55 0 2px,transparent 3px);background-size:87px 83px,110px 120px;opacity:.65}.opening-inner{position:relative;width:min(100%,540px);margin:auto}.opening-logo{width:122px;max-height:52px;object-fit:contain;background:white;border-radius:12px;padding:8px 13px;margin:0 auto 29px}.eyebrow{display:block;color:#1477ad;font-weight:900;font-size:11px;letter-spacing:.2em}.eyebrow.light{color:#ccebf9}.opening h1{font-size:clamp(44px,12vw,66px);line-height:1.05;letter-spacing:-.045em;margin:8px 0;font-weight:900}.heart{color:#f6a759;font-size:.4em;margin-left:9px;vertical-align:top}.opening-sub{max-width:310px;margin:11px auto 38px;color:#e2f2fa;font-size:15px}.envelope-button{appearance:none;border:0;background:none;color:inherit;display:flex;flex-direction:column;align-items:center;width:100%;padding:0}.envelope{position:relative;display:block;width:min(77vw,350px);height:min(51vw,233px);filter:drop-shadow(0 22px 20px #071b3266);perspective:800px;margin:45px auto 0}.back{position:absolute;inset:0;background:#76c9ee;border-radius:8px 8px 12px 12px;box-shadow:inset 0 0 0 2px #ffffff38}.letter{position:absolute;z-index:2;left:8%;width:84%;height:94%;bottom:5%;background:#fffdf5;color:#0d2942;border-radius:7px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 2px 10px #09193240;transition:transform 1s cubic-bezier(.2,.8,.15,1);padding:12px}.letter-mark{font-size:9px;letter-spacing:.16em;color:#278fc7;font-weight:900}.letter-head{font-weight:900;font-size:clamp(20px,6vw,31px);line-height:1.08;letter-spacing:-.04em;margin:14px 0}.letter-date{font-size:9px;font-weight:900;letter-spacing:.08em;color:#ef924a}.front{position:absolute;z-index:4;inset:0;background:linear-gradient(145deg,#a1daf4 0 49.7%,transparent 50%) left/50% 100% no-repeat,linear-gradient(215deg,#a1daf4 0 49.7%,transparent 50%) right/50% 100% no-repeat,linear-gradient(180deg,#52ace0,#4b9dd3);clip-path:polygon(0 0,50% 53%,100% 0,100% 100%,0 100%);border-radius:0 0 12px 12px;box-shadow:inset 0 -2px 0 #ffffff25}.flap{position:absolute;z-index:5;inset:-1px 0 48%;background:#b5e6fa;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transition:transform .65s ease,z-index 0s .35s;backface-visibility:hidden}.seal{position:absolute;z-index:6;top:48%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:49px;height:49px;border-radius:50%;background:#f4a65e;color:#fff;font-size:25px;box-shadow:0 2px 8px #245e9370;transition:opacity .3s}.opening.open .flap{transform:rotateX(180deg);z-index:1}.opening.open .letter{transform:translateY(-80%)}.opening.open .seal{opacity:0}.tap-label{font-weight:900;letter-spacing:.14em;font-size:11px;color:#e0f3fe;display:block;margin:34px auto 20px;animation:pulse 2s infinite}.tap-label span{font-size:17px;margin-left:5px}.opening-footer{font-size:9px;font-weight:900;letter-spacing:.18em;color:#b3dcf3;margin:45px auto 0}.sparkle{position:absolute;font-size:31px;color:#e5c888;animation:twinkle 3s infinite}.s1{left:1%;top:28%}.s2{right:5%;top:38%;animation-delay:1s}.s3{left:11%;bottom:19%;animation-delay:1.8s}@keyframes twinkle{50%{opacity:.25;transform:scale(.75)}}@keyframes pulse{50%{opacity:.55}}.revealed{max-width:680px;margin:auto;background:#f8fbfc;min-height:100svh;box-shadow:0 0 70px #052c5220;animation:fadeIn .7s both}@keyframes fadeIn{from{opacity:0;transform:translateY(15px)}}.site-header{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;border-bottom:1px solid #dae8ee}.site-header img{width:108px}.site-header span{font-size:9px;letter-spacing:.1em;font-weight:900;color:#247aab}.intro{text-align:center;padding:47px 25px 28px}.intro h2,.rsvp h2,.thanks h2{font-size:clamp(36px,9vw,55px);line-height:1.07;letter-spacing:-.045em;margin:10px auto 14px;font-weight:900}.intro em,.rsvp em{color:#43a8cc;font-style:normal}.intro p{max-width:320px;margin:auto;font-size:15px;color:#546a79}.flyer-frame{margin:0 18px;background:white;border-radius:17px;padding:7px;box-shadow:0 14px 37px #0b3e6530}.flyer-frame img{width:100%;height:auto;display:block;border-radius:11px}.detail-card{background:#fff;margin:24px 18px 48px;border:1px solid #d6e9f1;border-radius:16px;padding:12px 21px;box-shadow:0 9px 30px #0d4f7810}.detail{display:flex;align-items:start;gap:17px;padding:17px 0;border-bottom:1px solid #e7eff2}.detail-icon{color:#4baacb;font-size:29px;line-height:1}.detail small{display:block;font-size:10px;color:#2a91ba;letter-spacing:.17em;font-weight:900}.detail strong,.detail a,.detail div>span{display:block}.detail strong{font-size:16px}.detail div>span,.detail a{font-size:13px}.calendar-link{display:flex;justify-content:space-between;align-items:center;text-decoration:none;font-weight:900;margin:15px 0 5px;font-size:14px}.rsvp{background:#0d2942;color:white;padding:66px clamp(23px,7vw,60px) 75px}.rsvp>.eyebrow{color:#9ddaf2}.rsvp h2{margin:8px 0 13px}.rsvp>p{color:#c7dfe9;max-width:380px;margin:0 0 35px}.field{margin:0 0 20px}.field label,.buddy-field legend{display:block;font-weight:800;font-size:13px;margin-bottom:8px}.field label span,.buddy-field legend span{color:#ffb881}.field input{width:100%;border:1px solid #b4d6e2;border-radius:11px;background:white;color:#0d2942;padding:14px 15px;font-size:16px;min-height:52px}.field input::placeholder{color:#728694}.buddy-field{border:0;margin:5px 0 19px;padding:0;width:100%}.radio-row{display:grid;gap:9px}.radio-card{display:flex;align-items:center;gap:10px;border:1px solid #648297;border-radius:11px;padding:15px;background:#1b3c56;font-weight:750;cursor:pointer}.radio-card:has(input:checked){background:#e4f5fb;color:#0d2942;border-color:#8fd4eb}.radio-card input{accent-color:#167faf;width:19px;height:19px;flex:none}.buddy-names{background:#214660;border-radius:14px;padding:19px 17px 2px;margin:10px 0 20px;animation:fadeIn .3s}.buddy-names>p{margin:0 0 15px;font-weight:800}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-error{background:#ffede8;color:#8b271b;border-radius:9px;padding:12px 14px;font-size:14px}.submit{background:#f3a459;color:#112d44;border:0;border-radius:11px;padding:17px 22px;width:100%;min-height:55px;font-weight:1000;letter-spacing:.12em;display:flex;justify-content:space-between;align-items:center}.submit:disabled{opacity:.6;cursor:wait}.submit span{font-size:22px}.form-note{display:block;color:#9cb9c8;text-align:center;margin:18px auto;font-size:11px}.thanks{padding:75px 25px;text-align:center;background:#e7f6fb}.thanks-heart{font-size:64px;color:#56b1d0}.thanks p{color:#37556a}.thanks a{display:inline-block;background:#0d2942;color:white;padding:13px 22px;border-radius:10px;text-decoration:none;font-weight:850;margin-top:18px}footer{text-align:center;padding:32px;color:#668394;font-size:12px}footer span{color:#f3a459;margin-left:5px}@media(min-width:700px){body{background:#e4f0f6}.opening{min-height:100vh}}@media(max-width:375px){.two-fields{grid-template-columns:1fr}.opening-sub{margin-bottom:20px}.opening-footer{margin-top:25px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.features{position:relative;overflow:hidden;background:linear-gradient(180deg,#a1daf4 0,#c6e9f9 55%,#e2f4fc 100%);color:#0d2942;text-align:center;padding:52px 18px 56px;margin:0}
.features:before{content:"✦  ·  ✧  ·  ✦";position:absolute;top:18px;left:0;right:0;color:#ffffffcc;font-size:12px;letter-spacing:.4em}
.eyebrow.light{color:#a1daf4}.features .eyebrow{color:#0f5f93}
.features h2{color:#0d2942;margin:10px auto 8px}.features h2 em{color:#3f9e31}
.features-sub{color:#1d4a6e;margin:0 auto 30px;font-weight:700;font-size:15px}
.feature-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.feature-card{display:flex;align-items:center;gap:16px;text-align:left;background:#fff;color:#0d2942;border-radius:20px;padding:18px 18px 18px 16px;box-shadow:0 12px 28px #0d4f7833;border-left:6px solid var(--c)}
.feature-icon{flex:0 0 62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:31px;background:var(--t);box-shadow:inset 0 0 0 3px var(--c)}
.feature-card h3{margin:0 0 3px;font-size:19px;line-height:1.2;font-weight:900;letter-spacing:-.01em}
.feature-card p{margin:0;font-size:14.5px;line-height:1.4;color:#3d5a72}
.buddy-card{margin:22px 0 0;background:linear-gradient(135deg,#f6ac57,#ef924a);color:#0d2942;border-radius:22px;padding:26px 22px 24px;box-shadow:0 16px 34px #0d4f7840}
.buddy-heart{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;font-size:28px;box-shadow:0 6px 16px #0d294233}
.buddy-card h3{margin:12px 0 6px;font-size:24px;font-weight:900;letter-spacing:-.02em}
.buddy-card p{margin:0 auto 18px;max-width:30em;font-weight:700;font-size:15px}
.buddy-cta{display:inline-block;background:#0d2942;color:#fff;text-decoration:none;font-weight:900;font-size:13px;letter-spacing:.16em;padding:13px 22px;border-radius:999px}
.js .reveal{opacity:0;transition:opacity .7s ease,transform .8s cubic-bezier(.2,1.25,.4,1);transition-delay:var(--d,0s)}
.js .reveal.from-left{transform:translateX(-60px) scale(.94)}
.js .reveal.from-right{transform:translateX(60px) scale(.94)}
.js .reveal.pop{transform:scale(.7) translateY(30px)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.in .feature-icon,.js .reveal.in .buddy-heart{animation:iconPop .6s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--d,0s) + .25s)}
@keyframes iconPop{0%{transform:scale(.3) rotate(-20deg)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1!important;transform:none!important;transition:none!important}.js .reveal .feature-icon,.js .reveal .buddy-heart{animation:none!important}}
@media(min-width:700px){.features{padding:64px 40px}}
