/* Fonts are self-hosted (SIL Open Font License): Bodoni Moda, Jost */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/bodoni-moda-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/bodoni-moda-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/bodoni-moda-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/jost-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/jost-latin-ext-300-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/jost-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/bodoni-moda-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --mist:#EEF1FC;
  --pearl:#FBF9FF;
  --amethyst:#3B0678;      /* headings */
  --ink:#290C6C;           /* body text */
  --orchid:#6A1BB1;
  --accent:#6A1BB1;        /* vivid purple */
  --blue:#4D7CD1;          /* cornflower blue */
  --indigo:#421F92;
  --lav:#CDBCF0;           /* lavender */
  --line:#8FB0EC;          /* periwinkle */
  --rule:rgba(106,27,177,.42);
  --grad:linear-gradient(100deg,#3B0678 0%,#6A1BB1 46%,#4D7CD1 100%);
  --grad-btn:linear-gradient(100deg,#4A1AA0 0%,#6A1BB1 52%,#4D7CD1 100%);
  --serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --sans:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;
  --col:480px;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--mist);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.65;color:var(--ink);-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden;height:100dvh}
img,video,canvas,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--orchid);outline-offset:3px}

.backdrop{position:fixed;inset:0;z-index:-1;background:var(--hero-img, url(assets/hero-bg.jpg)) center/cover no-repeat;filter:blur(22px) saturate(1.05);transform:scale(1.12)}
.shell{overflow-x:clip;position:relative;width:min(100%,var(--col));margin:0 auto;min-height:100dvh;background:var(--mist);box-shadow:0 0 90px rgba(59,6,120,.22)}

