/* ===================== UtsavLink Landing ===================== */
:root{
  /* UtsavLink — deep vibrant crimson + bright gold (not muted terracotta / InviteO) */
  --ink:#0F0A12;
  --ink-2:#2A1520;
  --muted:#5C4A52;
  --gold:#F59E0B;
  --gold-deep:#B45309;
  --gold-light:#FEF3C7;
  --cream:#FAF7F2;
  --cream-2:#F3EDE4;
  --wash-1:#FAF7F2;
  --wash-2:#F5EFE6;
  --wash-3:#EDE4D8;
  --wash-4:#E5D9CA;
  --wash-5:#F7F1E9;
  --maroon:#BE123C;      /* vibrant deep rose-crimson */
  --maroon-2:#9F1239;
  --leaf:#0F766E;        /* deep teal accent */
  --white:#FFFCFA;
  --line:rgba(15,10,18,.12);
  --shadow:0 18px 40px rgba(15,10,18,.12);
  --radius:14px;
  --radius-btn:8px;
  --f: "Sora", system-ui, sans-serif;
  --f-body:"Sora", system-ui, sans-serif;
  --f-display:"Fraunces", "Tiro Devanagari Marathi", Georgia, serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{font-family:var(--f-body);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(70% 40% at 12% 8%, rgba(245,158,11,.16), transparent 55%),
    radial-gradient(55% 35% at 92% 18%, rgba(159,18,57,.10), transparent 50%),
    radial-gradient(60% 40% at 70% 90%, rgba(15,118,110,.07), transparent 55%),
    linear-gradient(180deg, var(--wash-1) 0%, var(--cream) 28%, var(--wash-2) 62%, var(--wash-5) 100%);
  background-attachment:scroll;background-repeat:no-repeat}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.12;letter-spacing:-.02em;font-weight:600}
.wrap{width:min(1120px,92%);margin-inline:auto}
.wrap-narrow{width:min(760px,92%)}
.center{text-align:center}
.hl{color:var(--maroon);font-style:italic;font-weight:600}

/* brand lockup — matches marketing wordmark: crimson Utsav + gold Link + tilak hearts + TM + By Arham */
.brand{display:inline-flex;align-items:center;gap:0;color:inherit}
.brand-lockup{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1;gap:3px}
.brand-wordmark{
  position:relative;display:inline-flex;align-items:baseline;
  font-family:var(--f-display);font-weight:700;font-size:1.42rem;
  letter-spacing:-.03em;line-height:1
}
.brand-utsav{position:relative;color:var(--maroon-2);padding-top:.32em}
.brand-link{color:#B45309} /* muted bronze-gold */
.brand-tm{
  font-family:var(--f);font-size:.36em;font-weight:700;color:#B45309;
  margin-left:.1em;position:relative;top:-.7em;line-height:1;letter-spacing:0
}
.brand-by{
  font-family:var(--f);font-size:.58rem;font-weight:500;color:var(--ink);
  letter-spacing:.015em;align-self:flex-end;padding-right:.05em;line-height:1.2
}
.brand-tilak{
  position:absolute;left:.02em;top:0;width:.78em;height:.55em;
  overflow:visible;pointer-events:none
}
.brand-lockup-lg .brand-wordmark{font-size:clamp(1.75rem,3.8vw,2.35rem)}
.brand-lockup-lg .brand-by{font-size:.72rem;font-weight:500}
.brand-lockup-lg{gap:5px;margin:0 0 14px}
.brand-lockup-lg::after{
  content:"";display:block;width:48px;height:3px;margin-top:6px;
  background:linear-gradient(90deg,var(--maroon),var(--gold));border-radius:2px
}
.brand-name{font-family:var(--f-display);font-weight:700;font-size:1.5rem;letter-spacing:-.03em;color:var(--maroon-2);display:inline-flex;align-items:center}
.brand-o{width:.62em;height:.62em;border-radius:50%;border:.19em solid var(--gold);display:inline-block;margin-left:.02em}

/* buttons — squared soft corners */
.btn{font-family:var(--f);font-weight:600;font-size:.95rem;padding:12px 20px;border-radius:var(--radius-btn);display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1.5px solid transparent;transition:transform .15s ease, box-shadow .2s ease, background .2s, border-color .2s;letter-spacing:.01em}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--maroon);color:#FFFCFA;border:1px solid var(--maroon-2);box-shadow:0 10px 24px rgba(190,18,60,.34)}
.btn-primary:hover{background:var(--maroon-2);box-shadow:0 14px 28px rgba(159,18,57,.38)}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(15,10,18,.22)}
.btn-ghost:hover{border-color:var(--maroon);background:rgba(190,18,60,.06);color:var(--maroon)}
.btn-on-dark{background:var(--gold-light);color:var(--ink);font-weight:700;border:1px solid var(--gold);box-shadow:0 6px 18px rgba(180,83,9,.22)}
.btn-on-dark:hover{background:#fff8e8}
.btn-lg{padding:15px 26px;font-size:1.02rem}
.btn-sm{padding:9px 16px;font-size:.88rem}
.btn-block{width:100%;justify-content:center}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,252,250,.75);border:1px solid var(--line);border-left:3px solid var(--maroon);color:var(--ink-2);padding:7px 14px 7px 12px;border-radius:8px;font-size:.82rem;font-weight:600;box-shadow:none;letter-spacing:.02em}
.pill-dot{width:7px;height:7px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 3px rgba(47,93,58,.18)}

