/* ============ Wedyay — styles ============ */
/* ============ self-hosted faces ============
   Downloaded from Google Fonts (latin subset, variable) so the first paint never
   waits on a third-party stylesheet: fonts.googleapis.com used to sit on the
   critical path for ~836ms. The files are Google's variable fonts, so one file covers the whole axis.
   Refresh with: see fonts/README.md */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-garamond.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-garamond-italic.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/jost.woff2) format('woff2')}
@font-face{font-family:'Yeseva One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/yeseva-one.woff2) format('woff2')}
:root{
  --cream:#FDFBF6;
  --paper:#FFFFFF;
  --blush:#F1DCD3;
  --blush-deep:#DCB9AC;
  --sage:#9DAF8E;
  --sage-deep:#5C6C4C;
  --espresso:#26211A;
  --espresso-deep:#15110D;
  /* CTA gradient: deep wine red → red → dusty rose */
  --red-deep:#6E1A33;
  --red:#9C2447;
  --rose:#C4587C;
  --cta-grad:linear-gradient(135deg,var(--red-deep) 0%,var(--red) 54%,var(--rose) 100%);
  --maroon-deep:#5E2233;
  --gold:#A98338;
  --gold-soft:#E4CD9C;
  --ink:#221E17;
  --ink-soft:#544C3E;
  --maroon:#7E2F44;
  --radius:22px;
  --shadow-sm:0 1px 2px rgba(62,57,49,.04), 0 10px 28px rgba(62,57,49,.06);
  --shadow:0 2px 6px rgba(62,57,49,.04), 0 22px 55px rgba(62,57,49,.09);
  --shadow-lg:0 4px 10px rgba(62,57,49,.05), 0 34px 80px rgba(62,57,49,.13);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Jost',system-ui,sans-serif;
  font-weight:400;
  font-size:17px;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  line-height:1.65;
}
::selection{background:var(--gold-soft);color:var(--ink)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

h1,h2,h3,.display{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;line-height:1.08;color:var(--ink);text-wrap:balance}
h1,.display{font-size:clamp(50px,10vw,96px);letter-spacing:-.02em;line-height:1.03}
h2{font-size:clamp(40px,7vw,68px);letter-spacing:-.01em}
h3{font-size:clamp(26px,5vw,34px);font-weight:600}
em.script,.script-inline{
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;
  color:var(--maroon);font-size:1.02em;letter-spacing:.005em;line-height:1.1;
}
.kicker{
  font-size:13px;letter-spacing:.4em;text-transform:uppercase;font-weight:500;
  color:var(--maroon);margin-bottom:18px;
}
/* The hero's <h1> is the kicker line — the sentence that names what this is —
   and the display line under it is a <p> that keeps the headline treatment.
   Reset the element defaults an h1 brings so the kicker sets exactly as it did
   when it was a <p>. */
h1.kicker{font-family:'Jost',system-ui,sans-serif;line-height:1.65;text-wrap:wrap}
/* The hero headline carries the whole first impression, so it breaks from the
   shared Cormorant h1 scale and runs in Yeseva One — a high-contrast display
   serif that reads bold at 400. It only ships one weight and no italic, so the
   second line drops to font-style:normal rather than take a faux oblique, and
   the maroon alone carries the contrast between the two lines. Yeseva sets
   tighter and taller than Cormorant, hence the smaller cap and looser tracking. */
#hero .display,#hero .display em.script{
  font-family:'Yeseva One',Georgia,serif;font-weight:400;font-style:normal;
}
/* Sized so "of your shaadi." — the longer of the two lines — still sets on one
   line inside the 680px copy column at every width, including the 900px mark
   where the column shrinks to share the row with the phone. */
#hero .display{font-size:clamp(42px,7.6vw,92px);letter-spacing:-.012em;line-height:1.04}
#hero .display em.script{font-size:1em;letter-spacing:-.012em}
/* The word-rise masks are sized by the line box, so leading this tight would
   shear the ascenders and descenders off. Pad the mask past the glyphs and
   pull the box back with matching negative margins. */
.anime #hero .display .wm{
  padding-top:.22em;margin-top:-.22em;
  padding-bottom:.3em;margin-bottom:-.3em;
}
.container{max-width:1140px;margin:0 auto;padding:0 24px}
.container.narrow{max-width:780px}
.center{text-align:center}
.micro{font-size:14px;color:var(--ink-soft);letter-spacing:.04em}
.micro-dot{color:var(--gold);margin:0 4px}
section{position:relative;padding:clamp(70px,9vw,100px) 0}

/* centered, editorial section headers */
#problem>.kicker,#problem>h2,
#how>.container:first-child,
#alive>.container:first-child,
#love .container>.kicker,#love .container>h2,
#pricing .container>.kicker,#pricing .container>h2,
#faq .kicker,#faq .container>h2{text-align:center}
#problem>h2{margin-inline:auto}
.desk-only{display:none}
@media(min-width:820px){.desk-only{display:inline}}

/* grain */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.25;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Jost',sans-serif;font-weight:500;font-size:15.5px;letter-spacing:.07em;
  padding:16px 32px;border-radius:99px;border:1px solid transparent;
  /* border-box origin so the gradient reaches the very edge — with the default
     padding-box origin, the 1px transparent border left a pale ring */
  background-origin:border-box;
  transition:box-shadow .3s cubic-bezier(.2,.7,.2,1), transform .22s cubic-bezier(.2,.7,.2,1), border-color .3s ease, background-color .3s ease;
  cursor:pointer;
}
/* Primary CTAs: deep wine red warming into rose. Hover simply grows a little
   and the glow deepens — no sheen, no cursor-following movement. */
