/* ══════════════════════════════════════════════════════════════
   THEME: Classic Elegance (default — no data-theme needed)
   Cinematic dark, floating text, Alex Brush, green accents
   ══════════════════════════════════════════════════════════════ */
:root{
  --ink:#ffffff;
  --muted:#f0f0f0;
  --accent:#7ecb9a;
  --accent2:#a8d8c0;
  --namesFont:"Alex Brush",cursive;
  --btnShadow:0 12px 36px rgba(0,0,0,.30);
}
/* Classic: cards fully transparent, text floats over photos */

/* ══════════════════════════════════════════════════════════════
   THEME: Garden Romance
   Romantic stationery — blush rose glass panels, Great Vibes
   script, Cormorant Garamond body, floral ornaments
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   THEME: Modern Minimalist
   Editorial magazine — bold uppercase Inter, stark dark solid
   panels, left-aligned content, sky-blue geometry
   ══════════════════════════════════════════════════════════════ */
body[data-theme="modern"]{
  --accent:#7dd3fc;
  --accent2:#38bdf8;
  --namesFont:Inter,sans-serif;
  --btnShadow:0 8px 24px rgba(56,189,248,.30);
}
body[data-theme="modern"] .bgOverlay{
  background:linear-gradient(to bottom,
    rgba(0,0,0,.65) 0%,
    rgba(0,0,0,.42) 40%,
    rgba(0,0,0,.75) 100%);
}
/* Hero: massive uppercase, no shadow, left-leaning */
body[data-theme="modern"] .namesScript{
  font-size:clamp(32px,5.2vw,64px);
  font-weight:900;
  letter-spacing:-.03em;
  text-transform:uppercase;
  text-shadow:none;
  line-height:.9;
}
body[data-theme="modern"] .amp{
  font-family:Inter,sans-serif;
  font-weight:200;
  font-size:clamp(14px,2vw,24px);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(125,211,252,.80);
  text-shadow:none;
  margin:12px 0;
}
body[data-theme="modern"] .subline{
  font-family:Inter,sans-serif;
  font-weight:600;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(125,211,252,.75);
  text-shadow:none;
}
/* Countdown pills: flat sharp rectangles */
body[data-theme="modern"] .pill{
  background:rgba(0,0,0,.75);
  border:1px solid rgba(125,211,252,.22);
  border-radius:2px;
  backdrop-filter:blur(8px);
  min-width:90px;
}
/* Content card: solid dark editorial panel — left border accent only */
body[data-theme="modern"] .card:not(.cardHero){
  background:rgba(4,8,16,.82);
  border:none;
  border-left:3px solid rgba(125,211,252,.60);
  border-radius:0;
  backdrop-filter:none;
  max-width:min(580px,90vw);
  padding:8px;
  box-shadow:0 0 0 1px rgba(125,211,252,.08),0 20px 60px rgba(0,0,0,.5);
}
/* Content: left-aligned for editorial feel */
body[data-theme="modern"] .card:not(.cardHero) .content{ text-align:left; }
body[data-theme="modern"] .card:not(.cardHero) .divider{ margin:18px 0; }
/* Section titles: uppercase Inter, sky-blue, with a bar before */
body[data-theme="modern"] .sectionTitle{
  font-family:Inter,sans-serif;
  font-size:clamp(13px,1.8vw,18px);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(125,211,252,.90);
  text-shadow:none;
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(125,211,252,.18);
}
body[data-theme="modern"] .sectionTitle::before{
  content:'';
  display:block;
  width:28px;
  height:2px;
  background:rgba(125,211,252,.85);
  margin-bottom:10px;
}
/* Body: clean Inter, faint blue-white */
body[data-theme="modern"] .body{
  font-family:Inter,sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.80;
  color:rgba(210,232,255,.80);
  text-shadow:none;
}
/* Divider: hard 2px blue bar */
body[data-theme="modern"] .divider{
  height:1px;
  width:100%;
  background:rgba(125,211,252,.20);
  border-radius:0;
  margin:18px 0;
}
/* Nav: sharp rectangle buttons */
body[data-theme="modern"] .nav button{ border-radius:3px; font-weight:700; letter-spacing:.06em; font-size:13px; }

