/* ===== Shamisi: personality on every page ===== */
@keyframes pagein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
main,.pbanner{animation:pagein .55s ease both}
.progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:70;pointer-events:none}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-l));transform-origin:0 0;transform:scaleX(0)}

/* buttons & forms feel alive */
.btn,button{position:relative;overflow:hidden}
.btn::after,button::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);transform:translateX(-130%);pointer-events:none}
.btn:hover::after,button:hover::after{transform:translateX(130%);transition:transform .7s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold)!important;box-shadow:0 0 0 4px rgba(185,138,46,.2)}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.bump{animation:bump .5s}
@keyframes bump{30%{transform:scale(1.28)}60%{transform:scale(.92)}}
.fly{position:fixed;z-index:90;pointer-events:none;border-radius:4px;background:var(--navy) center/cover;box-shadow:0 10px 26px rgba(16,41,92,.4);
 transition:transform .85s cubic-bezier(.55,-.15,.75,.35),opacity .85s;will-change:transform}

/* ===== page banners ===== */
.pbanner{position:relative;overflow:hidden;min-height:clamp(300px,33vw,380px);display:flex;align-items:center;color:#fff;isolation:isolate}
.pbanner.small{min-height:clamp(220px,24vw,280px)}
.sk-dawn{background:linear-gradient(#10295c 0%,#5b4c86 38%,#e0954f 74%,#f6c76a 100%)}
.sk-day{background:linear-gradient(#7fa9e6 0%,#c4d9f1 52%,#fff0c9 92%);color:#10295c}
.sk-dusk{background:linear-gradient(#0a1b43 0%,#3a2f6b 46%,#c4607a 82%,#f0a35e 100%)}
.pb-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.pb-sun{position:absolute;right:30%;bottom:16%;width:clamp(70px,10vw,120px);aspect-ratio:1;border-radius:50%;
 background:radial-gradient(circle,#fffdf0,#ffe9a8 60%,#f8c866);box-shadow:0 0 50px 18px rgba(255,214,120,.55)}
.sk-dusk .pb-sun{bottom:auto;top:14%;right:auto;left:14%;width:54px;background:radial-gradient(circle,#fff6dd,#f1e0b4 70%,#e6c98a);box-shadow:0 0 28px 9px rgba(255,240,200,.4)}
.pb-star{display:none;position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;animation:pbtw 3.4s ease-in-out infinite}
@keyframes pbtw{0%,100%{opacity:.2}50%{opacity:1}}
.pb-hill{position:absolute;left:-2%;width:104%;bottom:0;display:block;will-change:transform}
.pb-hill.h1{height:48%}.pb-hill.h2{height:30%;z-index:3}
.sk-day .pb-hill.h1{color:#2a4d9a}.sk-day .pb-hill.h2{color:#17367f}
.sk-dawn .pb-hill.h1,.sk-dusk .pb-hill.h1{color:#1e3f86}.sk-dawn .pb-hill.h2,.sk-dusk .pb-hill.h2{color:#0a1b43}
.fl{position:absolute;width:15px;height:20px;border:1px solid #e6c97a;border-radius:2px;background:repeating-linear-gradient(#fff9e8 0 3px,#e8dfc8 3px 4px);
 filter:drop-shadow(0 0 5px rgba(255,226,150,.8));animation:flo 8s ease-in-out infinite;will-change:transform}
.f1{left:8%;top:20%}.f2{left:44%;top:14%;animation-delay:-2s;width:12px;height:16px}.f3{right:12%;top:30%;animation-delay:-4s}.f4{left:30%;top:58%;animation-delay:-6s;width:11px;height:15px}
@keyframes flo{0%,100%{transform:translateY(0) rotate(-12deg)}50%{transform:translateY(-16px) rotate(14deg)}}
.pb-char{position:absolute;z-index:2;right:7%;bottom:-3%;width:clamp(150px,19vw,230px);pointer-events:auto}
.pb-char .bubble{right:62%;top:-1%}
.pbanner.small .pb-char{width:clamp(104px,12.5vw,150px);bottom:-2%}
.pb-in{position:relative;z-index:4;max-width:1100px;margin:auto;width:100%;padding:34px 5% 60px}
.pb-in{pointer-events:none}.pb-text{pointer-events:auto}
.pb-text{max-width:min(560px,58%)}
.pb-text .eyebrow{color:var(--gold-l)}.sk-day .pb-text .eyebrow{color:#8a6112}
.pb-text h1{font-size:clamp(2rem,5vw,3.4rem);color:inherit;margin:6px 0 8px;line-height:1.1;text-shadow:0 2px 14px rgba(5,12,36,.35)}
.sk-day .pb-text h1{text-shadow:0 2px 14px rgba(255,255,255,.6)}
.pb-text p{font-size:clamp(1rem,1.6vw,1.2rem);max-width:520px;margin:0}
.authbox{background:#fff;padding:26px 28px;border-radius:16px;box-shadow:0 16px 40px rgba(16,41,92,.16);margin-top:-46px;position:relative;z-index:6}
@media(max-width:760px){
 .pbanner{min-height:360px;align-items:flex-start}.pbanner.small{min-height:300px}
 .pb-in{padding:26px 6% 150px}.pb-text{max-width:100%}
 .pb-char,.pbanner.small .pb-char{width:118px;right:4%}
 .pb-char .bubble{display:none}.pb-char .bubble{right:70%;top:-10%;max-width:150px;font-size:.8rem}
 .pb-sun{right:34%}
}

/* ===== the helper in the corner ===== */
.buddy{position:fixed;left:10px;bottom:10px;z-index:45;display:flex;align-items:flex-end;gap:6px;pointer-events:none;transform:translateY(160%);transition:transform .7s cubic-bezier(.2,.9,.25,1)}
.buddy.on{transform:none}.buddy>*{pointer-events:auto}
.buddy-char{width:78px;aspect-ratio:262/250;flex:none;filter:drop-shadow(0 6px 10px rgba(5,12,36,.35))}
.buddy-char .char{overflow:visible}
.buddy-bubble{position:relative;background:#fff;color:#10295c;font-weight:bold;font-size:.88rem;line-height:1.3;padding:9px 13px;border-radius:14px;max-width:min(230px,58vw);
 box-shadow:0 8px 20px rgba(5,12,36,.28);margin-bottom:34px;opacity:0;transform:scale(.7);transform-origin:left bottom;transition:opacity .3s,transform .3s}
.buddy-bubble::before{content:"";position:absolute;left:-7px;bottom:12px;width:14px;height:14px;background:#fff;transform:rotate(45deg);border-radius:3px}
.buddy-bubble.show{opacity:1;transform:scale(1)}
.buddy-x{position:absolute!important;left:-4px;top:-8px;width:22px!important;height:22px!important;min-width:0;padding:0!important;border-radius:50%!important;border:0!important;
 background:rgba(16,41,92,.85)!important;color:#fff!important;font-size:.95rem!important;line-height:22px;box-shadow:none!important;opacity:.0;transition:opacity .2s}
.buddy:hover .buddy-x,.buddy-x:focus{opacity:1}
@media(hover:none){.buddy-x{opacity:.8}}
.buddy-x::after{display:none}
@media(max-width:700px){.buddy-char{width:62px}.buddy-bubble{font-size:.8rem;margin-bottom:26px}}

/* ===== ribbon, wavy edges, how it works ===== */
.ribbon{background:var(--gold);color:#10295c;margin:46px 0 34px;padding:14px 0;overflow:hidden;white-space:nowrap;box-shadow:0 10px 24px rgba(16,41,92,.22);position:relative;z-index:4}
.ribbon .track{display:inline-block;animation:marq 30s linear infinite;font-size:1.25rem;font-weight:bold;letter-spacing:2px;will-change:transform}
.ribbon .track span{margin:0 18px}.ribbon .track b{color:#fff}
@keyframes marq{to{transform:translateX(-50%)}}
.wavy{position:relative}
.wavy::before{content:"";position:absolute;left:0;right:0;top:-39px;height:40px;
 background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'><path d='M0 40V22C150 -4 300 38 450 20S750 -6 900 18S1100 36 1200 14V40Z' fill='%23f7f3ea'/></svg>") center/100% 100% no-repeat}
.how{background:var(--cream)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative;margin-top:26px}
.steps::before{content:"";position:absolute;left:17%;right:17%;top:58px;height:3px;background:repeating-linear-gradient(90deg,var(--gold) 0 10px,transparent 10px 20px);opacity:.55;animation:dashm 1.4s linear infinite}
@keyframes dashm{to{background-position:20px 0}}
.step{text-align:center;padding:6px 14px;position:relative}
.sicon{height:116px;display:flex;align-items:center;justify-content:center}
.step h3{margin:10px 0 6px;font-size:1.2rem}.step p{margin:0;color:#4a5568}
.step .n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--gold);color:#fff;font-weight:bold;font-size:.9rem;margin-right:8px}
.s1 .hop{animation:hop 1.9s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes hop{0%,55%,100%{transform:translateY(0)}25%{transform:translateY(-16px) rotate(-4deg)}}
.s2 .pd{opacity:.2;animation:pind 3.2s infinite}.s2 .pd:nth-of-type(2){animation-delay:.5s}.s2 .pd:nth-of-type(3){animation-delay:1s}.s2 .pd:nth-of-type(4){animation-delay:1.5s}
@keyframes pind{0%,10%{opacity:.2}25%,80%{opacity:1}100%{opacity:.2}}
.s2 .ph{animation:buzz 3.2s infinite;transform-box:fill-box;transform-origin:center}
@keyframes buzz{0%,4%,100%{transform:none}1%{transform:rotate(-3deg)}2%{transform:rotate(3deg)}3%{transform:rotate(-2deg)}}
.s3 .tk{animation:drive 3.4s ease-in-out infinite alternate}
@keyframes drive{from{transform:translateX(-18px)}to{transform:translateX(18px)}}
.s3 .whl{animation:rolling .6s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes rolling{to{transform:rotate(360deg)}}
.s3 .rd{stroke-dasharray:10 14;animation:road .8s linear infinite}
@keyframes road{to{stroke-dashoffset:-24}}
@media(max-width:760px){.steps{grid-template-columns:1fr}.steps::before{display:none}}

/* ===== empty states ===== */
.empty{display:flex;align-items:center;justify-content:center;gap:26px;max-width:680px;margin:30px auto;padding:26px 30px;background:#fff;border:2px dashed #e0d8c8;border-radius:18px;text-align:left}
.empty .charwrap{width:130px;flex:none}
.empty h3{margin:0 0 6px;font-size:1.3rem}.empty p{margin:0 0 14px;color:#4a5568}
.empty .q{position:absolute;right:-6px;top:-4px;font-size:1.8rem;font-weight:bold;color:var(--gold);animation:flo 3s ease-in-out infinite}
@media(max-width:600px){.empty{flex-direction:column;text-align:center}}

/* ===== order celebration ===== */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.cf{position:absolute;top:-20px;width:9px;height:14px;opacity:.95;animation:fall linear forwards}
@keyframes fall{to{transform:translate3d(var(--dx),108vh,0) rotate(var(--rot))}}
.okmark{width:92px;height:92px;display:block;margin:0 0 6px}
.okmark circle{stroke:var(--gold);stroke-width:5;fill:none;stroke-dasharray:290;stroke-dashoffset:290;animation:draw .8s .1s ease forwards}
.okmark path{stroke:#1f9d55;stroke-width:7;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .5s .8s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.celebrate{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.celebrate .charwrap{width:170px;flex:none}

/* quiet mode */
.lite .ribbon .track,.lite .steps::before,.lite .fl,.lite .pb-star,.lite .s1 .hop,.lite .s2 .pd,.lite .s3 .tk,.lite .s3 .whl,.lite .s3 .rd{animation:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal,.rise{opacity:1!important;transform:none!important}}

.empty .charwrap{width:150px;aspect-ratio:270/330}.empty .char,.buddy-char .char{overflow:hidden}
.celebrate .bubble{right:60%}

/* banner skies follow the visitor's own clock */
.sk-night{background:linear-gradient(#050c24 0%,#0d2150 62%,#17326f 100%)}
.sk-night .pb-star,.sk-dawn .pb-star,.sk-dusk .pb-star{display:block}.sk-dawn .pb-star{opacity:.5}
.sk-night .pb-sun{bottom:auto;top:14%;right:auto;left:14%;width:54px;background:radial-gradient(circle,#fff6dd,#f1e0b4 70%,#e6c98a);box-shadow:0 0 28px 9px rgba(255,240,200,.4)}
.sk-night .pb-hill.h1{color:#16306b}.sk-night .pb-hill.h2{color:#0a1b43}

/* keep the moon clear of the page heading */
.sk-night .pb-sun,.sk-dusk .pb-sun{left:46%;top:9%}
@media(max-width:760px){.sk-night .pb-sun,.sk-dusk .pb-sun{left:auto;right:30%;top:58%}}

/* checkout questions */
.q{border:0;padding:0;margin:14px 0 6px}.q legend{font-weight:bold;padding:0;margin-bottom:4px}.q legend small{font-weight:normal;color:#6b7280}
.opt{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;font-size:1.05rem}
.opt input[type=radio]{width:22px;height:22px;margin:0;accent-color:#10295c;flex:none}
.subbox{background:var(--cream);border-left:4px solid var(--gold);border-radius:8px;padding:10px 16px 4px;margin:4px 0 14px}
.checkout h3{margin:22px 0 6px}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.fees{display:table!important;white-space:normal!important}.fees td{vertical-align:top}