.btn-primary,.btn-small,#mobileMenu a.btn{
  color:#FFF7F4;
  background:var(--cta-grad);
  /* after the shorthand — it resets origin to padding-box, which would leave
     the 1px transparent border unpainted (a pale ring around the pill) */
  background-origin:border-box;
  box-shadow:0 4px 12px rgba(110,26,51,.20), 0 14px 32px rgba(110,26,51,.24);
}
.btn:hover{transform:scale(1.03)}
.btn:active{transform:scale(.99)}
.btn-primary:hover,.btn-small:hover,#mobileMenu a.btn:hover{
  box-shadow:0 6px 16px rgba(110,26,51,.26), 0 22px 46px rgba(110,26,51,.32);
}
.btn-ghost{border-color:rgba(38,33,26,.3);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--maroon);background:rgba(158,36,71,.07);color:var(--maroon)}
.btn-small{padding:11px 22px;font-size:14px}
@media(prefers-reduced-motion:reduce){
  .btn:hover,.btn:active{transform:none}
}
.btn-wide{width:100%;margin-top:26px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.cta-row.center{justify-content:center}

/* ============ nav ============ */
#nav{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:50;
  width:min(1080px,calc(100% - 24px));
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 10px 9px 22px;border-radius:99px;
  background:rgba(255,253,248,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(194,161,95,.22);
  box-shadow:0 8px 30px rgba(62,57,49,.06);
  transition:background .4s ease,border-color .4s ease,box-shadow .4s ease;
}
#nav.scrolled{
  background:rgba(255,253,248,.88);
  border-color:rgba(194,161,95,.42);
  box-shadow:0 14px 40px rgba(62,57,49,.12);
}
.nav-links a{position:relative}
.nav-links a.active{color:var(--maroon)}
.nav-links a.active::after{
  content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--gold);
}
.wordmark{
  font-family:'Cormorant Garamond',serif;font-weight:500;font-size:29px;letter-spacing:.02em;color:var(--ink);
}
.wordmark-dot{color:var(--gold)}
.nav-links{display:none;gap:32px}
.nav-links a{font-size:14.5px;font-weight:400;letter-spacing:.08em;color:var(--ink-soft);transition:color .3s}
.nav-links a:hover{color:var(--maroon)}
.nav-right{display:flex;align-items:center;gap:14px}
#burger{
  width:40px;height:40px;border:none;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
#burger span{width:22px;height:1.6px;background:var(--ink);transition:transform .35s ease}
#burger.open span:nth-child(1){transform:translateY(4px) rotate(45deg)}
#burger.open span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
@media(min-width:900px){
  .nav-links{display:flex}
  #burger{display:none}
}
#mobileMenu{
  position:fixed;inset:0;z-index:49;background:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;
}
#mobileMenu.open{opacity:1;visibility:visible}
#mobileMenu a{font-family:'Cormorant Garamond',serif;font-size:30px;color:var(--ink)}
#mobileMenu a.btn{font-family:'Jost',sans-serif;font-size:15px;background:var(--cta-grad);color:#FFF7F4}

/* ============ hero ============ */
#hero{
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:48px;text-align:center;
  padding:120px 22px 60px;
}
.hero-wash{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(55% 45% at 18% 12%, rgba(241,220,211,.9), transparent 65%),
    radial-gradient(45% 40% at 85% 20%, rgba(228,205,156,.5), transparent 60%),
    radial-gradient(50% 45% at 80% 90%, rgba(157,175,142,.35), transparent 60%),
    radial-gradient(40% 35% at 10% 85%, rgba(126,47,68,.10), transparent 60%);
}
.hero-copy{max-width:680px}
.lede{font-size:clamp(17.5px,2.5vw,21px);font-weight:300;line-height:1.7;color:var(--ink-soft);margin-top:26px;max-width:560px;margin-left:auto;margin-right:auto}
#hero .micro{margin-top:22px}