/* ══════════════════════════════════════════════════════════════
   THEME: Golden Hour
   Art deco luxury — Playfair Display italic, amber frosted glass,
   ornate double-frame cards, warm glow everywhere
   ══════════════════════════════════════════════════════════════ */
body[data-theme="golden"]{
  --accent:#d4a853;
  --accent2:#e8c46a;
  --namesFont:"Playfair Display",serif;
  --btnShadow:0 12px 36px rgba(180,110,0,.40);
}
body[data-theme="golden"] .bgOverlay{
  background:linear-gradient(to bottom,
    rgba(35,15,0,.48) 0%,
    rgba(25,10,0,.22) 40%,
    rgba(45,18,0,.62) 100%);
}
/* Hero */
body[data-theme="golden"] .namesScript{
  font-size:clamp(52px,8vw,100px);
  font-style:italic;
  text-shadow:0 6px 28px rgba(180,100,0,.45),0 16px 56px rgba(0,0,0,.55);
}
body[data-theme="golden"] .amp{
  font-family:"Playfair Display",serif;
  font-style:italic;
  font-size:clamp(26px,4.2vw,42px);
  color:rgba(248,210,120,1);
  text-shadow:0 4px 16px rgba(160,90,0,.45);
}
body[data-theme="golden"] .subline{
  font-family:"Playfair Display",serif;
  font-style:italic;
  font-weight:400;
  font-size:16px;
  text-transform:none;
  letter-spacing:.05em;
  color:rgba(240,200,108,.90);
  text-shadow:0 4px 14px rgba(0,0,0,.5);
}
/* Countdown pills: warm dark amber capsules */
body[data-theme="golden"] .pill{
  background:rgba(50,22,0,.58);
  border:1px solid rgba(212,168,83,.30);
  border-radius:999px;
  backdrop-filter:blur(14px);
}
/* Content card: luxury art-deco double frame —
   outer border + inner inset shadow creates layered frame effect */
body[data-theme="golden"] .card:not(.cardHero){
  background:rgba(50,24,0,.22);
  border:1px solid rgba(212,168,83,.30);
  border-radius:4px;
  backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 6px rgba(212,168,83,.10),
             inset 0 0 0 7px rgba(212,168,83,.22),
             0 24px 70px rgba(0,0,0,.45),
             0 0 80px rgba(180,110,0,.08);
  max-width:min(620px,90vw);
  padding:16px;
}
/* Section titles: Playfair italic, gold glow, em-dash ornaments */
body[data-theme="golden"] .sectionTitle{
  font-family:"Playfair Display",serif;
  font-style:italic;
  font-size:clamp(26px,4.2vw,38px);
  color:rgba(255,222,138,.95);
  text-shadow:0 4px 24px rgba(180,110,0,.50),0 0 40px rgba(212,168,83,.15);
  margin-bottom:14px;
  letter-spacing:.01em;
}
body[data-theme="golden"] .sectionTitle::before{ content:"✦ "; font-size:.6em; vertical-align:middle; opacity:.65; }
body[data-theme="golden"] .sectionTitle::after { content:" ✦"; font-size:.6em; vertical-align:middle; opacity:.65; }
/* Body: Playfair, warm ivory */
body[data-theme="golden"] .body{
  font-family:"Playfair Display",serif;
  font-size:17px;
  font-weight:400;
  line-height:1.80;
  color:rgba(255,238,195,1);
  text-shadow:0 3px 14px rgba(0,0,0,.55);
}
/* Divider: gold lines ◆ centre */
body[data-theme="golden"] .divider{
  display:flex;
  align-items:center;
  height:auto;
  width:min(220px,80%);
  background:none;
  gap:10px;
  margin:22px auto;
}
body[data-theme="golden"] .divider::before,
body[data-theme="golden"] .divider::after{ content:''; flex:1; height:1px; background:rgba(212,168,83,.50); }
body[data-theme="golden"] .divider::after{ content:'◆'; flex:none; height:auto; background:none; color:rgba(212,168,83,.80); font-size:8px; line-height:1; }
/* Nav: pill buttons with gold glow */
body[data-theme="golden"] .nav button{ border-radius:999px; }

