/* ==========================================================================
   ping2ops.cloud — Invitations
   Design tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,650&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  /* colour */
  --ink:        #2B2024;
  --ink-soft:   #6F6267;
  --paper:      #FFF9F5;
  --paper-deep: #F7E8DF;
  --line:       rgba(43,32,36,.13);
  --line-soft:  rgba(43,32,36,.07);

  --sage:       #8A5360;
  --sage-deep:  #6B2639;
  --sage-tint:  #F2DFE3;

  --gold:       #B58A4A;
  --gold-tint:  #F5E8CE;

  --rose:       #A34F68;
  --rose-tint:  #F4DDE3;

  --blush:      #EBC2CC;
  --slate:      #606875;
  --slate-tint: #E8E9ED;

  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 26px;

  --shadow-card: 0 24px 48px -28px rgba(43,32,36,.28);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(680px 420px at 92% -6%, rgba(176,122,46,.14), transparent 60%),
    radial-gradient(760px 480px at -8% 8%, rgba(162,78,99,.12), transparent 55%),
    radial-gradient(900px 600px at 50% 115%, rgba(62,107,82,.10), transparent 60%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
p{ margin:0; }
button{ font-family: inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

:focus-visible{ outline: 2px solid var(--sage); outline-offset: 3px; }

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 640px){ .wrap{ padding: 0 20px; } }

section{ padding: 96px 0; }
@media (max-width: 780px){ section{ padding: 64px 0; } }

.eyebrow{
  font-size: 14px;
  color: var(--rose);
  font-weight: 600;
  margin-bottom: 14px;
}
.eyebrow::before{
  content: '';
  display: inline-block;
  width: 18px; height: 1px;
  background: var(--gold);
  margin-right: 10px;
  vertical-align: middle;
}

.section-head{ max-width: 620px; margin-bottom: 52px; }
.section-head h2{ font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; }
.section-head p{ margin-top: 16px; font-size: 17px; color: var(--ink-soft); }

/* ---------- decorative heart divider (poster motif) ---------- */
.divider-heart{
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 26px 0 0;
}
.divider-heart::before, .divider-heart::after{
  content: ''; width: 46px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.divider-heart::after{ background: linear-gradient(90deg, var(--gold), transparent); }
.divider-heart svg{ width: 15px; height: 15px; color: var(--rose); flex: none; }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-s);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--sage-deep); color: var(--paper); }
.btn-primary:hover{ background: var(--sage); }
.btn-ghost{ background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--ink); }
.btn-line{ background:transparent; border-bottom: 1px solid var(--ink); border-radius:0; padding: 4px 0; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(253,248,241,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.brand{
  display: flex;
  align-items: center;
}

.brand-logo{
  display: block;
  width: 220px;
  height: 70px;
  object-fit: contain;
  object-position: left center;
}

.main-nav{
  display:flex;
  align-items:center;
  gap: 40px;
}

.main-nav ul{
  display:flex;
  gap: 32px;
  font-size: 15px;
  font-weight: 500;
}

.main-nav a.active,
.main-nav a:hover{
  color: var(--sage-deep);
}

.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding: 6px;
}

.nav-toggle span{
  display:block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
}

@media (max-width: 880px){
  .main-nav{
    position: fixed;
    inset: 84px 0 0 0;
    background: var(--paper);
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 24px;
    gap: 28px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }

  .main-nav.open{
    opacity:1;
    pointer-events:auto;
    transform: translateY(0);
  }

  .main-nav ul{
    flex-direction: column;
    gap: 22px;
    font-size: 20px;
  }

  .nav-toggle{
    display:block;
  }
}

@media (max-width: 640px){
  .brand-logo{
    width: 180px;
    height: 60px;
  }
}
/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ padding: 72px 0 100px; overflow: hidden; position: relative; }
.hero-bloom{
  position: absolute; inset: -60px -10% auto -10%; height: 520px; z-index: 0;
  background:
    radial-gradient(340px 240px at 14% 20%, rgba(243,199,206,.55), transparent 70%),
    radial-gradient(300px 220px at 86% 10%, rgba(247,231,196,.6), transparent 70%),
    radial-gradient(260px 200px at 50% 60%, rgba(227,239,227,.55), transparent 70%);
  pointer-events: none;
}
.hero .wrap{ position: relative; z-index: 1; }
.hero .wrap{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
@media (max-width: 900px){ .hero .wrap{ grid-template-columns: 1fr; } }

.hero-copy h1{
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.06;
  color: var(--ink);
}
.hero-copy h1 em{ font-style: italic; color: var(--sage-deep); }
.hero-copy .lede{
  margin-top: 22px; font-size: 18px; color: var(--ink-soft); max-width: 46ch;
}
.hero-actions{ margin-top: 34px; display:flex; gap: 16px; flex-wrap: wrap; }

.hero-trust{ margin-top: 52px; display:flex; gap: 34px; flex-wrap: wrap; }
.hero-trust div{ font-size: 13px; color: var(--ink-soft); }
.hero-trust strong{ display:block; font-family: var(--font-display); font-size: 26px; color: var(--ink); font-weight: 600; }

/* hero card stack */
.card-stack{ position: relative; height: 460px; }
.card-stack .invite{
  position: absolute; width: 250px; padding: 26px 22px; border-radius: var(--radius-m);
  box-shadow: var(--shadow-card); background: var(--paper);
  border: 1px solid var(--line-soft);
  opacity: 0; animation: cardIn .7s cubic-bezier(.2,.8,.2,1) forwards;
}
.card-stack .invite h4{ font-size: 20px; margin-bottom: 6px; }
.card-stack .invite p{ font-size: 12.5px; color: var(--ink-soft); }
.card-stack .invite .tag{ font-size: 10.5px; letter-spacing: .08em; font-weight: 600; margin-bottom: 12px; display:inline-block; padding: 4px 10px; border-radius: 999px; }

.card-1{ top: 6%; left: 4%; transform: rotate(-7deg); animation-delay: .05s; z-index: 3; }
.card-1 .tag{ background: var(--sage-tint); color: var(--sage-deep); }
.card-2{ top: 30%; left: 34%; transform: rotate(4deg); animation-delay: .2s; z-index: 2; }
.card-2 .tag{ background: var(--rose-tint); color: var(--rose); }
.card-3{ top: 56%; left: 8%; transform: rotate(-2deg); animation-delay: .35s; z-index: 1; }
.card-3 .tag{ background: var(--gold-tint); color: var(--gold); }

@keyframes cardIn{
  from{ opacity: 0; transform: translateY(24px) rotate(var(--r,0)); }
  to{ opacity: 1; }
}
@media (max-width: 900px){
  .card-stack{ height: 380px; }
  .card-stack .invite{ width: 200px; padding: 20px 18px; }
}
@media (max-width: 500px){
  .card-stack{ height: 320px; }
  .card-1{ left: 0; } .card-2{ left: 40%; } .card-3{ left: 4%; }
}

/* ==========================================================================
   Feature strip
   ========================================================================== */
.feature-strip{ padding: 0 0 88px; }
.feature-strip .wrap{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 0;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  border-radius: var(--radius-m); overflow: hidden;
}
.feature-strip .item{
  padding: 32px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.5);
}
.feature-strip .item:nth-child(1){ background: linear-gradient(160deg, rgba(227,239,227,.7), rgba(255,255,255,.3)); }
.feature-strip .item:nth-child(2){ background: linear-gradient(160deg, rgba(247,222,225,.7), rgba(255,255,255,.3)); }
.feature-strip .item:nth-child(3){ background: linear-gradient(160deg, rgba(247,231,196,.7), rgba(255,255,255,.3)); }
.feature-strip .item:nth-child(4){ background: linear-gradient(160deg, rgba(228,233,242,.7), rgba(255,255,255,.3)); }
.feature-strip .item .icon-circle{
  width: 46px; height: 46px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.75); margin-bottom: 16px;
}
.feature-strip .item:nth-child(1) svg{ color: var(--sage-deep); }
.feature-strip .item:nth-child(2) svg{ color: var(--rose); }
.feature-strip .item:nth-child(3) svg{ color: var(--gold); }
.feature-strip .item:nth-child(4) svg{ color: var(--slate); }
.feature-strip .item svg{ width: 22px; height: 22px; }
.feature-strip .item h4{ font-size: 16px; font-family: var(--font-body); font-weight: 600; }
.feature-strip .item p{ font-size: 13.5px; color: var(--ink-soft); margin-top: 6px; }
@media (max-width: 780px){ .feature-strip .wrap{ grid-template-columns: repeat(2,1fr); } }