/* phone mockup */
.hero-phone{display:flex;flex-direction:column;align-items:center;gap:14px}
.phone{
  width:min(270px,68vw);aspect-ratio:9/18.6;
  border-radius:42px;padding:10px;
  background:linear-gradient(160deg,#3d3831,#241f1a);
  box-shadow:0 30px 80px rgba(62,57,49,.35), inset 0 0 0 1.5px rgba(255,255,255,.14);
  position:relative;
  transform:rotate(0.001deg);
}
.phone-notch{
  position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:86px;height:22px;border-radius:12px;background:#241f1a;z-index:4;
}
.phone-screen{
  position:relative;width:100%;height:100%;border-radius:33px;overflow:hidden;background:var(--blush);
}
.phone-screen>img{width:100%;height:100%;object-fit:cover}
.phone-veil{position:absolute;inset:0;cursor:pointer;z-index:3}
.pv-half{
  position:absolute;left:0;width:100%;height:50.4%;
  background:linear-gradient(180deg,#f7e9e0,#efd9cd);
  transition:transform 1.3s cubic-bezier(.7,0,.25,1);
}
.pv-top{top:0;border-bottom:1px solid rgba(194,161,95,.5)}
.pv-bot{bottom:0}
.phone-veil.open .pv-top{transform:translateY(-101%)}
.phone-veil.open .pv-bot{transform:translateY(101%)}
.pv-center{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  transition:opacity .6s ease;
}
.phone-veil.open .pv-center{opacity:0}
.pv-kicker{font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:var(--sage-deep)}
.pv-names{
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;
  font-size:27px;letter-spacing:.02em;color:var(--maroon);
}
.pv-tap{
  margin-top:14px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
.phone-caption{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:17px;color:var(--ink-soft)}

@media(min-width:900px){
  #hero{flex-direction:row;text-align:left;gap:70px;padding-top:100px}
  .hero-copy{flex:1}
  #hero .lede{margin-left:0}
  #hero .cta-row{justify-content:flex-start}
}

/* ============ marquee ============ */
/* The track repeats one 6-card set four times and shifts by exactly one set
   width, so the loop is seamless at any viewport width (a -50% shift went
   blank on wide screens, where a single set is narrower than the screen).
   Vertical padding gives the hover scale/rotate room inside overflow:hidden. */
#marquee{
  --mq-card:150px; --mq-gap:18px; --mq-set:6;
  padding:30px 0 40px;overflow:hidden;
}
.marquee-track{
  display:flex;gap:var(--mq-gap);width:max-content;
  animation:scrollx 42s linear infinite;
}
.marquee-track img{
  width:var(--mq-card);aspect-ratio:480/848;object-fit:cover;border-radius:14px;
  box-shadow:0 10px 26px rgba(62,57,49,.14);
}
@keyframes scrollx{
  from{transform:translateX(0)}
  to{transform:translateX(calc((var(--mq-card) + var(--mq-gap)) * var(--mq-set) * -1))}
}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ============ problem ============ */
#problem h2{max-width:880px}
.problem-grid{display:grid;gap:24px;margin-top:44px}
.p-card{
  background:var(--paper);border:1px solid rgba(194,161,95,.24);border-radius:var(--radius);
  padding:40px 34px;box-shadow:var(--shadow-sm);
}
.p-emo{font-size:30px;display:block;margin-bottom:18px}
.p-card h3{font-size:24px;font-weight:500;margin-bottom:10px}
.p-card p{font-size:16px;line-height:1.7;color:var(--ink-soft)}
@media(min-width:820px){.problem-grid{grid-template-columns:repeat(3,1fr)}}

/* ============ how ============ */
#how{background:linear-gradient(180deg,var(--cream),#F8F1E4 60%,var(--cream))}
.section-lede{font-size:clamp(17px,2.2vw,19px);line-height:1.7;color:var(--ink-soft);max-width:560px;margin-top:16px;margin-inline:auto}
.steps{display:flex;flex-direction:column;gap:10px;margin-top:48px}
.step{flex:1;padding:6px 0}
.step-num{
  font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:500;letter-spacing:.32em;color:var(--gold);
  display:block;margin-bottom:12px;
}
.step h3{margin-bottom:10px}
.step p{font-size:16.5px;line-height:1.7;color:var(--ink-soft);max-width:420px}
.step-line{
  width:1px;height:34px;margin-left:6px;
  background:linear-gradient(180deg,var(--gold),transparent);
}
@media(min-width:900px){
  .steps{flex-direction:row;gap:40px}
  .step-line{width:60px;height:1px;margin-top:60px;background:linear-gradient(90deg,var(--gold),transparent)}
}

/* ============ film ============ */
#film .film-grid{display:flex;flex-direction:column-reverse;align-items:center;gap:44px;text-align:center}
.film-copy{max-width:560px}
.film-phone{display:flex;flex-direction:column;align-items:center;gap:14px}
.phone-screen>video{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){
  #film .film-grid{flex-direction:row;text-align:left;gap:80px}
  .film-copy{flex:1}
  #film .section-lede{margin-inline:0}
  #film .cta-row{justify-content:flex-start}
}
.promise{
  text-align:center;margin-top:56px;
  font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(28px,5.2vw,44px);
}
.promise-script{font-size:1.12em;margin-right:10px}

/* ============ alive panels ============ */
#alive{padding-bottom:60px}
.panel{
  display:grid;gap:38px;align-items:center;
  margin-top:60px;
}
.panel-img{position:relative;display:flex;justify-content:center}

/* ---- living cards ----
   Each panel holds a real moment from the Arjun & Meera invite, rebuilt in the
   DOM over that invite's own art: the veil parting, an RSVP going in, the page
   a year later. Everything inside a card is sized in em against .live-screen's
   font-size, which is derived from the card width, so one number scales the
   whole composition from a 240px phone card to the 318px desktop one.

   The default state of every card is its FINISHED state. script.js adds .armed
   to wind a card back to its first frame and then plays it forward with the
   .is-* classes below. With JS off, or under prefers-reduced-motion, no card is
   ever armed, so all three read as finished screenshots. */
.live{--lw:min(340px,78vw);width:var(--lw);display:flex;flex-direction:column;align-items:center;gap:15px}
.live-screen{
  position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;
  border-radius:28px;background:var(--blush);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(194,161,95,.34);
  font-size:calc(var(--lw) / 34);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;
}
.live-art{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;will-change:transform}
.live-ui{position:absolute;inset:0;z-index:2;font-family:'Jost',system-ui,sans-serif;color:var(--ink)}
.live-cap{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;
  font-size:16.5px;color:var(--ink-soft);text-align:center;
}
.anime .live-screen{cursor:pointer}
.anime .live-screen:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg), 0 0 0 1px rgba(194,161,95,.6)}

/* shared furniture: the language pill and the small caps kicker, both lifted
   from the invite itself */
.lv-lang{
  position:absolute;left:1.5em;top:1.4em;z-index:6;
  font-size:.95em;line-height:1;color:var(--maroon);
  background:rgba(253,251,246,.94);border:1px solid rgba(194,161,95,.5);
  border-radius:99px;padding:.62em 1.05em;box-shadow:0 2px 8px rgba(62,57,49,.14);
}
.lv-kick{font-size:.92em;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-soft);line-height:1.4}
.lv-kick-wine{color:var(--maroon)}

/* ---- panel 1: it opens like a gift ---- */
.live-open .lv-invite{
  position:absolute;left:7%;right:7%;top:11%;
  display:flex;flex-direction:column;align-items:center;gap:.85em;text-align:center;
}
.lv-names{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:3.2em;line-height:1.06;letter-spacing:-.005em;color:var(--ink);
}
.lv-names em{font-style:italic;color:var(--gold)}
/* script.js wraps each letter in .ch; the per-letter delay lives here so the
   calligraphy writes itself on with no JS timeline */
.lv-names .ch{display:inline-block;transition:opacity .5s ease,transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 42ms)}
.lv-rule{width:3.4em;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.lv-line{font-size:1em;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);line-height:1.5}
.lv-city{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.4em;
  letter-spacing:.01em;text-transform:none;color:var(--ink-soft);
}
.lv-tag{font-size:.95em;letter-spacing:.2em;color:var(--maroon)}
.lv-invite .lv-kick,.lv-rule,.lv-line,.lv-tag{transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}