/* ══════════════════════════════════════════════════════════════
   THEME: Midnight Blue
   Dark gothic romance — Cinzel all-caps, deep navy glass panels,
   Cormorant Garamond body, silver star ornaments, inner glow
   ══════════════════════════════════════════════════════════════ */
body[data-theme="midnight"]{
  --accent:#a8b8d8;
  --accent2:#c8d8e8;
  --namesFont:"Cinzel",serif;
  --btnShadow:0 12px 36px rgba(20,40,130,.50);
}
body[data-theme="midnight"] .bgOverlay{
  background:linear-gradient(to bottom,
    rgba(6,10,40,.65) 0%,
    rgba(4,8,26,.32) 40%,
    rgba(8,14,55,.75) 100%);
}
/* Hero */
body[data-theme="midnight"] .namesScript{
  font-size:clamp(34px,5.2vw,72px);
  letter-spacing:.08em;
  text-shadow:0 6px 28px rgba(20,50,140,.55),0 16px 56px rgba(0,0,0,.65);
}
body[data-theme="midnight"] .amp{
  font-family:"Cinzel",serif;
  font-size:clamp(18px,2.8vw,30px);
  letter-spacing:.28em;
  color:rgba(190,210,235,1);
  text-shadow:0 4px 16px rgba(20,50,140,.45);
  margin:10px 0;
}
body[data-theme="midnight"] .subline{
  font-family:"Cinzel",serif;
  font-weight:400;
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(168,184,216,.80);
  text-shadow:0 4px 14px rgba(0,0,0,.55);
}
/* Countdown pills: deep navy with inner silver glow */
body[data-theme="midnight"] .pill{
  background:rgba(4,8,36,.70);
  border:1px solid rgba(168,184,216,.20);
  border-radius:999px;
  backdrop-filter:blur(14px);
  box-shadow:inset 0 0 12px rgba(100,140,220,.08);
}
/* Content card: deep navy frosted glass with silver glow frame */
body[data-theme="midnight"] .card:not(.cardHero){
  background:rgba(4,8,38,.58);
  border:1px solid rgba(168,184,216,.18);
  border-radius:20px;
  backdrop-filter:blur(20px);
  box-shadow:inset 0 0 40px rgba(20,50,140,.15),
             inset 0 0 0 4px rgba(168,184,216,.06),
             0 24px 70px rgba(0,0,0,.55),
             0 0 80px rgba(20,50,140,.12);
  max-width:min(620px,90vw);
  padding:8px;
}
/* Section titles: Cinzel, silver, tracked, star prefix */
body[data-theme="midnight"] .sectionTitle{
  font-family:"Cinzel",serif;
  font-size:clamp(18px,2.8vw,28px);
  letter-spacing:.14em;
  color:rgba(195,212,235,.95);
  text-shadow:0 4px 24px rgba(20,50,140,.55),0 0 40px rgba(168,184,216,.10);
  margin-bottom:14px;
}
body[data-theme="midnight"] .sectionTitle::before{ content:"✦  "; font-size:.65em; vertical-align:middle; opacity:.60; }
body[data-theme="midnight"] .sectionTitle::after { content:"  ✦"; font-size:.65em; vertical-align:middle; opacity:.60; }
/* Body: Cormorant Garamond, cool silver-white */
body[data-theme="midnight"] .body{
  font-family:"Cormorant Garamond",serif;
  font-size:19px;
  font-weight:400;
  line-height:1.85;
  color:rgba(205,222,242,1);
  text-shadow:0 3px 14px rgba(0,0,0,.60);
}
/* Divider: silver lines ✦ centre */
body[data-theme="midnight"] .divider{
  display:flex;
  align-items:center;
  height:auto;
  width:min(220px,80%);
  background:none;
  gap:10px;
  margin:22px auto;
}
body[data-theme="midnight"] .divider::before,
body[data-theme="midnight"] .divider::after{ content:''; flex:1; height:1px; background:rgba(168,184,216,.40); }
body[data-theme="midnight"] .divider::after{ content:'✦'; flex:none; height:auto; background:none; color:rgba(168,184,216,.72); font-size:11px; line-height:1; }
/* Nav: pill buttons */
body[data-theme="midnight"] .nav button{ border-radius:999px; }