/* ===================== header ===================== */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);
  background:rgba(247,245,239,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.header-inner{display:flex;align-items:center;gap:22px;padding:10px 0}
.nav{margin-left:auto;display:flex;gap:22px;font-weight:500;font-family:var(--f);font-size:.9rem}
.nav a{color:var(--muted);position:relative}
.nav a:hover{color:var(--ink)}
.header-inner .btn-primary{margin-left:8px}
.nav-toggle{display:none;background:none;border:none;font-size:1.5rem;color:var(--ink);cursor:pointer;
  width:44px;height:44px;align-items:center;justify-content:center;margin-right:-8px}
.mobile-menu{display:none;flex-direction:column;gap:6px;padding:10px 4% 18px;border-bottom:1px solid var(--line);
  background:rgba(247,245,239,.97);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.mobile-menu a{padding:10px 6px;font-family:var(--f);font-weight:500}
.mobile-menu .btn{margin-top:6px;justify-content:center}

/* ===================== hero ===================== */
.hero{padding:56px 0 0;overflow:hidden;
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(245,158,11,.14), transparent 55%),
    linear-gradient(180deg, var(--wash-1), rgba(250,247,242,0) 70%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.brand-kicker{font-family:var(--f-display);font-size:clamp(1.6rem,3.5vw,2.1rem);font-weight:700;color:var(--maroon-2);margin:0 0 14px;letter-spacing:-.03em}
.brand-kicker::after{content:"";display:block;width:48px;height:3px;margin-top:10px;background:linear-gradient(90deg,var(--maroon),var(--gold));border-radius:2px}
/* .brand-lockup-lg replaces .brand-kicker in hero */
.hero-copy h1{font-size:clamp(2rem,4.6vw,3.15rem);font-weight:600;margin:14px 0 14px;max-width:16ch}
.lede{font-size:1.08rem;color:var(--muted);max-width:32em;font-weight:400}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 18px;align-items:center}
.hero-trust{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.92rem;padding-top:4px;border-top:1px solid var(--line);max-width:28em}
.stars{color:var(--gold-deep);letter-spacing:2px;font-size:.85rem}

/* phone mockup */
.hero-visual{position:relative;display:grid;place-items:center;min-height:420px}
.phone{width:min(300px,74vw);aspect-ratio:9/16;background:var(--ink);border-radius:38px;padding:10px;box-shadow:var(--shadow), 0 0 0 2px rgba(42,32,24,.06);position:relative;transform:rotate(3deg)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:28px}
.phone-notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:90px;height:18px;background:#0e0a07;border-radius:0 0 12px 12px;z-index:2}

/* Hero preview: a handset, not a flat panel. What we sell is the thing that
   lands on a phone, so the frame has to say phone - a wide screenshot read as
   "someone's website" and lost the WhatsApp-link idea the copy is making.
   Taller than the stock 9/16 mockup: an invite is a long scroll, and the extra
   height buys another section of it on screen. */
.hero-visual .phone{width:min(302px,74vw);aspect-ratio:9/17.4;background:var(--ink);
  border-radius:44px;padding:11px;transform:none;
  box-shadow:var(--shadow),0 0 0 2px rgba(42,32,24,.06)}
.hero-visual .phone-notch{display:block;top:17px;width:84px;height:17px;z-index:4}
.hero-visual .phone-screen{border-radius:33px;background:var(--cream)}
.hero-visual .phone img{border-radius:33px}
/* The invite lays out for a real handset. Letting the iframe take the frame's
   own ~280px rendered every design at a width no phone has - squeezed
   headings, cards reflowing differently from the live invite. script.js gives
   it a true 390px viewport and scales the whole thing down to fit. */
.hero-visual .phone-screen iframe{inset:auto;top:0;left:0;transform-origin:top left}
/* the badges float over the artwork, and the preview iframe carries z-index:2 */
.hero-usps{list-style:none;margin:0;padding:0;position:absolute;inset:0;
  pointer-events:none;z-index:3}
.hero-visual .floaty-a{top:11%;left:-3%;animation:bob 5s ease-in-out 0s infinite}
.hero-visual .floaty-b{top:46%;right:-3%}
.hero-visual .floaty-c{bottom:9%;left:-5%}
.floaty{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px 14px;font-weight:600;font-size:.85rem;box-shadow:var(--shadow);font-family:var(--f)}
.floaty-b{top:46%;right:-8%;animation:bob 4.6s ease-in-out .4s infinite}
.floaty-c{bottom:8%;left:2%;animation:bob 4.2s ease-in-out .8s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* marquee */
.marquee{margin-top:56px;border-top:1px solid rgba(245,158,11,.4);border-bottom:1px solid rgba(245,158,11,.4);
  background:linear-gradient(90deg,var(--maroon-2),var(--maroon) 45%,#6B0F2A 75%,#0F766E);overflow:hidden;position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:88px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--maroon-2),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,#0F766E,transparent)}
.marquee-track{display:flex;align-items:center;gap:30px;white-space:nowrap;padding:15px 0;color:#FFFCFA;font-family:var(--f);font-weight:600;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;animation:scroll 26s linear infinite}
.marquee-track span{opacity:.95}
.marquee-track .marquee-dot{color:var(--gold-light);opacity:1;font-size:.6rem;line-height:1;letter-spacing:0;transform:translateY(-1px)}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ===================== sections ===================== */
.section{padding:60px 0}
.section-kicker{text-align:center;margin-bottom:10px;color:var(--maroon);font-family:var(--f);
  font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.section-title{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:600;text-align:center;font-family:var(--f-display)}
.section-sub{text-align:center;color:var(--muted);max-width:44em;margin:12px auto 0;font-size:1.02rem}
.card{background:rgba(255,252,250,.88);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 28px rgba(22,26,20,.06)}

/* features */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.feature{padding:26px 24px}
.fico{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;font-size:1.5rem;background:linear-gradient(145deg,var(--gold-light),var(--cream-2));border:1px solid rgba(196,163,90,.35);margin-bottom:14px}
.feature h3{font-size:1.12rem;font-weight:600;margin-bottom:6px;font-family:var(--f-display)}
.feature p{color:var(--muted);font-size:.96rem}

/* designs */
.designs{background:linear-gradient(180deg,rgba(233,228,216,.55),rgba(247,245,239,.2))}
.design-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:40px 0 30px}
.design{overflow:hidden;transition:transform .25s ease, box-shadow .25s ease;border-radius:var(--radius)}
.design:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.design-img{aspect-ratio:3/4;overflow:hidden;background:var(--ink)}
.design-img img{width:100%;height:100%;object-fit:cover}
.design-idolwrap{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#2C3428,#161A14)}
.design-idolwrap img{width:78%;height:auto;object-fit:contain}
.design-body{padding:18px 20px}
.design-body h3{font-family:var(--f-display);font-size:1.28rem;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.design-body p{color:var(--muted);font-size:.95rem;margin-top:4px}
.tag{background:var(--maroon);color:#FFFCFA;font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:6px;font-family:var(--f);letter-spacing:.02em}

/* how */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.step{text-align:center;padding:0 12px}
.step-n{width:52px;height:52px;border-radius:12px;background:var(--ink);color:var(--gold-light);font-family:var(--f);font-weight:700;font-size:1.25rem;display:grid;place-items:center;margin:0 auto 16px;border:1px solid rgba(196,163,90,.4)}
.step h3{font-size:1.15rem;font-weight:600;font-family:var(--f-display)}
.step p{color:var(--muted);margin-top:6px}

/* pricing */
.pricing{background:linear-gradient(180deg,rgba(247,245,239,.35),rgba(233,228,216,.55))}
.price-card{max-width:560px;margin:44px auto 0;padding:34px;border-top:3px solid var(--maroon)}
.price-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-bottom:1px solid var(--line);padding-bottom:22px}
.price-top h3{font-size:1.28rem;font-weight:600;font-family:var(--f-display)}
.price-note{color:var(--muted);font-size:.94rem;margin-top:4px}
.price-amt{font-family:var(--f);font-weight:700;font-size:2.7rem;color:var(--ink);line-height:1;white-space:nowrap}
.price-amt .rupee{font-size:1.5rem;vertical-align:top;margin-right:2px}
.price-amt .per{font-size:.9rem;font-weight:600;color:var(--muted);margin-left:4px}
.price-list{list-style:none;margin:22px 0;display:grid;gap:12px}
.price-list li{position:relative;padding-left:30px;color:var(--ink-2)}
.price-list li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;background:var(--leaf);color:#FFFCFA;border-radius:6px;display:grid;place-items:center;font-size:.75rem;font-weight:700}
.price-fine{text-align:center;color:var(--muted);font-size:.9rem;margin-top:14px}

/* testimonials */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.quote{padding:26px 24px}
.quote blockquote{font-size:1.02rem;margin:10px 0 14px;font-family:var(--f-display);font-weight:500;font-style:italic}
.quote figcaption{color:var(--muted);font-weight:600;font-family:var(--f);font-size:.92rem}

/* faq */
.faq-item{background:rgba(255,252,250,.9);border:1px solid var(--line);border-radius:12px;margin-top:12px;padding:4px 20px;box-shadow:0 4px 14px rgba(22,26,20,.04)}
.faq-item summary{font-family:var(--f);font-weight:600;font-size:1.02rem;padding:16px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--maroon);font-size:1.4rem;font-weight:600;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{color:var(--muted);padding:0 0 18px}

/* cta band */
.cta-band{color:var(--cream);
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(159,18,57,.28), transparent 62%),
    radial-gradient(50% 80% at 100% 100%, rgba(245,158,11,.18), transparent 55%),
    linear-gradient(180deg,#2A1520,var(--ink) 55%,#0F0A12)}
.cta-band h2{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:600;font-family:var(--f-display)}
.cta-band p{color:rgba(255,252,250,.78);margin:12px 0 26px;font-size:1.08rem}

/* social share */
.share-block{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,252,250,.16);max-width:520px;margin-inline:auto}
@media(max-width:900px){
  .cta-band{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  .share-block{position:relative;z-index:5}
}
.share-label{margin:0 0 12px !important;font-size:.92rem !important;color:rgba(255,252,250,.7) !important}
.share-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.share-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f);font-weight:600;font-size:.88rem;line-height:1;
  padding:11px 16px;border-radius:var(--radius-btn);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;color:inherit;background:rgba(255,252,250,.1);
  transition:transform .15s ease, background .2s, border-color .2s;
  min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  position:relative;z-index:2
}
.share-btn svg{width:18px;height:18px;flex:0 0 auto;pointer-events:none}
.share-btn:hover{transform:translateY(-1px)}
.share-wa{background:#25D366;color:#fff;border-color:#1ebe57}
.share-wa:hover{background:#1ebe57;color:#fff}
.share-fb{background:#1877F2;color:#fff;border-color:#166fe5}
.share-fb:hover{background:#166fe5;color:#fff}
.share-copy,.share-native{background:rgba(255,252,250,.12);color:#FFFCFA;border-color:rgba(255,252,250,.28)}
.share-copy:hover,.share-native:hover{background:rgba(255,252,250,.2);color:#FFFCFA}
.share-toast{margin:10px 0 0 !important;font-size:.85rem !important;color:var(--gold-light) !important}
.footer-share{margin-top:14px}
.footer-share-label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.share-row-sm .share-btn{padding:10px;min-width:42px;min-height:42px}
.share-row-sm .share-btn svg{width:18px;height:18px}
.site-footer .share-copy{background:rgba(15,10,18,.06);color:var(--ink);border-color:var(--line)}
.site-footer .share-copy:hover{background:rgba(190,18,60,.08);border-color:var(--maroon);color:var(--maroon)}
.footer-bottom a{color:var(--maroon);font-weight:600}
.footer-bottom a:hover{text-decoration:underline}

/* footer */
.site-footer{background:linear-gradient(180deg,rgba(247,245,239,.7),rgba(233,228,216,.95));border-top:1px solid var(--line);padding:56px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.footer-brand{font-size:1.4rem}
.footer-about{color:var(--muted);margin-top:12px;max-width:34em;font-size:.96rem}
.footer-links h4{font-family:var(--f);font-size:.95rem;margin-bottom:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.footer-links a{display:block;color:var(--muted);padding:10px 0}
.footer-links a:hover{color:var(--maroon)}
.footer-bottom{border-top:1px solid var(--line);margin-top:36px;padding-top:22px;color:var(--muted);font-size:.9rem}

/* whatsapp fab */
.wa-fab{position:fixed;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px rgba(37,211,102,.45);z-index:60;transition:transform .2s}
.wa-fab:hover{transform:scale(1.08)}

/* ===================== responsive ===================== */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .feature-grid,.design-grid,.steps,.quote-grid{grid-template-columns:1fr 1fr}
  /* the fixed purchase bar covers the end of the page, so make room for it */
  .site-footer{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .hero-visual{order:-1;min-height:auto;margin-bottom:8px}
  .nav,.header-inner>.btn-primary{display:none}
  .nav-toggle{display:inline-flex;margin-left:auto}
  /* :not([hidden]) - a bare .mobile-menu{display:flex} outranks the UA
     [hidden] rule and pins the menu open on every phone. */
  .mobile-menu:not([hidden]){display:flex}
}
@media(max-width:560px){
  .feature-grid,.design-grid,.steps,.quote-grid,.footer-grid{grid-template-columns:1fr}
  .price-top{flex-direction:column}
  .section{padding:56px 0}
  .hero{padding:40px 0 0}
}

/* line icons (no emojis) */
.fico .ic{width:26px;height:26px;color:var(--maroon)}
.floaty{display:inline-flex;align-items:center;gap:7px}
.floaty svg{width:17px;height:17px;color:var(--maroon);flex:0 0 auto}
.pill{display:inline-flex;align-items:center;gap:8px}
.pill-dot{width:7px;height:7px;border-radius:50%;background:var(--leaf);flex:0 0 auto;box-shadow:0 0 0 3px rgba(47,93,58,.18)}

.nav-toggle svg{width:26px;height:26px}

/* sticky self-serve CTA */
.cta-fab{position:fixed;right:20px;bottom:20px;z-index:60;background:var(--maroon);color:#FFFCFA;font-family:var(--f);font-weight:600;font-size:.92rem;padding:13px 20px;border-radius:var(--radius-btn);box-shadow:0 12px 28px rgba(159,18,57,.4);border:1px solid var(--maroon-2);transition:transform .2s, background .2s}
.cta-fab:hover{transform:translateY(-2px);background:var(--maroon-2)}
@media(max-width:560px){.cta-fab{right:12px;bottom:12px;padding:12px 18px;font-size:.9rem}}

/* live invite preview inside the phone */
.phone-screen{position:relative;width:100%;height:100%;border-radius:28px;overflow:hidden;background:var(--ink)}
.phone-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .6s ease;z-index:2}
.phone-screen iframe.is-loaded{opacity:1}
.phone-screen .phone-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}

/* ===================== legal / policy pages ===================== */
.legal{padding:52px 0 76px;background:radial-gradient(120% 70% at 80% 0,#FDF6E4,transparent 55%),var(--cream)}
.legal .wrap-narrow{width:min(840px,92%)}
.legal-head{margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.legal-head .pill{margin-bottom:16px}
.legal-head h1{font-size:clamp(1.9rem,4.6vw,2.7rem);font-weight:800}
.legal-head .updated{color:var(--muted);margin-top:12px;font-size:.95rem}
.legal-body h2{font-size:1.28rem;font-weight:700;margin:32px 0 10px;color:var(--ink)}
.legal-body h3{font-size:1.05rem;font-weight:700;margin:20px 0 6px}
.legal-body p{color:var(--ink-2);margin:0 0 14px}
.legal-body ul{margin:0 0 16px;padding-left:20px;color:var(--ink-2)}
.legal-body li{margin:7px 0}
.legal-body strong{color:var(--ink)}
.legal-body a{color:var(--gold-deep);font-weight:600}
.legal-body a:hover{text-decoration:underline}
.legal-note{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:14px;padding:16px 20px;margin:18px 0;color:var(--ink-2);box-shadow:0 6px 18px rgba(42,32,24,.05)}
.legal-contact{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;margin:24px 0}
.legal-contact h3{margin:0 0 8px}
.legal-contact p{margin:6px 0;color:var(--ink-2)}
.legal-back{display:inline-flex;align-items:center;gap:7px;margin-top:26px;color:var(--gold-deep);font-family:var(--f);font-weight:600}
.legal-back:hover{color:var(--ink)}

/* contact page cards */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0 8px}
.contact-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 8px 24px rgba(42,32,24,.05)}
.contact-card .fico{margin-bottom:14px}
.contact-card h3{font-size:1.1rem;font-weight:700;margin-bottom:6px}
.contact-card p,.contact-card a{color:var(--muted);font-size:.98rem;display:block}
.contact-card a:hover{color:var(--gold-deep)}
@media(max-width:560px){.contact-grid{grid-template-columns:1fr}}

/* ================= Checkout dialog ================= */
.design-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.design-actions .btn{flex:1;text-align:center;white-space:nowrap}

.co-backdrop{position:fixed;inset:0;z-index:200;background:rgba(20,14,6,.62);
  backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px;overflow-y:auto}
.co-backdrop[hidden]{display:none}
.co-card{position:relative;width:100%;max-width:440px;background:#fff;border-radius:18px;
  padding:26px 22px 22px;box-shadow:0 30px 80px rgba(0,0,0,.35);margin:auto}
.co-close{position:absolute;top:10px;right:12px;border:0;background:none;font-size:1.7rem;line-height:1;
  color:#9b8a73;cursor:pointer;padding:4px 8px}
.co-close:hover{color:#2a2018}
.co-card h2{margin:0 0 4px;font-size:1.3rem}
.co-sub{margin:0 0 18px;color:#77664f;font-size:.9rem}

.co-themes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.co-theme{position:relative;display:block;border:2px solid #E4DDCF;border-radius:12px;overflow:hidden;
  cursor:pointer;background:#F7F5EF;transition:border-color .2s,transform .2s}
.co-theme:hover{transform:translateY(-1px)}
.co-theme input{position:absolute;opacity:0;pointer-events:none}
.co-theme img{width:100%;height:96px;object-fit:cover;display:block;background:#f2ead9}
.co-theme span{display:block;padding:8px 10px;font-size:.85rem;font-weight:600}
.co-theme:has(input:checked){border-color:var(--maroon);box-shadow:0 0 0 3px rgba(184,51,42,.18)}

.co-field{margin-bottom:12px}
.co-field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:4px}
.co-field label span{font-weight:400;color:#5C6658}
.co-field input{width:100%;padding:11px 12px;border:1px solid #D9D2C2;border-radius:10px;font:inherit}
.co-field input:focus{outline:2px solid rgba(184,51,42,.28);outline-offset:1px;border-color:var(--maroon)}
.co-field small{display:block;color:#5C6658;font-size:.74rem;margin-top:4px}

.co-total{margin:18px 0 14px;padding:12px 14px;background:#F7F5EF;border:1px solid #E4DDCF;border-radius:12px}
.co-total-row{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;color:#5C6658;padding:3px 0}
.co-total-sum{margin-top:8px;padding-top:9px;border-top:1px solid #E4DDCF;
  font-size:1rem;font-weight:700;color:var(--ink)}

.co-error{background:#fdeceb;border:1px solid #f3c3bd;color:#b03024;border-radius:10px;
  padding:10px 12px;font-size:.84rem;margin:0 0 12px}
.co-fine{font-size:.72rem;color:#77664f;text-align:center;margin:12px 0 0;line-height:1.6}
.btn-block{display:block;width:100%}

/* ==================================================================
   Conversion layer - urgency, reassurance, and a CTA always in reach
   ================================================================== */

/* countdown strip, directly under the header */
.countdown-bar{background:linear-gradient(90deg,var(--maroon-2),var(--maroon));color:#FFFCFA;font-family:var(--f);font-size:.92rem;
  text-align:center;padding:9px 4%;letter-spacing:.01em}
.countdown-bar strong{color:var(--gold-light)}
@media(max-width:560px){.countdown-bar{font-size:.82rem;padding:8px 4%}}

/* "you already paid, here's your link back" */
.resume-bar{background:#1f8a5f;color:#fff;text-align:center;padding:11px 4%;font-family:var(--f);
  font-weight:600;font-size:.93rem}
.resume-bar a{text-decoration:underline;color:#fff}

/* the three promises that answer "do I have to talk to anyone?" */
.promise-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 4px;max-width:620px}
.promise{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;color:var(--ink-2);font-family:var(--f);font-weight:500;line-height:1.35}
.promise svg{width:19px;height:19px;color:#1f8a5f;flex:0 0 auto;margin-top:1px}
@media(max-width:560px){
  .promise-row{grid-template-columns:1fr;gap:9px;margin:20px 0 4px}
  .promise{font-size:.9rem}
}

/* price anchor — compare-at ₹500, festival 80% off → ₹99 */
.price-was{color:var(--muted);text-decoration:line-through;font-size:.62em;font-weight:500;margin-right:.28em}
.price-tax{display:block;font-family:var(--f-body);font-size:.78rem;font-weight:500;color:var(--muted);margin-top:6px}
.price-save{display:inline-block;background:rgba(47,93,58,.1);color:var(--leaf);border:1px solid rgba(47,93,58,.28);
  font-family:var(--f);font-weight:700;font-size:.78rem;padding:4px 11px;border-radius:8px;margin-top:8px}
.price-off{
  display:inline-block;font-family:var(--f);font-weight:700;font-size:.72rem;letter-spacing:.06em;
  color:#FFFCFA;background:var(--maroon);border:1px solid var(--maroon-2);
  padding:5px 10px;border-radius:6px;margin-bottom:10px;line-height:1
}
.hero-offer{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:4px 0 14px;font-family:var(--f);font-size:.92rem;color:var(--ink-2)
}
.hero-offer .price-off{margin-bottom:0}
.hero-offer s{color:var(--muted);font-weight:500}
.sticky-was{font-weight:500;color:var(--muted);text-decoration:line-through;font-size:.78em;margin-right:.28em}
.co-offer{
  display:inline-block;font-family:var(--f);font-weight:700;font-size:.7rem;letter-spacing:.05em;
  color:#FFFCFA;background:var(--maroon);padding:3px 8px;border-radius:5px;margin-right:6px;vertical-align:middle
}
.co-off-tag{font-style:normal;font-size:.78em;font-weight:700;color:var(--leaf);margin-left:6px}
.co-was{color:var(--muted);margin-right:6px;font-weight:500}
.cta-band s{opacity:.75}

/* printed card vs UtsavLink */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.versus-col{background:rgba(255,252,250,.9);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;box-shadow:0 8px 24px rgba(22,26,20,.05)}
.versus-col.win{border-color:rgba(184,51,42,.35);box-shadow:0 14px 34px rgba(184,51,42,.12);border-top:3px solid var(--maroon)}
.versus-col h3{font-size:1.05rem;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:9px;font-family:var(--f-display)}
.versus-col ul{list-style:none;display:grid;gap:10px}
.versus-col li{display:flex;gap:9px;align-items:flex-start;color:var(--ink-2);font-size:.95rem;line-height:1.45}
.versus-col li::before{content:"✕";color:#b4553f;font-weight:700;flex:0 0 auto;line-height:1.45}
.versus-col.win li::before{content:"✓";color:var(--leaf)}
@media(max-width:560px){.versus{grid-template-columns:1fr}}

/* sticky mobile purchase bar */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;align-items:center;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(247,245,239,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(22,26,20,.10);transform:translateY(110%);transition:transform .28s ease}
.sticky-bar.is-on{transform:translateY(0)}
.sticky-price{font-family:var(--f);line-height:1.15}
.sticky-price b{display:block;font-size:1.12rem;font-weight:800}
.sticky-price span{font-size:.76rem;color:var(--muted)}
.sticky-bar .btn{margin-left:auto;flex:0 0 auto}
@media(max-width:900px){.sticky-bar{display:flex}}
/* the floating fab is redundant once the bar exists */
@media(max-width:900px){.cta-fab{display:none}}

/* design card actions */
.design-actions{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.design-actions .btn{flex:1 1 auto;justify-content:center}

/* demo callout */
.demo-note{margin-top:14px;font-size:.93rem;color:var(--muted)}
.demo-note a{color:var(--gold-deep);font-weight:600;text-decoration:underline}

/* trust badges under the price button */
.pay-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin-top:16px;
  color:var(--muted);font-size:.86rem;font-family:var(--f);font-weight:500}
.pay-trust span{display:inline-flex;align-items:center;gap:6px}
.pay-trust svg{width:15px;height:15px;color:#1f8a5f}

/* ------------------------------------------------------------------
   Mobile hero order. Ad traffic lands here: the promise, the price and
   the button must be on the first screen - the phone mockup follows as
   proof, it doesn't open the argument.
   ------------------------------------------------------------------ */
@media(max-width:900px){
  .hero-visual{order:0;margin:26px 0 0}
  .hero-grid{gap:0}
  .hero-copy h1{font-size:clamp(2rem,7.4vw,2.7rem);margin:14px 0 12px}
  .lede{font-size:1.02rem}
  .hero-cta{margin:22px 0 14px}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  /* Floating over a 375px screen these covered the artwork - but hiding them
     outright meant the phone-sized majority of this traffic never saw a single
     reason to buy. They stop floating and line up under the phone instead. */
  .hero-usps{position:static;display:flex;flex-wrap:wrap;justify-content:center;
    gap:8px;margin:16px auto 0;max-width:min(420px,92vw)}
  .hero-visual .floaty,.hero-visual .floaty-a,.hero-visual .floaty-b,.hero-visual .floaty-c{
    position:static;inset:auto;animation:none;padding:7px 11px;font-size:.8rem}
  .phone{transform:none;width:min(260px,64vw)}
  .hero-visual .phone{width:min(252px,66vw)}
}

/* ==================================================================
   Design cards that actually show the product
   ------------------------------------------------------------------
   Each card shows one still banner - the grand reveal captured from
   the live theme - and nothing moves until you ask it to. The eye
   opens the working invite in a modal rather than a new tab, because
   the in-app browsers this traffic arrives in handle new tabs badly.
   ================================================================== */
/* Design card = a phone standing in the card, cut off at the bottom so the
   invite reads as a page that keeps going. The browser bar carries the link,
   because "you get a real link to share" is the whole product. */
.design-shots{position:relative;aspect-ratio:2/3;overflow:hidden;cursor:pointer;
  display:flex;justify-content:center;padding-top:20px;
  background:linear-gradient(180deg,var(--cream-2) 0%,#ece2d0 100%);
  border-bottom:1px solid var(--line)}
.mock{width:76%;padding:7px 7px 0;border-radius:30px 30px 0 0;background:#17140f;
  box-shadow:0 18px 42px rgba(20,14,8,.30);transition:transform .45s ease}
.design:hover .mock{transform:translateY(-7px)}
.mock-screen{position:relative;border-radius:24px 24px 0 0;overflow:hidden;background:#fff}
.mock-bar{display:flex;align-items:center;justify-content:center;gap:6px;height:27px;
  background:#f1ece2;border-bottom:1px solid rgba(20,14,8,.09);
  font-family:var(--f);font-size:.63rem;color:#6d6154;white-space:nowrap}
.mock-bar svg{width:9px;height:9px;color:#8a7c6b;flex:none}
.mock-bar b{color:var(--ink);font-weight:700}
.design-shots .shot{display:block;width:100%;height:auto}

/* clears the phone's browser bar (20px stage pad + 7px bezel + 27px bar) so
   the link stays readable */
.shot-eye{position:absolute;bottom:14px;right:14px;z-index:4;display:inline-flex;align-items:center;gap:7px;
  padding:11px 14px 11px 12px;min-height:44px;border:0;border-radius:var(--radius-btn);cursor:pointer;
  background:rgba(255,252,250,.94);color:var(--ink);font-family:var(--f);font-weight:600;font-size:.84rem;
  box-shadow:0 6px 18px rgba(22,26,20,.22);backdrop-filter:blur(6px);
  transition:transform .18s ease, background .18s ease}
.shot-eye svg{width:17px;height:17px;color:var(--maroon)}
.shot-eye:hover{transform:translateY(-1px);background:#fff}
.design:hover .shot-eye{box-shadow:0 10px 24px rgba(22,26,20,.28)}
.eye-ic{width:16px;height:16px}

/* the design that cannot be bought yet is deliberately quieter */
.design-soon{opacity:.9}
.design-soon .design-img img{filter:saturate(.72)}
.tag-quiet{background:var(--cream-2);color:var(--muted)}
.soon-note{margin-top:10px;font-size:.86rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:10px}

@media(prefers-reduced-motion:reduce){
  .mock{transition:none}
  .design:hover .mock{transform:none}
}

/* ==================================================================
   Live preview modal - the "eye"
   ================================================================== */
.pv-backdrop{position:fixed;inset:0;z-index:220;background:rgba(20,14,6,.72);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:18px;overflow-y:auto}
.pv-backdrop[hidden]{display:none}
.pv-card{position:relative;width:100%;max-width:900px;background:var(--cream);border-radius:22px;
  padding:22px 24px 20px;box-shadow:0 30px 80px rgba(0,0,0,.42);margin:auto}
.pv-close{position:absolute;top:10px;right:14px;border:0;background:none;font-size:1.9rem;line-height:1;
  color:#9b8a73;cursor:pointer;padding:4px 8px;z-index:4}
.pv-close:hover{color:var(--ink)}

.pv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-right:34px}
.pv-titles h2{font-size:1.35rem;font-weight:800}
.pv-sub{color:var(--muted);font-size:.92rem;margin-top:3px}
.pv-tabs{display:inline-flex;gap:4px;background:var(--cream-2);border:1px solid var(--line);
  border-radius:10px;padding:4px}
.pv-tab{border:0;background:none;cursor:pointer;font-family:var(--f);font-weight:600;font-size:.88rem;
  color:var(--muted);padding:8px 16px;border-radius:8px;transition:background .2s,color .2s}
.pv-tab:hover{color:var(--ink)}
.pv-tab.is-on{background:var(--maroon);color:#FFFCFA}

.pv-stage{display:grid;place-items:center;padding:20px 0 6px}
.pv-phone{transform:none;width:min(300px,72vw)}
.pv-phone .phone-screen{background:var(--ink)}
/* Sized and scaled by preview.fitFrame(): a real 390px phone viewport,
   shrunk to fit the frame, so the preview matches the live invite. */
.pv-phone iframe{position:absolute;inset:auto;top:0;left:0;transform-origin:top left;border:0;opacity:0;
  transition:opacity .5s ease;z-index:2}
.pv-phone iframe.is-loaded{opacity:1}
.pv-loading{position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:12px;
  color:rgba(251,248,238,.72);font-family:var(--f);font-size:.86rem;text-align:center;padding:0 22px}
.pv-spin{width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(251,248,238,.25);
  border-top-color:var(--gold);animation:pv-spin .8s linear infinite}
@keyframes pv-spin{to{transform:rotate(360deg)}}
.pv-hint{margin-top:16px;color:var(--muted);font-size:.86rem;text-align:center}

.pv-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:16px;margin-top:8px}
.pv-actions .btn{flex:0 1 auto}

@media(max-width:600px){
  .pv-backdrop{padding:0}
  .pv-card{max-width:none;min-height:100%;border-radius:0;padding:18px 16px calc(16px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column}
  .pv-head{flex-direction:column;gap:12px}
  .pv-tabs{width:100%}
  .pv-tab{flex:1;text-align:center}
  .pv-stage{flex:1;padding:14px 0 4px}
  .pv-phone{width:min(270px,68vw)}
  .pv-hint{margin-top:12px;font-size:.8rem}
  .pv-actions{position:sticky;bottom:0;background:var(--cream);padding-bottom:4px}
  .pv-actions .btn{flex:1 1 100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.pv-spin{animation-duration:2.4s}}

/* price-card reassurance line: the preview is what makes "decide after you
   look" an honest promise, so it links straight into it */
.price-amt .price-save{display:block;width:fit-content;margin-left:auto;font-size:.78rem}
.price-amt .price-tax{width:fit-content;margin-left:auto}
@media(max-width:560px){.price-amt .price-save,.price-amt .price-tax{margin-left:0}}
.price-reassure{text-align:center;color:var(--muted);font-size:.9rem;margin-top:14px;line-height:1.5}
.linkish{border:0;background:none;padding:9px 0;font:inherit;color:var(--gold-deep);font-weight:600;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;min-height:40px}
.linkish:hover{color:var(--ink)}

/* two cream sections now sit next to each other after the designs swap */
.features + .how{border-top:1px solid var(--line)}

/* ---- one column per design in the picker and the preview tabs; keep these
       in step with how many designs ship or the last one is left orphaned ---- */
.co-themes{grid-template-columns:repeat(3,1fr)}
.co-theme img{height:84px}
.co-theme span{font-size:.78rem;padding:7px 8px}
@media(max-width:380px){
  .co-theme img{height:70px}
  .co-theme span{font-size:.72rem}
}
.pv-tab{padding:8px 13px;font-size:.85rem}
@media(max-width:600px){
  .pv-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
  .pv-tab{padding:9px 6px;font-size:.78rem}
}

/* ============ live invite counter ============
   Real numbers from /api/stats. Hidden until the count is large enough
   to persuade anyone - see MIN_TO_SHOW in script.js. */
.live-count{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--muted);
  font-size:.92rem;font-weight:500}
.live-count .live-dot{width:8px;height:8px;border-radius:50%;background:#3fb950;flex:none;
  box-shadow:0 0 0 0 rgba(63,185,80,.5);animation:livepulse 2.4s ease-out infinite}
.live-count b{color:var(--ink);font-weight:700}
@keyframes livepulse{
  70%{box-shadow:0 0 0 9px rgba(63,185,80,0)}
  100%{box-shadow:0 0 0 0 rgba(63,185,80,0)}
}
@media(prefers-reduced-motion:reduce){.live-count .live-dot{animation:none}}

/* ============ "what lands in your family group" ============ */
.thread-proof{background:linear-gradient(180deg,rgba(248,233,219,.55),rgba(244,238,221,.35));border-top:1px solid var(--line)}
.thread-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:52px;
  align-items:center;margin-top:44px}

/* the WhatsApp thread mock-up */
.wa-thread{border-radius:26px;overflow:hidden;box-shadow:var(--shadow);background:#0b141a;
  border:1px solid rgba(42,32,24,.14);font-family:var(--f-body)}
.wa-top{display:flex;align-items:center;gap:11px;padding:13px 15px;background:#1f2c33;color:#e9edef}
.wa-avatar{width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--ink);
  display:grid;place-items:center;font-family:var(--f);font-weight:700;font-size:.9rem;flex:none}
.wa-who{display:flex;flex-direction:column;min-width:0}
.wa-who strong{font-size:.95rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-who small{font-size:.76rem;color:#8696a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the faint doodle pattern WhatsApp uses behind messages */
.wa-body{padding:14px 12px 18px;display:flex;flex-direction:column;gap:9px;
  background-color:#0b141a;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:22px 22px}
.wa-day{display:grid;place-items:center;margin-bottom:2px}
.wa-day span{background:#1f2c33;color:#8696a0;font-size:.68rem;letter-spacing:.06em;
  padding:4px 12px;border-radius:8px}

.wa-msg{max-width:86%;padding:7px 10px 5px;border-radius:9px;position:relative;
  font-size:.88rem;line-height:1.45;color:#e9edef}
.wa-msg p{margin:0}
.wa-in{align-self:flex-start;background:#202c33;border-top-left-radius:2px}
.wa-out{align-self:flex-end;background:#005c4b;border-top-right-radius:2px}
.wa-has-card{padding:5px 5px 5px;max-width:90%}
.wa-meta{display:block;text-align:right;font-size:.66rem;color:#8696a0;margin-top:2px}
.wa-out .wa-meta{color:#a5c9bd}
.wa-ticks{color:#53bdeb;margin-left:2px}

/* the rich link preview card WhatsApp builds from our og: tags */
.wa-card{display:block;background:#1a242a;border-radius:7px;overflow:hidden;
  border-left:3px solid var(--gold)}
.wa-card img{width:100%;height:132px;object-fit:cover;object-position:center 22%}
.wa-card-text{display:flex;flex-direction:column;gap:2px;padding:8px 10px 9px}
.wa-card-text b{font-size:.82rem;font-weight:600;color:#e9edef;line-height:1.35}
.wa-card-text em{font-style:normal;font-size:.74rem;color:#8696a0;line-height:1.4}
.wa-card-text i{font-style:normal;font-size:.7rem;color:#6b7c85;margin-top:1px}
.wa-link{margin:6px 6px 0 !important;font-size:.8rem;color:#53bdeb;word-break:break-all}

/* the copy beside it */
.thread-copy h3{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:800;margin-bottom:18px}
.thread-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.thread-list li{position:relative;padding-left:30px;color:var(--muted);font-size:1rem;line-height:1.6}
.thread-list li b{color:var(--ink);font-weight:700}
.thread-list li::before{content:"";position:absolute;left:0;top:.45em;width:18px;height:18px;
  border-radius:50%;background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat,linear-gradient(#000,#000)}

@media(max-width:900px){
  .thread-grid{grid-template-columns:1fr;gap:36px;justify-items:center}
  .wa-thread{width:min(380px,100%)}
  .thread-copy{max-width:520px}
  .thread-copy .btn{width:100%;justify-content:center}
}

/* ============ free "make it yours" preview ============
   The preview modal grew a form: the phone alone proved the product was
   good, this proves it is theirs. Form left, live phone right; on a
   handset the fields come first and the phone sits under them. */
.pv-card{max-width:1000px}
.pv-stage{padding:22px 0 8px}
.pv-viewer{display:grid;place-items:center}

@media(max-width:600px){
  .pv-card{max-width:none}
  .pv-stage{padding:14px 0 4px}
}

/* ============ festive dressing on the hero ============
   Temple arch + hanging diyas (digital darshan motif) — not marigold varmala. */
.hero{position:relative;overflow:hidden}
.hero-grid{position:relative;z-index:2;padding-top:64px}

.hero-toran{position:absolute;top:0;left:0;right:0;height:86px;z-index:1;pointer-events:none;
  background:url("assets/temple-arch.svg?v=2") repeat-x top center;background-size:220px 88px;
  opacity:.98;filter:drop-shadow(0 4px 10px rgba(180,83,9,.22))}

.hero-mala{position:absolute;top:8px;width:44px;height:300px;z-index:1;pointer-events:none;
  background:url("assets/diya-strand.svg?v=2") no-repeat top center;background-size:44px 300px;
  transform-origin:50% 0;animation:sway 5.5s ease-in-out infinite;
  filter:drop-shadow(0 0 10px rgba(245,158,11,.35))}
.hero-mala-l{left:clamp(8px,4vw,68px)}
.hero-mala-r{right:clamp(8px,4vw,68px);animation-delay:-2.6s}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}

@media(max-width:900px){
  .hero-mala{width:36px;height:210px;background-size:36px 210px}
  .hero-mala-l{left:2px}
  .hero-mala-r{right:2px}
}
@media(max-width:560px){
  .hero-toran{height:62px;background-size:150px 68px}
  .hero-grid{padding-top:22px}
  .hero-mala{display:none}
}
@media(prefers-reduced-motion:reduce){.hero-mala{animation:none}}

/* ===================== language picker ===================== */
/* Sits above the design cards: the language a visitor previews in is the
   language their invite is created in, so it reads as part of choosing. */
.lang-pick{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:22px 0 4px}
.lang-label{color:var(--muted);font-size:.92rem}
.lang-opts{display:inline-flex;padding:4px;gap:2px;background:var(--white);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 6px 18px rgba(22,26,20,.06)}
.lang-opt{appearance:none;border:0;background:transparent;cursor:pointer;padding:11px 18px;border-radius:8px;
  font-family:var(--f);font-weight:600;font-size:.95rem;color:var(--ink);transition:background .16s,color .16s}
.lang-opt:hover{background:rgba(224,164,88,.14)}
.lang-opt.is-on{background:var(--ink);color:var(--white)}
@media (max-width:520px){
  /* "Preview in" and the three chips together are wider than a 360px phone,
     so the row wraps mid-pill and reads as an accident. Stack it: label
     above, chips centred under it, each one still thumb-sized. */
  .lang-pick{flex-direction:column;gap:10px;margin:20px 0 6px}
  .lang-label{font-size:.88rem}
  .lang-opts{width:auto}
  .lang-opt{padding:11px 16px;font-size:.92rem}
}

/* the picker repeated inside checkout - tighter, left-aligned with the fields */
.co-lang .lang-opts{margin-top:6px}
.co-lang .lang-opt{padding:10px 15px;font-size:.92rem}

/* ===================== Festival layer =====================
   Temple arch + diya lights — matches the hero motif (not marigold varmala).
   ========================================================== */

/* --- soft diya sparks drifting through the hero -------------------- */
.hero-petals{position:absolute;inset:0 0 -40px;overflow:hidden;pointer-events:none;z-index:1}
.hero-petals span{position:absolute;top:-30px;width:10px;height:10px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#FEF3C7,#F59E0B 55%,transparent 72%);
  box-shadow:0 0 12px rgba(245,158,11,.55);
  opacity:0;animation:petal-drift linear infinite}
.hero-petals span:nth-child(1){left:7%;animation-duration:15s;animation-delay:0s}
.hero-petals span:nth-child(2){left:19%;animation-duration:19s;animation-delay:-4s;width:8px;height:8px}
.hero-petals span:nth-child(3){left:31%;animation-duration:17s;animation-delay:-9s}
.hero-petals span:nth-child(4){left:44%;animation-duration:21s;animation-delay:-2s;width:7px;height:7px}
.hero-petals span:nth-child(5){left:57%;animation-duration:16s;animation-delay:-12s}
.hero-petals span:nth-child(6){left:68%;animation-duration:20s;animation-delay:-6s;width:9px;height:9px}
.hero-petals span:nth-child(7){left:81%;animation-duration:18s;animation-delay:-15s}
.hero-petals span:nth-child(8){left:92%;animation-duration:22s;animation-delay:-10s;width:8px;height:8px}
@keyframes petal-drift{
  0%{transform:translate(0,0) scale(.6);opacity:0}
  8%{opacity:.9}
  50%{transform:translate(18px,46vh) scale(1)}
  85%{opacity:.55}
  100%{transform:translate(-10px,92vh) scale(.4);opacity:0}
}

/* --- temple arch string between sections --------------------------- */
.festive-divider{position:relative;height:40px;margin:0;pointer-events:none}
.festive-divider::before{content:"";position:absolute;inset:0;
  background:url("assets/temple-arch.svg?v=2") repeat-x top center;background-size:150px 60px;
  opacity:.7;filter:drop-shadow(0 2px 6px rgba(180,83,9,.18))}

/* --- faint mandala / diya ring behind pricing & CTA --- */
.rangoli{position:absolute;left:50%;width:min(680px,120vw);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;z-index:0;opacity:.12;filter:blur(1px);
  background:
    repeating-conic-gradient(from 0deg,
      rgba(245,158,11,.85) 0deg 6deg, transparent 6deg 16deg),
    radial-gradient(circle,rgba(159,18,57,.5) 0 11%,transparent 12%);
  -webkit-mask-image:radial-gradient(circle,#000 26%,rgba(0,0,0,.65) 46%,transparent 68%);
  mask-image:radial-gradient(circle,#000 26%,rgba(0,0,0,.65) 46%,transparent 68%)}
.rangoli-top{top:-140px}
.pricing,.cta-band{position:relative;overflow:hidden}
.pricing>*:not(.rangoli):not(.cta-sparks),
.cta-band>*:not(.rangoli):not(.cta-sparks){position:relative;z-index:1}

.cta-band{background:
    radial-gradient(70% 120% at 50% 0%, rgba(245,158,11,.28), transparent 60%),
    linear-gradient(180deg,var(--maroon) 0%,var(--maroon-2) 55%,#4A0818 100%)}
.cta-band .rangoli{opacity:.10}

@media (prefers-reduced-motion:reduce){
  .hero-petals{display:none}
}

/* Bappa at the close, above the last ask. The band is the one place on the
   page with room for a picture and nothing competing for attention, and an
   invitation to a darshan should show who the darshan is of. Decoration
   only - aria-hidden, and it carries no information the words do not. */
.cta-idol{width:min(190px,46vw);height:auto;margin:0 auto 18px;display:block;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.45));
  -webkit-mask-image:radial-gradient(circle at 50% 42%,#000 62%,transparent 88%);
  mask-image:radial-gradient(circle at 50% 42%,#000 62%,transparent 88%)}
@media(max-width:560px){.cta-idol{width:min(150px,40vw);margin-bottom:14px}}

/* ---- the preview panel fits a short screen ---------------------------
   The phone mock is sized from its width and holds a 9/16 ratio, so the
   shorter the screen the further past the panel it grew. Every media
   query here reasons about width; none of them ever asked how much height
   there was. On a 360x640 phone the panel wanted 837px of content in
   640px, and the overflow landed on top of the buttons: "Get my link"
   was drawn straight through the preview, and "Open full screen" was
   buried behind it.

   Three things, one cause each. The stage is a flex child, and a flex
   child will not shrink past its own content unless told it may, so it
   gets min-height:0 and may scroll if it is ever squeezed further than
   this. The phone is now capped by the height left over as well as by
   the width, which keeps the 9/16 ratio because width still drives it.
   And the iframe inside the phone carries z-index:2, which lifted it over
   the sticky action bar, so the bar is lifted higher still. */
.pv-stage{min-height:0;overflow:auto}
.pv-phone{width:min(270px,68vw,max(150px,calc((100dvh - 390px)*9/16)))}
.pv-actions{z-index:3}

/* On a short screen the words go before the picture does. The subtitle
   says what the three tabs underneath it already show, and the hint
   explains the phone rather than doing anything, so both give up their
   room first - about 80px of it - and the preview gets to stay a usable
   size instead of shrinking to a stamp. */
@media (max-height:720px){
  .pv-sub{display:none}
  .pv-hint{margin-top:6px;font-size:.76rem}
  .pv-phone{width:min(270px,68vw,max(110px,calc((100dvh - 320px)*9/16)))}
}

/* ===================== Darshan and reveals =====================
   Two deliberate additions, in the order they matter:

   1. THE CURTAIN. Every invitation this page sells opens the same way -
      two panels part and the invite is revealed. The page performs that
      gesture once, over the phone in the hero, so the sales page and the
      product share one signature moment. It is the only load animation
      on the page; everything else waits for a scroll.

   2. THE REVEALS. Content rises as it comes into view, staggered by a few
      hundredths of a second, so the page reads as a sequence rather than
      a wall. Nothing moves for a reader who has asked motion to stop.
   ================================================================== */

/* ---- 1. the darshan curtain --------------------------------------- */
.darshan{position:absolute;inset:0;z-index:4;border-radius:inherit;overflow:hidden;
  pointer-events:none}
.darshan-panel{position:absolute;top:0;bottom:0;width:50.4%;
  background:
    linear-gradient(90deg,rgba(90,50,10,.20),transparent 22%,transparent 78%,rgba(90,50,10,.20)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 2px,transparent 2px 9px),
    linear-gradient(180deg,#e9d3a6,#dcbb82 46%,#c99b56);
  transition:transform 1.05s cubic-bezier(.16,.84,.24,1)}
.darshan-panel--l{left:0;transform:translateX(0)}
.darshan-panel--r{right:0;transform:translateX(0)}
/* the gold seam where the two panels meet */
.darshan-seam{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;
  background:linear-gradient(180deg,transparent,var(--gold-lt,#f6dd9c),transparent);
  opacity:.9;transition:opacity .5s ease .1s}
.darshan.is-open .darshan-panel--l{transform:translateX(-101%)}
.darshan.is-open .darshan-panel--r{transform:translateX(101%)}
.darshan.is-open .darshan-seam{opacity:0}

/* ---- 3. the reveals ------------------------------------------------ */
.rise{opacity:0;transform:translateY(18px);
  transition:opacity .62s cubic-bezier(.22,1,.36,1),transform .62s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--rise-i,0) * 70ms)}
.rise.is-in{opacity:1;transform:none}

/* ---- the design cards, on hover ------------------------------------ */
/* The card is a photograph of a live invite. Lifting it and letting the
   screen drift a little downward reads as looking into it, which is what
   the Preview button then does for real. */
.card.design{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
.card.design:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(42,32,24,.18)}
.design-shots .shot{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.card.design:hover .design-shots .shot{transform:translateY(-2.5%) scale(1.035)}
.card.design:hover .shot-eye{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ---- the quality floor --------------------------------------------- */
:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:2.5px solid var(--gold-deep);outline-offset:3px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  .darshan{display:none}
  .rise{opacity:1;transform:none;transition:none}
  .card.design,.design-shots .shot{transition:none}
  .card.design:hover{transform:none}
  .card.design:hover .design-shots .shot{transform:none}
}

/* ---- the design tabs stay one row however many designs there are ------
   The tabs were a three-column grid on a phone. That was exactly right for
   three designs and quietly wrong at four; at five it wrapped to three
   rows, took 123px of a 640px screen and pushed the hint back under the
   buttons - the same collision the panel was fixed for, arriving from the
   other end.

   A row that scrolls sideways costs the same height whether there are
   three designs or eight, so adding the next one cannot reopen this. The
   chosen tab is scrolled into view when the panel opens, and the
   scrollbar is hidden because the pill would otherwise carry a grey line
   across its foot on desktop. */
@media (max-width:600px){
  .pv-tabs{
    display:flex;flex-wrap:nowrap;grid-template-columns:none;
    overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .pv-tabs::-webkit-scrollbar{display:none}
  .pv-tab{flex:0 0 auto;white-space:nowrap;padding:9px 14px}
}
/* ===================== Motion layer =====================
   A premium invite should feel like one, before a word of it is read. What
   follows is the whole of that feeling: entrances, hovers and the two or
   three things on the page that breathe.

   Three rules hold all of it together.

   1. Nothing here hides anything until JavaScript says so. Every initial
      `opacity:0` is scoped under `html.anim-on`, a class script.js adds at
      boot and only ever when the reader has not asked motion to stop. A
      browser that fails to run the script, a crawler, a reader on reduced
      motion - all of them get the finished page with everything visible.
      This is a live checkout: an animation that fails must fail *open*.
   2. Transform and opacity only. Nothing here animates a property that
      costs layout, so nothing here can push the buy button as it moves.
   3. Decoration never takes a click. Every sweep, glow and particle is a
      pseudo-element or an aria-hidden span with `pointer-events:none`.
   ======================================================== */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.33,.9,.35,1);
}

/* ---- hero: the copy arrives as a sentence, not a slab --------------- */
/* The headline rises a word at a time. Because words wrap, the eye reads
   this as line following line - which is the intent - without the DOM
   surgery that splitting real line boxes would need, and without changing
   a character of what the h1 says. */
.anim-on .hero-copy h1 .hw{display:inline-block;opacity:0;transform:translateY(.48em);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
  transition-delay:calc(var(--w,0) * 40ms + 40ms)}
.anim-on .hero-copy h1.is-in .hw{opacity:1;transform:none}

/* the pill above it and everything under it follow, a beat apart */
.anim-on .hero-copy .pill,
.anim-on .hero-copy .lede,
.anim-on .hero-cta,
.anim-on .hero-trust{opacity:0;transform:translateY(16px);
  transition:opacity .68s var(--ease-out),transform .68s var(--ease-out);
  transition-delay:calc(var(--hero-i,0) * 110ms)}
.anim-on .hero-copy .pill.is-in,
.anim-on .hero-copy .lede.is-in,
.anim-on .hero-cta.is-in,
.anim-on .hero-trust.is-in{opacity:1;transform:none}

/* ---- the phone floats, and something warm sits behind it ------------ */
/* Scroll parallax used to live on .phone itself and would have overwritten
   this transform frame by frame. It moves to .hero-visual in script.js, so
   the drift and the float compose instead of fighting. */
.anim-on .hero-visual .phone{animation:phone-float 6.5s ease-in-out infinite}
@keyframes phone-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* A lamp behind the handset - the glow of the invite it is showing.
   Sits under .phone in the stacking order and never takes a pointer. */
.hero-visual::before{content:"";position:absolute;left:50%;top:50%;z-index:0;
  width:min(440px,88%);aspect-ratio:1;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);opacity:.7;
  background:radial-gradient(circle,rgba(224,164,88,.45),rgba(226,140,74,.16) 46%,transparent 70%)}
.anim-on .hero-visual::before{animation:glow-breathe 7.5s ease-in-out infinite}
@keyframes glow-breathe{
  0%,100%{opacity:.52;transform:translate(-50%,-50%) scale(.93)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}

/* ---- the three claims drift in from where they sit ------------------ */
/* Each chip enters from its own side, then hands over to the bob it
   already had. Two animations on one element: `usp-in` runs with fill
   `both` and `bob` starts after it, so the later one simply takes over. */
.anim-on .hero-usps .floaty{
  animation:usp-in .78s var(--ease-out) both,
            bob var(--bob,5s) ease-in-out var(--bob-delay,1s) infinite}
.anim-on .hero-visual .floaty-a{--fx:-26px;--fy:-14px;--bob:5s;--bob-delay:.95s}
.anim-on .hero-visual .floaty-b{--fx:28px;--fy:6px;--bob:4.6s;--bob-delay:1.15s}
.anim-on .hero-visual .floaty-c{--fx:-22px;--fy:18px;--bob:4.2s;--bob-delay:1.35s}
@keyframes usp-in{
  from{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) scale(.9)}
  to{opacity:1;transform:none}}

/* ---- a light passes over the buy button ----------------------------- */
/* Every 5.5s, and only on the buy button - the one thing on the page we
   want a returning eye to land on. pointer-events:none so it can never
   sit between a thumb and a sale. */
.anim-on [data-cta].btn-primary,
.anim-on [data-cta].btn-on-dark{position:relative;overflow:hidden}
.anim-on [data-cta].btn-primary::after,
.anim-on [data-cta].btn-on-dark::after{content:"";position:absolute;top:0;bottom:0;left:0;
  width:42%;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(255,222,166,.5),transparent);
  transform:translateX(-240%) skewX(-18deg);
  animation:cta-sweep 5.5s ease-in-out infinite}
.anim-on [data-cta].btn-on-dark::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
@keyframes cta-sweep{
  0%,72%{transform:translateX(-240%) skewX(-18deg)}
  100%{transform:translateX(330%) skewX(-18deg)}}

/* ---- navigation ----------------------------------------------------- */
/* The bar is already sticky and already blurred; what it lacked was any
   sign that the page had moved under it. */
.site-header{transition:background .32s ease,box-shadow .32s ease}
.site-header.is-scrolled{
  background:rgba(247,245,239,.96);
  box-shadow:0 10px 28px rgba(22,26,20,.08)}
.nav a{position:relative;transition:color .2s ease}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;
  background:var(--maroon);transform:scaleX(0);transform-origin:right center;
  transition:transform .3s var(--ease-out)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:left center}
.header-inner .btn-primary{transition:transform .22s var(--ease-out),box-shadow .25s ease,background .25s ease}
.header-inner .btn-primary:hover{transform:translateY(-2px);background:var(--maroon-2);
  box-shadow:0 14px 28px rgba(142,34,28,.32)}

@media (prefers-reduced-motion:reduce){
  .hero-visual::before{animation:none}
}

/* ---- design cards: a light passes over the invite ------------------- */
/* The card is a photograph of a live screen, so a slow reflection reads as
   a screen catching the light. Each card is offset from the next so the
   row never flashes in unison. */
.design-shots::after{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:38%;z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:translateX(-260%) rotate(14deg);opacity:0}
.anim-on .design-shots::after{opacity:1;animation:shot-sheen 7s ease-in-out infinite}
.anim-on .design:nth-child(2) .design-shots::after{animation-delay:2.3s}
.anim-on .design:nth-child(3) .design-shots::after{animation-delay:4.6s}
@keyframes shot-sheen{
  0%,62%{transform:translateX(-260%) rotate(14deg)}
  100%{transform:translateX(360%) rotate(14deg)}}

/* Switching language crossfades the still instead of snapping it. The
   swap itself happens while the image is invisible, so a half-loaded
   frame is never on screen. */
.design-shots .shot{transition:transform 1.1s var(--ease-out),opacity .24s ease}
.design-shots .shot.is-swapping{opacity:0}

/* ---- how it works: a thread of gold runs through the three steps ---- */
.steps{position:relative}
.steps::before{content:"";position:absolute;top:28px;left:17%;right:17%;height:2px;z-index:0;
  background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent);
  transform:scaleX(0);transform-origin:left center;opacity:.85}
.anim-on .steps.is-lit::before{transform:scaleX(1);
  transition:transform 1.15s var(--ease-out) .15s}
.step{position:relative;z-index:1}

/* The marker holds the icon; the number moves to a badge on its shoulder,
   so the step is still counted and now also says what it is. */
.step-n{position:relative}
.step-n svg{width:26px;height:26px;color:var(--gold)}
.step-n b{position:absolute;top:-3px;right:-3px;width:22px;height:22px;border-radius:50%;
  background:var(--gold);color:var(--ink);font-size:.76rem;font-weight:800;line-height:1;
  display:grid;place-items:center;box-shadow:0 3px 8px rgba(42,32,24,.28)}
.anim-on .steps .step-n{transform:scale(.82);opacity:0;
  transition:transform .55s var(--ease-out),opacity .45s ease;
  transition-delay:calc(var(--rise-i,0) * 130ms + 180ms)}
.anim-on .steps.is-lit .step-n{transform:scale(1);opacity:1}

/* ---- pricing: the card is worth looking at ------------------------- */
.price-card{position:relative}
.anim-on .price-card{box-shadow:0 8px 24px rgba(42,32,24,.05)}
.anim-on .price-card.is-lit{animation:price-glow 4.5s ease-in-out 1s infinite}
@keyframes price-glow{
  0%,100%{box-shadow:0 8px 24px rgba(22,26,20,.06),0 0 0 1px rgba(184,51,42,.22),0 0 22px rgba(184,51,42,.12)}
  50%{box-shadow:0 12px 30px rgba(22,26,20,.09),0 0 0 1px rgba(184,51,42,.4),0 0 36px rgba(184,51,42,.22)}}

/* ₹500 is struck through as you watch, and ₹99 lands after it. */
.anim-on .price-was{text-decoration:none;position:relative}
.anim-on .price-was::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left center}
.anim-on .price-card.is-lit .price-was::after{transform:scaleX(1);
  transition:transform .5s var(--ease-out) .5s}
.anim-on .price-now{display:inline-block;opacity:0;transform:translateY(10px) scale(.94)}
.anim-on .price-card.is-lit .price-now{opacity:1;transform:none;
  transition:opacity .5s var(--ease-out) .95s,transform .55s var(--ease-out) .95s}

/* each included feature ticks itself off */
.anim-on .price-list li::before{transform:scale(0);
  transition:transform .4s var(--ease-out);
  transition-delay:calc(var(--rise-i,0) * 70ms + 140ms)}
.anim-on .price-list li.is-in::before{transform:scale(1)}

/* ---- the WhatsApp thread types itself out -------------------------- */
/* Bubbles keep their space from the first paint - only opacity and
   transform move - so the section never reflows while it plays. */
.anim-on .wa-thread .wa-msg{opacity:0;transform:translateY(9px) scale(.965);
  transform-origin:0% 100%;
  transition:opacity .4s var(--ease-out),transform .46s var(--ease-out);
  transition-delay:calc(var(--m,0) * 620ms + 240ms)}
.anim-on .wa-thread .wa-out{transform-origin:100% 100%}
.anim-on .wa-thread.is-lit .wa-msg{opacity:1;transform:none}

/* the link preview unfurls a beat after the message that carries it */
.anim-on .wa-thread .wa-has-card .wa-card,
.anim-on .wa-thread .wa-has-card .wa-link{opacity:0;transform:scale(.975);
  transition:opacity .46s var(--ease-out),transform .46s var(--ease-out);
  transition-delay:calc(var(--m,0) * 620ms + 620ms)}
.anim-on .wa-thread.is-lit .wa-has-card .wa-card,
.anim-on .wa-thread.is-lit .wa-has-card .wa-link{opacity:1;transform:none}

/* ticks arrive grey and turn blue, after their message has landed */
.anim-on .wa-thread .wa-ticks{opacity:0;color:#8696a0;
  transition:opacity .3s ease,color .5s ease;
  transition-delay:calc(var(--m,0) * 620ms + 940ms)}
.anim-on .wa-thread.is-lit .wa-ticks{opacity:1;color:#53bdeb}

/* ---- testimonials -------------------------------------------------- */
/* Five stars fill left to right as the card arrives. */
.anim-on .quote .stars .st{display:inline-block;opacity:.22;transform:scale(.8);
  transition:opacity .3s ease,transform .34s var(--ease-out);
  transition-delay:calc(var(--s,0) * 95ms + 220ms)}
.anim-on .quote.is-lit .stars .st{opacity:1;transform:none}

@media(max-width:560px){
  /* One card at a time on a phone, swiped or left to run itself. Full
     bleed so the next card peeks in and the row reads as swipeable. */
  .quote-grid{display:grid;grid-auto-flow:column;grid-template-columns:none;
    grid-auto-columns:82%;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(50% - 50vw);padding:4px 9vw 8px;scrollbar-width:none}
  .quote-grid::-webkit-scrollbar{display:none}
  .quote{scroll-snap-align:center;height:100%}
}

/* ---- FAQ ----------------------------------------------------------- */
/* script.js drives the open/close so it can be animated and so only one
   answer is ever open; the + turning into a × is CSS, as it already was. */
.faq-item summary::after{transition:transform .3s var(--ease-out)}
.faq-item summary{transition:color .2s ease}
.faq-item{transition:box-shadow .3s ease,border-color .3s ease}
.faq-item[open]{box-shadow:0 10px 28px rgba(22,26,20,.08);border-color:rgba(184,51,42,.28)}
.faq-item:hover summary{color:var(--gold-deep)}

/* ---- the closing band --------------------------------------------- */
/* A few embers rising around the last ask. Six of them, aria-hidden,
   pointer-events:none, and gone entirely on reduced motion. */
.cta-band .cta-sparks{position:absolute;left:50%;bottom:6%;width:min(420px,86%);height:190px;
  transform:translateX(-50%);pointer-events:none;z-index:1}
.cta-sparks span{position:absolute;bottom:0;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#ffe6b0,#e0a458 70%);
  opacity:0;filter:blur(.3px)}
.anim-on .cta-sparks span{animation:spark-rise linear infinite}
.cta-sparks span:nth-child(1){left:8%;animation-duration:6.5s;animation-delay:0s}
.cta-sparks span:nth-child(2){left:26%;animation-duration:8s;animation-delay:-2.4s;width:4px;height:4px}
.cta-sparks span:nth-child(3){left:45%;animation-duration:7.2s;animation-delay:-5s}
.cta-sparks span:nth-child(4){left:63%;animation-duration:8.6s;animation-delay:-1.2s;width:5px;height:5px}
.cta-sparks span:nth-child(5){left:80%;animation-duration:7.6s;animation-delay:-3.8s;width:4px;height:4px}
.cta-sparks span:nth-child(6){left:93%;animation-duration:9s;animation-delay:-6.2s}
@keyframes spark-rise{
  0%{transform:translateY(0) scale(.7);opacity:0}
  14%{opacity:.9}
  70%{opacity:.55}
  100%{transform:translateY(-165px) scale(1.05);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .cta-sparks,.design-shots::after{display:none}
  .steps::before{transform:scaleX(1)}
  .price-card.is-lit{animation:none}
}

/* ===================== Spacing & hierarchy =====================
   The page had one padding for every section and one gap for every
   header, so a section that opened with a kicker, a headline and a
   sub-line read as three lines of equal weight with equal air. This
   gives the page a rhythm: more room between sections than inside one,
   and a header whose three parts are clearly a first, second and third.
   Only spacing and shadow - no colour, no type, no copy.
   ============================================================== */
:root{
  --shadow-sm:0 6px 18px rgba(42,32,24,.06);
  --shadow-md:0 14px 36px rgba(42,32,24,.10);
  --radius-sm:14px;
}

.section{padding:84px 0}

/* The header block: kicker tight to the title, sub-line clearly beneath
   it, and a deliberate gap before whatever the section is actually for. */
.section-kicker{margin-bottom:12px}
.section-title{margin-bottom:0}
.section-sub{max-width:40em;margin-top:14px;font-size:1.08rem;line-height:1.62}

/* Grids and cards sit a full step below the header rather than half of one */
.design-grid{margin-top:46px}
.steps{margin-top:52px}
.quote-grid{margin-top:44px}
.price-card{margin-top:46px}
.thread-grid{margin-top:46px}

/* one shadow vocabulary, so cards, quotes and answers agree */
.card{box-shadow:var(--shadow-sm)}
.faq-item{border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}
.quote{border-radius:var(--radius)}
.floaty{border-radius:var(--radius-sm)}

/* The FAQ list is a column of nine - it needs air between answers more
   than it needs air around the section. */
.faq-item{margin-top:14px}

/* The closing band carried the most empty space on the page: a picture,
   a headline, a line and a button, spread over a screen and a half. */
.cta-band{padding:76px 0 84px}
.cta-band p{margin:14px 0 30px}

@media(max-width:900px){
  .section{padding:68px 0}
}
@media(max-width:560px){
  /* On a phone the sections are already stacked one per screen, so the
     padding that separates them on a desktop only costs scrolling. */
  .section{padding:56px 0}
  .cta-band{padding:58px 0 64px}
  .design-grid,.steps,.quote-grid,.price-card,.thread-grid{margin-top:34px}
  .section-sub{font-size:1.02rem}
}

/* ==================================================================
   UtsavLink Dynamic UPI QR & Royal Styles
   ================================================================== */
.tag.royal{background:linear-gradient(135deg, #FFF0BD 0%, #D4AF37 100%);color:#300008;border:1px solid #AA820A;box-shadow:0 2px 8px rgba(212,175,55,.3)}
.card.design.is-royal{border:2px solid #D4AF37;box-shadow:0 12px 36px rgba(212,175,55,.18)}
.card.design.is-royal:hover{box-shadow:0 20px 50px rgba(130,0,23,.22)}

.co-card{max-width:400px;border:1px solid var(--line);box-shadow:0 24px 70px rgba(15,10,18,.28)}

/* —— UPI checkout step 2: fully centered, clear hierarchy —— */
#coStep2 .pay-simple{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  width:100%;max-width:100%;padding:8px 4px 4px;box-sizing:border-box;
}
#coStep2 .pay-kicker{
  margin:0;font-size:.95rem;font-weight:600;color:var(--muted);letter-spacing:.02em;
}
#coStep2 .pay-amount{
  margin:10px 0 0;width:100%;text-align:center;
  font-size:3.25rem;font-weight:800;line-height:1;letter-spacing:-.04em;
  color:var(--maroon);font-family:var(--f-display),var(--f),system-ui,sans-serif;
}
#coStep2 .pay-amount-note{
  margin:6px 0 18px;font-size:.88rem;font-weight:500;color:var(--muted);width:100%;text-align:center;
}
#coStep2 .pay-qr-wrap{
  display:flex;align-items:center;justify-content:center;
  width:240px;height:240px;margin:0 auto 8px;padding:14px;box-sizing:border-box;
  background:linear-gradient(145deg,#fff,#FFF8F0);
  border:2px solid var(--gold);
  border-radius:20px;
  box-shadow:0 0 0 4px rgba(245,158,11,.18),0 12px 28px rgba(190,18,60,.12);
}
#coStep2 .pay-qr{width:100%;height:100%;object-fit:contain;display:block;border-radius:8px}
#coStep2 .pay-scan-hint{margin:0 0 14px;font-size:.8rem;font-weight:600;color:var(--gold-deep);letter-spacing:.06em;text-transform:uppercase}
#coStep2 .pay-upi-row{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  width:100%;margin:0 0 6px;
}
#coStep2 .pay-upi-id{
  font-family:var(--f),system-ui,sans-serif;font-size:1rem;font-weight:700;
  color:var(--ink);background:var(--cream-2);border:1px solid var(--line);
  padding:8px 12px;border-radius:10px;
}
#coStep2 .pay-copy{
  border:0;background:var(--maroon);color:#fff;border-radius:10px;
  padding:10px 16px;font-size:.88rem;font-weight:700;cursor:pointer;font-family:inherit;
}
#coStep2 .pay-copy:hover{background:var(--maroon-2)}
#coStep2 .pay-app-link{
  display:block;width:100%;margin:4px 0 16px;text-align:center;
  font-size:.92rem;font-weight:600;color:var(--maroon);text-decoration:underline;
}
#coStep2 .pay-divider{
  width:100%;height:1px;margin:0 0 16px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
#coStep2 .pay-utr-box{
  display:block;width:100%;margin:0 0 14px;text-align:center;box-sizing:border-box;
}
#coStep2 .pay-utr-label{
  display:block;width:100%;margin:0 0 10px;text-align:center;
  font-size:1rem;font-weight:700;color:var(--ink);line-height:1.35;
}
#coStep2 .pay-utr-input{
  display:block;width:100%;max-width:100%;box-sizing:border-box;
  margin:0 auto;padding:16px 14px;
  border:2px solid var(--maroon);border-radius:12px;
  font-family:var(--f),system-ui,sans-serif;font-size:1.2rem;font-weight:700;
  letter-spacing:.08em;text-align:center;color:var(--ink);background:#FFFCFA;
}
#coStep2 .pay-utr-input:focus{
  outline:none;border-color:var(--maroon-2);
  box-shadow:0 0 0 4px rgba(190,18,60,.18);
}
#coStep2 .pay-utr-help{
  display:block;width:100%;margin:8px 0 0;text-align:center;
  font-size:.8rem;color:var(--muted);line-height:1.4;
}
#coStep2 .pay-success{
  width:100%;box-sizing:border-box;margin:0 0 12px;padding:12px;
  background:#e8f6ef;color:#12664a;border:1px solid #bfe5d5;border-radius:10px;
  text-align:center;font-weight:600;font-size:.92rem;
}
#coStep2 .pay-confirm{margin-top:4px}
#coStep2 .co-back-link{
  display:block;width:100%;margin-top:14px;padding:0;border:0;background:none;
  text-align:center;font-size:.9rem;color:var(--muted);cursor:pointer;text-decoration:underline;
}
#coStep2 .pay-ref{width:100%;margin:12px 0 0;text-align:center;font-size:.72rem;color:var(--muted);word-break:break-all}

.verify-spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite;margin-right:8px;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}