/* the veil, and the wax seal that sits on it */
.live-veil{position:absolute;inset:0;z-index:4;pointer-events:none}
.lvl{
  position:absolute;left:0;width:100%;height:50.4%;
  background:linear-gradient(180deg,#F8EEE4,#EFDCCD);
  transition:transform 1.25s cubic-bezier(.7,0,.25,1);
}
.lvl-top{top:0;transform:translateY(-101%);box-shadow:0 1px 0 rgba(194,161,95,.5)}
.lvl-bot{bottom:0;transform:translateY(101%);background:linear-gradient(180deg,#F4E6D9,#EFDDCE);box-shadow:inset 0 3px 7px rgba(120,86,30,.07)}
.lv-seal{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2em;
  opacity:0;transform:scale(1.22);transition:opacity .6s ease,transform .8s cubic-bezier(.4,0,.2,1);
}
.lv-crest{
  /* flex, not grid: a grid container would make the "&" its own row and stack the
     monogram into three lines */
  width:5.2em;height:5.2em;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:1.55em;letter-spacing:.04em;color:#6A3A1E;white-space:nowrap;
  background:radial-gradient(circle at 34% 28%,#F8EBCD,#E2C78D 62%,#C6A059);
  box-shadow:0 7px 18px rgba(120,86,30,.34), inset 0 0 0 1px rgba(255,255,255,.55);
}
.lv-crest em{font-style:italic;color:#8A5B1C}
.lv-tap{font-size:.92em;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);animation:pulse 2.2s ease-in-out infinite}

/* the music dock, straight off the invite */
.lv-dock{
  position:absolute;left:1.5em;bottom:1.6em;z-index:5;
  display:flex;align-items:center;gap:.7em;
  padding:.5em 1.05em .5em .5em;border-radius:99px;
  background:rgba(253,251,246,.9);border:1px solid rgba(194,161,95,.45);
  box-shadow:0 4px 14px rgba(62,57,49,.16);
  font-size:.92em;color:var(--ink-soft);line-height:1;
  transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);
}
.lv-dock b{color:var(--gold);font-weight:400}
.lv-disc{
  width:1.8em;height:1.8em;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#FDFBF6 17%,#7E2F44 18%,#5E2233 62%,#33121D);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  animation:spin 4s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* wound back to the sealed first frame. Every armed rule kills its transition:
   winding back has to be instant, or the veil would animate shut under the
   sequence that is already playing it open. */
.live-open.armed .lvl-top,.live-open.armed .lvl-bot{transform:none;transition:none}
.live-open.armed .lv-seal{opacity:1;transform:none;transition:none}
.live-open.armed .lv-names .ch,
.live-open.armed .lv-invite .lv-kick,
.live-open.armed .lv-rule,
.live-open.armed .lv-line,
.live-open.armed .lv-tag{opacity:0;transform:translateY(.5em);transition:none}
.live-open.armed .lv-dock{opacity:0;transform:translateY(1em);transition:none}
/* ...and played forward */
.live-open.armed.is-open .lvl-top{transform:translateY(-101%);transition:transform 1.25s cubic-bezier(.7,0,.25,1)}
.live-open.armed.is-open .lvl-bot{transform:translateY(101%);transition:transform 1.25s cubic-bezier(.7,0,.25,1)}
.live-open.armed.is-open .lv-seal{opacity:0;transform:scale(1.22);transition:opacity .6s ease,transform .8s cubic-bezier(.4,0,.2,1)}
.live-open.armed.is-named .lv-names .ch,
.live-open.armed.is-named .lv-invite .lv-kick,
.live-open.armed.is-named .lv-rule,
.live-open.armed.is-named .lv-line,
.live-open.armed.is-named .lv-tag{
  opacity:1;transform:none;
  transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1);
}
.live-open.armed.is-named .lv-names .ch{transition-delay:calc(var(--i) * 42ms)}
.live-open.armed.is-named .lv-invite .lv-kick{transition-delay:.05s}
.live-open.armed.is-named .lv-rule{transition-delay:.5s}
.live-open.armed.is-named .lv-line{transition-delay:.62s}
.live-open.armed.is-named .lv-city{transition-delay:.72s}
.live-open.armed.is-named .lv-tag{transition-delay:.84s}
.live-open.armed.is-dock .lv-dock{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}

/* ---- panel 2: it works like a concierge ---- */
.live-rsvp .live-ui{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4.8em 1.5em 1.4em}
.live-rsvp .lv-kick{margin-bottom:.45em}
.lv-head{
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;
  font-size:2.45em;line-height:1.1;color:var(--ink);
}
.lv-sub{font-size:1em;line-height:1.5;color:var(--ink-soft);margin-top:.65em;max-width:19em}
.lv-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em;margin-top:1.15em}
.lv-chip{
  font-size:.95em;line-height:1;padding:.6em 1em;border-radius:99px;
  color:#FFF8F2;background:var(--maroon);border:1px solid var(--maroon);
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .45s cubic-bezier(.3,1.5,.5,1);
}
.lv-chip::after{content:" ✓"}
.lv-send{
  margin-top:1.2em;font-size:.94em;letter-spacing:.2em;text-transform:uppercase;line-height:1;
  color:#FFF8F2;background:var(--cta-grad);padding:1em 1.9em;border-radius:99px;
  box-shadow:0 8px 20px rgba(110,26,51,.26);
  transition:transform .2s ease,box-shadow .2s ease;
}
.lv-toast{
  margin-top:1.1em;font-size:.95em;line-height:1.35;color:#24401B;
  background:rgba(228,244,220,.96);border:1px solid rgba(110,150,95,.45);
  border-radius:1em;padding:.7em 1em;box-shadow:0 4px 12px rgba(62,57,49,.12);
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1);
}
.lv-toast b{color:#3E7A2E}
.lv-ans-head{margin-top:1.1em;color:var(--maroon);font-size:.82em;letter-spacing:.3em}
.lv-ans{list-style:none;display:flex;flex-direction:column;gap:.4em;margin-top:.55em;width:100%}
.lv-ans li{
  font-size:.92em;line-height:1.3;color:var(--ink-soft);text-align:left;
  background:rgba(253,251,246,.84);border:1px solid rgba(194,161,95,.35);
  border-radius:.85em;padding:.58em .85em;
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1);
}
.lv-ans li::before{content:"✦";color:var(--gold);margin-right:.55em}
.lv-now{
  position:absolute;left:1.1em;right:1.1em;bottom:1.1em;z-index:5;
  display:flex;align-items:center;justify-content:center;gap:.65em;
  font-size:.93em;line-height:1;color:#FFF6EB;
  background:linear-gradient(135deg,#3C2A1A,#241F1A);
  border-radius:1em;padding:.85em 1em;box-shadow:0 10px 24px rgba(36,31,26,.32);
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1);
}
.lv-now b{color:var(--gold-soft);font-weight:400}
.lv-dot{width:.6em;height:.6em;border-radius:50%;background:#8BD283;animation:livedot 2s ease-out infinite}
@keyframes livedot{
  0%{box-shadow:0 0 0 0 rgba(139,210,131,.55)}
  70%{box-shadow:0 0 0 .75em rgba(139,210,131,0)}
  100%{box-shadow:0 0 0 0 rgba(139,210,131,0)}
}
/* the guest's thumb: JS sets --x/--y in pixels, the transition does the travel */
.lv-finger{
  position:absolute;left:0;top:0;z-index:7;width:2.3em;height:2.3em;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,rgba(255,255,255,.9),rgba(126,47,68,.4));
  border:1px solid rgba(126,47,68,.45);box-shadow:0 3px 10px rgba(62,57,49,.25);
  opacity:0;pointer-events:none;
  transform:translate(calc(var(--x,50%) - 50%),calc(var(--y,50%) - 50%)) scale(var(--s,.55));
  transition:opacity .35s ease,transform .55s cubic-bezier(.4,.05,.2,1);
}
.live-rsvp.is-tapping .lv-finger{opacity:1}

/* wound back: nothing ticked, nothing sent */
.live-rsvp.armed .lv-chip{background:rgba(253,251,246,.82);color:var(--maroon);border-color:rgba(126,47,68,.35);transition:none}
.live-rsvp.armed .lv-chip::after{content:""}
.live-rsvp.armed .lv-chip.on{
  background:var(--maroon);color:#FFF8F2;border-color:var(--maroon);transform:scale(1.07);
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .45s cubic-bezier(.3,1.5,.5,1);
}
.live-rsvp.armed .lv-chip.on::after{content:" ✓"}
.lv-ans-head{transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.live-rsvp.armed .lv-toast,
.live-rsvp.armed .lv-ans-head,
.live-rsvp.armed .lv-ans li,
.live-rsvp.armed .lv-now{opacity:0;transform:translateY(.9em);transition:none}
.live-rsvp.armed.is-press .lv-send{transform:scale(.93);box-shadow:0 3px 9px rgba(110,26,51,.3)}
.live-rsvp.armed.is-toast .lv-toast{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.live-rsvp.armed.is-ans .lv-ans-head,
.live-rsvp.armed.is-ans .lv-ans li{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.live-rsvp.armed.is-ans .lv-ans li:nth-child(2){transition-delay:.13s}
.live-rsvp.armed.is-ans .lv-ans li:nth-child(3){transition-delay:.26s}
.live-rsvp.armed.is-now .lv-now{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}

/* ---- panel 3: it stays like a keepsake ---- */
.live-keep .live-ui{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4.8em 1.5em 1.7em;color:#F7EFE3}
.live-keep .lv-lang{background:rgba(31,27,42,.66);border-color:rgba(228,205,156,.5);color:#F5E7CA}
.live-keep .lv-kick{color:#E4CD9C}
.live-keep .lv-head{
  font-style:italic;font-weight:500;font-size:1.85em;line-height:1.26;margin-top:.5em;
  /* held to two balanced lines: one long line would run into the card's edges */
  max-width:13.5em;color:#FCF4E7;text-shadow:0 2px 14px rgba(18,14,28,.55);text-wrap:balance;
}
.lv-gal{
  position:relative;width:76%;aspect-ratio:4/5;margin-top:1.4em;border-radius:1.1em;overflow:hidden;
  box-shadow:0 18px 38px rgba(14,10,26,.5), 0 0 0 1px rgba(228,205,156,.4);
}
.lv-shot{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.07);
  transition:opacity .8s ease,transform 7s linear;
}
.lv-shot.on{opacity:1;transform:scale(1)}
/* the caption rides inside the frame, where a scrim can carry it over any photo */
.lv-galcap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.6em .8em .7em;
  font-size:.92em;letter-spacing:.18em;text-transform:uppercase;color:#FDF6E8;line-height:1.4;
  background:linear-gradient(180deg,rgba(16,12,26,0),rgba(16,12,26,.72));
}
.lv-stamp{
  margin-top:auto;font-size:.88em;letter-spacing:.16em;text-transform:uppercase;line-height:1;
  color:#F5E7CA;border:1px solid rgba(228,205,156,.5);border-radius:99px;
  padding:.6em 1.1em;background:rgba(31,27,42,.45);
}
/* Devanagari does not take the small-caps tracking: it separates the conjuncts */
.live-keep.hi .lv-kick,.live-keep.hi .lv-galcap,.live-keep.hi .lv-stamp{letter-spacing:.02em}
.live-keep.hi .lv-head{font-size:1.72em;line-height:1.4}
/* the language flip: JS swaps the words, CSS blinks them over */
.live-keep .lv-lang,.live-keep .lv-kick,.live-keep .lv-head,.lv-galcap,.lv-stamp{transition:opacity .38s ease}
.live-keep.is-flip .lv-lang,.live-keep.is-flip .lv-kick,.live-keep.is-flip .lv-head,
.live-keep.is-flip .lv-galcap,.live-keep.is-flip .lv-stamp{opacity:.08}
.live-keep.armed .lv-kick,.live-keep.armed .lv-head,
.live-keep.armed .lv-gal,.live-keep.armed .lv-stamp{
  opacity:0;transform:translateY(.8em);transition:none;
}
.live-keep.armed.is-in .lv-kick,.live-keep.armed.is-in .lv-head,
.live-keep.armed.is-in .lv-gal,.live-keep.armed.is-in .lv-stamp{
  opacity:1;transform:none;transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1);
}
.live-keep.armed.is-in .lv-gal{transition-delay:.14s}
.live-keep.armed.is-in .lv-stamp{transition-delay:.3s}
.panel-txt h3{margin-bottom:16px}
.panel-txt p{font-size:17px;line-height:1.75;color:var(--ink-soft);margin-bottom:14px;max-width:500px}
@media(min-width:900px){
  .panel{grid-template-columns:1fr 1fr;gap:84px}
  .panel-flip .panel-img{order:2}
  .panel-flip .panel-txt{order:1}
}
.feature-chips{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:56px;justify-content:center;
}
.feature-chips span{
  font-size:14px;font-weight:400;letter-spacing:.05em;color:var(--maroon);
  padding:11px 22px;border-radius:99px;
  background:rgba(126,47,68,.05);border:1px solid rgba(126,47,68,.16);
}

/* ============ testimonials ============ */
/* align-items:start so each card hugs its own messages — some guests send one
   line, some send three, and stretching them to equal height left dead space */
.chats{display:grid;gap:24px;margin-top:44px;align-items:start}
.chat{
  background:#F5EFE4;
  border-radius:var(--radius);padding:28px 26px;
  background-image:radial-gradient(rgba(194,161,95,.08) 1px, transparent 1px);
  background-size:16px 16px;
  border:1px solid rgba(194,161,95,.2);
  box-shadow:var(--shadow-sm);
}
.chat-name{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
.bubble{
  background:#E4F4DC;
  border-radius:16px 16px 16px 4px;
  padding:13px 17px;font-size:15.5px;line-height:1.55;color:#1F3019;
  max-width:92%;margin-bottom:10px;
  box-shadow:0 1px 2px rgba(62,57,49,.1);
}
@media(min-width:820px){.chats{grid-template-columns:repeat(3,1fr)}}

/* ============ pricing ============ */
.price-card{
  max-width:560px;margin:40px auto 0;
  background:var(--paper);border-radius:30px;padding:54px 46px;
  border:1px solid rgba(194,161,95,.35);
  box-shadow:var(--shadow-lg);
  position:relative;overflow:hidden;
}
.price-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--blush-deep),var(--gold),var(--sage),var(--maroon));
}
.price-label{font-size:13.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);text-align:center}
.price{
  font-family:'Cormorant Garamond',serif;font-size:clamp(76px,12vw,96px);font-weight:500;text-align:center;line-height:1.1;
  color:var(--ink);margin-top:10px;
}
.price sup{font-size:.38em;color:var(--gold);margin-right:2px;font-weight:500}
.price-note{text-align:center;font-size:14px;color:var(--ink-soft);margin-bottom:30px}
.price-list{list-style:none}
.price-list li{
  padding:11px 0 11px 32px;font-size:15.5px;line-height:1.6;color:var(--ink-soft);
  border-bottom:1px dashed rgba(194,161,95,.28);
  position:relative;
}
.price-list li:last-child{border-bottom:none}
.price-list li::before{
  content:"✦";position:absolute;left:4px;color:var(--gold);font-size:12px;
}
#pricing .micro{margin-top:14px;display:block}

/* ---- pricing bands ----
   Two bands instead of five cramped columns: the free/announcement rungs read
   as a lighter warm-up, then three equal invitation tiers. Cards keep identical
   widths (no scale on the featured card), the head block is a fixed height so
   every feature list starts on the same line, and CTAs are pinned to the bottom
   at one height with non-wrapping labels. */
.band-label{
  font-family:'Jost',sans-serif;font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);text-align:center;margin:46px 0 18px;
}
.band-label span{color:var(--ink-soft);font-weight:300;letter-spacing:.16em}