*{box-sizing:border-box;}

html,body{height:100%;}

body{
  margin:0;
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  overflow:hidden;
}

/* ---------------- Background slideshow ---------------- */

.bg{
  position:fixed;
  inset:0;
  z-index:0;
}

.bgImg{
  position:absolute;
  inset:0;

  background-size:cover;
  background-position:center;

  transform:scale(1.05);

  opacity:0;
  transition:opacity 1200ms ease;

  filter:saturate(1.05) contrast(1.05);
}

.bgImg.isActive{
  opacity:1;
}

/* cinematic gradient for readability */
.bgOverlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.25),
      rgba(0,0,0,.15) 40%,
      rgba(0,0,0,.35)
    );
}

/* ── Landing page ──────────────────────────────────────── */

#landingPage{
  position:fixed;
  inset:0;
  z-index:10;
  background:#fff;
  overflow-y:auto;
  display:none; /* JS sets to block when no ?event= param */
  font-family:"Inter",system-ui,sans-serif;
  color:#111;
}

/* ── Nav ── */
.lNav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid #ebebeb;
}
.lNavInner{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.lBrand{
  font-size:15px;
  font-weight:800;
  letter-spacing:-.01em;
  color:#111;
  display:flex;
  align-items:center;
  gap:7px;
}
.lBrandDot{
  width:8px;height:8px;
  border-radius:50%;
  background:#3b82f6;
  display:inline-block;
}
.lBrandLight{ color:#fff; }
.lBrandLight .lBrandDot{ background:#93c5fd; }
.lNavLinks{
  display:flex;
  align-items:center;
  gap:12px;
}
.lNavSignIn{
  font-size:14px;
  font-weight:600;
  color:#444;
  text-decoration:none;
}
.lNavSignIn:hover{ color:#111; }
.lNavCta{
  font-size:14px;
  font-weight:700;
  background:#111;
  color:#fff;
  padding:9px 18px;
  border-radius:8px;
  text-decoration:none;
  transition:background .15s;
}
.lNavCta:hover{ background:#333; }

/* ── Buttons ── */
.lBtnPrimary{
  display:inline-block;
  background:#111;
  color:#fff;
  font-size:16px;
  font-weight:700;
  padding:14px 28px;
  border-radius:10px;
  text-decoration:none;
  transition:background .15s,transform .1s;
}
.lBtnPrimary:hover{ background:#333; transform:translateY(-1px); }
.lBtnGhost{
  display:inline-block;
  background:transparent;
  color:#111;
  font-size:16px;
  font-weight:600;
  padding:14px 28px;
  border-radius:10px;
  border:2px solid #ddd;
  text-decoration:none;
  transition:border-color .15s;
}
.lBtnGhost:hover{ border-color:#999; }
.lBtnLg{ font-size:18px; padding:16px 36px; }

/* ── Hero ── */
.lHero{
  background:#fff;
  padding:80px 24px 60px;
}
.lHeroInner{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.lHeroText{ max-width:540px; }
.lBadge{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#3b82f6;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:20px;
}
.lHeroTitle{
  font-size:clamp(36px,4.5vw,56px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  color:#111;
  margin:0 0 18px;
}
.lHeroSub{
  font-size:18px;
  line-height:1.65;
  color:#555;
  margin:0 0 28px;
}
.lHeroActions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:18px;
}
.lHeroNote{
  font-size:13px;
  color:#888;
  margin:0;
}

/* ── Phone mockup ── */
.lHeroVisual{
  display:flex;
  justify-content:center;
}
.lPhoneMock{
  width:220px;
  height:440px;
  background:#111;
  border-radius:36px;
  padding:10px;
  box-shadow:0 40px 100px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.06);
  position:relative;
}
.lPhoneScreen{
  width:100%;
  height:100%;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(160deg,#0a1810 0%,#1a3020 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.lPhoneInvite{
  text-align:center;
  padding:24px 16px;
  color:#fff;
}
.lPhoneLabel{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(126,203,154,.7);
  margin:0 0 12px;
}
.lPhoneNames{
  font-family:"Alex Brush",cursive;
  font-size:42px;
  line-height:1.15;
  color:#fff;
  margin-bottom:14px;
}
.lPhoneAmp{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:22px;
  color:rgba(126,203,154,.8);
}
.lPhoneDate{
  font-size:11px;
  letter-spacing:.06em;
  color:rgba(255,255,255,.5);
  margin-bottom:20px;
}
.lPhoneRsvpBtn{
  background:rgba(126,203,154,.18);
  border:1px solid rgba(126,203,154,.4);
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  color:rgba(126,203,154,.95);
  padding:8px 14px;
  letter-spacing:.03em;
}

/* ── Types strip ── */
.lTypesStrip{
  background:#f9fafb;
  border-top:1px solid #f0f0f0;
  border-bottom:1px solid #f0f0f0;
  padding:16px 24px;
  text-align:center;
  font-size:14px;
  font-weight:600;
  color:#777;
  letter-spacing:.04em;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:12px;
}
.lDot{ color:#ccc; }

/* ── Generic section ── */
.lSection{
  padding:80px 24px;
  background:#fff;
}
.lSectionAlt{
  background:#f9fafb;
}
.lSectionInner{
  max-width:960px;
  margin:0 auto;
  text-align:center;
}
.lSectionLabel{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#3b82f6;
  margin-bottom:12px;
}
.lSectionTitle{
  font-size:clamp(28px,3.5vw,40px);
  font-weight:800;
  letter-spacing:-.02em;
  color:#111;
  margin:0 0 48px;
  line-height:1.15;
}

/* ── Steps ── */
.lSteps{
  display:flex;
  align-items:flex-start;
  gap:0;
  justify-content:center;
  flex-wrap:wrap;
}
.lStep{
  flex:1;
  min-width:200px;
  max-width:280px;
  text-align:center;
  padding:0 20px;
}
.lStepNum{
  width:48px;
  height:48px;
  border-radius:50%;
  background:#111;
  color:#fff;
  font-size:20px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px;
}
.lStep h3{
  font-size:17px;
  font-weight:700;
  color:#111;
  margin:0 0 8px;
}
.lStep p{
  font-size:14px;
  line-height:1.65;
  color:#666;
  margin:0;
}
.lStepArrow{
  font-size:24px;
  color:#ddd;
  flex-shrink:0;
  padding-top:12px;
  align-self:flex-start;
  margin-top:10px;
}

/* ── Feature grid ── */
.lFeatGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  text-align:left;
}
.lFeat{
  background:#fff;
  border:1px solid #ebebeb;
  border-radius:16px;
  padding:28px 24px;
  transition:box-shadow .2s;
}
.lFeat:hover{ box-shadow:0 8px 32px rgba(0,0,0,.08); }
.lFeatIcon{
  font-size:28px;
  margin-bottom:12px;
}
.lFeat h3{
  font-size:16px;
  font-weight:700;
  color:#111;
  margin:0 0 8px;
}
.lFeat p{
  font-size:14px;
  line-height:1.65;
  color:#666;
  margin:0;
}

/* ── Pricing section ── */
.lPricingSubtitle{
  text-align:center;
  color:#888;
  font-size:16px;
  margin:-12px 0 40px;
}
.lPricingGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:start;
}
@media(max-width:820px){ .lPricingGrid{ grid-template-columns:1fr; max-width:380px; margin:0 auto; } }
.lPricingCard{
  background:#fff;
  border:1.5px solid #e0e6e0;
  border-radius:16px;
  padding:32px 28px;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
}
.lPricingCardFeatured{
  border-color:#2d6a4f;
  box-shadow:0 8px 40px rgba(45,106,79,.15);
  transform:scale(1.03);
}
.lPricingBadge{
  position:absolute;
  top:-13px;
  left:50%;
  transform:translateX(-50%);
  background:#2d6a4f;
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:4px 14px;
  border-radius:20px;
}
.lPricingTier{
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#888;
  margin-bottom:12px;
}
.lPricingCardFeatured .lPricingTier{ color:#2d6a4f; }
.lPricingPrice{
  margin-bottom:24px;
}
.lPricingAmount{
  font-size:42px;
  font-weight:800;
  color:#111;
  letter-spacing:-.02em;
}
.lPricingPer{
  font-size:14px;
  color:#888;
}
.lPricingFeatures{
  list-style:none;
  padding:0;
  margin:0 0 28px;
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:14px;
  color:#444;
  flex:1;
}
.lFeatMuted{ color:#bbb; }
.lPricingCta{
  display:block;
  text-align:center;
  padding:12px 20px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  background:#2d6a4f;
  color:#fff;
  transition:background .14s;
}
.lPricingCta:hover{ background:#1a4535; }
.lPricingCtaGhost{
  background:none;
  border:1.5px solid #ccc;
  color:#444;
}
.lPricingCtaGhost:hover{ background:#f4f7f4; border-color:#2d6a4f; color:#2d6a4f; }

/* ── CTA section ── */
.lCtaSection{
  background:#111;
  padding:80px 24px;
  text-align:center;
}
.lCtaInner{
  max-width:600px;
  margin:0 auto;
}
.lCtaSection h2{
  font-size:clamp(28px,3.5vw,38px);
  font-weight:800;
  color:#fff;
  margin:0 0 12px;
  letter-spacing:-.02em;
}
.lCtaSection p{
  font-size:18px;
  color:rgba(255,255,255,.65);
  margin:0 0 28px;
}
.lCtaSection .lBtnPrimary{
  background:#fff;
  color:#111;
}
.lCtaSection .lBtnPrimary:hover{ background:#e5e5e5; }
.lCtaNote{
  font-size:13px;
  color:rgba(255,255,255,.4);
  margin-top:14px !important;
}

/* ── Footer ── */
.lFooter{
  background:#111;
  border-top:1px solid #222;
  padding:40px 24px;
  text-align:center;
  color:rgba(255,255,255,.5);
}
.lFooterInner{
  max-width:600px;
  margin:0 auto;
}
.lFooter p{
  font-size:14px;
  margin:8px 0 0;
}
.lFooterSmall{
  font-size:12px;
  margin-top:16px !important;
  color:rgba(255,255,255,.3);
}

/* ── Responsive ── */
@media(max-width:800px){
  .lHeroInner{ grid-template-columns:1fr; gap:40px; }
  .lHeroText{ max-width:100%; }
  .lHeroVisual{ display:none; }
  .lFeatGrid{ grid-template-columns:repeat(2,1fr); }
  .lStepArrow{ display:none; }
  .lSteps{ gap:24px; }
}
@media(max-width:520px){
  .lFeatGrid{ grid-template-columns:1fr; }
  .lHero{ padding:48px 20px 40px; }
  .lSection{ padding:56px 20px; }
}

/* ── Invite page ───────────────────────────────────────── */

#invitePage{
  display:none; /* shown by JS */
}

/* ---------------- Slider ---------------- */

.slider{
  position:relative;
  z-index:1;

  height:100vh;

  overflow-x:auto;
  overflow-y:hidden;

  display:flex;

  scroll-snap-type:x mandatory;

  -webkit-overflow-scrolling:touch;

  scroll-behavior:auto;

  touch-action:pan-x;

  overscroll-behavior-x:contain;
}

.slider::-webkit-scrollbar{height:0;}
.slider{scrollbar-width:none;}

.slide{
  flex:0 0 100vw;
  height:100vh;

  scroll-snap-align:start;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:28px;
}

/* ---------------- Remove boxes ---------------- */

.card{
  width:min(960px,96vw);

  background:transparent;
  border:none;
  box-shadow:none;

  backdrop-filter:none;
}

/* ---------------- Hero ---------------- */

.heroText{
  text-align:center;
}

.namesScript{
  font-family:var(--namesFont,"Alex Brush",cursive);

  font-size:clamp(60px,9vw,110px);

  line-height:.95;

  margin:0;

  color:white;

  text-shadow:
    0 6px 20px rgba(0,0,0,.5),
    0 12px 40px rgba(0,0,0,.6);
}

.amp{
  font-family:"Cormorant Garamond",serif;

  font-size:clamp(32px,5vw,48px);

  margin:6px 0;

  color:white;

  text-shadow:0 12px 40px rgba(0,0,0,.6);
}

.subline{
  margin:8px 0 0;

  font-weight:900;

  letter-spacing:.05em;

  text-transform:uppercase;

  font-size:14px;

  text-shadow:0 6px 18px rgba(0,0,0,.6);
}

/* ---------------- Countdown ---------------- */

.countdownWrap{
  margin:24px auto 0;

  display:flex;
  gap:10px;

  flex-wrap:wrap;

  justify-content:center;
}

.pill{
  background:rgba(0,0,0,.45);

  backdrop-filter:blur(10px);

  border-radius:999px;

  padding:10px 14px;

  display:flex;
  gap:10px;

  min-width:110px;

  justify-content:center;

  font-weight:800;
}

.pill .v{font-size:18px;}
.pill .l{font-size:12px;opacity:.8;text-transform:uppercase;}

/* ---------------- Content ---------------- */

.content{
  padding:20px;
  text-align:center;
}

.sectionTitle{
  font-family:"Cormorant Garamond",serif;

  font-size:36px;

  margin-bottom:10px;

  text-shadow:0 8px 30px rgba(0,0,0,.65);
}

.body{
  font-size:17px;

  line-height:1.7;

  color:#f3f3f3;

  text-shadow:0 6px 22px rgba(0,0,0,.7);
}

.divider{
  height:1px;
  background:rgba(255,255,255,.4);
  margin:20px auto;
  width:120px;
}

/* ---------------- RSVP form ---------------- */

label{
  display:block;
  margin:14px 0 8px;
  font-weight:900;
}

select,input{
  width:100%;

  padding:12px 12px;

  border-radius:12px;

  border:none;

  background:rgba(255,255,255,.9);

  color:#111;

  font-size:16px;
}

.btnPrimary{

  margin-top:18px;

  width:100%;

  padding:12px 16px;

  border-radius:12px;

  border:0;

  cursor:pointer;

  font-weight:900;

  background:linear-gradient(135deg,var(--accent),var(--accent2));

  color:white;

  box-shadow:var(--btnShadow);
}

.spinner{
  display:none;
  margin-top:12px;
}

.err{
  margin-top:10px;
  color:#ffb3c4;
  font-weight:900;
}

/* ---------------- RSVP confirmed state ---------------- */

.btnSecondary{
  margin-top:12px;
  width:100%;
  padding:11px 16px;
  border-radius:12px;
  border:1.5px solid rgba(255,255,255,.25);
  cursor:pointer;
  font-weight:700;
  background:rgba(255,255,255,.08);
  color:white;
  font-size:14px;
}
.btnSecondary:hover{ background:rgba(255,255,255,.15); }

.rsvpConfirmed{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:8px 0;
  text-align:center;
}

.rsvpConfirmedBadge{
  display:inline-block;
  padding:8px 20px;
  border-radius:999px;
  font-weight:800;
  font-size:15px;
  letter-spacing:.02em;
}
.rsvpConfirmedBadge.yes{ background:rgba(100,200,120,.2); color:#6ec87a; border:1.5px solid rgba(100,200,120,.3); }
.rsvpConfirmedBadge.no { background:rgba(220,80,80,.15);  color:#e88888; border:1.5px solid rgba(220,80,80,.25); }

.rsvpConfirmedNames{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
}
.rsvpConfirmedName{
  padding:8px 14px;
  background:rgba(255,255,255,.07);
  border-radius:8px;
  font-size:14px;
  color:rgba(255,255,255,.85);
}

.rsvpModifyBtn{ margin-top:4px; }

.rsvpClosedNote{
  font-size:13px;
  color:rgba(255,255,255,.45);
  font-style:italic;
  margin:4px 0 0;
}

.rsvpFormActions{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* ---------------- name inputs ---------------- */

.nameList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.nameItem{
  display:grid;
  grid-template-columns:1fr 42px;
  gap:10px;
}

.btnIcon{
  width:42px;
  height:42px;

  border-radius:12px;

  border:none;

  background:white;

  font-weight:900;

  cursor:pointer;
}

/* ---------------- Nav buttons ---------------- */

.nav{
  position:fixed;

  left:50%;
  transform:translateX(-50%);

  bottom:20px;

  z-index:1000;

  display:flex;
  gap:12px;
}

.nav button{

  border:0;

  cursor:pointer;

  border-radius:999px;

  padding:12px 16px;

  font-weight:900;

  color:white;

  background:linear-gradient(135deg,var(--accent),var(--accent2));

  box-shadow:var(--btnShadow);
}

/* ---------------- Success overlay ---------------- */

.overlay{
  position:fixed;
  inset:0;

  display:none;

  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.6);

  z-index:9999;
}

.overlay .box{

  width:min(520px,92vw);

  background:white;

  border-radius:18px;

  padding:24px;

  text-align:center;

  color:#222;
}

input,
select,
textarea{
  font-size:16px;
}

.mobilePager .slider{
  display:block;
  overflow:hidden;
  touch-action:auto;
  scroll-snap-type:none;
}

.mobilePager .slide{
  width:100vw;
  height:100vh;
  min-height:100vh;
  display:none;
  padding:24px 18px 90px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.mobilePager .slide::-webkit-scrollbar{
  width:0;
  height:0;
}

.mobilePager .nav{
  bottom:16px;
}

.mobilePager .content{
  padding-bottom:40px;
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT: Vertical (Garden, Golden Hour)
   Natural top-to-bottom scroll; photo strips between sections
   ══════════════════════════════════════════════════════════════ */

body.layout-vertical {
  overflow-y: auto;
}

body.layout-vertical .slider {
  display: block;
  height: auto;
  overflow: visible;
  scroll-snap-type: none;
}

body.layout-vertical .slide {
  flex: none;
  width: 100%;
  height: auto;
  min-height: auto;
  scroll-snap-align: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
}

/* Hero stays full viewport height */
body.layout-vertical .slide[data-slide="0"] {
  min-height: 100vh;
  padding: 40px 24px;
}

body.layout-vertical .nav {
  display: none;
}

/* Hint becomes a scroll prompt */
body.layout-vertical .hint {
  font-size: 13px;
  letter-spacing: .1em;
  opacity: .7;
  animation: hintBounce 2.2s ease-in-out infinite;
}

@keyframes hintBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

/* Cards sit over the fixed photo bg — theme CSS provides frosted glass */
body.layout-vertical .card:not(.cardHero) {
  max-width: min(680px, 90vw);
  margin: 0 auto;
}

/* Full-width photo strip between sections */
.photoStrip {
  width: 100%;
  height: 50vh;
  background-size: cover;
  background-position: center;
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT: Split (Modern)
   Horizontal slides; photo panel left, content right
   ══════════════════════════════════════════════════════════════ */

.splitPhotoPanel {
  background-size: cover;
  background-position: center;
  min-height: 340px;
  flex-shrink: 0;
}

body.layout-split .card:not(.cardHero) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: min(900px, 90vw);
  overflow: hidden;
  padding: 0;
  /* cancel Modern's left-border-only style */
  border-left: none !important;
  border-radius: 4px !important;
}

body.layout-split .card:not(.cardHero) .content {
  padding: 40px 36px;
  text-align: left;
  align-self: center;
}

body.layout-split .card:not(.cardHero) .divider {
  margin: 18px 0;
}

/* Modern accent: thin blue line between photo and content */
body[data-theme="modern"] .splitPhotoPanel {
  border-right: 3px solid rgba(125,211,252,.55);
}

/* Mobile: stack photo above content */
@media (max-width: 820px) {
  body.layout-split .card:not(.cardHero) {
    grid-template-columns: 1fr;
  }
  .splitPhotoPanel {
    min-height: 220px;
  }
  body.layout-split .card:not(.cardHero) .content {
    padding: 28px 24px;
  }
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT: Per-slide (Midnight)
   Each slide gets its own full-bleed photo background
   ══════════════════════════════════════════════════════════════ */

body.layout-per-slide .slide {
  position: relative;
  overflow: hidden;
}

.slidePhotoBg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  filter: saturate(1.05) contrast(1.05);
  /* cross-fade on slide change via opacity transition */
  transition: opacity 800ms ease;
}

/* Per-slide overlay — Midnight applies its own gradient via theme CSS */
body[data-theme="midnight"].layout-per-slide .slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(6,10,40,.65) 0%,
    rgba(4,8,26,.32) 40%,
    rgba(8,14,55,.75) 100%
  );
}

/* Lift card above photo and overlay */
body.layout-per-slide .card {
  position: relative;
  z-index: 2;
}