/* ==========================================================================
   Occasion list (editorial rows, not cards)
   ========================================================================== */
.occasion-list{ border-top: 1px solid var(--line); }
.occasion-row{
  display:grid; grid-template-columns: 240px 1fr 140px; gap: 24px; align-items: center;
  padding: 30px 12px; border-bottom: 1px solid var(--line);
  transition: padding-left .25s ease, background .25s ease;
  border-radius: var(--radius-s);
}
.occasion-row:hover{ padding-left: 22px; background: rgba(243,199,206,.16); }
.occasion-row:nth-child(2):hover{ background: rgba(247,231,196,.22); }
.occasion-row:nth-child(3):hover{ background: rgba(227,239,227,.28); }
.occasion-row:nth-child(4):hover{ background: rgba(228,233,242,.3); }
.occasion-row h3{ font-size: 24px; }
.occasion-row p{ color: var(--ink-soft); font-size: 15px; max-width: 44ch; }
.occasion-row .go{ justify-self: end; font-size: 14px; font-weight: 600; color: var(--sage-deep); white-space: nowrap; }
@media (max-width: 720px){
  .occasion-row{ grid-template-columns: 1fr; gap: 8px; }
  .occasion-row .go{ justify-self: start; }
}

/* ==========================================================================
   Template cards
   ========================================================================== */
.template-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px){ .template-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .template-grid{ grid-template-columns: 1fr; } }