/* warm-up band (Free + Hype Pack) */
.warmups{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:760px){.warmups{grid-template-columns:repeat(2,1fr)}}
.warmup{
  background:rgba(255,255,255,.55);border:1px dashed rgba(194,161,95,.55);
  border-radius:22px;padding:26px 28px;
  display:flex;flex-direction:column;gap:12px;
}
.warmup-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.warmup-name{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:500;color:var(--ink)}
.warmup-price{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:500;color:var(--ink);line-height:1}
.warmup-price sup{font-size:.42em;color:var(--gold);margin-right:2px}
.warmup-free{
  display:inline-block;font-family:'Jost',sans-serif;font-size:10.5px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--maroon);
  border:1px solid rgba(142,66,87,.4);border-radius:99px;padding:3px 10px;margin-left:6px;vertical-align:4px;
}
.warmup-desc{font-size:14.5px;line-height:1.6;color:var(--ink-soft);flex:1}
.warmup-cta{align-self:flex-start;margin-top:4px;white-space:nowrap}

/* invitation tiers */
.tiers{display:grid;grid-template-columns:1fr;gap:20px;align-items:stretch}
@media(min-width:980px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{
  background:var(--paper);border-radius:24px;padding:34px 28px 30px;
  border:1px solid rgba(194,161,95,.3);
  box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;position:relative;
}
.tier-head{min-height:132px;display:flex;flex-direction:column;justify-content:flex-start}
.tier-name{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:500;color:var(--ink);text-align:center}
.tier-price{
  font-family:'Cormorant Garamond',serif;font-size:50px;font-weight:500;text-align:center;line-height:1.15;
  color:var(--ink);margin-top:6px;font-variant-numeric:tabular-nums;
}
.tier-price sup{font-size:.42em;color:var(--gold);margin-right:2px}
.tier-note{text-align:center;font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin-top:2px}
.tier-note b{color:var(--maroon);font-weight:500}
/* 11.5px tripped Lighthouse's legible-text check */
.tier-inherits{
  font-family:'Jost',sans-serif;font-size:12.5px;font-weight:400;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);text-align:center;line-height:1.45;
  padding:14px 0 4px;margin-top:6px;border-top:1px solid rgba(194,161,95,.3);
  /* reserve two lines so every feature list starts on the same line, however
     long the inherited-tier name is */
  min-height:52px;
}
.tier .price-list{flex:1;margin-bottom:8px}
.tier .price-list li{font-size:14.5px;padding:10px 0 10px 28px}
.tier .btn-wide{white-space:nowrap;min-height:54px;margin-top:20px}
.tier.featured{
  border:1.5px solid rgba(142,66,87,.55);
  box-shadow:0 26px 70px rgba(105,62,60,.22);
}
.tier-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--maroon);color:#fbeee7;font-size:12px;letter-spacing:.17em;text-indent:.17em;text-transform:uppercase;
  border-radius:99px;padding:5px 16px;white-space:nowrap;
}

