/* Sunlit garden wedding: a decorative skin over the existing social structure. */
:root{
 --iv:#fffaf4;--ww:#fffefb;--cr:#f9e8df;--ch:#364f58;--deep:#785a4b;--mu:#8b796e;
 --te:#527787;--go:#b99046;--go2:#8f7137;
 --nav-h:76px;
 --sh-soft:0 5px 18px #ad8c6010,0 1px 3px #ad8c600a;
 --gold-foil:linear-gradient(120deg,#b0873d,#f4df9e 28%,#c5a15b 48%,#fff2c6 68%,#b0873d);
}
body{background:#e7eff1}
#stage{background:radial-gradient(ellipse at 20% 12%,#fffefa 5%,transparent 60%),radial-gradient(ellipse at 95% 95%,#c8dfea80,transparent 55%),linear-gradient(135deg,#e1f0f5,#f7f1e8 65%,#e8e6db)}
#phone.nav-on{background:radial-gradient(ellipse at 100% 0,#dceef477,transparent 45%),radial-gradient(ellipse at 0 65%,#dbe7e677,transparent 48%),var(--iv);border-color:#fff7e5;box-shadow:0 30px 90px #69828c28,0 0 0 8px #fffaf1,0 0 0 9px #c6ac7580}
.hdr{position:relative;background:linear-gradient(110deg,#fffdf7,#e8f1f3 65%,#f3f5ee);border-bottom:1px solid #d5bd8955}
.hdr::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:3px;background:var(--gold-foil);pointer-events:none}
.hdr .nm{color:#806449}
.hdr .sub{color:#73858a;letter-spacing:.14em}
.av{background:linear-gradient(135deg,#9dbdcb,#557988);box-shadow:inset 0 0 0 1px #ffedbe;color:#fffdf4}
.av+.av{background:linear-gradient(135deg,#b8d9e3,#779eac)}
.tick{background:#c5a262;color:#fff}
.blessbtn{position:relative;background:linear-gradient(115deg,#fffdf1,#fae9c2,#fff8e3);border-color:#d5b878;color:#8a6b36;box-shadow:inset 0 1px #fff,0 3px 8px #b38a3420}
.blessbtn::after{content:'✧';position:absolute;right:-5px;top:-7px;color:#b18b42;font-size:15px}
.tray{background:radial-gradient(ellipse at 0 0,#e4ebdf80,transparent 65%),radial-gradient(ellipse at 100% 0,#d9eef799,transparent 65%);border-bottom:1px solid #c5ab6b22}
.ring,.ring.gold{position:relative;background:conic-gradient(from 30deg,#d3aa59,#fff2be,#87adbc,#eccb79,#eff8fa,#bfa05e);box-shadow:0 3px 9px #b8895b22}
.ring.gold::after{content:'✦';position:absolute;right:-3px;top:-4px;font-size:15px;color:#af8437;text-shadow:0 1px white}
.rin{background:linear-gradient(135deg,#a7c5ce,#527b8b);border-color:#fffaf4;color:#fff}
.ring.gold .rin{background:linear-gradient(135deg,#c4e2ea,#88aeb9)}
.ring.plus{background:linear-gradient(135deg,#fff8e6,#e4eef0);border:1.5px dashed #c0a064;color:#a67d45;box-shadow:0 0 0 4px #f3e5c54d}
.ring.seen{background:linear-gradient(135deg,#e6d7b5,#d2bca3)}
.rlab{color:#947267}
.pill{border-color:#dec99e;background:linear-gradient(120deg,#fffefa,#fff7eb);color:#927359;box-shadow:inset 0 1px white,0 2px 5px #b58d3610}
.pill.on{background:linear-gradient(115deg,#dce9ed,#e9eff0);border-color:#8da9b1;color:#355b6b;box-shadow:inset 0 1px #fff8f9,0 3px 8px #547a8a26}
.pill.lock{background:linear-gradient(115deg,#edf4f4,#faf3e6);border-color:#d9d4c1;color:#8b8574}
.card{border-color:#dcc59a66;background:#fffefa;box-shadow:var(--sh-soft)}
.post-card{border-radius:18px;box-shadow:0 5px 22px #b8915812,0 0 0 3px #fffcf666}
.post-card>div:first-child{background:linear-gradient(100deg,#fffdf5,#edf3f4)}
.post-media{isolation:isolate;border-radius:0;background:radial-gradient(ellipse at 50% 5%,#fefdf7,transparent 65%),linear-gradient(155deg,#d4edf5,#f7eae6 55%,#c4dce3);color:#8b6b47}
.post-media.d-prewed{background:radial-gradient(ellipse at 50% 0,#fffefa,transparent 65%),linear-gradient(155deg,#d3eaf4,#f2efdf 50%,#d6e3dc)}
.post-media.d-mehendi{background:linear-gradient(140deg,#e0ebd9,#f8f3dd 50%,#e9dcc0)}
.post-media.d-rasam{background:linear-gradient(140deg,#fff2c2,#fce4c6 55%,#f7d4c7)}
.post-media.d-sagai{background:linear-gradient(140deg,#eae4f2,#fff6e9 55%,#d8e2e7)}
.post-media::before{content:'';position:absolute;inset:14px;border:1px solid #bb965fa0;border-radius:48% 48% 3px 3px / 34% 34% 3px 3px;box-shadow:0 0 0 5px #fffdf344,0 0 0 6px #c6a76c33,inset 0 0 25px #fff8e777;pointer-events:none}
.post-media::after{z-index:-1;background:radial-gradient(circle at 15% 18%,#c49a49 0 1px,transparent 2px),radial-gradient(circle at 85% 28%,#fff 0 2px,transparent 3px),radial-gradient(circle at 20% 72%,#fff 0 1px,transparent 2px),radial-gradient(circle at 80% 80%,#bc9849 0 1px,transparent 2px);animation:wedding-glint 5s ease-in-out infinite}
.moment-art{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:38px 25px;gap:18px;width:100%;height:100%;text-transform:none;letter-spacing:normal}
.moment-art::before,.moment-art::after{content:'✧';position:absolute;font-family:serif;font-size:48px;line-height:1;color:#a7b9a688;text-shadow:2px 2px #fff8;pointer-events:none}
.moment-art::before{left:-6px;bottom:17px;transform:rotate(-20deg)}
.moment-art::after{right:-9px;top:28px;transform:rotate(25deg);color:#c2a06466}
.moment-kicker,.moment-signoff{font-size:9px;letter-spacing:.28em;color:#96783e}
.moment-flourish{font-size:30px;color:#ba9755;line-height:1;filter:drop-shadow(0 1px white)}
.moment-names{font-size:clamp(38px,10vw,52px);line-height:1.1;display:flex;flex-direction:column;color:#987444;text-shadow:0 1px #fff}
.moment-names i{font-size:30px;color:#688b96;margin:8px 0;font-weight:400}
.moment-rule{font-size:14px;color:#ba9755;letter-spacing:.15em}
.moment-note{font-size:11px;line-height:1.6;color:#8a736b;max-width:230px}
.moment-signoff{font-size:8px;margin-top:9px}
.nav{background:linear-gradient(100deg,#fdf5ef,#e3eef0 50%,#edf5f6);border-top:1px solid #cdb077;box-shadow:0 -5px 20px #ba957917;padding:4px 7px env(safe-area-inset-bottom);gap:5px}
.nav button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0 8px;letter-spacing:.14em;color:#8e7c6b;border-radius:15px;transition:background .25s,transform .25s}
.nav-jewel{display:grid;place-items:center;width:32px;height:30px;font-size:24px;line-height:1;color:#b79551;filter:drop-shadow(0 1px white)}
.nav button.on{color:#416777;background:linear-gradient(130deg,#fff7dfcc,#dbe8edcc);box-shadow:inset 0 0 0 1px #ddbd8355,0 2px 5px #b8945420}
.nav button.on .nav-jewel{color:#416777;text-shadow:0 0 8px #fff}
.nav button.on::before{content:'✦';top:3px;left:auto;right:15%;transform:none;width:auto;height:auto;font-size:9px;background:none;color:#b38c42}
.btn{background:linear-gradient(115deg,#fffdf7,#faf0de);border-color:#d0b47a;color:#927044;box-shadow:inset 0 1px white,0 3px 8px #af8a4010}
.btn.pri,.chip.on,.seg-chip.on{background:linear-gradient(115deg,#acc8d3,#dce8e8 60%,#f4e4bf);border-color:#8eabb2;color:#355a67;box-shadow:inset 0 1px #fff8,0 3px 8px #597d8b20}
.chip,.seg-chip{border-color:#d9c69e;background:#fffaf1}
.pass-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 90% 0,#fff5c9aa,transparent 55%),linear-gradient(115deg,#e2eef2,#e9eeeb);color:#8d6c43;border:1px solid #d1b679;box-shadow:inset 0 0 0 4px #fff9}
.pass-title{color:#947044}.pass-kicker{color:#9c804c}.pass-sub{color:#6d8187}
.pass-mark{color:#a2844b;border-color:#c9ad70;background:linear-gradient(135deg,#fff9dd,#f9ebc9);box-shadow:0 0 0 3px #fff8,inset 0 0 0 3px #fff5}
.pass-ticket{background:linear-gradient(155deg,#fffdf7,#fff5f1);border-color:#d5bb86}
.event-date{background:linear-gradient(135deg,#e6f1f4,#faf0dc);color:#a07d43;border:1px solid #decda4}
.event-actions button,.guest-step button{background:linear-gradient(135deg,#fff8df,#f7e8eb);border:1px solid #d8be8d;border-radius:9px;color:#967549;box-shadow:inset 0 1px white}
.event-status.going{background:#e3efe4;color:#5c795e}
.slab{color:#65838a}
.rxpill{background:linear-gradient(115deg,#fff7e8,#edf3f3);border:1px solid #e8d3bf;box-shadow:inset 0 1px white;color:#947862}
.rxpill.mine{background:#cfe1e7;border-color:#86a9b5;color:#365c6a}
.cmtin input{min-width:0;background:#f7f2ec;border:1px solid #e6d7c5}
.postln{padding:.45rem .65rem;background:linear-gradient(115deg,#f8eac9,#e2eced);border:1px solid #dfc492;border-radius:999px;color:#967443;box-shadow:inset 0 1px white}
#deskCtl{background:linear-gradient(130deg,#fffcf4c9,#e3eef0b8);border-color:#cfb77d88;box-shadow:0 20px 65px #7b8a8d1c;color:#806a56}
.dc-title{color:#a17e43}.dc-sub{color:#6f858b}.dc-hint{color:#a18b82;border-color:#d6b88e55}.dc-date{color:#a17a47}
.stops button{background:#fffcf1;border-color:#dcc79f;color:#9a7b68}
.stops button.cur{background:linear-gradient(115deg,#f8e4b6,#d9e8ed);border-color:#c5a362;color:#8b6c44}
#tl2{background:linear-gradient(90deg,#8fb3c1,#c8dfeb,#d9b86a)}
#tl2::-webkit-slider-thumb{background:var(--gold-foil);border:2px solid #fff9e4;box-shadow:0 0 0 3px #c6ac6b33,0 3px 7px #b9935822}
#gear{background:#fff9e8;color:#ad8c4c;border:1px solid #d3bc88}
.wedding-album{background:radial-gradient(ellipse at 50% 30%,#fffefa 10%,transparent 65%),linear-gradient(130deg,#e0edf2,#fff4eb 45%,#d9e8ed);color:#806c54}
@keyframes wedding-glint{50%{opacity:.35}}
button:focus-visible,.ring:focus-visible{outline:2px solid #b38c42;outline-offset:3px}
@media(hover:hover){.nav button:hover,.btn:hover,.pill:hover,.blessbtn:hover{filter:brightness(1.025);transform:translateY(-1px)}}
@media(prefers-reduced-motion:reduce){.post-media::after{animation:none}.nav button,.btn,.pill,.blessbtn{transition:none;transform:none!important}}
@media(max-width:520px){#phone.nav-on{box-shadow:none;border:none}}

/* Reels and social stories share the daylight palette, including their chrome. */
.reelwrap,#ovl:has(.storybars):not(.love-story-overlay){background:linear-gradient(145deg,#dceef4,#fff9ed 55%,#e5e9dc);color:#365663}
.reelwrap .ph,#ovl:has(.storybars):not(.love-story-overlay) .ph{background:linear-gradient(145deg,#bcdce8,#f9f3e4 60%,#d6dfca);color:#42616b}
.reelwrap .d-mehendi,#ovl:has(.storybars) .d-mehendi{background:linear-gradient(145deg,#c9ddc5,#f7efda 65%,#c4d4bc)}
.reelwrap .d-rasam,#ovl:has(.storybars) .d-rasam{background:linear-gradient(145deg,#f5dda3,#fff7e8 60%,#e6c693)}
.reelwrap .d-sagai,#ovl:has(.storybars) .d-sagai{background:linear-gradient(145deg,#cedce7,#f7f1e7 60%,#dfd8c7)}
.reelwrap .d-wedding,#ovl:has(.storybars) .d-wedding{background:linear-gradient(145deg,#d4e9ef,#fff8e7 60%,#e3d3b0)}
.pi .ph::after{background:linear-gradient(to top,#fff8eaf5,transparent 58%),radial-gradient(ellipse at 30% 10%,#fff9,transparent 50%)}
.pi .ph::before{content:'';position:absolute;inset:75px 16px 18px;border:1px solid #b69a5b66;border-radius:45% 45% 4px 4px / 25% 25% 4px 4px;pointer-events:none}
.cap .who{color:#8a713d}.cap .what{color:#365663;text-shadow:none}
.rail button{color:#446875;text-shadow:0 1px #fff}
.reelwrap .chapter{color:#466773;background:radial-gradient(ellipse at 50% 40%,#fffaf1,transparent 65%)}
.chapter .clab{color:#93733d}
.reelwrap .pill.dark{background:#fffcf1e8;color:#587581;border-color:#c4b583}
.reelwrap .pill.dark.on{background:#d8e8ed;color:#365663;border-color:#91aeb7}
.dark .rxpill,.rxrow.dark .rxpill{background:#fffaf0de;color:#536d76;border:1px solid #d3bc83;box-shadow:inset 0 1px white}
.dark .rxpill.mine,.rxrow.dark .rxpill.mine{background:#d3e5eb;color:#365663}
#ovl:has(.storybars):not(.love-story-overlay) .sb{background:#9bbac44d}
#ovl:has(.storybars):not(.love-story-overlay) .sb i{background:var(--gold-foil)}
#ovl:has(.storybars):not(.love-story-overlay) .xrow{color:#416472}
#ovl:has(.storybars):not(.love-story-overlay) .xrow button{color:#8e713c;background:#fff8e5;border:1px solid #cfb77e;border-radius:50%}
#ovl:has(.storybars):not(.love-story-overlay) .compose{background:#fffaf0eb;border-top:1px solid #d7bf87}
#ovl:has(.storybars):not(.love-story-overlay) .compose input{background:#fffdf7;color:#365663;border-color:#d5c398}
#ovl:has(.storybars):not(.love-story-overlay) .segcap{color:#446571}
#ovl:has(.storybars):not(.love-story-overlay) .btn.ghost{color:#587784;border-color:#adbac0;background:#fffcf1}
#ovl:has(.storybars):not(.love-story-overlay) .segcap{text-shadow:none}.reelwrap .pills .pill{color:#42616b!important;border-color:#c7b37e!important;background:#fffcf0ed!important}.reelwrap .pills .pill.on{background:#d6e7ed!important;color:#355966!important}
/* Their World: consistent contrast across introduction, details and thanks. */
.couple-world .btn.pri{background:linear-gradient(115deg,#d4e6ed,#edf1e5);color:#365663;border-color:#9aafb0;box-shadow:inset 0 1px white,0 4px 12px #6c899522}
.couple-world .btn.ghost{color:#526e78;background:#fffaf0;border-color:#c5b17c}
.couple-world .lt{border-color:#cbb88766}
.couple-world .lt .k{color:#886c34!important}
#ovl:has(.couple-world) .xrow button{width:32px;height:32px;display:grid;place-items:center}
/* One champagne frame and finish from the envelope through the social app.
   Scene backgrounds, imagery and composition remain owned by their screens. */
#phone{border-color:#e3cc97;box-shadow:0 30px 90px #69828c28,0 0 0 8px #fffaf1,0 0 0 9px #c6ac7580}
.wedding-entry-panel{border-color:#e5ca8d;box-shadow:0 20px 50px #5c00002e,inset 0 1px #fff5}
.wedding-entry-panel::before{border-color:#e5ca8d66}
.wedding-entry-rule::before,.wedding-entry-rule::after{background:#e5ca8d}
.wedding-entry-rule span{border-color:#e5ca8d}
.wedding-entry-field input{border-color:#d5b679;box-shadow:inset 0 1px #fff,0 3px 10px #5c000014}
.wedding-entry-continue,.personal-story,.namaste-reveal,.love-join{border:1px solid #d5b679;box-shadow:inset 0 1px #fff8,0 4px 12px #5c00001a}
.personal-audio-card{border-color:#dfc38a;box-shadow:inset 0 1px #fff5,0 .65cqh 1.3cqh #65051918}
.love-card-outline{stroke:#dfc38a}
.love-years::before{background:#dfc38a99}
.love-years button span{border-color:#dfc38a}
.love-years button[aria-current="step"] span{background:#f6e7bd}
.love-pagination button[aria-current="step"]::after{background:#f6e7bd}
.invitation-envelope-interior{box-shadow:inset 0 0 0 1px #c6a76c66}
@media(max-width:520px){#phone{border:none;box-shadow:none}}

/* Primary calls to action: solid sindoor, with high-contrast ivory labels. */
:root{--cta:#9e2432;--cta-text:#fffaf0}
#phone .btn.pri,
#phone .couple-world .btn.pri,
#phone.invitation-world .btn.pri,
#phone .wedding-entry-continue,
#phone .namaste-reveal,
#phone .personal-story,
#phone .love-join,
#phone .compose button,
#phone .postln{
 background:var(--cta);color:var(--cta-text);border:1px solid #881d29;
 box-shadow:inset 0 1px #ffffff20,0 4px 12px #9e243222;
 text-shadow:none;
}
#phone .btn.pri:hover,#phone .wedding-entry-continue:hover,
#phone .namaste-reveal:hover,#phone .personal-story:hover,#phone .love-join:hover{background:#861c29;color:var(--cta-text)}
#phone .btn.pri:active,#phone .wedding-entry-continue:active{background:#761824;color:var(--cta-text)}
#phone .btn.pri:focus-visible,#phone .wedding-entry-continue:focus-visible,
#phone .namaste-reveal:focus-visible,#phone .personal-story:focus-visible,
#phone .love-join:focus-visible{outline:2px solid #b99046;outline-offset:3px}
#phone .album-see{background:var(--cta);color:var(--cta-text);border:1px solid #e4bf7b;box-shadow:0 0 0 3px #fff3,inset 0 1px #fff2;text-shadow:none}
#phone .namaste-reveal,#phone .namaste-reveal:hover,#phone .personal-story,#phone .personal-story:hover{background:#f0f0f0;color:#101010;border-color:#f0f0f0;box-shadow:0 4px 12px #5c00001a}
/* The opening invitation introduces the same gold frame and sky-toned ink. */
.invitation-cover::after{content:'';position:absolute;inset:12px;z-index:4;border:1px solid #bda16b;border-radius:30px;box-shadow:inset 0 0 0 4px #fffaf033,inset 0 0 0 5px #cfb67d33;pointer-events:none}
.invitation-cover.is-opening::after{opacity:0;transition:opacity .35s}
.invitation-heading h1{color:#365663}
.invitation-heading p{color:#526c75}
.invitation-quote{color:#b99046}
.invitation-brand p{color:#526c75;letter-spacing:.035em}
.invitation-envelope-bottom path{stroke:#d7c18f}
.invitation-envelope-flap svg>path:last-child{stroke:#d7c18f}
.invitation-seal{filter:drop-shadow(0 10px 12px #9e24322a)}
.invitation-seal:focus-visible{outline:2px solid #b99046;outline-offset:5px}
/* Cool blue paper on the first envelope; a restrained champagne edge. */
.invitation-cover{--inv-paper:#edf5f8;--inv-fold:#d8e8ef}
.invitation-cover::after{border-color:#9fbcc9;box-shadow:inset 0 0 0 4px #ffffff44,inset 0 0 0 5px #bdd0d933}
.invitation-envelope-interior{box-shadow:inset 0 0 0 1px #9fbcc966}
.invitation-envelope-bottom path,.invitation-envelope-flap svg>path:last-child{stroke:#adc5d1}
.invitation-quote{color:#7f9fab}
/* Break the seal, lift the hinged flap, then slide the intact envelope down.
   Glued side seams remain attached to the pocket throughout. */
.invitation-envelope{transform-style:preserve-3d}
.invitation-envelope-flap{transform-origin:50% 0;transform-style:preserve-3d}
.is-opening .invitation-seal{animation:invitationSealLift 500ms ease both}
.is-opening .invitation-envelope-flap{animation:invitationFlapLift 1000ms 320ms var(--easeIO) both}
.is-opening .invitation-envelope-left,.is-opening .invitation-envelope-right,
.is-opening .invitation-envelope-bottom,.is-opening .invitation-envelope-interior{animation:none}
.is-opening .invitation-envelope{animation:envelopeWithdraw 1150ms 1300ms var(--easeIO) both}
.is-opening .invitation-heading{animation:invitationHeadingLeave 850ms 1450ms var(--ease) both}
.is-opening .invitation-brand{animation:invitationBrandLeave 850ms 1450ms var(--ease) both}
.is-opening .invitation-celebration{visibility:hidden}
.invitation-cover.is-opening::after{transition:opacity .7s 1.3s}
@keyframes invitationSealLift{0%{transform:translate(-50%,-50%);opacity:1}65%{transform:translate(-50%,-50%) scale(1.04);opacity:1}100%{transform:translate(-50%,-43%) scale(.98);opacity:0}}
@keyframes invitationFlapLift{0%{transform:rotateX(0);opacity:1}100%{transform:rotateX(170deg);opacity:1}}
@keyframes envelopeWithdraw{0%{transform:translateY(0);opacity:1}80%{opacity:1}100%{transform:translateY(110%);opacity:0}}
@keyframes invitationHeadingLeave{to{opacity:0;transform:translateY(-30px)}}
@keyframes invitationBrandLeave{to{opacity:0;transform:translateY(30px)}}
@media(prefers-reduced-motion:reduce){.is-opening .invitation-envelope,.is-opening .invitation-envelope-flap{animation:none}}
/* Opening paper follows the Time Machine's warm ivory / mist-blue balance. */
.invitation-cover{--inv-paper:#f6f7f1;--inv-fold:#e7eeeb}
.invitation-envelope-interior{background:linear-gradient(130deg,#fffcf4,#dfecef);box-shadow:inset 0 0 0 1px #cfb77d55}
.invitation-envelope-flap svg>path:first-of-type{fill:url(#invitation-paper-wash)}
.invitation-cover::after{border-color:#cfb77d88;box-shadow:inset 0 0 0 4px #fffaf033,inset 0 0 0 5px #cfb77d22}
.invitation-envelope-bottom path,.invitation-envelope-flap svg>path:last-child{stroke:#cfb77d88}
.invitation-heading h1{color:#806a56}
.invitation-heading p,.invitation-brand p{color:#6f858b}
.invitation-quote{color:#a17e43}

/* Rebuilt envelope: one pocket, one hinged flap, one outer device frame. */
.invitation-cover{background:#8d1522 url('https://fnnwwqcvrhmefilduzih.supabase.co/storage/v1/object/public/relive-showcase/showcase/assets/bg.webp') center/cover;color:#fff8ed}
.invitation-cover::after{display:none}
.invitation-heading{top:10%;left:10%;right:10%}
.invitation-heading h1{color:#fff8ed;font-size:clamp(1.8rem,8cqw,2.3rem)}
.invitation-heading p{color:#f5e6d7;font-size:clamp(.8rem,3.5cqw,1rem);margin-top:2.5cqw}
.invitation-quote{color:#d9c291;font-size:12cqw;height:8cqw}
.invitation-envelope{inset:35% 8% 21%;border-radius:9px;filter:drop-shadow(0 18px 22px #39051040);perspective:1000px}
.invitation-envelope-interior{background:#d6dfda;border-radius:9px;box-shadow:none}
.invitation-envelope-flap{height:66%;z-index:2;filter:drop-shadow(0 3px 2px #5a514019)}
.invitation-envelope-bottom{height:100%;inset:0;filter:none;border-radius:9px}
.invitation-envelope-bottom path{stroke:none;stroke-width:1px}
.invitation-envelope-bottom path:last-child{stroke:#aeb9b4}
.invitation-envelope-flap svg>path:last-child{stroke:none}
.invitation-seal{top:60%;width:min(28cqw,16cqh);z-index:3;filter:drop-shadow(0 5px 5px #5b192d33)}
.invitation-brand{bottom:7%}
.invitation-brand p{color:#f2e6d1;font-size:clamp(.55rem,2.2cqw,.7rem);letter-spacing:.08em}
.invitation-wordmark{filter:invert(1);mix-blend-mode:screen}
.invitation-loading{top:78%}
.invitation-cover.is-opening::after{display:none}
#phone:has(.invitation-cover){box-shadow:0 30px 90px #69828c28;border:1px solid #d3bd8c}
@media(max-width:520px){#phone:has(.invitation-cover){border:none;box-shadow:none}}
.invitation-cover .invitation-wordmark{filter:brightness(0) invert(1);mix-blend-mode:screen;opacity:.94}
/* Five-item floating dock, adapted from the Events App's tilted tiles. */
:root{--nav-h:90px}
#footerNav{padding:0 12px calc(10px + env(safe-area-inset-bottom))}
#footerNav .wedding-dock{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:66px;padding:0 6px;gap:0;border:0;border-radius:26px;background:#fffdf0e0;backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 10px 28px #36566324,0 2px 6px #36566316,inset 0 0 0 1px #ffffffcc}
#footerNav .wedding-dock button{--tile:#e5e6d6;--tile-on:#9b9b6b;--tilt:-6deg;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;min-width:0;height:66px;padding:10px 0 0;border:0;border-radius:0;background:none;color:#4b6873;box-shadow:none;transform:none}
#footerNav .wedding-dock button:nth-child(2){--tile:#d6eaf1;--tile-on:#537f92;--tilt:6deg}
#footerNav .wedding-dock button:nth-child(3){--tile:#f5dfce;--tile-on:#b27a54;--tilt:-5deg}
#footerNav .wedding-dock button:nth-child(4){--tile:#dfdfeb;--tile-on:#77748e;--tilt:6deg}
#footerNav .wedding-dock button:nth-child(5){--tile:#f3e5be;--tile-on:#a9853b;--tilt:-6deg}
#footerNav .wedding-dock button::before{content:'';position:absolute;top:6px;left:50%;right:auto;width:39px;height:31px;margin-left:-19.5px;border:1px solid #ffffff99;border-radius:10px;background:var(--tile);transform:rotate(var(--tilt));transition:transform .2s,background .2s,box-shadow .2s}
#footerNav .wedding-dock button svg{position:relative;z-index:1;width:23px;height:23px;flex:none;transform:rotate(var(--tilt));transition:transform .2s}
#footerNav .wedding-dock button>span{position:relative;z-index:1;font-size:9px;letter-spacing:0;line-height:1.2;text-transform:none;color:#59666a}
#footerNav .wedding-dock button.on::before{background:var(--tile-on);border-color:#365663;box-shadow:2px 2px 0 #365663;transform:rotate(calc(var(--tilt)*-.6)) scale(1.06)}
#footerNav .wedding-dock button.on svg{color:#fffdf5;transform:rotate(calc(var(--tilt)*-.6)) scale(1.03)}
#footerNav .wedding-dock button.on>span{color:#365663;font-weight:600}
#footerNav .wedding-dock button:active::before{transform:rotate(var(--tilt)) scale(.92)}
#footerNav .wedding-dock button:focus-visible{outline:2px solid #9e2432;outline-offset:-2px;border-radius:16px}
@media(prefers-reduced-motion:reduce){#footerNav .wedding-dock button::before,#footerNav .wedding-dock button svg{transition:none}}
/* Formal dock: level tiles and a separate label row with no overlap. */
#footerNav .wedding-dock{height:72px;align-items:stretch}
#footerNav .wedding-dock button{height:72px;gap:0;padding:9px 0 7px;display:grid;grid-template-rows:27px 17px;align-content:space-between;justify-items:center;overflow:visible;--tilt:0deg}
#footerNav .wedding-dock button::before{top:6px;height:33px;transform:none}
#footerNav .wedding-dock button svg{width:22px;height:22px;align-self:center;transform:none}
#footerNav .wedding-dock button>span{display:block;min-width:0;max-width:100%;font-size:10px;line-height:17px;padding:0 2px;white-space:nowrap;overflow:visible;letter-spacing:0}
#footerNav .wedding-dock button.on::before{transform:none;box-shadow:0 2px 3px #36566320;border-color:#36566355}
#footerNav .wedding-dock button.on svg{transform:none}
#footerNav .wedding-dock button:active::before{transform:none}
#footerNav .wedding-dock button:hover{transform:none}
:root{--nav-h:96px}
#footerNav .wedding-dock button{grid-template-columns:minmax(0,1fr);justify-content:stretch}
#footerNav .wedding-dock{grid-template-columns:repeat(4,minmax(0,1fr))}
.pass-groups-shortcut{position:sticky;top:0;z-index:8;display:flex;align-items:center;gap:11px;width:calc(100% - 1.8rem);margin:12px .9rem 8px;padding:13px 14px;text-align:left;background:#edf4f2f5;backdrop-filter:blur(12px);border:1px solid #bbcdbf;border-radius:14px;box-shadow:0 4px 14px #54747712;color:#365663}
.pass-groups-shortcut>span:nth-child(2){flex:1}.pass-groups-shortcut b{display:block;font-size:12px}.pass-groups-shortcut small{display:block;font-size:10px;color:#75878a;margin-top:4px}
.pass-groups-icon{display:grid;place-items:center;width:32px;height:32px;background:#dee9e6;border-radius:10px;font-size:22px;color:#678073}
.group-pass-back{font-size:12px;padding:8px 0;color:#527787}
#footerNav .wedding-dock button:last-child{--tile:#f3e5be;--tile-on:#a9853b}