.tpl-card{
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: transform .25s ease, box-shadow .25s ease;
}
.tpl-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); }
.tpl-preview{ height: 220px; position: relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.tpl-preview .frame{ text-align:center; padding: 20px; }
.tpl-preview .frame .kicker{ font-size: 11px; letter-spacing:.1em; opacity:.8; }
.tpl-preview .frame .name{ font-family: var(--font-display); font-size: 26px; margin-top: 8px; }
.tpl-meta{ padding: 18px 20px 22px; display:flex; align-items:center; justify-content: space-between; }
.tpl-meta .cat{ font-size: 12.5px; color: var(--ink-soft); }
.tpl-meta h4{ font-size: 16px; font-family: var(--font-body); font-weight: 600; margin-top: 2px; }
.tpl-meta a{ font-size: 13px; font-weight: 600; color: var(--sage-deep); white-space: nowrap; }

.pv-wedding{ background: linear-gradient(160deg, #F3E9D8, #E9D9C2); color: #5B3D22; }
.tpl-garden{background:radial-gradient(ellipse at 20% 20%,#fff8f7,#ecd9df 65%,#d9c6d5);color:#603e52}.tpl-garden:before,.tpl-garden:after{content:'✿';position:absolute;color:#a97086;opacity:.35;font-size:95px}.tpl-garden:before{left:8%;top:3%}.tpl-garden:after{right:9%;bottom:-8%}.tpl-midnight{background:radial-gradient(ellipse at center,#344663,#111b31 80%);color:#f4e7c8}.tpl-midnight:before,.tpl-midnight:after{content:'✦';position:absolute;color:#d6bf8d;opacity:.6;font-size:42px}.tpl-midnight:before{left:16%;top:18%}.tpl-midnight:after{right:17%;bottom:16%}.tpl-minimal{background:linear-gradient(135deg,#fff,#eeeae2);color:#353431}.tpl-minimal .frame .name{font-family:var(--font-body);font-weight:500;letter-spacing:-.04em}
.pv-birthday{ background: linear-gradient(160deg, #F3E3E4, #E9C9CC); color: #7A2F3D; }
.pv-anniversary{ background: linear-gradient(160deg, #E4EAE1, #CBDACB); color: #2E4A33; }
.pv-corporate{ background: linear-gradient(160deg, #E7EAF0, #CDD4E2); color: #303C55; }

/* ==========================================================================
   Steps
   ========================================================================== */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
@media (max-width: 900px){ .steps{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px){ .steps{ grid-template-columns: 1fr; } }
.step{ border-top: 2px solid var(--ink); padding-top: 18px; }
.step .num{ font-family: var(--font-display); font-size: 15px; color: var(--sage-deep); }
.step h4{ font-size: 18px; margin-top: 10px; font-family: var(--font-body); font-weight: 600; }
.step p{ font-size: 14px; color: var(--ink-soft); margin-top: 8px; }

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: stretch; }
@media (max-width: 900px){ .pricing-grid{ grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

.price-card{
  border-radius: var(--radius-l);
  padding: 38px 32px 32px;
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--slate-tint), #fff 65%);
  display: flex; flex-direction: column;
  position: relative;
}
.price-card.featured{
  background: linear-gradient(165deg, var(--rose-tint), #fdf2f0 65%);
  color: var(--ink);
  border-color: rgba(162,78,99,.3);
  transform: translateY(-10px);
  box-shadow: var(--shadow-card);
}
.price-card:not(.base):not(.featured){
  background: linear-gradient(165deg, var(--gold-tint), #fff8ea 65%);
  border-color: rgba(176,122,46,.28);
}
.price-card .badge{
  position: absolute; top: -14px; left: 32px;
  background: var(--gold); color: #fff; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; padding: 6px 14px; border-radius: 999px;
}
.price-card .tier-tag{ font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.price-card.base .tier-tag{ color: var(--slate); }
.price-card.pro .tier-tag{ color: var(--rose); }
.price-card.featured .tier-tag{ color: var(--gold-tint); }
.price-card h3{ font-size: 30px; margin-top: 6px; }
.price-card .desc{ font-size: 14px; color: var(--ink-soft); margin-top: 10px; min-height: 40px; }
.price-card .amount{ margin-top: 22px; font-family: var(--font-display); font-size: 44px; font-weight: 600; }
.price-card .amount sup{ font-size: 20px; top: -18px; }
.price-card .per{ font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.price-card ul{ margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(28,35,51,.12); flex: 1; }
.price-card li{ display:flex; gap: 10px; align-items: flex-start; font-size: 14px; padding: 7px 0; }
.price-card li svg{ width: 16px; height: 16px; margin-top: 3px; flex: none; color: var(--sage-deep); }
.price-card.featured li svg{ color: var(--rose); }
.price-card:not(.base):not(.featured) li svg{ color: var(--gold); }
.price-card .btn{ margin-top: 26px; justify-content: center; width: 100%; }

/* ==========================================================================
   Quote band
   ========================================================================== */
.quote-band{ background: linear-gradient(120deg, var(--sage-deep), #2f5440 60%, #3d4f36); color: var(--paper); }
.quote-band blockquote{
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: clamp(24px, 3vw, 34px); line-height: 1.35; max-width: 780px;
}
.quote-band cite{ display:block; margin-top: 22px; font-style: normal; font-size: 14px; opacity: .75; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  border-radius: var(--radius-l);
  background: linear-gradient(135deg, var(--paper-deep), var(--blush) 130%);
  padding: 60px 56px;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: center;
}
@media (max-width: 780px){ .cta-band{ grid-template-columns: 1fr; padding: 40px 28px; } }
.cta-band h2{ font-size: clamp(26px, 3vw, 36px); }
.cta-contacts{ display:flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.cta-contacts a{ font-weight: 600; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 56px 0 32px;
  background: linear-gradient(180deg, transparent, rgba(231,239,231,.5));
}

.footer-top{
  display:flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

/* Footer logo size */
.footer-top .brand-logo{
  width: 220px;
  height: auto;
  display: block;
}

.footer-cols{
  display:flex;
  gap: 64px;
  flex-wrap: wrap;
}

.footer-col h5{
  font-size: 13px;
  margin-bottom: 14px;
  color: var(--ink-soft);
}

.footer-col li{
  padding: 5px 0;
  font-size: 14.5px;
}

.footer-col a:hover{
  color: var(--sage-deep);
}

.footer-bottom{
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display:flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-soft);
  flex-wrap: wrap;
  gap: 12px;
}
/* ==========================================================================
   WhatsApp float
   ========================================================================== */
.wa-float{
  position: fixed; bottom: 24px; right: 24px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 24px -8px rgba(0,0,0,.35);
  transition: transform .2s ease;
}
.wa-float:hover{ transform: scale(1.06); }
.wa-float svg{ width: 26px; height: 26px; }

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */
.page-hero{
  padding: 64px 0 40px; border-bottom: 1px solid var(--line);
  background: radial-gradient(720px 260px at 12% -30%, rgba(243,199,206,.4), transparent 65%),
              radial-gradient(680px 260px at 92% -20%, rgba(247,231,196,.45), transparent 65%);
}
.page-hero h1{ font-size: clamp(32px, 4.4vw, 50px); }
.page-hero p{ margin-top: 16px; font-size: 17px; color: var(--ink-soft); max-width: 60ch; }

/* filter tabs */
.filter-tabs{ display:flex; gap: 10px; flex-wrap: wrap; margin-bottom: 44px; }
.filter-tabs button{
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 18px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
  transition: all .18s ease;
}
.filter-tabs button.active, .filter-tabs button:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* form */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px){ .form-grid{ grid-template-columns: 1fr; } }
.field{ display:flex; flex-direction: column; gap: 8px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.field input, .field select, .field textarea{
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: 13px 14px;
  font-family: inherit; font-size: 15px; background: var(--paper); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--sage); }
.field textarea{ resize: vertical; min-height: 120px; }
.form-note{ font-size: 13px; color: var(--ink-soft); margin-top: 18px; }

/* about */
.about-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
@media (max-width: 860px){ .about-grid{ grid-template-columns: 1fr; } }
.stat-row{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 40px; border-top: 1px solid var(--line); padding-top: 28px; }
.stat-row div strong{ display:block; font-family: var(--font-display); font-size: 32px; }
.stat-row div span{ font-size: 13px; color: var(--ink-soft); }

/* utility */
.text-center{ text-align:center; }
.mt-lg{ margin-top: 64px; }
.home-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.home-template-card{min-width:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 12px 30px #30221809;transition:transform .25s ease,box-shadow .25s ease}.home-template-card:hover{transform:translateY(-5px);box-shadow:0 22px 45px #30221818}.home-template-art{min-height:320px;position:relative;display:grid;place-items:center;overflow:hidden;background:var(--tpl-bg);color:var(--tpl-ink);padding:25px}.home-mini-invite{position:relative;width:min(100%,280px);min-height:255px;padding:28px 18px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:color-mix(in srgb,var(--tpl-bg) 70%,white);border:1px solid var(--tpl-line);box-shadow:0 13px 30px #2317111b;color:var(--tpl-ink);font-family:var(--tpl-font,var(--font-display));transition:transform .3s ease}.home-mini-invite:before{content:"";position:absolute;inset:8px;border:1px solid var(--tpl-line);opacity:.85;pointer-events:none}.home-ornament,.home-bottom-mark{color:var(--tpl-accent);font-size:20px;line-height:1}.home-invite-kicker,.home-invite-copy,.home-invite-date{font:600 7px var(--font-body);letter-spacing:.17em;color:var(--tpl-accent)}.home-invite-kicker{margin:9px 0 12px}.home-couple{font:500 clamp(23px,2.5vw,32px)/1.05 var(--tpl-font,var(--font-display));color:var(--tpl-ink);margin:0}.home-couple i{display:block;font-size:.55em;font-weight:400;color:var(--tpl-accent);margin:4px}.home-invite-copy{margin:11px 0 8px;font-size:6px}.home-invite-date{font-size:6px;margin-top:9px}.home-bottom-mark{font-size:12px;margin-top:8px}.home-photo-strip{display:flex;gap:5px;justify-content:center;width:78%;height:37px}.home-photo-strip span{flex:1;min-width:0;border:1px solid #fff9;box-shadow:0 2px 6px #281b191c;background:radial-gradient(ellipse at 50% 30%,#f9dec4 0 15%,transparent 16%),linear-gradient(140deg,#6c8371,#d6ad8a)}.home-photo-strip span:nth-child(2){background:radial-gradient(ellipse at 48% 30%,#f3d8cb 0 15%,transparent 16%),linear-gradient(145deg,#b88083,#ead7cc)}.home-photo-strip span:nth-child(3){background:radial-gradient(ellipse at 50% 30%,#f7dfcc 0 15%,transparent 16%),linear-gradient(145deg,#758296,#d7c9b2)}.home-design-number{position:absolute;bottom:13px;right:15px;font:600 8px var(--font-body);letter-spacing:.15em;color:var(--tpl-ink);opacity:.7}.home-template-info{padding:16px 18px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px}.home-template-info>div>span{font-size:8px;letter-spacing:.13em;color:var(--ink-soft)}.home-template-info h3{font-size:18px;margin:4px 0 2px}.home-template-info p{font-size:11px;color:var(--ink-soft)}.home-template-info>a{font-size:11px;font-weight:600;color:var(--sage-deep);white-space:nowrap}.home-template-info>a b{font-size:15px;margin-left:4px}.home-design-number{z-index:2}.home-template-card.tpl-layout-botanical .home-mini-invite{border-radius:48% 48% 4px 4px/20% 20% 4px 4px;padding-top:38px}.home-template-card.tpl-layout-botanical .home-mini-invite:before{border-radius:48% 48% 2px 2px/20% 20% 2px 2px;border-style:dotted}.home-template-card.tpl-layout-botanical .home-template-art:before,.home-template-card.tpl-layout-botanical .home-template-art:after{position:absolute;content:"❋";color:var(--tpl-accent);font-size:48px;opacity:.55}.home-template-card.tpl-layout-botanical .home-template-art:before{top:14%;left:9%}.home-template-card.tpl-layout-botanical .home-template-art:after{bottom:13%;right:9%}.home-template-card.tpl-layout-cinematic .home-template-art{background-image:radial-gradient(1px 1px at 12% 22%,#fff9 50%,transparent 55%),radial-gradient(2px 2px at 79% 31%,#fff9 50%,transparent 55%),radial-gradient(1px 1px at 65% 83%,#fff9 50%,transparent 55%),linear-gradient(150deg,#15243c,#30445d 60%,#121c30)}.home-template-card.tpl-layout-cinematic .home-mini-invite{background:linear-gradient(160deg,#203350,#111a2b);border-color:var(--tpl-accent);box-shadow:0 16px 35px #07101d66}.home-template-card.tpl-layout-cinematic .home-mini-invite:before{border-style:double;border-width:3px}.home-template-card.tpl-layout-editorial .home-mini-invite{text-align:left;align-items:flex-start;padding-left:30px}.home-template-card.tpl-layout-editorial .home-couple{font:500 30px/1.02 var(--font-body);letter-spacing:-.07em}.home-template-card.tpl-layout-editorial .home-couple i{display:inline;margin-left:4px}.home-template-card.tpl-layout-editorial .home-photo-strip{position:absolute;right:19px;top:57px;width:43px;height:145px;flex-direction:column}.home-template-card.tpl-layout-editorial .home-invite-copy{max-width:110px;line-height:1.6}.home-template-card.tpl-layout-photo-led .home-mini-invite{padding-top:15px}.home-template-card.tpl-layout-photo-led .home-photo-strip{order:-1;width:100%;height:88px;margin-bottom:14px;gap:4px}.home-template-card.tpl-layout-photo-led .home-photo-strip span:first-child{flex:1.7}.home-template-card.tpl-layout-photo-led .home-couple{font-size:26px}.home-template-card.tpl-layout-photo-led .home-mini-invite:before{inset:6px}.home-template-card.tpl-layout-postcard .home-mini-invite{transform:rotate(-3deg);box-shadow:9px 9px 0 #fff8,0 13px 28px #23171121}.home-template-card.tpl-layout-postcard .home-mini-invite:before{inset:-5px;border-style:dashed;transform:rotate(5deg)}.home-template-card.tpl-layout-waves .home-mini-invite{border-radius:50% 50% 5px 5px/20% 20% 5px 5px}.home-template-card.tpl-layout-waves .home-photo-strip span{border-radius:50% 50% 3px 3px}.home-template-card.tpl-layout-formal .home-mini-invite:before{inset:5px;border:3px double var(--tpl-accent)}.home-template-card.tpl-layout-ornate .home-mini-invite{background-image:radial-gradient(ellipse at center,transparent 63%,color-mix(in srgb,var(--tpl-accent) 15%,transparent) 64%),linear-gradient(145deg,#fffdf7,#f4e7c9)}.home-template-card.tpl-layout-ornate .home-mini-invite:before{border-width:2px;border-radius:28% 72% 48% 52%}.home-template-card.tpl-layout-celestial .home-mini-invite{border-radius:50% 50% 4px 4px}.home-template-card.tpl-layout-arch .home-mini-invite{border-radius:48% 48% 4px 4px/20% 20% 4px 4px;padding-top:42px}.home-template-card.tpl-layout-arch .home-mini-invite:before{border-radius:48% 48% 2px 2px/20% 20% 2px 2px}@media(max-width:900px){.home-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.home-template-grid{grid-template-columns:1fr;max-width:430px;margin:0 auto}.home-template-art{min-height:300px}.home-template-info{padding:15px}.home-template-actions{display:flex;flex-direction:column;align-items:center;gap:10px}}

/* Keep page content comfortable on small touch screens. */
@media (max-width: 640px) {
  body { overflow-x: hidden; }
  .section-head h2, .page-hero h1 { font-size: clamp(30px, 9vw, 42px); }
  .page-hero .wrap > p:last-child { max-width: 100%; }
  .template-creation-highlight { width: 100%; }
  .template-grid { gap: 18px; }
  .tpl-meta { align-items: flex-start; gap: 10px; }
  .tpl-create-link { white-space: normal; text-align: right; }
  .filter-tabs { gap: 8px; margin-bottom: 28px; }
  .filter-tabs button { min-height: 42px; padding: 9px 12px; }
  .footer-top, .footer-cols { gap: 24px; }
  .footer-top { flex-direction: column; }
  .footer-cols { flex-wrap: wrap; }
  .cta-band { padding: 30px 22px; }
  .payment-summary { grid-template-columns: 1fr; gap: 16px; }
  .payment-summary .payment-amount { text-align: left; }
  .payment-options { grid-template-columns: 1fr; }
  .payment-option { padding: 18px 15px; }
  .payment-option .btn, .after-payment > .btn { min-height: 44px; }
  .payment-shell { padding: 36px 18px 56px; }
  .home-template-info { align-items: flex-start; flex-direction: column; }
  .home-template-info > a { font-size: 13px; padding: 7px 0; }
}

@media (max-width: 380px) {
  .wrap { padding-inline: 16px; }
  .brand-logo { width: 150px; }
  .hero h1 { font-size: 38px; }
  .builder-shell { padding-inline: 10px; }
}

/* Homepage opens directly into the invitation collection, like a mobile-first catalog. */
.home-gallery-page > .hero,
.home-gallery-page > .feature-strip,
.home-gallery-page > #occasions { display: none; }
.home-gallery-page > #templates { padding: 26px 0 74px; }
.collection-heading { max-width: 780px; margin: 0 auto 30px; text-align: center; }
.collection-heading .eyebrow { color: #164638; font-weight: 700; }
.collection-heading h2 { max-width: 18ch; margin: 16px auto 10px; font-size: clamp(38px, 6vw, 64px); line-height: 1.08; font-weight: 400; }
.collection-heading > p:last-child { color: var(--ink-soft); font-size: 14px; }
.home-gallery-controls { margin: 0 auto 26px; max-width: 900px; }
.home-gallery-filters { display: flex; align-items: center; gap: 10px; overflow-x: auto; padding: 3px 2px 14px; scrollbar-width: none; }
.home-gallery-filters::-webkit-scrollbar { display: none; }
.home-gallery-filters button { flex: 0 0 auto; min-height: 44px; border: 1px solid #e8e4e1; border-radius: 24px; padding: 9px 20px; background: #fff; color: #514b47; font: 600 14px var(--font-body); cursor: pointer; }
.home-gallery-filters button.active { border-color: #123f34; background: #123f34; color: #fff; box-shadow: 0 5px 12px #123f3425; }
.home-gallery-count { margin-left: auto; flex: 0 0 auto; color: var(--ink-soft); font-size: 12px; }
.home-gallery-search { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 18px; border: 1px solid #e6e2df; border-radius: 30px; background: #fff; color: #948b86; box-shadow: 0 3px 12px #33241a08; }
.home-gallery-search span { font-size: 23px; }
.home-gallery-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 15px var(--font-body); }
.home-gallery-search input::placeholder { color: #a49da0; }
.home-template-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.home-template-card { border: 0; border-radius: 22px; background: transparent; box-shadow: none; overflow: visible; }
.home-template-card:hover { transform: translateY(-3px); box-shadow: none; }
.home-template-card[hidden] { display: none; }
.home-template-card .home-template-art { display: block; position: relative; aspect-ratio: .57; min-height: 0; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--tpl-accent) 70%, var(--tpl-ink)); border-radius: 22px; isolation: isolate; background: var(--tpl-bg); color: var(--tpl-ink); box-shadow: 0 8px 24px #30221817; }
.home-template-card .home-template-art::before { content: ""; position: absolute; z-index: -1; inset: 12px; border: 1px solid color-mix(in srgb, var(--tpl-accent) 55%, transparent); border-radius: 15px; opacity: .9; }
.home-template-card .home-template-art::after { content: "✦"; position: absolute; top: 15%; right: 16%; color: var(--tpl-accent); font-size: clamp(28px, 4vw, 52px); opacity: .65; }
.home-template-card .home-mini-invite { position: absolute; inset: 0; width: auto; min-height: 0; padding: 21% 9% 25%; justify-content: center; background: transparent; border: 0; box-shadow: none; }
.home-template-card .home-mini-invite::before { inset: 19px; border: 0; }
.home-template-card .home-ornament { font-size: clamp(18px, 2.4vw, 27px); margin-bottom: 10px; }
.home-template-card .home-invite-kicker { margin: 0 0 16px; font-size: clamp(6px, .72vw, 8px); letter-spacing: .16em; }
.home-template-card .home-couple { font-size: clamp(21px, 2.5vw, 35px); line-height: 1.05; }
.home-template-card .home-couple i { margin: 5px 0; }
.home-template-card .home-invite-copy { max-width: 28ch; margin: 14px 0 8px; font-size: clamp(6px, .7vw, 8px); line-height: 1.7; }
.home-template-card .home-photo-strip { width: 70%; height: 14%; max-height: 75px; min-height: 38px; margin: 14px 0 4px; }
.home-template-card .home-photo-strip i { flex: 1; min-width: 0; border: 2px solid #fff9; border-radius: 48% 48% 4px 4px; background: radial-gradient(ellipse at 50% 28%,#f8e0cf 0 17%,transparent 18%),linear-gradient(145deg,#82927b,#d7b696); }
.home-template-card .home-photo-strip i:nth-child(2) { background: radial-gradient(ellipse at 50% 28%,#f5d6c7 0 17%,transparent 18%),linear-gradient(145deg,#b77f86,#e6cbd0); }
.home-template-card .home-photo-strip i:nth-child(3) { background: radial-gradient(ellipse at 50% 28%,#f8e0cf 0 17%,transparent 18%),linear-gradient(145deg,#738397,#d6c7aa); }
.home-template-card .home-invite-date { margin-top: 9px; font-size: clamp(6px, .7vw, 8px); }
.home-template-card .home-bottom-mark { margin-top: 12px; }
.home-gallery-name { position: absolute; z-index: 2; top: 16px; left: 16px; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 9px 15px; border-radius: 24px; background: #fffefaed; color: #282724; box-shadow: 0 3px 10px #1f17151c; font-size: clamp(11px, 1vw, 14px); font-weight: 600; }
.home-preview-button { position: absolute; z-index: 2; right: 6%; bottom: 3%; left: 6%; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; border: 1px solid #ffffff55; border-radius: 13px; background: #332922e8; color: #fff; box-shadow: 0 5px 16px #15100e44; font-size: 15px; font-weight: 700; transition: background .2s ease, transform .2s ease; }
.home-template-card:hover .home-preview-button { background: #173f35; transform: translateY(-2px); }
.home-template-info { display: none; }
.home-template-info > div > span { font-size: 9px; letter-spacing: .1em; }
.home-template-info h3 { margin: 3px 0; font-size: 15px; }
.home-template-info p { font-size: 11px; }
.home-template-info > a { font-size: 11px; padding-top: 18px; }
.home-template-card.tpl-layout-cinematic .home-template-art { background-image: radial-gradient(1px 1px at 12% 22%,#fff9 50%,transparent 55%),radial-gradient(2px 2px at 79% 31%,#fff9 50%,transparent 55%),radial-gradient(1px 1px at 65% 83%,#fff9 50%,transparent 55%),linear-gradient(150deg,#15243c,#30445d 60%,#121c30); }
.home-template-card.tpl-layout-cinematic .home-mini-invite { background: transparent; }
.home-template-card.tpl-layout-editorial .home-mini-invite { align-items: flex-start; text-align: left; padding-left: 15%; }
.home-template-card.tpl-layout-editorial .home-photo-strip { position: static; width: 68%; height: 11%; flex-direction: row; }
.home-template-card.tpl-layout-editorial .home-couple i { display: block; }
.home-template-card.tpl-layout-photo-led .home-photo-strip { order: initial; width: 85%; height: 20%; max-height: 105px; }
.home-template-card.tpl-layout-photo-led .home-photo-strip i { border-radius: 3px; }
.home-template-card.tpl-layout-postcard .home-mini-invite { transform: none; box-shadow: none; }
.home-template-card.tpl-layout-postcard .home-mini-invite::before { inset: 19px; }
.home-template-card.tpl-layout-botanical .home-gallery-flower,.home-template-card.tpl-layout-arch .home-gallery-flower { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); color: var(--tpl-accent); font-size: clamp(45px,7vw,90px); opacity: .5; }
.home-template-card.tpl-layout-formal .home-template-art::before,.home-template-card.tpl-layout-ornate .home-template-art::before { inset: 9px; border-width: 3px; border-style: double; }
.home-gallery-empty { margin: 40px 0; color: var(--ink-soft); text-align: center; }
.home-gallery-page .home-template-actions { margin-top: 34px; }
@media (max-width: 900px) { .home-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 620px) {
  .home-gallery-page > #templates { padding: 24px 0 54px; }
  .collection-heading { margin-bottom: 24px; }
  .collection-heading h2 { max-width: 16ch; font-size: clamp(34px, 8vw, 48px); }
  .collection-heading > p:last-child { max-width: 34ch; margin: 0 auto; font-size: 13px; line-height: 1.6; }
  .home-gallery-controls { margin-bottom: 18px; }
  .home-gallery-filters { margin-right: -16px; gap: 9px; padding-right: 16px; }
  .home-gallery-filters button { min-height: 42px; padding: 8px 17px; font-size: 13px; }
  .home-gallery-count { display: none; }
  .home-gallery-search { min-height: 52px; }
  .home-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 11px; }
  .home-template-card .home-template-art { aspect-ratio: .56; border-radius: 17px; }
  .home-template-card .home-template-art::before { inset: 8px; border-radius: 11px; }
  .home-template-card .home-mini-invite { padding: 23% 7% 23%; }
  .home-template-card .home-mini-invite::before { inset: 12px; }
  .home-template-card .home-gallery-name { top: 11px; left: 10px; max-width: calc(100% - 20px); padding: 7px 11px; font-size: 10px; }
  .home-template-card .home-invite-kicker { font-size: 5px; margin-bottom: 10px; }
  .home-template-card .home-couple { font-size: clamp(18px, 5vw, 25px); }
  .home-template-card .home-invite-copy,.home-template-card .home-invite-date { font-size: 5px; }
  .home-template-card .home-photo-strip { min-height: 27px; margin-top: 9px; }
  .home-template-card .home-ornament { font-size: 16px; margin-bottom: 6px; }
  .home-template-card .home-preview-button { min-height: 38px; bottom: 3%; border-radius: 10px; font-size: 12px; }
  .home-template-info { padding-top: 7px; }
  .home-template-info > div > span { font-size: 7px; }
  .home-template-info h3 { font-size: 13px; }
  .home-template-info p,.home-template-info > a { font-size: 10px; }
  .home-template-info > a { padding-top: 12px; }
}
@media (max-width: 360px) {
  .home-template-grid { gap: 12px 8px; }
  .home-template-card .home-gallery-name { font-size: 9px; padding-inline: 9px; }
  .home-template-info > a { display: none; }
}

/* Individual art directions keep each invitation recognizable at a glance. */
.home-template-card .home-gallery-flower { position: absolute; z-index: 1; top: 13%; right: 13%; color: var(--tpl-accent); font-size: clamp(34px, 5vw, 62px); opacity: .48; }
.home-template-card .home-template-art::after { content: "✦"; }
.home-template-card.tpl-royal .home-template-art { background-image: radial-gradient(ellipse at 50% 12%,#fff9 0 8%,transparent 9%),linear-gradient(145deg,#fffdf8,#e9d9bb); }
.home-template-card.tpl-royal .home-template-art::before { inset: 8px; border: 4px double var(--tpl-accent); border-radius: 18px; }
.home-template-card.tpl-royal .home-template-art::after { content: "❦"; top: 7%; right: 50%; transform: translateX(50%); }
.home-template-card.tpl-garden .home-template-art { background-image: radial-gradient(ellipse at 10% 12%,#d9a9b466 0 12%,transparent 13%),radial-gradient(ellipse at 92% 86%,#9c806466 0 14%,transparent 15%),linear-gradient(145deg,#fff9f8,#e7d3dc); }
.home-template-card.tpl-garden .home-template-art::before { inset: 8px 13% 8px; border: 2px dotted var(--tpl-accent); border-radius: 48% 48% 8px 8px/22% 22% 8px 8px; }
.home-template-card.tpl-garden .home-gallery-flower { content: "❋"; }
.home-template-card.tpl-midnight .home-template-art { background-image: radial-gradient(2px 2px at 20% 18%,#fff 45%,transparent 55%),radial-gradient(2px 2px at 78% 32%,#fff 45%,transparent 55%),radial-gradient(1px 1px at 29% 75%,#fff 45%,transparent 55%),radial-gradient(circle at 50% 35%,#344765,#111a2b 78%); }
.home-template-card.tpl-midnight .home-template-art::before { inset: 9px; border: 3px double var(--tpl-accent); }
.home-template-card.tpl-midnight .home-template-art::after { content: "☾"; top: 13%; right: 16%; }
.home-template-card.tpl-minimal .home-template-art { background-image: linear-gradient(90deg,#d7d2ca 0 2px,transparent 2px),linear-gradient(155deg,#fff,#eeece7); background-size: 20% 100%,100% 100%; background-position: 11% 0,0 0; background-repeat: no-repeat; }
.home-template-card.tpl-minimal .home-template-art::before { inset: 8px; border: 0; border-left: 2px solid var(--tpl-accent); border-radius: 0; }
.home-template-card.tpl-minimal .home-template-art::after { content: ""; top: auto; right: 12%; bottom: 22%; width: 26%; height: 30%; border: 1px solid var(--tpl-line); background: linear-gradient(155deg,#eee9e2,#d4d0c9); }
.home-template-card.tpl-rosewater .home-template-art { background-image: radial-gradient(ellipse at 8% 10%,#c5828b55 0 17%,transparent 18%),radial-gradient(ellipse at 95% 92%,#9a6b7655 0 20%,transparent 21%),linear-gradient(145deg,#fffafa,#efdde0); }
.home-template-card.tpl-rosewater .home-template-art::before { inset: 7px; border: 1px solid #fff; border-radius: 48% 48% 12px 12px/15% 15% 12px 12px; }
.home-template-card.tpl-rosewater .home-mini-invite { padding-top: 28%; }
.home-template-card.tpl-rosewater .home-photo-strip { width: 86%; height: 22%; }
.home-template-card.tpl-terracotta .home-template-art { background-image: radial-gradient(circle at 50% 30%,#e9a35b 0 18%,transparent 18.5%),linear-gradient(180deg,#fcebd7 0 52%,#c77956 52% 65%,#e9c5a0 65%); }
.home-template-card.tpl-terracotta .home-template-art::before { inset: 10px; border: 1px solid #fff9; border-radius: 4px; }
.home-template-card.tpl-terracotta .home-template-art::after { content: "☼"; top: 14%; right: 50%; transform: translateX(50%); }
.home-template-card.tpl-coastal .home-template-art { background-image: radial-gradient(ellipse at 50% 98%,#79aaa9 0 19%,transparent 20%),radial-gradient(ellipse at 50% 105%,#b7d6ce 0 33%,transparent 34%),linear-gradient(180deg,#f7fcfc,#d7e9e8); }
.home-template-card.tpl-coastal .home-template-art::before { inset: 8px; border: 1px solid var(--tpl-line); border-radius: 48% 48% 6px 6px/14% 14% 6px 6px; }
.home-template-card.tpl-coastal .home-template-art::after { content: "〰"; top: auto; right: 50%; bottom: 17%; transform: translateX(50%); }
.home-template-card.tpl-emerald .home-template-art { background-image: radial-gradient(ellipse at 50% 45%,#27614c,#102d29 75%); }
.home-template-card.tpl-emerald .home-template-art::before { inset: 7px; border: 4px double var(--tpl-accent); border-radius: 5px; }
.home-template-card.tpl-emerald .home-template-art::after { content: "✥"; top: 13%; right: 50%; transform: translateX(50%); }
.home-template-card.tpl-marigold .home-template-art { background-image: radial-gradient(circle at 10% 12%,#dc9c2b 0 8%,transparent 8.5%),radial-gradient(circle at 91% 15%,#cf7550 0 9%,transparent 9.5%),radial-gradient(circle at 5% 90%,#db8c37 0 11%,transparent 11.5%),linear-gradient(140deg,#fff8e5,#f1d99b); }
.home-template-card.tpl-marigold .home-template-art::before { inset: 12px; border: 1px solid var(--tpl-accent); border-radius: 50% 50% 8px 8px/18% 18% 8px 8px; }
.home-template-card.tpl-marigold .home-template-art::after { content: "✿"; top: 8%; right: 50%; transform: translateX(50%); }
.home-template-card.tpl-lavender .home-template-art { background-image: radial-gradient(circle at 76% 17%,#fff9 0 10%,transparent 10.5%),radial-gradient(1px 1px at 20% 25%,#fff 50%,transparent 60%),radial-gradient(2px 2px at 77% 55%,#fff 50%,transparent 60%),linear-gradient(150deg,#fbf9ff,#d9cee9); }
.home-template-card.tpl-lavender .home-template-art::before { inset: 9px; border: 1px solid #fff; border-radius: 46% 46% 10px 10px/22% 22% 10px 10px; }
.home-template-card.tpl-lavender .home-template-art::after { content: "☾"; }
.home-template-card.tpl-heritage .home-template-art { background-image: linear-gradient(180deg,#6b202a,#35151e); }
.home-template-card.tpl-heritage .home-template-art::before { inset: 8px; border: 4px double #e0c17c; border-radius: 4px; }
.home-template-card.tpl-heritage .home-template-art::after { content: "❈"; top: 9%; right: 50%; transform: translateX(50%); }
.home-template-card.tpl-sand .home-template-art { background-image: linear-gradient(90deg,#d9c8a8 0 1px,transparent 1px),radial-gradient(ellipse at 90% 12%,#d4c09b55 0 20%,transparent 21%),linear-gradient(145deg,#fffdf5,#e5d8be); background-size: 100% 100%; }
.home-template-card.tpl-sand .home-template-art::before { inset: 9px; border: 0; border-top: 1px solid var(--tpl-accent); border-bottom: 1px solid var(--tpl-accent); border-radius: 0; }
.home-template-card.tpl-sand .home-mini-invite { align-items: flex-start; text-align: left; padding-left: 17%; }
.home-template-card.tpl-sand .home-template-art::after { content: "◌"; top: auto; bottom: 12%; }
.home-template-card.tpl-monsoon .home-template-art { background-image: radial-gradient(ellipse at 0% 12%,#748d6755 0 16%,transparent 17%),radial-gradient(ellipse at 100% 87%,#71896355 0 18%,transparent 19%),linear-gradient(145deg,#f5f8f1,#d2dfcf); }
.home-template-card.tpl-monsoon .home-template-art::before { inset: 8px; border: 1px dashed var(--tpl-accent); }
.home-template-card.tpl-monsoon .home-template-art::after { content: "❧"; }
.home-template-card.tpl-celestial .home-template-art { background-image: radial-gradient(circle at 50% 20%,#e5d8f0 0 13%,transparent 13.5%),radial-gradient(1px 1px at 20% 43%,#fff 50%,transparent 60%),radial-gradient(2px 2px at 80% 62%,#fff 50%,transparent 60%),linear-gradient(160deg,#293b5a,#11182a); }
.home-template-card.tpl-celestial .home-template-art::before { inset: 8px; border: 1px solid #c3d2eb77; border-radius: 50% 50% 4px 4px/20% 20% 4px 4px; }
.home-template-card.tpl-celestial .home-template-art::after { content: "✧ · ✦"; top: 40%; right: 14%; font-size: 24px; }
.home-template-card.tpl-pearl .home-template-art { background-image: radial-gradient(ellipse at center,#fffefa 0 47%,#e9d9ce 48% 49%,transparent 50%),linear-gradient(145deg,#fffefa,#f1e2d9); }
.home-template-card.tpl-pearl .home-template-art::before { inset: 8% 15%; border: 2px solid #d5b2a7; border-radius: 50%; }
.home-template-card.tpl-pearl .home-template-art::after { content: "❀"; top: 15%; right: 50%; transform: translateX(50%); }
.home-template-card.tpl-forest .home-template-art { background-image: repeating-linear-gradient(105deg,transparent 0 24px,#ffffff09 25px 27px),radial-gradient(ellipse at 50% 20%,#315b48,#112d27 80%); }
.home-template-card.tpl-forest .home-template-art::before { inset: 9px; border: 1px solid var(--tpl-accent); border-radius: 48% 48% 5px 5px/20% 20% 5px 5px; }
.home-template-card.tpl-forest .home-template-art::after { content: "♧"; }
.home-template-card.tpl-jaipur .home-template-art { background-image: repeating-linear-gradient(90deg,transparent 0 32px,#ffffff35 33px 35px),linear-gradient(145deg,#fff2ed,#e5aaa7); }
.home-template-card.tpl-jaipur .home-template-art::before { inset: 8px 12% 8px; border: 2px solid #b66d68; border-radius: 50% 50% 4px 4px/20% 20% 4px 4px; }
.home-template-card.tpl-jaipur .home-template-art::after { content: "⌒"; top: 12%; right: 50%; transform: translateX(50%); }
.home-template-card.tpl-olive .home-template-art { background-image: radial-gradient(ellipse at 0% 0%,#88926466 0 17%,transparent 18%),radial-gradient(ellipse at 100% 100%,#88926466 0 17%,transparent 18%),linear-gradient(145deg,#fbfaf2,#dfe0ca); }
.home-template-card.tpl-olive .home-template-art::before { inset: 8px; border: 1px solid #9b9d7d; border-radius: 4px; }
.home-template-card.tpl-olive .home-template-art::after { content: "❧"; top: 17%; right: 17%; transform: rotate(35deg); }
.home-template-card.tpl-vintage .home-template-art { background-image: repeating-linear-gradient(0deg,#ffffff08 0 2px,transparent 2px 5px),linear-gradient(145deg,#f9f3f1,#d8c4c9); }
.home-template-card.tpl-vintage .home-template-art::before { inset: 10px; border: 1px dashed #9a7b81; border-radius: 3px; }
.home-template-card.tpl-vintage .home-template-art::after { content: "✉"; top: 13%; right: 13%; padding: 5px; border: 1px solid #9a7b81; font-size: 20px; }
.home-template-card.tpl-champagne .home-template-art { background-image: radial-gradient(circle at 50% 27%,#fff9 0 12%,transparent 12.5%),repeating-conic-gradient(from 0deg at 50% 27%,#d4b36a22 0 7deg,transparent 7deg 15deg),linear-gradient(145deg,#fffef8,#e8d9b7); }
.home-template-card.tpl-champagne .home-template-art::before { inset: 8px; border: 2px solid #c4a66c; border-radius: 50% 50% 6px 6px/18% 18% 6px 6px; }
.home-template-card.tpl-champagne .home-template-art::after { content: "✧"; top: 12%; right: 50%; transform: translateX(50%); }

/* The full template collection uses tall invitation-card previews like a printed suite. */
.template-grid-reference { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 20px; }
.template-grid-reference .home-template-card .home-template-art { aspect-ratio: .58; border-width: 2px; border-radius: 23px; }
.template-grid-reference .home-template-card .home-preview-button { min-height: 43px; font-size: 13px; }
.template-grid-reference .home-template-card .home-mini-invite { padding-bottom: 31%; }
.template-grid-reference .home-template-card .home-photo-strip { max-width: 76%; }
@media (max-width: 1080px) { .template-grid-reference { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; } }
@media (max-width: 900px) { .template-grid-reference { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 14px; } }
@media (max-width: 620px) {
  .template-grid-reference { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 11px; }
  .template-grid-reference .home-template-card .home-template-art { aspect-ratio: .56; border-radius: 17px; }
  .template-grid-reference .home-template-card .home-preview-button { min-height: 38px; font-size: 11px; }
}

/* Distinct art direction for every invitation layout. */
.home-template-card.tpl-layout-palace .home-template-art { background-image:radial-gradient(ellipse at 50% 18%,#fff9 0 7%,transparent 8%),linear-gradient(150deg,#f8edcf,#d2ad72 48%,#7b492d); }
.home-template-card.tpl-layout-palace .home-template-art::before { inset:8px 12%; border:3px double var(--tpl-accent); border-radius:48% 48% 5px 5px/16% 16% 5px 5px; }
.home-template-card.tpl-layout-palace .home-mini-invite { background:linear-gradient(180deg,#fff8e8dd,#f0dfb9dd); }
.home-template-card.tpl-layout-floral .home-template-art { background-image:radial-gradient(ellipse at 9% 7%,#e6aeb555 0 13%,transparent 14%),radial-gradient(ellipse at 91% 92%,#a4787e55 0 15%,transparent 16%),linear-gradient(145deg,#fffaf8,#e9d9dc); }
.home-template-card.tpl-layout-floral .home-template-art::before { inset:9px 12%; border:2px dotted var(--tpl-accent); border-radius:48% 48% 8px 8px/20% 20% 8px 8px; }
.home-template-card.tpl-layout-gallery .home-mini-invite { padding-top:13%; }
.home-template-card.tpl-layout-gallery .home-photo-strip { order:-1; width:90%; height:24%; max-height:120px; }
.home-template-card.tpl-layout-gallery .home-photo-strip i { border-radius:5px; }
.home-template-card.tpl-layout-sunset .home-template-art { background-image:radial-gradient(circle at 50% 62%,#efb36d 0 17%,transparent 17.5%),linear-gradient(180deg,#f8e4d4 0 55%,#c87859 55% 61%,#e0b485 61% 100%); }
.home-template-card.tpl-layout-sunset .home-mini-invite { background:#fff7e8a8; border-color:#fff9; }
.home-template-card.tpl-layout-sunset .home-template-art::after { content:"☼"; top:45%; right:50%; transform:translateX(50%); }
.home-template-card.tpl-layout-archway .home-template-art { background-image:linear-gradient(145deg,#16473d,#092923); }
.home-template-card.tpl-layout-archway .home-template-art::before { inset:7px 11%; border:4px double var(--tpl-accent); border-radius:48% 48% 3px 3px/23% 23% 3px 3px; }
.home-template-card.tpl-layout-archway .home-mini-invite { background:radial-gradient(ellipse at 50% 45%,#2b6954,#123c32 76%); border-radius:48% 48% 4px 4px/22% 22% 4px 4px; }
.home-template-card.tpl-layout-mandala .home-template-art { background-image:repeating-conic-gradient(from 0deg at 50% 17%,#c2943d33 0deg 6deg,transparent 6deg 12deg),linear-gradient(145deg,#fff7e5,#ead39d); }
.home-template-card.tpl-layout-mandala .home-template-art::before { inset:8px 12%; border:2px solid var(--tpl-accent); border-radius:50% 50% 7px 7px/20% 20% 7px 7px; }
.home-template-card.tpl-layout-mandala .home-mini-invite { background:#fff9edb8; }
.home-template-card.tpl-layout-brocade .home-template-art { background-image:repeating-linear-gradient(45deg,#fff1 0 2px,transparent 2px 14px),repeating-linear-gradient(-45deg,#fff1 0 2px,transparent 2px 14px),linear-gradient(145deg,#741b31,#3b1020); }
.home-template-card.tpl-layout-brocade .home-template-art::before { inset:9px; border:4px double var(--tpl-accent); }
.home-template-card.tpl-layout-brocade .home-mini-invite { background:#58162ccc; border-color:var(--tpl-accent); }
.home-template-card.tpl-layout-portrait .home-mini-invite { align-items:flex-start; text-align:left; padding:24% 12% 28% 16%; }
.home-template-card.tpl-layout-portrait .home-couple { font-size:clamp(19px,2.3vw,30px); }
.home-template-card.tpl-layout-portrait .home-photo-strip { position:absolute; right:8%; top:27%; width:28%; height:37%; flex-direction:column; }
.home-template-card.tpl-layout-foliage .home-template-art { background-image:radial-gradient(ellipse at 0 0,#71845f66 0 18%,transparent 19%),radial-gradient(ellipse at 100% 100%,#71845f66 0 20%,transparent 21%),linear-gradient(145deg,#f5f6e9,#d9dec8); }
.home-template-card.tpl-layout-foliage .home-template-art::before { inset:8px; border:1px dashed var(--tpl-accent); }
.home-template-card.tpl-layout-foliage .home-template-art::after { content:"❧  ❧"; top:9%; right:12%; font-size:clamp(24px,3vw,42px); }
.home-template-card.tpl-layout-moonlit .home-template-art { background-image:radial-gradient(circle at 76% 18%,#f5dfab 0 7%,#f5dfab33 7.5% 14%,transparent 14.5%),radial-gradient(1px 1px at 16% 34%,#fff 50%,transparent 60%),radial-gradient(2px 2px at 83% 61%,#fff 50%,transparent 60%),linear-gradient(160deg,#263c5e,#0d172c); }
.home-template-card.tpl-layout-moonlit .home-template-art::after { content:"✦ · ✧"; top:33%; right:12%; font-size:24px; }
.home-template-card.tpl-layout-medallion .home-template-art { background-image:radial-gradient(ellipse at center,#fffefa 0 40%,#dbc9a8 41% 42%,transparent 43%),linear-gradient(145deg,#f8f1e5,#dfd1b9); }
.home-template-card.tpl-layout-medallion .home-mini-invite { margin:13%; border-radius:50%; padding:12% 12% 34%; }
.home-template-card.tpl-layout-medallion .home-mini-invite::before { inset:8px; border-radius:50%; }
.home-template-card.tpl-layout-canopy .home-template-art { background-image:radial-gradient(ellipse at 8% 4%,#50745a99 0 18%,transparent 19%),radial-gradient(ellipse at 92% 4%,#50745a99 0 18%,transparent 19%),linear-gradient(180deg,#f3f0de,#d8dfc9); }
.home-template-card.tpl-layout-canopy .home-template-art::before { inset:8px 13%; border:2px solid var(--tpl-accent); border-radius:50% 50% 0 0/17% 17% 0 0; }
.home-template-card.tpl-layout-haveli .home-template-art { background-image:repeating-linear-gradient(90deg,transparent 0 19%,#a4554a22 19.5% 20.5%),linear-gradient(145deg,#fff4e7,#dca59a); }
.home-template-card.tpl-layout-haveli .home-template-art::before { inset:8px 12%; border:2px solid var(--tpl-accent); border-radius:50% 50% 5px 5px/18% 18% 5px 5px; }
.home-template-card.tpl-layout-haveli .home-mini-invite { background:linear-gradient(#fffaf0b8,#fffaf0b8); }
.home-template-card.tpl-layout-letterpress .home-template-art { background-image:repeating-linear-gradient(0deg,#705d4b0a 0 1px,transparent 1px 4px),linear-gradient(145deg,#f4ede5,#d8c7bc); }
.home-template-card.tpl-layout-letterpress .home-template-art::before { inset:9px; border:1px dashed var(--tpl-accent); border-radius:3px; }
.home-template-card.tpl-layout-letterpress .home-mini-invite { background:#faf5efcc; }
.home-template-card.tpl-layout-artdeco .home-template-art { background-image:repeating-conic-gradient(from 180deg at 50% 0%,#d0ad6c30 0deg 4deg,transparent 4deg 10deg),linear-gradient(145deg,#fffdf5,#eadbb8); }
.home-template-card.tpl-layout-artdeco .home-template-art::before { inset:8px; border:2px solid var(--tpl-accent); }
.home-template-card.tpl-layout-artdeco .home-mini-invite { background:#fffdf0b8; }

/* Match the larger template gallery cards to the homepage art directions. */
.tpl-card.tpl-royal .tpl-preview { background-image:linear-gradient(145deg,#fffdf8,#e9d9bb); }
.tpl-card.tpl-garden .tpl-preview { background-image:radial-gradient(ellipse at 10% 10%,#d9a9b466 0 15%,transparent 16%),linear-gradient(145deg,#fff9f8,#e7d3dc); }
.tpl-card.tpl-midnight .tpl-preview { background-image:radial-gradient(1px 1px at 20% 20%,#fff 50%,transparent 60%),radial-gradient(1px 1px at 75% 40%,#fff 50%,transparent 60%),linear-gradient(145deg,#304366,#121c32); }
.tpl-card.tpl-minimal .tpl-preview { background-image:linear-gradient(90deg,#d7d2ca 0 2px,transparent 2px),linear-gradient(145deg,#fff,#e9e6df); }
.tpl-card.tpl-rosewater .tpl-preview { background-image:radial-gradient(ellipse at 8% 8%,#c5828b55 0 20%,transparent 21%),linear-gradient(145deg,#fffafa,#efdde0); }
.tpl-card.tpl-terracotta .tpl-preview { background-image:radial-gradient(circle at 50% 18%,#e9a35b 0 22%,transparent 23%),linear-gradient(180deg,#fcebd7 0 60%,#c77956 60%); }
.tpl-card.tpl-coastal .tpl-preview { background-image:radial-gradient(ellipse at 50% 100%,#79aaa9 0 22%,transparent 23%),linear-gradient(180deg,#f7fcfc,#d7e9e8); }
.tpl-card.tpl-emerald .tpl-preview { background-image:radial-gradient(ellipse at center,#27614c,#102d29); }
.tpl-card.tpl-marigold .tpl-preview { background-image:radial-gradient(circle at 10% 10%,#dc9c2b 0 10%,transparent 11%),radial-gradient(circle at 90% 10%,#cf7550 0 10%,transparent 11%),linear-gradient(145deg,#fff8e5,#f1d99b); }
.tpl-card.tpl-lavender .tpl-preview { background-image:radial-gradient(circle at 78% 20%,#fff9 0 14%,transparent 15%),linear-gradient(145deg,#fbf9ff,#d9cee9); }
.tpl-card.tpl-heritage .tpl-preview { background-image:linear-gradient(145deg,#6b202a,#35151e); }
.tpl-card.tpl-sand .tpl-preview { background-image:radial-gradient(ellipse at 90% 10%,#d4c09b66 0 22%,transparent 23%),linear-gradient(145deg,#fffdf5,#e5d8be); }
.tpl-card.tpl-monsoon .tpl-preview { background-image:radial-gradient(ellipse at 0 0,#748d6755 0 20%,transparent 21%),linear-gradient(145deg,#f5f8f1,#d2dfcf); }
.tpl-card.tpl-celestial .tpl-preview { background-image:radial-gradient(circle at 50% 20%,#e5d8f0 0 14%,transparent 15%),linear-gradient(160deg,#293b5a,#11182a); }
.tpl-card.tpl-pearl .tpl-preview { background-image:radial-gradient(ellipse at center,#fffefa 0 45%,#e9d9ce 46% 48%,transparent 49%),linear-gradient(145deg,#fffefa,#f1e2d9); }
.tpl-card.tpl-forest .tpl-preview { background-image:repeating-linear-gradient(105deg,transparent 0 24px,#ffffff09 25px 27px),radial-gradient(ellipse at center,#315b48,#112d27); }
.tpl-card.tpl-jaipur .tpl-preview { background-image:repeating-linear-gradient(90deg,transparent 0 32px,#ffffff35 33px 35px),linear-gradient(145deg,#fff2ed,#e5aaa7); }
.tpl-card.tpl-olive .tpl-preview { background-image:radial-gradient(ellipse at 0 0,#88926466 0 20%,transparent 21%),linear-gradient(145deg,#fbfaf2,#dfe0ca); }
.tpl-card.tpl-vintage .tpl-preview { background-image:repeating-linear-gradient(0deg,#ffffff08 0 2px,transparent 2px 5px),linear-gradient(145deg,#f9f3f1,#d8c4c9); }
.tpl-card.tpl-champagne .tpl-preview { background-image:repeating-conic-gradient(from 0deg at 50% 0%,#d4b36a22 0 7deg,transparent 7deg 15deg),linear-gradient(145deg,#fffef8,#e8d9b7); }

.home-gallery-page > .home-welcome { display: block; padding: 42px 0 36px; background: linear-gradient(110deg,#f5efe6,#fbf8f3 58%,#f5eee9); border-bottom: 1px solid #e9e1d8; }
.home-welcome .wrap { max-width: 900px; text-align: center; }
.home-welcome .eyebrow { color: #805a31; font-weight: 700; }
.home-welcome h1 { max-width: 19ch; margin: 11px auto 10px; color: var(--ink); font: 500 clamp(30px,5vw,48px)/1.12 var(--font-display); }
.home-welcome p:not(.eyebrow) { max-width: 67ch; margin: 0 auto 20px; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.home-welcome .btn { min-height: 44px; }
@media (max-width: 620px) {
  .home-gallery-page > .home-welcome { padding: 28px 0 26px; }
  .home-welcome h1 { max-width: 17ch; font-size: clamp(29px,7vw,38px); }
  .home-welcome p:not(.eyebrow) { max-width: 42ch; font-size: 13px; }
}

/* Mobile navigation stays in the document flow so it expands the header instead of covering page content. */
@media (max-width: 880px) {
  body.has-mobile-nav header.site-header .wrap {
    height: auto;
    min-height: 76px;
    flex-wrap: wrap;
    align-content: flex-start;
  }
  body.has-mobile-nav header.site-header .brand { order: 1; }
  body.has-mobile-nav header.site-header .nav-toggle {
    order: 2;
    margin-left: auto;
    min-width: 44px;
    min-height: 44px;
    z-index: 2;
  }
  body.has-mobile-nav header.site-header .main-nav,
  body.has-mobile-nav.builder-page header.site-header .main-nav {
    display: none;
    position: static;
    inset: auto;
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
    padding: 4px 0 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    background: transparent;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: none;
    box-shadow: none;
    backdrop-filter: none;
  }
  body.has-mobile-nav header.site-header .main-nav.open,
  body.has-mobile-nav.builder-page header.site-header .main-nav.open { display: flex; }
  body.has-mobile-nav header.site-header .main-nav ul {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 16px;
  }
  body.has-mobile-nav header.site-header .main-nav li { width: 100%; }
  body.has-mobile-nav header.site-header .main-nav ul a {
    display: block;
    width: 100%;
    padding: 11px 8px;
    border-bottom: 1px solid var(--line-soft);
  }
  body.has-mobile-nav header.site-header .main-nav > .btn { align-self: flex-start; }
}