/* ---- posters funnel ---- */
#posters .posters-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media(min-width:880px){#posters .posters-grid{grid-template-columns:1.1fr .9fr}}
.posters-lede{font-size:16.5px;line-height:1.65;color:var(--ink-soft);margin:16px 0 18px;max-width:480px}
.posters-list{list-style:none;margin-bottom:22px}
.posters-list li{
  padding:8px 0 8px 30px;font-size:15px;color:var(--ink-soft);position:relative;
}
.posters-list li::before{content:"🏵️";position:absolute;left:0;font-size:14px}
#posters .micro a{color:var(--maroon);text-decoration:underline;text-underline-offset:3px}
.posters-fan{position:relative;height:500px}
.posters-fan img{
  position:absolute;width:230px;border-radius:16px;
  border:1px solid rgba(194,161,95,.4);
  box-shadow:0 24px 60px rgba(105,62,60,.3);
}
.posters-fan img:first-child{left:8%;top:16px;transform:rotate(-5deg);z-index:1}
.posters-fan img:last-child{right:8%;top:56px;transform:rotate(4.5deg);z-index:2}
@media(max-width:879px){.posters-fan{height:380px}.posters-fan img{width:190px}}

/* ============ faq ============ */
.faqs{margin-top:40px}
details{
  background:var(--paper);border:1px solid rgba(194,161,95,.22);border-radius:16px;
  margin-bottom:14px;overflow:hidden;
  transition:box-shadow .3s ease,border-color .3s ease;
}
details[open]{box-shadow:var(--shadow);border-color:rgba(194,161,95,.4)}
summary{
  cursor:pointer;list-style:none;
  font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:600;
  padding:21px 56px 21px 26px;position:relative;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-family:'Jost',sans-serif;font-weight:300;font-size:26px;color:var(--gold);
  transition:transform .3s ease;
}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{padding:0 26px 24px;font-size:16px;line-height:1.7;color:var(--ink-soft);max-width:640px}
/* quick fade in, no movement — the answer must not shift as it appears */
details[open] p{animation:faqFade .2s ease-out both}
@keyframes faqFade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){details[open] p{animation:none}}