/* ---------- Opener ---------- */
.opener{position:fixed;top:0;bottom:0;left:50%;width:min(100%,var(--col));transform:translateX(-50%);z-index:50;background:#2A0A66;overflow:hidden;transition:opacity .9s ease}
.opener.is-fading{opacity:0;pointer-events:none}
.opener video{position:relative;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:translateZ(0);will-change:transform}
.ambient{position:absolute;left:-10%;top:-10%;width:120%;height:120%;filter:blur(28px) saturate(1.15);transform:translateZ(0);display:none}
.opener[data-fit="contain"] .ambient{display:block}
.opener[data-fit="contain"] video{position:absolute;left:0;top:50%;height:auto;aspect-ratio:16/9;transform:translateY(-50%) translateZ(0);object-fit:contain}
.opener[data-fit="contain"]::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,#2A0A66 0%,transparent 14%,transparent 86%,#2A0A66 100%)}
.open-hit{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.open-hint{position:absolute;left:0;right:0;bottom:calc(9% + env(safe-area-inset-bottom,0px));margin:0 auto;width:max-content;max-width:86%;padding:15px 32px;border-radius:999px;border:1px solid rgba(255,255,255,.85);background:rgba(106,27,177,.17);color:#2A0A66;font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.2;text-align:center;-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.25),0 16px 30px -16px rgba(59,6,120,.6);animation:breathe 2.6s ease-in-out infinite}
.opener[data-fit="contain"] .open-hint{bottom:auto;top:calc(50% + min(100vw,var(--col))*9/32 + 30px)}
.opener.is-playing .open-hint,.opener.is-playing .seal-ring{opacity:0;animation:none;transition:opacity .4s}
.opener.is-playing .open-hit{cursor:default}
.seal-ring{position:absolute;left:50%;top:50%;width:calc(min(100vw,var(--col))*.36);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,255,255,.75);pointer-events:none;animation:ring 2.6s ease-out infinite}
.opener[data-fit="cover"] .seal-ring{width:calc(max(min(100vw,var(--col)),55.8dvh) * .37)}
.skip{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:2;background:rgba(41,12,108,.35);border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:999px;padding:6px 16px;font-size:14px;cursor:pointer;backdrop-filter:blur(6px)}
.skip[hidden]{display:none}
@keyframes breathe{0%,100%{opacity:.78}50%{opacity:1}}
@keyframes ring{0%{transform:translate(-50%,-50%) scale(.85);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.3);opacity:0}}

/* ---------- Shared pieces ---------- */
.sheet{position:relative;padding:76px 26px 64px;text-align:center}
.band-a{background:radial-gradient(70% 38% at 100% 0%,rgba(77,124,209,.16),transparent 72%),radial-gradient(60% 40% at 0% 100%,rgba(144,99,195,.20),transparent 72%),linear-gradient(180deg,#F6F1FE,#EBE2FA)}
.band-b{background:radial-gradient(65% 40% at 0% 0%,rgba(144,99,195,.15),transparent 72%),radial-gradient(70% 42% at 100% 100%,rgba(77,124,209,.22),transparent 72%),linear-gradient(180deg,#EEF6FE,#DAE9FB)}
.band-c{background:radial-gradient(60% 35% at 100% 100%,rgba(144,99,195,.10),transparent 72%),linear-gradient(180deg,#FBF9FF,#EEF1FD)}
.sheet h2{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(30px,9vw,38px);line-height:1.15;color:var(--amethyst);text-wrap:balance}
.lede{margin:10px auto 0;max-width:22em;color:rgba(41,12,108,.8)}
.sec-head{display:flex;flex-direction:column;align-items:center}
.ico{width:30px;height:30px;margin:0 0 10px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.divider{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px auto 0;color:var(--accent)}
.divider::before,.divider::after{content:"";width:46px;height:1px}
.divider::before{background:linear-gradient(90deg,transparent,var(--rule))}
.divider::after{background:linear-gradient(270deg,transparent,var(--rule))}
.divider svg{width:13px;height:13px;fill:currentColor;stroke:none}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border-radius:999px;border:1px solid var(--amethyst);background:var(--amethyst);color:var(--pearl);font-family:var(--sans);font-weight:400;font-size:16px;text-decoration:none;cursor:pointer;transition:background .25s,color .25s,transform .25s}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:scale(.98)}

/* ---------- 1. First page: static, over the staircase ----------
   The names sit exactly where the intro video writes them, so the video flows into this page without a jump. */
.hero{--vw:max(min(100vw,var(--col)),55.8dvh);--vh:max(100dvh,calc(min(100vw,var(--col)) * 1.7917));--F:calc(var(--vw) * .117);--ny:0px;position:relative;min-height:100dvh;text-align:center;padding:calc(34px + env(safe-area-inset-top,0px)) 24px 88px;background:var(--hero-img, url(assets/hero-bg.jpg)) 50% 50%/cover no-repeat;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(252,249,255,.88) 0%,rgba(250,246,255,.66) 34%,rgba(250,246,255,0) 54%),linear-gradient(180deg,transparent 40%,rgba(59,6,120,.50) 58%,rgba(48,8,110,.80) 74%,rgba(32,8,96,.94) 100%)}
.hero-inner{width:100%}
.hero-top{display:flex;flex-direction:column;align-items:center;width:100%}
.bismillah{margin:0 0 12px;display:flex;flex-direction:column;align-items:center;gap:2px}
.bis{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--amethyst)}
.bis-tr{font-size:12.5px;line-height:1.4;color:rgba(41,12,108,.82);max-width:19em}
.logo{width:min(76%,330px);height:auto}
.hero-bottom{position:absolute;left:24px;right:24px;top:calc(50% + (.5795 - .5) * var(--vh) - var(--F) * .5 - 48px + var(--ny));display:flex;flex-direction:column;align-items:center}
.kicker{height:44px;margin:0 0 4px;display:flex;align-items:flex-end;justify-content:center;font-family:var(--serif);font-style:italic;font-size:clamp(14px,4.05vw,17px);line-height:1.35;color:#F1EAFF;max-width:20em;text-shadow:0 1px 4px rgba(30,6,80,.6),0 1px 16px rgba(30,6,80,.6)}
.names{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--F);line-height:1;color:#fff;text-shadow:0 2px 18px rgba(30,6,80,.55);display:flex;flex-direction:column;align-items:center}
.names .nm{display:block}
.names .amp{display:block;font-size:1em;line-height:1;color:#F3ECFF;margin:.1em 0 -.09em}
.names .family{font-family:var(--sans);font-style:normal;font-weight:300;font-size:14px;line-height:1.4;color:rgba(255,255,255,.9);margin:4px 0 0;max-width:20em}
.names .family[hidden]{display:none}
.hashtag{margin:14px 0 0;font-size:15px;color:#BFD6F5;text-shadow:0 1px 12px rgba(30,6,80,.5)}
.hashtag[hidden]{display:none}
.guest{margin:12px 0 0;font-family:var(--serif);font-style:italic;font-size:18px;color:#fff;max-width:20em;text-shadow:0 1px 12px rgba(30,6,80,.5)}
.guest[hidden]{display:none}
.scroll-btn{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom,0px));margin:0 auto;width:max-content;display:flex;flex-direction:column;align-items:center;gap:0;background:none;border:0;padding:6px 18px;color:#fff;font-size:15px;cursor:pointer;-webkit-tap-highlight-color:transparent;text-shadow:0 1px 10px rgba(30,6,80,.5)}
.scroll-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---------- 2. Welcome ---------- */
.welcome{padding:0;background:#F6ECEF;aspect-ratio:736/1040;overflow:hidden}
.welcome::before{content:"";position:absolute;inset:0;background:#F6ECEF var(--welcome-img, url(assets/welcome-bg.jpg)) 0 0/100% 100% no-repeat}
.welcome-copy{z-index:1;position:absolute;left:21%;right:21%;top:24%;height:60%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.heart-mark{width:15px;height:15px;fill:var(--accent)}
.welcome-copy p.words{--step:.01s;--w0:.02s;--dur:.45s}
.welcome-copy p{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(12.5px,3.5vw,15.5px);line-height:1.6;color:var(--ink);text-wrap:pretty}

/* ---------- 3. Scratch heart ---------- */
.sd{padding-bottom:0}
.sp{position:absolute;width:16px;height:16px;fill:#A98BE6;pointer-events:none;opacity:.95;filter:drop-shadow(0 0 5px rgba(150,110,225,.7));animation:twinkle 3s ease-in-out infinite}
.sp1{top:-3%;left:4%;width:18px;height:18px}
.sp2{top:6%;right:-1%;animation-delay:.6s}
.sp3{top:42%;left:-7%;width:13px;height:13px;animation-delay:1.2s}
.sp4{top:52%;right:-8%;width:20px;height:20px;animation-delay:.3s}
.sp5{bottom:10%;left:10%;width:12px;height:12px;animation-delay:1.6s}
.sp6{bottom:-4%;right:24%;width:15px;height:15px;animation-delay:.9s}
.ticket-wrap{--w:min(60vw,232px);position:relative;isolation:isolate;width:var(--w);aspect-ratio:1/.92;margin:14px auto 0}
.ticket-wrap::before{content:"";position:absolute;inset:7% 5% -3%;z-index:-1;clip-path:url(#heartClip);background:rgba(59,6,120,.30);filter:blur(16px);transform:translateY(10px)}
.ticket{position:absolute;inset:0;clip-path:url(#heartClip);background:rgba(150,110,225,.3);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%)}
.ticket::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(62% 46% at 26% 14%,rgba(255,255,255,.62),rgba(255,255,255,0) 72%)}
.ticket.is-fresh::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);background-size:250% 100%;animation:sheen 3.6s ease-in-out infinite}
@keyframes sheen{0%{background-position:130% 0}60%,100%{background-position:-60% 0}}
.heart-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.heart-line path{fill:none;stroke:var(--line);stroke-width:1.5}
.ticket-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12% 19% 23%;color:var(--ink);text-align:center}
#foil{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;transition:opacity 1s ease}
#foil:active{cursor:grabbing}
#foil.is-clear{opacity:0;pointer-events:none}
#sd-title{max-width:244px;min-height:2.4em;display:flex;align-items:center;justify-content:center;font-size:clamp(25px,7.2vw,29px);color:#1A0650;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.sd .divider{margin-top:2px}

/* ---------- 4. Photo + countdown ---------- */
.count{padding-top:64px}
.count.is-unlocked{animation:unlock .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes unlock{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.cal{margin:32px auto 0;width:min(100%,304px);padding:18px 14px 14px;border-radius:22px;background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 20px 38px -26px rgba(59,6,120,.6);text-align:center}
.cal-head{margin:0 0 8px;font-family:var(--serif);font-size:22px;line-height:1.2;color:var(--amethyst)}
.cal-week,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px 2px}
.cal-week span{padding:4px 0;font-size:11.5px;color:rgba(41,12,108,.6)}
.cal-grid span{position:relative;display:grid;place-items:center;aspect-ratio:1;font-size:13.5px;line-height:1;color:var(--ink)}
.cal-grid .mark{color:#fff}
.cal-grid .mark svg{position:absolute;left:-24%;top:-30%;width:148%;height:148%;max-width:none;fill:url(#gradHeart) #6A1BB1;filter:drop-shadow(0 4px 6px rgba(59,6,120,.35));animation:beat 1.9s ease-in-out infinite}
.cal-grid .mark b{position:relative;z-index:1;font-weight:400;font-size:14px}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.couple{padding:48px 0 48px}
.slider{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.slide-track{display:flex;width:max-content;padding:8px 0 14px;animation:slideLeft var(--dur,40s) linear infinite;will-change:transform}
.slider.is-held .slide-track{animation-play-state:paused}
.slide{flex:0 0 auto;height:300px;margin-right:18px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.72),0 22px 36px -22px rgba(59,6,120,.55)}
.slide img{display:block;height:100%;width:auto;max-width:none}
@keyframes slideLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.clock{margin:26px auto 0;max-width:340px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.unit{display:flex;flex-direction:column;align-items:center;gap:8px}
.unit b{width:100%;aspect-ratio:1/1.05;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.7);border:1px solid rgba(106,27,177,.3);font-family:var(--serif);font-weight:400;font-size:clamp(26px,8vw,34px);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;box-shadow:0 10px 18px -14px rgba(59,6,120,.55)}
.unit span{font-size:13px;color:rgba(41,12,108,.78)}
#clockDone[hidden]{display:none}

/* ---------- 5. Program timeline ---------- */
.timeline{list-style:none;margin:30px auto 0;padding:0 0 0 28px;max-width:310px;text-align:left;position:relative}
.timeline::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:1px;background:linear-gradient(#6A1BB1,#4D7CD1)}
.timeline li{position:relative;padding-bottom:26px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-28px;top:7px;width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(106,27,177,.18)}
.timeline .what{display:block;font-weight:400;font-size:18px;line-height:1.35;color:var(--ink)}
.timeline .when{display:block;font-size:14px;color:rgba(41,12,108,.8)}
.timeline .note{display:block;font-size:14px;font-style:italic;color:var(--amethyst)}

/* ---------- 6. Venue + map ---------- */
.venue-name{margin:20px 0 0;font-family:var(--serif);font-size:25px;line-height:1.25;color:var(--ink)}
.venue-addr{margin:4px auto 0;max-width:20em;color:rgba(41,12,108,.8)}
.map{position:relative;margin:24px auto 22px;width:min(100%,360px);height:260px;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#E4DAF4,#CBDDF8);box-shadow:0 0 0 5px rgba(255,255,255,.7),0 22px 34px -22px rgba(59,6,120,.55)}
.map-ph{position:absolute;inset:0;display:grid;place-items:center}
.map-ph svg{width:44px;height:44px;fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}
.map-reset{position:absolute;top:10px;right:10px;z-index:2;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#2A0A66;font-size:13px;cursor:pointer;box-shadow:0 8px 18px -10px rgba(59,6,120,.6)}





/* ---------- Qur'an verse ---------- */
.verse{padding:56px 28px 56px}
.verse-text{margin:18px auto 0;max-width:20em;font-family:var(--serif);font-style:italic;font-size:clamp(16px,4.6vw,19px);line-height:1.7;color:var(--ink);text-wrap:pretty}
.verse-ref{margin:14px 0 0;font-size:14px;color:var(--accent)}

/* ---------- Aso ebi ---------- */
.aso-list{margin:26px auto 0;max-width:340px;display:grid;gap:14px}
.opt{background:rgba(255,255,255,.72);border:1px solid rgba(106,27,177,.28);border-radius:10px;padding:16px 18px 6px;text-align:left;box-shadow:0 14px 24px -20px rgba(59,6,120,.55)}
.opt h3{margin:0 0 4px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px;line-height:1.3;color:var(--amethyst)}
.opt .row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid rgba(106,27,177,.18)}
.opt .who{display:block;font-size:12.5px;line-height:1.3;color:var(--accent)}
.opt .what{display:block;font-size:15px;line-height:1.35;color:var(--ink)}
.opt .price{font-family:var(--sans);font-weight:400;font-size:18px;white-space:nowrap;color:var(--ink)}
.or{display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--serif);font-style:italic;color:var(--accent)}
.or::before,.or::after{content:"";width:46px;height:1px}
.or::before{background:linear-gradient(90deg,transparent,var(--rule))}
.or::after{background:linear-gradient(270deg,transparent,var(--rule))}

/* The satin picture sits behind a light veil so the text stays easy to read (about 86% veil) */
.sheet.aso{background:linear-gradient(rgba(94,34,168,.8),rgba(94,34,168,.8)),var(--aso-bg, url(assets/aso-bg.jpg)) center/cover no-repeat}

/* Aso ebi sits on purple, so its heading and notes turn light, and the option boxes have no outline */
.sheet.aso h2{color:#fff}
.sheet.aso .divider svg{fill:#EADFFC}
.sheet.aso .divider::before{background:linear-gradient(90deg,transparent,rgba(234,223,252,.95))}
.sheet.aso .divider::after{background:linear-gradient(270deg,transparent,rgba(234,223,252,.95))}
.sheet.aso .lede{color:rgba(255,255,255,.94)}
.sheet.aso .or{color:#EADFFC}
.sheet.aso .or::before{background:linear-gradient(90deg,transparent,rgba(234,223,252,.9))}
.sheet.aso .or::after{background:linear-gradient(270deg,transparent,rgba(234,223,252,.9))}
.sheet.aso .opt,.sheet.aso .opt.is-blue,.sheet.aso .opt.is-violet{border:0}

/* ---------- Payment ---------- */
.deadline{display:inline-block;margin:16px auto 0;padding:9px 20px;border-radius:999px;border:1px solid rgba(106,27,177,.45);background:rgba(255,255,255,.7);font-size:15px;color:#2A0A66}
.deadline[hidden]{display:none}
.pay-card{margin:26px auto 0;max-width:340px;background:rgba(255,255,255,.72);border:1px solid rgba(106,27,177,.28);border-radius:10px;padding:6px 18px 18px;text-align:left;box-shadow:0 14px 24px -20px rgba(59,6,120,.55)}
.pay-row{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid rgba(106,27,177,.18)}
.pay-row span{font-size:14px;color:rgba(41,12,108,.75)}
.pay-row b{font-weight:400;font-size:17px;text-align:right}
.pay-row .num{font-family:var(--serif);font-size:23px;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.pay-card .btn{width:100%;margin-top:16px}

/* ---------- Payment confirmation ---------- */
.phone{display:inline-block;margin:8px 0 6px;font-family:var(--serif);font-size:30px;line-height:1.2;color:var(--ink);text-decoration:none;letter-spacing:.03em}
.chips{margin:16px auto 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(106,27,177,.45);background:rgba(255,255,255,.7);color:var(--amethyst);font-size:15px;cursor:pointer;transition:background .25s,color .25s}
.chip[aria-pressed="true"]{background:var(--amethyst);border-color:var(--amethyst);color:var(--pearl)}
.confirm .btn{margin-top:22px}

#receiptBtn.btn,#viewMap.btn{background:#5A12A6;border-color:#5A12A6;color:#fff}
#receiptBtn.btn:hover,#viewMap.btn:hover{background:#4A0E8E;filter:none}

/* ---------- Important information ---------- */
.info{background:#F4F0FD}
.info-box{margin:28px auto 0;max-width:340px;border-radius:22px;background:#fff;border:1px solid rgba(106,27,177,.38);box-shadow:0 18px 34px -26px rgba(59,6,120,.5);text-align:left;overflow:hidden}
.info-box .notice{position:static;margin:0;padding:20px 22px;background:none;border:0;border-radius:0;box-shadow:none}
.info-box .notice::before{display:none}
.info-box .notice + .notice{border-top:1px solid rgba(106,27,177,.32)}
.notices{margin:26px auto 0;max-width:340px;display:grid;gap:14px;text-align:left}
.notice{background:rgba(255,255,255,.72);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:14px 16px;box-shadow:0 14px 24px -22px rgba(59,6,120,.55)}
.notice h3{margin:0 0 4px;font-family:var(--sans);font-weight:400;font-size:17px;color:var(--ink)}
.notice p{margin:0;font-size:15px;line-height:1.55;color:rgba(41,12,108,.85)}

/* ---------- Prayer ---------- */
.prayer-text{margin:22px auto 0;max-width:20em;font-family:var(--serif);font-style:italic;font-size:clamp(16px,4.6vw,19px);line-height:1.7;color:var(--ink);text-wrap:pretty}

/* ---------- 9. Last line ---------- */

/* ---------- 10. Names at the bottom ---------- */

/* ---------- 9. Closing: dark, centred, no image ---------- */
.closing{padding:84px 26px 104px;color:#fff;overflow:hidden;background:radial-gradient(70% 38% at 50% 0%,rgba(106,27,177,.38),transparent 72%),radial-gradient(70% 40% at 100% 100%,rgba(77,124,209,.30),transparent 72%),linear-gradient(180deg,#240B5E 0%,#1A0A4C 58%,#141240 100%)}
.stars{display:flex;justify-content:center;gap:16px}
.stars svg{width:15px;height:15px;fill:url(#gradStar) #CDBCF0;animation:twinkle 3.2s ease-in-out infinite}
.stars svg:nth-child(2){animation-delay:.5s}
.stars svg:nth-child(3){animation-delay:1s}
@keyframes twinkle{0%,100%{opacity:.55;transform:scale(.82)}50%{opacity:1;transform:scale(1.18)}}
.sheet.closing h2{margin:26px auto 0;max-width:min(100%,11em);font-size:clamp(32px,10vw,42px);line-height:1.2;background:none;-webkit-text-fill-color:#fff;color:#fff}
.with-love{margin:30px 0 0;font-size:15px;color:rgba(255,255,255,.78)}
.names-pill{display:inline-block;margin:14px 0 0;padding:14px 30px;border-radius:999px;background:var(--grad-btn);color:#fff;font-family:var(--serif);font-style:italic;font-size:clamp(20px,5.8vw,24px);line-height:1.2;white-space:nowrap;box-shadow:0 14px 30px -14px rgba(77,124,209,.75)}
.amp-sm{font-style:italic;padding:0 .12em;color:#E3D8FA}
.foot{margin:34px 0 0;font-size:13.5px;letter-spacing:.02em;color:rgba(255,255,255,.62)}
.foot[hidden]{display:none}

/* ---------- Petals, confetti, sound ---------- */
.petals{position:fixed;top:0;bottom:0;left:50%;width:min(100%,var(--col));height:100dvh;transform:translateX(-50%);pointer-events:none;z-index:20}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}
.sound{position:fixed;z-index:60;bottom:calc(16px + env(safe-area-inset-bottom,0px));right:max(16px,calc((100vw - var(--col))/2 + 16px));width:46px;height:46px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:rgba(42,10,102,.92);color:var(--pearl);cursor:pointer;box-shadow:0 8px 20px -8px rgba(30,8,80,.7)}
.sound[hidden]{display:none}
.sound[aria-pressed="false"] #waves{display:none}

/* ---------- Reveal on scroll (replays every time a part comes back into view) ---------- */
.js [data-reveal="fade"]{opacity:0;transition:opacity .45s ease}
.js [data-reveal="rise"],.js [data-reveal="pop"],.js [data-reveal="blur"]{opacity:0;transition:opacity .45s ease,transform .45s ease,filter .45s ease}
.js [data-reveal="rise"]{transform:translateY(calc(30px * var(--dir,1)))}
.js [data-reveal="pop"]{transform:translateY(calc(16px * var(--dir,1))) scale(.88)}
.js [data-reveal="blur"]{filter:blur(10px);transform:translateY(calc(22px * var(--dir,1)))}
.js [data-reveal].is-seen{opacity:1;transform:none;filter:none;transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),filter 1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .welcome::before{transform:scale(1.08);transition:transform .5s ease}
.js .welcome.is-seen::before{transform:none;transition:transform 2.6s cubic-bezier(.2,.7,.2,1)}
.js .timeline::before{transform:scaleY(0);transform-origin:top;transition:transform .4s ease}
.js .timeline.is-seen::before{transform:none;transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
/* welcome text arrives word by word */
.js .words .w{display:inline-block;opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease}
.js .words.is-seen .w{opacity:1;transform:none;transition:opacity var(--dur,.9s) cubic-bezier(.2,.7,.2,1) calc(var(--w0,.35s) + var(--i) * var(--step,.035s)),transform var(--dur,.9s) cubic-bezier(.2,.7,.2,1) calc(var(--w0,.35s) + var(--i) * var(--step,.035s))}

/* The date inside the heart */
.ticket-face{padding:11% 15% 22%}
.t-weekday{margin:0;font-size:15px;line-height:1.3;color:rgba(41,12,108,.82)}
.t-day{margin:-2px 0 -6px;font-family:var(--serif);font-weight:400;font-size:clamp(62px,19vw,78px);line-height:1.05;color:var(--ink)}
.t-month{margin:0;font-family:var(--serif);font-size:clamp(19px,5.6vw,23px);line-height:1.3;color:var(--amethyst)}

/* Section background: watercolor lavender frame */
.sheet.sd{--imgW:min(100%,var(--col));padding:70px 24px 60px;min-height:calc(var(--imgW) * 1.333);background:#fbf8fd url(assets/scratch-bg.png) center center/cover no-repeat;position:relative}

/* Event card under the heart: reveals with a sprinkle of sparkles */
.reveal-slot{margin:14px auto 0;width:min(100%,252px);min-height:132px;display:flex;flex-direction:column;justify-content:center}
.scratch-hint{margin:0 auto;max-width:226px;text-align:center;font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.4;color:#2A0A66}
.scratch-hint[hidden]{display:none}
.reveal-card{position:relative;margin:0 auto;width:100%;padding:16px 14px 14px;border-radius:20px;background:rgba(150,115,225,.2);border:1px solid rgba(255,255,255,.95);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3),inset 0 0 22px rgba(255,255,255,.2),0 18px 36px -20px rgba(59,6,120,.6);text-align:center}
.reveal-card[hidden]{display:none}
.reveal-card.is-in{animation:cardIn .9s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.rc-title{margin:0 auto;max-width:14em;font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(15.5px,4.3vw,17px);line-height:1.3;color:#1A0650}
.rc-rule{display:block;width:54px;height:1px;margin:9px auto 7px;background:rgba(26,6,80,.5)}
.rc-time{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(26px,7.2vw,30px);line-height:1.2;color:#2A0A66}
.rc-time[hidden],.rc-title[hidden],.rc-rule[hidden]{display:none}
.rc-dots{position:absolute;inset:0;pointer-events:none;overflow:visible}
.rc-dots i{position:absolute;top:-8px;border-radius:50%;opacity:0;animation:dotFall var(--dur,2s) ease-in var(--dl,0s) both}
@keyframes dotFall{0%{opacity:0;transform:translateY(0)}12%{opacity:.95}85%{opacity:.8}100%{opacity:0;transform:translateY(var(--fall,200px))}}
.btn.btn-glass{margin-top:28px;min-height:52px;padding:0 32px;border:1px solid rgba(255,255,255,.85);background:rgba(106,27,177,.17);color:#2A0A66;-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.25),0 16px 30px -16px rgba(59,6,120,.55);transition:background .25s,box-shadow .25s,transform .25s}
.btn.btn-glass:hover{background:rgba(106,27,177,.27);filter:none}
.btn.btn-glass:active{transform:scale(.98)}
.btn.btn-glass[hidden]{display:none}
@keyframes calIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Colour details: purple, lavender and blue ---------- */
.sheet h2{width:fit-content;max-width:100%;margin-inline:auto;color:var(--amethyst)}
.divider::before{background:linear-gradient(90deg,transparent,var(--blue))}
.divider::after{background:linear-gradient(270deg,transparent,var(--accent))}
.divider svg,.heart-mark{fill:url(#gradHeart) #6A1BB1}
.btn{background:var(--grad-btn);border-color:transparent}
.btn-ghost{background:transparent;color:var(--amethyst);border:1px solid var(--accent)}
.btn-ghost:hover{background:var(--grad-btn);color:#fff;filter:none}
.chip[aria-pressed="true"]{background:var(--grad-btn);border-color:transparent}
.sound{background:var(--grad-btn)}
.heart-line path{stroke:url(#gradLine);stroke-width:2}
.timeline li:nth-child(odd)::before{background:var(--accent);box-shadow:0 0 0 4px rgba(106,27,177,.18)}
.timeline li:nth-child(even)::before{background:var(--blue);box-shadow:0 0 0 4px rgba(77,124,209,.22)}
.unit b{background:linear-gradient(180deg,#FFFFFF,#EEF3FE);border:1px solid rgba(77,124,209,.35);color:var(--amethyst)}
.unit:nth-child(odd) b{box-shadow:inset 0 3px 0 var(--accent),0 10px 18px -14px rgba(59,6,120,.55)}
.unit:nth-child(even) b{box-shadow:inset 0 3px 0 var(--blue),0 10px 18px -14px rgba(59,6,120,.55)}
.opt{border-top-width:4px}
.opt .price{padding:0;border-radius:0;background:none;font-size:19px;font-weight:400}
.opt.is-blue{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(222,238,252,.94));border-color:rgba(77,124,209,.4);border-top-color:var(--blue)}
.opt.is-blue h3{color:#2F58B8}
.opt.is-blue .price{background:none;color:#2F58B8}
.opt.is-violet{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(228,218,244,.95));border-color:rgba(106,27,177,.35);border-top-color:var(--accent)}
.opt.is-violet h3{color:var(--amethyst)}
.opt.is-violet .price{background:none;color:#5A12A6}
.pay-card,.notice{position:relative;overflow:hidden}
.pay-card{padding-top:10px}
.pay-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad)}
.notice{border-left:0;padding-left:20px}
.notice::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--accent),var(--blue))}

/* Flower corners (purple, lavender and blue) */
.fl-tl::before,.fl-tr::before,.fl-br::after,.fl-bl::after{content:"";position:absolute;width:112px;height:112px;background:url(assets/flora.webp) no-repeat center/contain;pointer-events:none;z-index:0}
.fl>*{position:relative;z-index:1}
.fl-tl::before{top:0;left:0}
.fl-tr::before{top:0;right:0;transform:scaleX(-1)}
.fl-br::after{bottom:0;right:0;transform:rotate(180deg)}
.fl-bl::after{bottom:0;left:0;transform:scaleY(-1)}


/* Scratch section: the glass heart edge */
.sd .heart-line{filter:drop-shadow(0 0 2px rgba(106,27,177,.4))}
.sd .heart-line path{stroke:rgba(255,255,255,.96);stroke-width:1.6}

/* Quran text: a quick left-to-right wipe, word after word */
.js .words-fast .w{opacity:0;transform:none;clip-path:inset(-6px 100% -6px 0);transition:opacity .12s ease,clip-path .15s ease}
.js .words-fast.is-seen .w{opacity:1;clip-path:inset(-6px -8px -6px -2px);transition:opacity .1s ease calc(var(--w0,.05s) + var(--i) * var(--step,.014s)),clip-path .26s cubic-bezier(.3,.7,.2,1) calc(var(--w0,.05s) + var(--i) * var(--step,.014s))}

/* Aso ebi options slide in from the sides */
.js [data-reveal="left"],.js [data-reveal="right"]{opacity:0;transition:opacity .4s ease,transform .4s ease}
.js [data-reveal="left"]{transform:translateX(-72px)}
.js [data-reveal="right"]{transform:translateX(72px)}
.js [data-reveal="left"].is-seen,.js [data-reveal="right"].is-seen{opacity:1;transform:none;transition:opacity .7s ease var(--d,0s),transform .85s cubic-bezier(.2,.8,.2,1) var(--d,0s)}

/* Pictures wipe in from left to right, like the Quran text (the section is watched, the pictures are wiped) */
.js .couple .slider{clip-path:inset(-24px 100% -24px 0);transition:clip-path .35s ease}
.js .couple.is-seen .slider{clip-path:inset(-24px -24px -24px -24px);transition:clip-path .9s cubic-bezier(.3,.7,.2,1)}

@media (prefers-reduced-motion:reduce){
  .slider{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .slide-track{animation:none!important}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js [data-reveal],.js .words .w{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  .js .welcome::before,.js .timeline::before{transform:none!important}
  .js .couple .slider{clip-path:none!important}
}

/* ---------- RSVP: Confirm Attendance ---------- */
.rsvp-sheet {
  padding: 68px 16px 64px;
}
.panel {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  border-radius: 24px;
  padding: 18px 54px 34px;
  background: linear-gradient(180deg, #f8f4ff, #ece2fb);
  box-shadow: 0 14px 34px rgba(90, 31, 168, .16), inset 0 0 0 1px rgba(90, 31, 168, .22);
  overflow: hidden;
  text-align: left;
}
.panel::before, .panel::after {
  content: ""; position: absolute; top: 96px; bottom: 28px; width: 40px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2240%22%20height=%22150%22%20viewBox=%220%200%2040%20150%22%3E%3Cpath%20d=%22M20%200%20C8%2025%2032%2050%2020%2075%20C8%20100%2032%20125%2020%20150%22%20fill=%22none%22%20stroke=%22%23ffffff%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22/%3E%3Cpath%20d=%22M20%200%20C8%2025%2032%2050%2020%2075%20C8%20100%2032%20125%2020%20150%22%20fill=%22none%22%20stroke=%22%23b9a0e6%22%20stroke-width=%22.7%22%20stroke-linecap=%22round%22%20opacity=%22.8%22/%3E%3Cellipse%20cx=%2211%22%20cy=%2218%22%20rx=%227%22%20ry=%223.2%22%20transform=%22rotate%28-35%2011%2018%29%22%20fill=%22%23ffffff%22%20opacity=%22.95%22%20stroke=%22%23b9a0e6%22%20stroke-width=%22.5%22/%3E%3Cellipse%20cx=%2229%22%20cy=%2234%22%20rx=%227%22%20ry=%223.2%22%20transform=%22rotate%2835%2029%2034%29%22%20fill=%22%23ffffff%22%20opacity=%22.95%22%20stroke=%22%23b9a0e6%22%20stroke-width=%22.5%22/%3E%3Cellipse%20cx=%2211%22%20cy=%2258%22%20rx=%227%22%20ry=%223.2%22%20transform=%22rotate%28-35%2011%2058%29%22%20fill=%22%23ffffff%22%20opacity=%22.95%22%20stroke=%22%23b9a0e6%22%20stroke-width=%22.5%22/%3E%3Cellipse%20cx=%2229%22%20cy=%2284%22%20rx=%227%22%20ry=%223.2%22%20transform=%22rotate%2835%2029%2084%29%22%20fill=%22%23ffffff%22%20opacity=%22.95%22%20stroke=%22%23b9a0e6%22%20stroke-width=%22.5%22/%3E%3Cellipse%20cx=%2211%22%20cy=%22108%22%20rx=%227%22%20ry=%223.2%22%20transform=%22rotate%28-35%2011%20108%29%22%20fill=%22%23ffffff%22%20opacity=%22.95%22%20stroke=%22%23b9a0e6%22%20stroke-width=%22.5%22/%3E%3Cellipse%20cx=%2229%22%20cy=%22134%22%20rx=%227%22%20ry=%223.2%22%20transform=%22rotate%2835%2029%20134%29%22%20fill=%22%23ffffff%22%20opacity=%22.95%22%20stroke=%22%23b9a0e6%22%20stroke-width=%22.5%22/%3E%3Ccircle%20cx=%226%22%20cy=%2236%22%20r=%222.6%22%20fill=%22%23ffffff%22%20stroke=%22%23b9a0e6%22%20stroke-width=%22.6%22/%3E%3Ccircle%20cx=%2234%22%20cy=%2260%22%20r=%222.6%22%20fill=%22%23ffffff%22%20stroke=%22%23b9a0e6%22%20stroke-width=%22.6%22/%3E%3Ccircle%20cx=%226%22%20cy=%2286%22%20r=%222.6%22%20fill=%22%23ffffff%22%20stroke=%22%23b9a0e6%22%20stroke-width=%22.6%22/%3E%3Ccircle%20cx=%2234%22%20cy=%22112%22%20r=%222.6%22%20fill=%22%23ffffff%22%20stroke=%22%23b9a0e6%22%20stroke-width=%22.6%22/%3E%3Ccircle%20cx=%226%22%20cy=%22136%22%20r=%222.6%22%20fill=%22%23ffffff%22%20stroke=%22%23b9a0e6%22%20stroke-width=%22.6%22/%3E%3Ccircle%20cx=%2234%22%20cy=%2212%22%20r=%222.6%22%20fill=%22%23ffffff%22%20stroke=%22%23b9a0e6%22%20stroke-width=%22.6%22/%3E%3Ccircle%20cx=%2220%22%20cy=%2275%22%20r=%222.6%22%20fill=%22%23ffffff%22%20stroke=%22%23b9a0e6%22%20stroke-width=%22.6%22/%3E%3C/svg%3E") repeat-y center top / 40px 150px;
  opacity: .95; pointer-events: none;
}
.panel::before { left: 8px; }
.panel::after { right: 8px; transform: scaleX(-1); }

.panel.done { padding-left: 28px; padding-right: 28px; }
.panel.done::before, .panel.done::after { display: none; }
.chandelier { display: block; width: 150px; height: auto; margin: 0 auto 6px; }

.panel-title {
  margin: 0; text-align: center; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600;
  font-size: clamp(2rem, 8vw, 2.3rem) !important; line-height: 1.1; color: #5a1fa8 !important; text-wrap: balance;
}
.panel-lede { margin: 12px auto 26px; max-width: 26ch; text-align: center; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.2rem; line-height: 1.3; font-weight: 500; color: #7b5fb6; }

#rsvpForm { display: flex; flex-direction: column; gap: 16px; }
.rsvp-sheet .field { display: flex; flex-direction: column; gap: 6px; }
.rsvp-sheet .field label { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.05rem; font-weight: 600; color: #7b5fb6; text-align: left; }
.rsvp-sheet .field input {
  width: 100%; font: inherit; font-family: var(--sans); font-size: .95rem; color: #3d1f7c;
  background: #f9f6ff; border: 1px solid #c3a6ee; border-radius: 12px;
  padding: 13px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.rsvp-sheet .field input::placeholder { color: #a48fd0; }
.rsvp-sheet .field input:focus-visible {
  outline: none; border-color: #5a1fa8; box-shadow: 0 0 0 3px rgba(90, 31, 168, .25);
}
.rsvp-sheet .field.bad input { border-color: #b3261e; }
.rsvp-sheet .field .err { color: #b3261e; font-size: .8125rem; min-height: 1.1em; text-align: left; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.send-btn {
  margin-top: 6px; width: 100%; border: 0; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 1rem; letter-spacing: .02em; color: #fff;
  padding: 15px 20px; border-radius: 14px;
  background: linear-gradient(90deg, #5a1fa8, #4f7fd9);
  box-shadow: 0 8px 18px rgba(90, 31, 168, .3);
  transition: transform .12s, box-shadow .12s, opacity .12s;
}
.send-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(90, 31, 168, .38); }
.send-btn:focus-visible { outline: 3px solid rgba(90, 31, 168, .45); outline-offset: 3px; }
.send-btn[disabled] { opacity: .7; cursor: progress; transform: none; }
.formerr { color: #b3261e; font-size: .9375rem; text-align: center; }

.thanks { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 6px 0 8px; }
.thanks h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.9rem !important; line-height: 1.15; color: #5a1fa8 !important; text-wrap: balance; }
.thanks p { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.2rem; line-height: 1.3; color: #7b5fb6; }
.thanks .closing-text { font-style: italic; font-weight: 600; color: #5a1fa8 !important; font-size: 1.35rem !important; margin-top: 4px !important; }

@media (max-width: 380px) {
  .panel { padding-left: 44px; padding-right: 44px; }
  .panel-title { font-size: 2rem !important; }
}