/* ============ final cta ============ */
#final{
  background:
    radial-gradient(60% 80% at 50% 110%, rgba(126,47,68,.13), transparent 70%),
    linear-gradient(180deg,var(--cream),#F7ECE4);
  padding:90px 0;
}
.final-script{
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;
  font-size:clamp(36px,7vw,60px);color:var(--maroon);letter-spacing:.01em;
  margin-bottom:10px;
}

/* ============ footer ============ */
footer{background:#2E2A24;color:#CFC6B8;padding:64px 0 34px}
.foot-grid{display:flex;flex-direction:column;gap:36px;justify-content:space-between}
.foot-mark{color:#F3EDE1;font-size:32px}
.foot-tag{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;margin-top:10px;color:#9B937F}
.foot-links{display:flex;flex-direction:column;gap:10px;font-size:15px}
.foot-links a:hover{color:var(--gold-soft)}
.foot-bottom{text-align:center;font-size:13px;color:#A0978A;margin-top:44px;letter-spacing:.06em}
/* #7E7666 on the #2E2A24 footer measured 3.2:1; #A0978A is 4.95:1. The legal
   links were also 18px tall, under the 44px minimum for a touch target. */
.foot-bottom a{display:inline-block;padding:11px 6px;color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(160,151,138,.5)}
.foot-bottom a:hover{color:var(--gold-soft);text-decoration-color:currentColor}
@media(min-width:820px){
  .foot-grid{flex-direction:row;align-items:flex-start}
  .foot-links{flex-direction:row;gap:28px}
}

/* ============ craft-inspired enhancements ============ */

/* hero layering: floats & blobs behind copy */
#hero .hero-copy,#hero .hero-phone{position:relative;z-index:2}

/* ---- hero background video (TEST) -------------------------------------
   Remove this block + the .hero-video markup in index.html to fall back
   to the wash + drifting blobs exactly as they were. -------------------- */
#hero{position:relative}
.hero-video{
  position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  display:flex;align-items:center;
  --hv-opacity:.65;
}
.hero-video video{
  width:100%;height:100%;object-fit:cover;
  opacity:var(--hv-opacity);
}
/* Portrait screens: the hero is far taller than the 16:9 clip, so `cover`
   scaled it to the hero's height and cropped away most of its width, leaving
   a narrow centre slice (no maroon veil on the left, no gold zari on the
   right). Below a square viewport the clip is sized by WIDTH instead and sits
   as a centred band, so the whole frame is visible; a soft top/bottom mask
   melts its edges into the cream rather than ending on a hard line. */
@media (max-aspect-ratio: 1/1){
  .hero-video video{
    height:auto;aspect-ratio:16/9;object-fit:contain;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
            mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  }
}
/* cream scrim: keeps ink legible and melts the clip into the page below */
.hero-video::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(253,251,246,.34) 0%,
    rgba(253,251,246,.30) 45%,
    rgba(253,251,246,.72) 82%,
    var(--cream) 100%);
}
/* video replaces the drifting blobs; deleting it brings them straight back */
.hero-video ~ .hero-blobs{display:none}
@media (prefers-reduced-motion: reduce){
  .hero-video{display:none}
  .hero-video ~ .hero-blobs{display:block}
}

/* ambient gradient blobs (slow drift via anime.js) */
.hero-blobs{position:absolute;inset:0;z-index:-1;overflow:hidden;filter:blur(52px);pointer-events:none}
.blob{position:absolute;border-radius:50%;opacity:.5;will-change:transform}
.b1{width:46vw;height:46vw;left:-12%;top:-10%;background:radial-gradient(circle,#F1DCD3,transparent 68%)}
.b2{width:40vw;height:40vw;right:-10%;top:8%;background:radial-gradient(circle,#E4CD9C,transparent 68%)}
.b3{width:44vw;height:44vw;left:28%;bottom:-24%;background:radial-gradient(circle,rgba(157,175,142,.85),transparent 68%)}

/* split-word masks (added by JS) */
.anime .wm{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em;padding-right:.04em;margin-right:-.04em}
.anime .wi{display:inline-block;will-change:transform}
.scrub .wm{overflow:visible;padding:0;margin:0}

/* marigold scroll garland */
#garlandRail{position:fixed;left:20px;top:0;bottom:0;width:2px;z-index:40;pointer-events:none;display:none}
@media(min-width:1000px){#garlandRail{display:block}}
.garland-stem{
  position:absolute;inset:0;transform-origin:top;transform:scaleY(0);border-radius:2px;
  background:linear-gradient(180deg,var(--gold),var(--blush-deep) 55%,var(--sage));
}
.garland-bud{
  position:absolute;left:-5px;top:0;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#F2B84B,#DD8A1E 72%);
  box-shadow:0 0 0 4px rgba(226,155,45,.16);
}

/* marigold confetti burst (phone veil) */
.confetti-pop{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.confetti-pop i{
  position:absolute;left:50%;top:52%;display:block;
  border-radius:52% 48% 55% 0;will-change:transform,opacity;
}

/* card & marquee hovers */
.p-card{transition:box-shadow .45s ease,border-color .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.anime .p-card:hover{transform:translateY(-6px);border-color:rgba(194,161,95,.5);box-shadow:var(--shadow-lg)}
#marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.marquee-track img:nth-child(odd){transform:rotate(1.1deg)}
.marquee-track img:nth-child(even){transform:rotate(-1.1deg)}
.marquee-track img:hover{transform:scale(1.05) rotate(0deg)}

/* feature chips hover */
.feature-chips span{transition:background .35s ease,border-color .35s ease,color .35s ease}
.feature-chips span:hover{background:rgba(126,47,68,.1);border-color:rgba(126,47,68,.35)}

/* step connector origin for draw-in */
.anime .step-line{transform-origin:left top}

/* magnetic buttons follow the cursor smoothly */
.anime .btn-primary{will-change:transform}

/* typing indicator (testimonials) */
.bubble.typing{display:inline-flex;gap:5px;align-items:center;width:auto;padding:14px 16px}
.bubble.typing span{
  width:6px;height:6px;border-radius:50%;background:#6F9068;opacity:.4;
  animation:tblink 1s ease-in-out infinite;
}
.bubble.typing span:nth-child(2){animation-delay:.16s}
.bubble.typing span:nth-child(3){animation-delay:.32s}
@keyframes tblink{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* smooth 3D tilt on the hero phone */
.phone{transition:transform .5s cubic-bezier(.2,.7,.2,1)}

/* ============ reveals ============ */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .rv.on{opacity:1;transform:none}
.js .rv-scale{opacity:0;transform:scale(.94) translateY(16px);transition:opacity 1s ease var(--d,0s),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .rv-scale.on{opacity:1;transform:none}
/* Above the fold the reveal runs on its own, in CSS, so the hero paints on the
   first frame instead of waiting for script.js and anime.js to load and an
   observer to fire. Largest Contentful Paint is measured on that first frame;
   opacity:0 here used to cost ~4.4s of pure render delay. Transform-only, so
   the text is on screen the whole time.
   .display is left out: anime.js owns that line with the masked word-rise, and
   a CSS transform running underneath it would fight the hand-off. */
.js #hero .rv:not(.display),.js #hero .rv-scale{opacity:1;animation:heroRise .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
.js #hero .rv-scale{animation-name:heroScale;animation-duration:1s}
.js #hero .display{opacity:1;transform:none}
@keyframes heroRise{from{transform:translateY(26px)}to{transform:none}}
@keyframes heroScale{from{transform:scale(.94) translateY(16px)}to{transform:none}}
@media(prefers-reduced-motion:reduce){
  .js .rv,.js .rv-scale{opacity:1!important;transform:none!important;transition:none!important}
  .js #hero .rv:not(.display),.js #hero .rv-scale{animation:none!important}
  .pv-tap{animation:none}
  #garlandRail{display:none}
  .bubble.typing span{animation:none}
  .p-card,.marquee-track img,.phone,.btn{transition:none}
  .lv-disc,.lv-dot{animation:none}
  .lv-shot{transition:none}
  .anime .live-screen{cursor:default}
  .anime .live-screen:hover{transform:none}
}