/* ============================================================
   Duqit — Wedding Invitation cards, templates & public page
   The .invite-card is a fixed 520×728 (5:7) printable card,
   scaled to fit via --fit.

   PDF-SAFETY: the download runs through html2canvas, which ignores
   conic-gradient, mask, filter and backdrop-filter. Every background
   below therefore uses only: linear/radial gradients, data-URI SVG,
   borders, box-shadow and ::before/::after.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Great+Vibes&family=Josefin+Sans:wght@300;400;600&family=Poiret+One&display=swap');

/* ---------- Editor layout ---------- */
.invite-editor-wrap { display: flex; gap: 40px; align-items: flex-start; max-width: 1400px; margin: 0 auto; }
@media (max-width: 1024px) {
  /* Column mode: align-items:flex-start would size children to their CONTENT
     (the 520px card), overflowing the screen. Force them to the container width. */
  .invite-editor-wrap { flex-direction: column; align-items: stretch; gap: 24px; }
  .invite-form, .invite-preview { width: 100%; max-width: 100%; min-width: 0; }
  /* show the card first on phones — the form follows (same pattern as the homepage promo) */
  .invite-preview { order: -1; }
}
/* container-type lets rows inside reflow on the FORM's width, not the viewport —
   the editors sit in a ~430-710px column even on a 1440px screen, so viewport
   media queries were reflowing far too late (or never). */
.invite-form { flex: 1; min-width: 0; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-sm); container-type: inline-size; }
.invite-preview { flex: 1; min-width: 0; position: sticky; top: 100px; }
@media (max-width: 1024px) { .invite-preview { position: relative; top: 0; } }
.invite-stage { background: var(--surface-hover); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 22px; display: flex; justify-content: center; overflow: hidden; }

.invite-form h3 { font-family: var(--font-alt); font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; color: var(--accent-text); margin: 0 0 16px; }
/* Bare .editor-section too: five pages (menu logo, card photo, album moderation,
   booking inbox, dashboard home) place one OUTSIDE .invite-form, where the
   descendant-only rule left them completely unstyled at every viewport. */
.editor-section, .invite-form .editor-section { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px dashed var(--border-color); }
.editor-section:last-child { border-bottom: 0; padding-bottom: 0; }
/* native file pickers render ~21px tall — too small to hit on a phone */
.editor-section input[type="file"], .invite-form input[type="file"] {
  width: 100%; min-height: 44px; padding: 10px; font-size: .9rem;
  border: 1px dashed var(--border-color); border-radius: 6px; background: var(--bg-color);
}
.invite-form label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.invite-form input, .invite-form textarea { width: 100%; padding: 12px; background: var(--bg-color); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 6px; font-family: var(--font-main); font-size: 0.95rem; margin-bottom: 14px; }
/* ...but a checkbox/radio is not a text field: width:100% stretched them into
   130px-wide, 13px-tall slivers inside the booking hours + menu item rows. */
.invite-form input[type="checkbox"], .invite-form input[type="radio"] { width: auto; min-width: 0; margin: 0; padding: 0; }
.invite-form input:focus, .invite-form textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-soft); }
.invite-form input::placeholder, .invite-form textarea::placeholder { color: var(--text-muted); }
/* Selects had colours but no box: they rendered at the browser default ~19px and
   refused to shrink below their longest option (which pushed whole pages sideways). */
.invite-form select {
  width: 100%; max-width: 100%; min-width: 0; padding: 12px;
  background: var(--bg-color); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 6px;
  font-family: var(--font-main); font-size: 0.95rem; margin-bottom: 14px;
}
.invite-form select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-soft); }
.field-row { display: flex; gap: 14px; }
.field-row > div { flex: 1; min-width: 0; }

/* template picker */
.tpl-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.tpl-choice { cursor: pointer; border: 2px solid var(--border-color); border-radius: 10px; padding: 10px; text-align: center; transition: 0.2s; background: var(--bg-color); position: relative; overflow: hidden; }
.tpl-choice:hover { border-color: var(--accent-primary); }
.tpl-choice.selected { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-soft); }
/* The swatch reuses the template class for its palette, but the templates carry
   large absolutely-positioned ornaments (up to 300px). Contain the swatch and
   suppress those ornaments, or they escape and float over the whole dashboard. */
.tpl-swatch { height: 46px; border-radius: 6px; margin-bottom: 8px; background-size: cover; background-position: center; position: relative; overflow: hidden; box-shadow: none; }
.tpl-swatch::before, .tpl-swatch::after { display: none !important; content: none !important; }
.tpl-choice .tpl-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.tpl-choice .tpl-blurb { font-size: 0.72rem; color: var(--text-muted); }

.preview-guest-select {
  flex: 1; min-width: 0; max-width: 60%; padding: 8px;
  border: 1px solid var(--border-color); border-radius: 6px;
  background: var(--surface-color); color: var(--text-primary);
  font-size: 16px;   /* <16px makes iOS zoom the page on focus */
}

/* guest rows */
.guest-row { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.guest-row input { margin-bottom: 0; }
.btn-add-guest { background: var(--bg-color); border: 1px dashed var(--accent-primary); color: var(--accent-text); border-radius: 6px; padding: 11px; width: 100%; cursor: pointer; font-weight: 600; margin-top: 4px; }
.guest-share { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -2px 0 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--border-color); }
.guest-share .gs-btn { border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-secondary); border-radius: 999px; padding: 5px 12px; font-size: 0.78rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.guest-share .gs-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.guest-share .gs-wa { background: #25D366; border-color: #25D366; color: #062e14; font-weight: 600; }
.guest-share .gs-wa:hover { color: #062e14; opacity: .9; }
.copy-fallback { flex: 1 1 100%; margin-top: 6px; min-height: 74px; padding: 8px; font-size: .8rem;
  border: 1px solid var(--accent-primary); border-radius: 6px; background: var(--bg-color); color: var(--text-primary); }
.rsvp-badge { font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .5px; }
.rsvp-attending { background: var(--success-soft); color: var(--success); }
.rsvp-declined  { background: var(--danger-soft);  color: var(--danger); }
.rsvp-pending   { background: var(--surface-hover); color: var(--text-muted); }
.guest-unsaved { font-size: .75rem; color: var(--text-muted); }

/* ---------- The card (fixed printable size) ---------- */
.invite-card {
  width: 520px; height: 728px; box-sizing: border-box;
  flex: 0 0 auto;   /* never let the flex stage shrink the card — only --fit scales it */
  transform: scale(var(--fit, 1)); transform-origin: top center;
  background: #fff; color: #333; overflow: hidden; position: relative;
  padding: 54px 46px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.invite-card * { box-sizing: border-box; position: relative; z-index: 2; }
.ic-eyebrow { font-size: 0.9rem; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 20px; }
.ic-greeting { font-size: 1.55rem; font-style: italic; margin-bottom: 8px; }
.ic-line { font-size: 1.15rem; letter-spacing: 1px; margin-bottom: 10px; }
.ic-couple { font-size: 3.2rem; line-height: 1.05; margin: 10px 0 14px; font-weight: 500; }
.ic-couple .amp { display: block; font-size: 1.6rem; margin: 4px 0; font-style: italic; opacity: .8; }
.ic-date { font-size: 1.25rem; letter-spacing: 1px; margin-bottom: 12px; }
.ic-venue { font-size: 1.2rem; line-height: 1.55; margin-bottom: 14px; }
.ic-message { font-size: 1.08rem; font-style: italic; line-height: 1.65; margin: 6px 0 14px; max-width: 38ch; }
.ic-rsvp { font-size: 0.95rem; letter-spacing: 1px; opacity: .9; margin-top: auto; }
.ic-rule { width: 60px; height: 1px; background: currentColor; opacity: .4; margin: 14px auto; }

/* ============================================================
   Templates — layered gradients + hand-drawn SVG ornament
   ============================================================ */

/* 1 · Classic Gold — ivory, gold foil bloom, filigree corners */
.tpl-classic-gold {
  color: #4a3f28;
  background-color: #fffdf7;
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(201,162,39,.20), rgba(201,162,39,0) 60%),
    radial-gradient(90% 50% at 50% 110%, rgba(201,162,39,.13), rgba(201,162,39,0) 60%),
    linear-gradient(160deg, #fffdf7 0%, #fdf7e6 100%);
  box-shadow: inset 0 0 0 10px #fffdf7, inset 0 0 0 11px rgba(201,162,39,.55), inset 0 0 0 15px #fffdf7, inset 0 0 0 16px rgba(201,162,39,.28);
}
.tpl-classic-gold::before, .tpl-classic-gold::after {
  content: ""; position: absolute; width: 132px; height: 132px; z-index: 1; opacity: .75;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='1.6'%3E%3Cpath d='M8 74 C8 34 34 8 74 8'/%3E%3Cpath d='M8 96 C8 46 46 8 96 8' opacity='.6'/%3E%3Cpath d='M20 66 C20 40 40 20 66 20' opacity='.45'/%3E%3Ccircle cx='16' cy='16' r='3.5'/%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3Cpath d='M8 118 C30 118 44 104 46 84' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
}
.tpl-classic-gold::before { top: 22px; left: 22px; }
.tpl-classic-gold::after  { bottom: 22px; right: 22px; transform: rotate(180deg); }
.tpl-classic-gold .ic-eyebrow, .tpl-classic-gold .ic-rsvp { color: #a8851c; }
.tpl-classic-gold .ic-couple { color: #8a6d16; }
.tpl-classic-gold .ic-rule { background: #c9a227; opacity: .7; }

/* 2 · Botanical — cream wash, watercolour greens, eucalyptus sprigs */
.tpl-botanical {
  color: #33463a;
  background-color: #f6faf4;
  background-image:
    radial-gradient(70% 45% at 12% 6%, rgba(127,174,134,.30), rgba(127,174,134,0) 70%),
    radial-gradient(65% 42% at 92% 96%, rgba(127,174,134,.26), rgba(127,174,134,0) 70%),
    radial-gradient(50% 35% at 88% 12%, rgba(168,199,150,.20), rgba(168,199,150,0) 70%),
    linear-gradient(180deg, #f9fcf7 0%, #eef6ec 100%);
  box-shadow: inset 0 0 0 1px rgba(94,135,103,.35);
}
.tpl-botanical::before, .tpl-botanical::after {
  content: ""; position: absolute; width: 190px; height: 230px; z-index: 1; opacity: .8;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='230' viewBox='0 0 190 230'%3E%3Cpath d='M30 226 C58 170 78 108 84 26' fill='none' stroke='%235e8767' stroke-width='2.4' opacity='.65'/%3E%3Cg fill='%237fae86' opacity='.55'%3E%3Cellipse cx='58' cy='188' rx='24' ry='12' transform='rotate(-38 58 188)'/%3E%3Cellipse cx='92' cy='176' rx='22' ry='11' transform='rotate(28 92 176)'/%3E%3Cellipse cx='64' cy='146' rx='23' ry='11' transform='rotate(-32 64 146)'/%3E%3Cellipse cx='96' cy='130' rx='21' ry='10' transform='rotate(24 96 130)'/%3E%3Cellipse cx='72' cy='100' rx='21' ry='10' transform='rotate(-28 72 100)'/%3E%3Cellipse cx='98' cy='82' rx='19' ry='9' transform='rotate(22 98 82)'/%3E%3Cellipse cx='80' cy='56' rx='17' ry='8' transform='rotate(-24 80 56)'/%3E%3Cellipse cx='96' cy='38' rx='14' ry='7' transform='rotate(18 96 38)'/%3E%3C/g%3E%3Cg fill='%23a8c796' opacity='.45'%3E%3Cellipse cx='44' cy='166' rx='16' ry='8' transform='rotate(-52 44 166)'/%3E%3Cellipse cx='52' cy='120' rx='15' ry='7' transform='rotate(-48 52 120)'/%3E%3C/g%3E%3C/svg%3E");
}
.tpl-botanical::before { top: -10px; left: -18px; }
.tpl-botanical::after  { bottom: -10px; right: -18px; transform: rotate(180deg); }
.tpl-botanical .ic-eyebrow, .tpl-botanical .ic-rsvp { color: #4f7659; }
.tpl-botanical .ic-couple { color: #35603f; }
.tpl-botanical .ic-rule { background: #5e8767; opacity: .6; }

/* 3 · Minimal Modern — off-white, one fine gold arc, air */
.tpl-minimal {
  color: #222; font-family: 'Josefin Sans', sans-serif;
  background-color: #fff;
  background-image:
    radial-gradient(60% 30% at 50% 0%, rgba(184,137,46,.10), rgba(184,137,46,0) 70%),
    linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  box-shadow: inset 0 0 0 1px #ececec;
}
.tpl-minimal::before {
  content: ""; position: absolute; top: 46px; left: 50%; margin-left: -130px;
  width: 260px; height: 260px; z-index: 1; opacity: .9;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Ccircle cx='130' cy='130' r='120' fill='none' stroke='%23b8892e' stroke-width='1.2' opacity='.55'/%3E%3C/svg%3E");
}
.tpl-minimal::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 54px; height: 1px; z-index: 1;
  background: linear-gradient(90deg, rgba(184,137,46,0), rgba(184,137,46,.5) 50%, rgba(184,137,46,0));
}
.tpl-minimal .ic-couple { font-family: 'Josefin Sans', sans-serif; font-weight: 300; letter-spacing: 2px; font-size: 2.6rem; color: #111; }
.tpl-minimal .ic-eyebrow { letter-spacing: 6px; color: #b8892e; }
.tpl-minimal .ic-greeting { font-style: normal; font-weight: 300; }
.tpl-minimal .ic-rule { width: 40px; background: #b8892e; opacity: .7; }

/* 4 · Romantic Script — blush mesh, drifting petals */
.tpl-romantic {
  color: #6a4a52;
  background-color: #fff5f5;
  background-image:
    radial-gradient(55% 40% at 15% 12%, rgba(240,190,198,.55), rgba(240,190,198,0) 70%),
    radial-gradient(50% 38% at 88% 20%, rgba(247,214,206,.55), rgba(247,214,206,0) 70%),
    radial-gradient(60% 45% at 78% 92%, rgba(238,183,194,.50), rgba(238,183,194,0) 70%),
    radial-gradient(45% 35% at 8% 86%, rgba(250,222,214,.55), rgba(250,222,214,0) 70%),
    linear-gradient(165deg, #fff7f7 0%, #fdeef0 100%);
  box-shadow: inset 0 0 0 1px rgba(183,110,121,.22);
}
.tpl-romantic::before, .tpl-romantic::after {
  content: ""; position: absolute; width: 210px; height: 210px; z-index: 1; opacity: .55;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' viewBox='0 0 210 210'%3E%3Cg fill='%23e2a3ae' opacity='.7'%3E%3Cellipse cx='42' cy='34' rx='19' ry='11' transform='rotate(-28 42 34)'/%3E%3Cellipse cx='72' cy='58' rx='15' ry='9' transform='rotate(22 72 58)'/%3E%3Cellipse cx='30' cy='74' rx='13' ry='8' transform='rotate(48 30 74)'/%3E%3Cellipse cx='96' cy='26' rx='12' ry='7' transform='rotate(-14 96 26)'/%3E%3C/g%3E%3Cg fill='%23f0c4c9' opacity='.8'%3E%3Cellipse cx='60' cy='104' rx='16' ry='9' transform='rotate(-36 60 104)'/%3E%3Cellipse cx='108' cy='72' rx='13' ry='8' transform='rotate(30 108 72)'/%3E%3Cellipse cx='20' cy='40' rx='11' ry='6' transform='rotate(12 20 40)'/%3E%3C/g%3E%3C/svg%3E");
}
.tpl-romantic::before { top: -6px; left: -6px; }
.tpl-romantic::after  { bottom: -6px; right: -6px; transform: rotate(180deg); }
.tpl-romantic .ic-couple { font-family: 'Great Vibes', cursive; font-size: 4rem; color: #b76e79; line-height: 1; }
.tpl-romantic .ic-couple .amp { font-family: 'Great Vibes', cursive; font-size: 2.4rem; opacity: 1; }
.tpl-romantic .ic-greeting { font-family: 'Great Vibes', cursive; font-size: 2rem; color: #b76e79; }
.tpl-romantic .ic-eyebrow, .tpl-romantic .ic-rsvp { color: #bd7f89; }
.tpl-romantic .ic-rule { background: #b76e79; opacity: .55; }

/* 5 · Art Deco — navy, gold sunburst fans, stepped frame */
.tpl-deco {
  color: #e8e2cf; font-family: 'Poiret One', sans-serif;
  background-color: #10233b;
  background-image:
    radial-gradient(70% 45% at 50% 0%, rgba(203,170,94,.22), rgba(203,170,94,0) 70%),
    radial-gradient(70% 45% at 50% 100%, rgba(203,170,94,.16), rgba(203,170,94,0) 70%),
    linear-gradient(170deg, #14294480 0%, #0d1c31 100%);
  box-shadow: inset 0 0 0 9px #10233b, inset 0 0 0 10px rgba(203,170,94,.75), inset 0 0 0 14px #10233b, inset 0 0 0 15px rgba(203,170,94,.35);
}
.tpl-deco::before, .tpl-deco::after {
  content: ""; position: absolute; left: 50%; margin-left: -150px; width: 300px; height: 96px; z-index: 1; opacity: .85;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='96' viewBox='0 0 300 96'%3E%3Cg stroke='%23cbaa5e' stroke-width='1.6' fill='none'%3E%3Cpath d='M150 92 L150 6'/%3E%3Cpath d='M150 92 L120 14' opacity='.85'/%3E%3Cpath d='M150 92 L180 14' opacity='.85'/%3E%3Cpath d='M150 92 L92 26' opacity='.7'/%3E%3Cpath d='M150 92 L208 26' opacity='.7'/%3E%3Cpath d='M150 92 L64 44' opacity='.55'/%3E%3Cpath d='M150 92 L236 44' opacity='.55'/%3E%3Cpath d='M150 92 L40 64' opacity='.4'/%3E%3Cpath d='M150 92 L260 64' opacity='.4'/%3E%3Cpath d='M64 92 L236 92' stroke-width='2'/%3E%3C/g%3E%3Ccircle cx='150' cy='92' r='5' fill='%23cbaa5e'/%3E%3C/svg%3E");
}
.tpl-deco::before { top: 34px; transform: rotate(180deg); }
.tpl-deco::after  { bottom: 34px; }
.tpl-deco .ic-couple { font-family: 'Poiret One', sans-serif; color: #dcc07c; letter-spacing: 3px; font-size: 2.8rem; }
.tpl-deco .ic-eyebrow, .tpl-deco .ic-rsvp { color: #cbaa5e; letter-spacing: 5px; }
.tpl-deco .ic-greeting { font-family: 'Cormorant Garamond', serif; color: #e8e2cf; }
.tpl-deco .ic-rule { background: #cbaa5e; opacity: .9; width: 80px; }

/* 6 · Rustic — kraft fibre texture, warm vignette, sprig & twine */
.tpl-rustic {
  color: #4a3a2b;
  background-color: #f7f1e7;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg stroke='%23b09468' stroke-width='.7' opacity='.30'%3E%3Cpath d='M0 12 H90'/%3E%3Cpath d='M0 41 H90'/%3E%3Cpath d='M0 68 H90'/%3E%3Cpath d='M14 0 V90' opacity='.6'/%3E%3Cpath d='M53 0 V90' opacity='.6'/%3E%3Cpath d='M78 0 V90' opacity='.45'/%3E%3C/g%3E%3Cg fill='%23a5875c' opacity='.22'%3E%3Ccircle cx='24' cy='30' r='1.1'/%3E%3Ccircle cx='66' cy='18' r='.9'/%3E%3Ccircle cx='38' cy='74' r='1'/%3E%3Ccircle cx='80' cy='58' r='.8'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(100% 70% at 50% 50%, rgba(247,241,231,0) 45%, rgba(122,82,48,.16) 100%),
    linear-gradient(170deg, #faf5ec 0%, #f2e9d9 100%);
  box-shadow: inset 0 0 0 1px rgba(154,123,79,.4), inset 0 0 0 6px rgba(247,241,231,.9), inset 0 0 0 7px rgba(154,123,79,.25);
}
.tpl-rustic::before, .tpl-rustic::after {
  content: ""; position: absolute; width: 168px; height: 120px; z-index: 1; opacity: .6;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='120' viewBox='0 0 168 120'%3E%3Cpath d='M6 96 C46 92 96 72 158 22' fill='none' stroke='%239a7b4f' stroke-width='2.2' opacity='.7'/%3E%3Cg fill='%23a8894f' opacity='.5'%3E%3Cellipse cx='44' cy='84' rx='17' ry='8' transform='rotate(-24 44 84)'/%3E%3Cellipse cx='70' cy='72' rx='16' ry='7' transform='rotate(-20 70 72)'/%3E%3Cellipse cx='96' cy='58' rx='15' ry='7' transform='rotate(-26 96 58)'/%3E%3Cellipse cx='120' cy='44' rx='13' ry='6' transform='rotate(-30 120 44)'/%3E%3C/g%3E%3Cg fill='none' stroke='%239a7b4f' stroke-width='1.4' opacity='.45'%3E%3Cpath d='M40 104 C58 96 74 92 92 88'/%3E%3C/g%3E%3C/svg%3E");
}
.tpl-rustic::before { top: 26px; left: 18px; }
.tpl-rustic::after  { bottom: 26px; right: 18px; transform: rotate(180deg); }
.tpl-rustic .ic-couple { color: #7a5230; }
.tpl-rustic .ic-eyebrow, .tpl-rustic .ic-rsvp { color: #8d6f45; }
.tpl-rustic .ic-rule { background: #9a7b4f; opacity: .65; }

/* 7 · Strawberry — pink gingham, white arch, berries and a satin bow (birthday) */
.tpl-strawberry {
  color: #7a3b46;
  background-color: #fbe9ee;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3Cg fill='%23f7b6c9'%3E%3Cpath d='M150 62 C112 20 44 12 30 46 C18 76 74 96 150 72 Z'/%3E%3Cpath d='M150 62 C188 20 256 12 270 46 C282 76 226 96 150 72 Z'/%3E%3Cpath d='M136 68 C118 104 112 132 124 146 L150 128 L176 146 C188 132 182 104 164 68 Z' opacity='.92'/%3E%3C/g%3E%3Cg fill='%23f4a0b8' opacity='.85'%3E%3Cpath d='M150 66 C120 36 68 28 52 50 C74 34 118 44 150 66 Z'/%3E%3Cpath d='M150 66 C180 36 232 28 248 50 C226 34 182 44 150 66 Z'/%3E%3C/g%3E%3Cellipse cx='150' cy='68' rx='20' ry='16' fill='%23f08fab'/%3E%3Cellipse cx='144' cy='63' rx='8' ry='6' fill='%23f9c6d6' opacity='.8'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='728' viewBox='0 0 520 728' preserveAspectRatio='none'%3E%3Cpath d='M46 728 L46 268 C46 148 142 84 260 84 C378 84 474 148 474 268 L474 728 Z' fill='%23ffffff'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg,  rgba(240,150,175,.30) 0 24px, rgba(240,150,175,0) 24px 48px),
    repeating-linear-gradient(90deg, rgba(240,150,175,.30) 0 24px, rgba(240,150,175,0) 24px 48px),
    linear-gradient(170deg, #fdf2f5 0%, #fbe3ea 100%);
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
  background-size: 250px 125px, 100% 100%, auto, auto, auto;
  background-position: center 6px, center, 0 0, 0 0, 0 0;
  box-shadow: inset 0 0 0 1px rgba(214,60,80,.18);
}
.tpl-strawberry::before, .tpl-strawberry::after {
  content: ""; position: absolute; width: 185px; height: 225px; z-index: 1; opacity: .95;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='250' viewBox='0 0 210 250'%3E%3Cellipse cx='38' cy='46' rx='26' ry='13' transform='rotate(-30 38 46)' fill='%236faa5b' opacity='.55'/%3E%3Cellipse cx='96' cy='30' rx='24' ry='12' transform='rotate(20 96 30)' fill='%236faa5b' opacity='.5'/%3E%3Cellipse cx='28' cy='124' rx='25' ry='12' transform='rotate(-52 28 124)' fill='%236faa5b' opacity='.45'/%3E%3Cellipse cx='112' cy='104' rx='22' ry='11' transform='rotate(34 112 104)' fill='%236faa5b' opacity='.45'/%3E%3Cellipse cx='60' cy='186' rx='24' ry='12' transform='rotate(-24 60 186)' fill='%236faa5b' opacity='.4'/%3E%3Cellipse cx='120' cy='168' rx='21' ry='10' transform='rotate(28 120 168)' fill='%236faa5b' opacity='.4'/%3E%3Cg transform='translate(64 54) rotate(-12) scale(1.0)'%3E%3Cpath d='M0 0 C9 0 16 7 16 17 C16 30 7 41 0 47 C-7 41 -16 30 -16 17 C-16 7 -9 0 0 0 Z' fill='%23e0323f'/%3E%3Cpath d='M0 0 C6 0 11 5 11 12 C11 22 5 32 0 38 C-2 30 -3 14 0 0 Z' fill='%23ef5a63' opacity='.55'/%3E%3Cg fill='%23ffe2c9' opacity='.85'%3E%3Cellipse cx='-6' cy='12' rx='1.5' ry='2.2'/%3E%3Cellipse cx='5' cy='10' rx='1.5' ry='2.2'/%3E%3Cellipse cx='0' cy='19' rx='1.5' ry='2.2'/%3E%3Cellipse cx='-8' cy='24' rx='1.4' ry='2'/%3E%3Cellipse cx='7' cy='22' rx='1.4' ry='2'/%3E%3Cellipse cx='-3' cy='31' rx='1.3' ry='1.9'/%3E%3Cellipse cx='4' cy='33' rx='1.3' ry='1.9'/%3E%3C/g%3E%3Cpath d='M-11 2 L-18 -7 L-8 -3 L-4 -12 L0 -3 L4 -12 L8 -3 L18 -7 L11 2 Z' fill='%235d9c4e'/%3E%3Cpath d='M0 -3 L0 -14' stroke='%234e8842' stroke-width='2.4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(126 74) rotate(16) scale(0.82)'%3E%3Cpath d='M0 0 C9 0 16 7 16 17 C16 30 7 41 0 47 C-7 41 -16 30 -16 17 C-16 7 -9 0 0 0 Z' fill='%23e0323f'/%3E%3Cpath d='M0 0 C6 0 11 5 11 12 C11 22 5 32 0 38 C-2 30 -3 14 0 0 Z' fill='%23ef5a63' opacity='.55'/%3E%3Cg fill='%23ffe2c9' opacity='.85'%3E%3Cellipse cx='-6' cy='12' rx='1.5' ry='2.2'/%3E%3Cellipse cx='5' cy='10' rx='1.5' ry='2.2'/%3E%3Cellipse cx='0' cy='19' rx='1.5' ry='2.2'/%3E%3Cellipse cx='-8' cy='24' rx='1.4' ry='2'/%3E%3Cellipse cx='7' cy='22' rx='1.4' ry='2'/%3E%3Cellipse cx='-3' cy='31' rx='1.3' ry='1.9'/%3E%3Cellipse cx='4' cy='33' rx='1.3' ry='1.9'/%3E%3C/g%3E%3Cpath d='M-11 2 L-18 -7 L-8 -3 L-4 -12 L0 -3 L4 -12 L8 -3 L18 -7 L11 2 Z' fill='%235d9c4e'/%3E%3Cpath d='M0 -3 L0 -14' stroke='%234e8842' stroke-width='2.4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(34 104) rotate(-26) scale(0.9)'%3E%3Cpath d='M0 0 C9 0 16 7 16 17 C16 30 7 41 0 47 C-7 41 -16 30 -16 17 C-16 7 -9 0 0 0 Z' fill='%23e0323f'/%3E%3Cpath d='M0 0 C6 0 11 5 11 12 C11 22 5 32 0 38 C-2 30 -3 14 0 0 Z' fill='%23ef5a63' opacity='.55'/%3E%3Cg fill='%23ffe2c9' opacity='.85'%3E%3Cellipse cx='-6' cy='12' rx='1.5' ry='2.2'/%3E%3Cellipse cx='5' cy='10' rx='1.5' ry='2.2'/%3E%3Cellipse cx='0' cy='19' rx='1.5' ry='2.2'/%3E%3Cellipse cx='-8' cy='24' rx='1.4' ry='2'/%3E%3Cellipse cx='7' cy='22' rx='1.4' ry='2'/%3E%3Cellipse cx='-3' cy='31' rx='1.3' ry='1.9'/%3E%3Cellipse cx='4' cy='33' rx='1.3' ry='1.9'/%3E%3C/g%3E%3Cpath d='M-11 2 L-18 -7 L-8 -3 L-4 -12 L0 -3 L4 -12 L8 -3 L18 -7 L11 2 Z' fill='%235d9c4e'/%3E%3Cpath d='M0 -3 L0 -14' stroke='%234e8842' stroke-width='2.4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(96 140) rotate(8) scale(0.95)'%3E%3Cpath d='M0 0 C9 0 16 7 16 17 C16 30 7 41 0 47 C-7 41 -16 30 -16 17 C-16 7 -9 0 0 0 Z' fill='%23e0323f'/%3E%3Cpath d='M0 0 C6 0 11 5 11 12 C11 22 5 32 0 38 C-2 30 -3 14 0 0 Z' fill='%23ef5a63' opacity='.55'/%3E%3Cg fill='%23ffe2c9' opacity='.85'%3E%3Cellipse cx='-6' cy='12' rx='1.5' ry='2.2'/%3E%3Cellipse cx='5' cy='10' rx='1.5' ry='2.2'/%3E%3Cellipse cx='0' cy='19' rx='1.5' ry='2.2'/%3E%3Cellipse cx='-8' cy='24' rx='1.4' ry='2'/%3E%3Cellipse cx='7' cy='22' rx='1.4' ry='2'/%3E%3Cellipse cx='-3' cy='31' rx='1.3' ry='1.9'/%3E%3Cellipse cx='4' cy='33' rx='1.3' ry='1.9'/%3E%3C/g%3E%3Cpath d='M-11 2 L-18 -7 L-8 -3 L-4 -12 L0 -3 L4 -12 L8 -3 L18 -7 L11 2 Z' fill='%235d9c4e'/%3E%3Cpath d='M0 -3 L0 -14' stroke='%234e8842' stroke-width='2.4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(46 178) rotate(-18) scale(0.72)'%3E%3Cpath d='M0 0 C9 0 16 7 16 17 C16 30 7 41 0 47 C-7 41 -16 30 -16 17 C-16 7 -9 0 0 0 Z' fill='%23e0323f'/%3E%3Cpath d='M0 0 C6 0 11 5 11 12 C11 22 5 32 0 38 C-2 30 -3 14 0 0 Z' fill='%23ef5a63' opacity='.55'/%3E%3Cg fill='%23ffe2c9' opacity='.85'%3E%3Cellipse cx='-6' cy='12' rx='1.5' ry='2.2'/%3E%3Cellipse cx='5' cy='10' rx='1.5' ry='2.2'/%3E%3Cellipse cx='0' cy='19' rx='1.5' ry='2.2'/%3E%3Cellipse cx='-8' cy='24' rx='1.4' ry='2'/%3E%3Cellipse cx='7' cy='22' rx='1.4' ry='2'/%3E%3Cellipse cx='-3' cy='31' rx='1.3' ry='1.9'/%3E%3Cellipse cx='4' cy='33' rx='1.3' ry='1.9'/%3E%3C/g%3E%3Cpath d='M-11 2 L-18 -7 L-8 -3 L-4 -12 L0 -3 L4 -12 L8 -3 L18 -7 L11 2 Z' fill='%235d9c4e'/%3E%3Cpath d='M0 -3 L0 -14' stroke='%234e8842' stroke-width='2.4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(132 200) rotate(22) scale(0.8)'%3E%3Cpath d='M0 0 C9 0 16 7 16 17 C16 30 7 41 0 47 C-7 41 -16 30 -16 17 C-16 7 -9 0 0 0 Z' fill='%23e0323f'/%3E%3Cpath d='M0 0 C6 0 11 5 11 12 C11 22 5 32 0 38 C-2 30 -3 14 0 0 Z' fill='%23ef5a63' opacity='.55'/%3E%3Cg fill='%23ffe2c9' opacity='.85'%3E%3Cellipse cx='-6' cy='12' rx='1.5' ry='2.2'/%3E%3Cellipse cx='5' cy='10' rx='1.5' ry='2.2'/%3E%3Cellipse cx='0' cy='19' rx='1.5' ry='2.2'/%3E%3Cellipse cx='-8' cy='24' rx='1.4' ry='2'/%3E%3Cellipse cx='7' cy='22' rx='1.4' ry='2'/%3E%3Cellipse cx='-3' cy='31' rx='1.3' ry='1.9'/%3E%3Cellipse cx='4' cy='33' rx='1.3' ry='1.9'/%3E%3C/g%3E%3Cpath d='M-11 2 L-18 -7 L-8 -3 L-4 -12 L0 -3 L4 -12 L8 -3 L18 -7 L11 2 Z' fill='%235d9c4e'/%3E%3Cpath d='M0 -3 L0 -14' stroke='%234e8842' stroke-width='2.4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(104 44) scale(1.0)'%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(0)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(72)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(144)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(216)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(288)' fill='%23ffffff'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23f4c343'/%3E%3C/g%3E%3Cg transform='translate(20 72) scale(0.8)'%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(0)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(72)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(144)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(216)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(288)' fill='%23ffffff'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23f4c343'/%3E%3C/g%3E%3Cg transform='translate(78 110) scale(0.75)'%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(0)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(72)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(144)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(216)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(288)' fill='%23ffffff'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23f4c343'/%3E%3C/g%3E%3Cg transform='translate(140 140) scale(0.9)'%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(0)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(72)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(144)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(216)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(288)' fill='%23ffffff'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23f4c343'/%3E%3C/g%3E%3Cg transform='translate(24 150) scale(0.7)'%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(0)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(72)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(144)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(216)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(288)' fill='%23ffffff'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23f4c343'/%3E%3C/g%3E%3Cg transform='translate(96 204) scale(0.8)'%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(0)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(72)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(144)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(216)' fill='%23ffffff'/%3E%3Cellipse cx='0' cy='-6' rx='4' ry='6' transform='rotate(288)' fill='%23ffffff'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23f4c343'/%3E%3C/g%3E%3C/svg%3E");
}
.tpl-strawberry::before { top: -30px; left: -52px; }
.tpl-strawberry::after  { bottom: -30px; right: -52px; transform: rotate(180deg); }
/* content clears the bow and sits inside the arch */
.tpl-strawberry .ic-eyebrow { color: #b9566a; letter-spacing: 5px; margin-top: 98px; }
.tpl-strawberry .ic-greeting { color: #a8566a; }
.tpl-strawberry .ic-line { color: #9b6470; }
.tpl-strawberry .ic-couple { font-family: 'Great Vibes', cursive; font-size: 3.7rem; line-height: 1.05; color: #d1213a; }
.tpl-strawberry .ic-couple .amp { font-family: 'Great Vibes', cursive; font-size: 2.2rem; }
.tpl-strawberry .ic-date { color: #c3283f; font-weight: 600; }
.tpl-strawberry .ic-venue { color: #6d4a52; }
.tpl-strawberry .ic-rsvp { color: #b9566a; }
.tpl-strawberry .ic-rule { background: #e2596e; opacity: .7; }

/* 8 · Confetti Party — cream, bunting garland, scattered confetti (birthday) */
.tpl-confetti {
  color: #4a4440;
  background-color: #fffcf5;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='90' viewBox='0 0 520 90'%3E%3Cpath d='M0 22 Q130 52 260 44 Q390 36 520 22' fill='none' stroke='%23b59a6a' stroke-width='2'/%3E%3Cpath d='M30 26 L70 26 L50 60 Z' fill='%23e2574c'/%3E%3Cpath d='M87 33 L127 33 L107 67 Z' fill='%233aa6a0'/%3E%3Cpath d='M144 39 L184 39 L164 73 Z' fill='%23e9b83c'/%3E%3Cpath d='M201 43 L241 43 L221 77 Z' fill='%235b8bd9'/%3E%3Cpath d='M258 44 L298 44 L278 78 Z' fill='%23d97fb0'/%3E%3Cpath d='M315 43 L355 43 L335 77 Z' fill='%23e2574c'/%3E%3Cpath d='M372 39 L412 39 L392 73 Z' fill='%233aa6a0'/%3E%3Cpath d='M429 33 L469 33 L449 67 Z' fill='%23e9b83c'/%3E%3Cpath d='M486 26 L526 26 L506 60 Z' fill='%235b8bd9'/%3E%3C/svg%3E"),
    radial-gradient(90% 55% at 50% 108%, rgba(233,184,60,.16), rgba(233,184,60,0) 65%),
    linear-gradient(170deg, #fffdf8 0%, #fdf3dd 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 90px, auto, auto;
  background-position: top center, 0 0, 0 0;
  box-shadow: inset 0 0 0 1px rgba(226,87,76,.22);
}
.tpl-confetti::before, .tpl-confetti::after {
  content: ""; position: absolute; width: 170px; height: 220px; z-index: 1; opacity: .9;
  background-repeat: no-repeat; background-size: contain;
}
.tpl-confetti::before { top: 96px; left: -26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='220' viewBox='0 0 170 220'%3E%3Crect x='121' y='149' width='11' height='4' fill='%235b8bd9' opacity='.85' transform='rotate(231 121 149)'/%3E%3Crect x='53' y='211' width='8' height='4' fill='%23d97fb0' opacity='.85' transform='rotate(243 53 211)'/%3E%3Crect x='120' y='83' width='7' height='6' fill='%233aa6a0' opacity='.85' transform='rotate(46 120 83)'/%3E%3Ccircle cx='107' cy='121' r='3' fill='%23d97fb0' opacity='.85'/%3E%3Ccircle cx='141' cy='22' r='3' fill='%23e2574c' opacity='.85'/%3E%3Crect x='159' y='13' width='8' height='6' fill='%235b8bd9' opacity='.85' transform='rotate(167 159 13)'/%3E%3Ccircle cx='65' cy='169' r='3' fill='%23e9b83c' opacity='.85'/%3E%3Crect x='123' y='173' width='7' height='6' fill='%23e9b83c' opacity='.85' transform='rotate(208 123 173)'/%3E%3Ccircle cx='71' cy='86' r='3' fill='%233aa6a0' opacity='.85'/%3E%3Ccircle cx='150' cy='202' r='4' fill='%23e2574c' opacity='.85'/%3E%3Ccircle cx='104' cy='23' r='3' fill='%23e2574c' opacity='.85'/%3E%3Crect x='19' y='126' width='11' height='6' fill='%235b8bd9' opacity='.85' transform='rotate(203 19 126)'/%3E%3Ccircle cx='56' cy='205' r='4' fill='%23e9b83c' opacity='.85'/%3E%3Ccircle cx='9' cy='110' r='3' fill='%23e2574c' opacity='.85'/%3E%3Ccircle cx='8' cy='21' r='5' fill='%235b8bd9' opacity='.85'/%3E%3Crect x='54' y='120' width='8' height='5' fill='%23d97fb0' opacity='.85' transform='rotate(97 54 120)'/%3E%3Crect x='104' y='35' width='7' height='5' fill='%235b8bd9' opacity='.85' transform='rotate(215 104 35)'/%3E%3Ccircle cx='157' cy='83' r='5' fill='%23e2574c' opacity='.85'/%3E%3Ccircle cx='153' cy='31' r='4' fill='%23e2574c' opacity='.85'/%3E%3Crect x='8' y='203' width='10' height='4' fill='%23d97fb0' opacity='.85' transform='rotate(168 8 203)'/%3E%3Crect x='25' y='29' width='7' height='6' fill='%233aa6a0' opacity='.85' transform='rotate(298 25 29)'/%3E%3Ccircle cx='100' cy='101' r='5' fill='%23d97fb0' opacity='.85'/%3E%3Ccircle cx='129' cy='153' r='3' fill='%233aa6a0' opacity='.85'/%3E%3Crect x='85' y='64' width='8' height='6' fill='%23d97fb0' opacity='.85' transform='rotate(127 85 64)'/%3E%3Crect x='147' y='56' width='10' height='4' fill='%235b8bd9' opacity='.85' transform='rotate(247 147 56)'/%3E%3Crect x='32' y='33' width='8' height='6' fill='%23e2574c' opacity='.85' transform='rotate(262 32 33)'/%3E%3C/svg%3E"); }
.tpl-confetti::after  { bottom: -12px; right: -26px; transform: rotate(180deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='220' viewBox='0 0 170 220'%3E%3Ccircle cx='80' cy='27' r='4' fill='%23e2574c' opacity='.85'/%3E%3Ccircle cx='141' cy='97' r='3' fill='%233aa6a0' opacity='.85'/%3E%3Ccircle cx='62' cy='164' r='5' fill='%235b8bd9' opacity='.85'/%3E%3Crect x='133' y='113' width='10' height='5' fill='%23e2574c' opacity='.85' transform='rotate(262 133 113)'/%3E%3Ccircle cx='20' cy='58' r='3' fill='%23e2574c' opacity='.85'/%3E%3Crect x='164' y='61' width='9' height='6' fill='%23e9b83c' opacity='.85' transform='rotate(289 164 61)'/%3E%3Ccircle cx='78' cy='175' r='4' fill='%23e9b83c' opacity='.85'/%3E%3Crect x='51' y='189' width='8' height='4' fill='%235b8bd9' opacity='.85' transform='rotate(302 51 189)'/%3E%3Crect x='51' y='142' width='8' height='6' fill='%23e9b83c' opacity='.85' transform='rotate(344 51 142)'/%3E%3Ccircle cx='35' cy='27' r='4' fill='%23e2574c' opacity='.85'/%3E%3Ccircle cx='152' cy='77' r='4' fill='%23d97fb0' opacity='.85'/%3E%3Ccircle cx='144' cy='84' r='3' fill='%235b8bd9' opacity='.85'/%3E%3Ccircle cx='33' cy='164' r='5' fill='%23e2574c' opacity='.85'/%3E%3Crect x='42' y='196' width='8' height='5' fill='%23d97fb0' opacity='.85' transform='rotate(51 42 196)'/%3E%3Ccircle cx='14' cy='20' r='3' fill='%235b8bd9' opacity='.85'/%3E%3Crect x='9' y='62' width='10' height='6' fill='%23e2574c' opacity='.85' transform='rotate(275 9 62)'/%3E%3Crect x='29' y='94' width='7' height='4' fill='%23e2574c' opacity='.85' transform='rotate(193 29 94)'/%3E%3Crect x='73' y='125' width='10' height='5' fill='%23d97fb0' opacity='.85' transform='rotate(100 73 125)'/%3E%3Crect x='61' y='29' width='8' height='6' fill='%23e2574c' opacity='.85' transform='rotate(284 61 29)'/%3E%3Ccircle cx='145' cy='148' r='3' fill='%233aa6a0' opacity='.85'/%3E%3Crect x='9' y='119' width='8' height='6' fill='%23e9b83c' opacity='.85' transform='rotate(336 9 119)'/%3E%3Ccircle cx='111' cy='23' r='4' fill='%233aa6a0' opacity='.85'/%3E%3Crect x='82' y='203' width='9' height='4' fill='%23d97fb0' opacity='.85' transform='rotate(312 82 203)'/%3E%3Crect x='12' y='167' width='10' height='4' fill='%233aa6a0' opacity='.85' transform='rotate(170 12 167)'/%3E%3Crect x='48' y='175' width='11' height='4' fill='%23e2574c' opacity='.85' transform='rotate(172 48 175)'/%3E%3Crect x='66' y='149' width='9' height='4' fill='%235b8bd9' opacity='.85' transform='rotate(230 66 149)'/%3E%3C/svg%3E"); }
.tpl-confetti .ic-eyebrow { color: #e2574c; letter-spacing: 5px; margin-top: 52px; }
.tpl-confetti .ic-couple { color: #d84a3f; }
.tpl-confetti .ic-date { color: #2f8a84; font-weight: 600; }
.tpl-confetti .ic-rsvp { color: #b9584f; }
.tpl-confetti .ic-rule { background: #e2574c; opacity: .65; }
.invite-card.tpl-confetti .ic-decor { --bal-a: #e2574c; --bal-b: #fff8ea; --bal-c: #3aa6a0; --bal-d: #e9b83c; }

/* 9 · Dino Adventure — mint jungle, leafy corners, friendly sauropod (birthday) */
.tpl-dino {
  color: #33513a;
  background-color: #f2faf3;
  background-image:
    radial-gradient(70% 45% at 10% 4%, rgba(143,199,154,.30), rgba(143,199,154,0) 70%),
    radial-gradient(70% 45% at 92% 98%, rgba(143,199,154,.28), rgba(143,199,154,0) 70%),
    linear-gradient(175deg, #f5fcf6 0%, #e2f2e4 100%);
  box-shadow: inset 0 0 0 1px rgba(76,143,90,.35), inset 0 0 0 7px rgba(245,252,246,.9), inset 0 0 0 8px rgba(76,143,90,.22);
}
.tpl-dino::before, .tpl-dino::after {
  content: ""; position: absolute; z-index: 1;
  background-repeat: no-repeat; background-size: contain;
}
.tpl-dino::before { top: -12px; left: -30px; width: 190px; height: 210px; opacity: .85; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='210' viewBox='0 0 190 210'%3E%3Cpath d='M14 6 C34 76 44 136 40 204' fill='none' stroke='%234c8f5a' stroke-width='2.4' opacity='.6'/%3E%3Cellipse cx='44' cy='40' rx='26' ry='12' transform='rotate(-34 44 40)' fill='%235da26b' opacity='.55'/%3E%3Cellipse cx='20' cy='84' rx='24' ry='11' transform='rotate(-58 20 84)' fill='%235da26b' opacity='.5'/%3E%3Cellipse cx='52' cy='110' rx='23' ry='11' transform='rotate(-28 52 110)' fill='%235da26b' opacity='.5'/%3E%3Cellipse cx='24' cy='150' rx='21' ry='10' transform='rotate(-52 24 150)' fill='%235da26b' opacity='.45'/%3E%3Cellipse cx='50' cy='180' rx='20' ry='10' transform='rotate(-24 50 180)' fill='%235da26b' opacity='.4'/%3E%3Cellipse cx='84' cy='26' rx='18' ry='9' transform='rotate(20 84 26)' fill='%238fc79a' opacity='.4'/%3E%3Cellipse cx='96' cy='66' rx='16' ry='8' transform='rotate(26 96 66)' fill='%238fc79a' opacity='.38'/%3E%3C/svg%3E"); }
.tpl-dino::after  { bottom: -14px; right: -44px; width: 210px; height: 174px; opacity: .95; background-image: url("%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='190' viewBox='0 0 230 190'%3E%3Cpath d='M78 168 C80 138 98 128 122 128 C146 128 158 138 166 122 C176 100 168 66 188 46 C200 34 220 32 230 44 C238 54 236 66 228 72 C240 74 246 84 242 92 C236 102 222 100 214 92 C204 104 202 122 206 138 C210 152 202 166 188 168 Z' fill='%234c8f5a' opacity='.85' transform='translate(-24 0)'/%3E%3Ccircle cx='202' cy='52' r='2.6' fill='%23f2faf3'/%3E%3Cellipse cx='196' cy='20' rx='20' ry='10' transform='rotate(18 196 20)' fill='%235da26b' opacity='.45'/%3E%3Cellipse cx='160' cy='34' rx='17' ry='9' transform='rotate(-16 160 34)' fill='%238fc79a' opacity='.4'/%3E%3Ccircle cx='150' cy='176' r='4' fill='%23e9c04b' opacity='.8'/%3E%3Ccircle cx='126' cy='182' r='3' fill='%238fc79a' opacity='.8'/%3E%3C/svg%3E"); }
.tpl-dino .ic-eyebrow { color: #4c8f5a; letter-spacing: 5px; }
.tpl-dino .ic-couple { color: #2f7a42; }
.tpl-dino .ic-date { color: #3f7a4e; font-weight: 600; }
.tpl-dino .ic-rsvp { color: #57855f; }
.tpl-dino .ic-rule { background: #4c8f5a; opacity: .6; }
.invite-card.tpl-dino .ic-decor { --bal-a: #4c8f5a; --bal-b: #f5fbe9; --bal-c: #8fc79a; --bal-d: #e9c04b; }

/* 10 · Golden Milestone — deep navy, double gold frame, sparkles (adult birthday) */
.tpl-milestone {
  color: #efe6ce;
  background-color: #101726;
  background-image:
    radial-gradient(75% 45% at 50% 0%, rgba(217,180,92,.20), rgba(217,180,92,0) 70%),
    radial-gradient(75% 45% at 50% 100%, rgba(217,180,92,.14), rgba(217,180,92,0) 70%),
    linear-gradient(170deg, #141d31 0%, #0d1322 100%);
  box-shadow: inset 0 0 0 9px #101726, inset 0 0 0 10px rgba(217,180,92,.75), inset 0 0 0 14px #101726, inset 0 0 0 15px rgba(217,180,92,.35);
}
.tpl-milestone::before, .tpl-milestone::after {
  content: ""; position: absolute; width: 180px; height: 190px; z-index: 1; opacity: .9;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='190' viewBox='0 0 180 190'%3E%3Cpath transform='translate(120 44) scale(1.3)' fill='%23d9b45c' opacity='.95' d='M0 -14 C1.5 -4 4 -1.5 14 0 C4 1.5 1.5 4 0 14 C-1.5 4 -4 1.5 -14 0 C-4 -1.5 -1.5 -4 0 -14 Z'/%3E%3Cpath transform='translate(60 26) scale(0.7)' fill='%23d9b45c' opacity='.7' d='M0 -14 C1.5 -4 4 -1.5 14 0 C4 1.5 1.5 4 0 14 C-1.5 4 -4 1.5 -14 0 C-4 -1.5 -1.5 -4 0 -14 Z'/%3E%3Cpath transform='translate(158 96) scale(0.8)' fill='%23d9b45c' opacity='.75' d='M0 -14 C1.5 -4 4 -1.5 14 0 C4 1.5 1.5 4 0 14 C-1.5 4 -4 1.5 -14 0 C-4 -1.5 -1.5 -4 0 -14 Z'/%3E%3Cpath transform='translate(92 120) scale(0.5)' fill='%23d9b45c' opacity='.6' d='M0 -14 C1.5 -4 4 -1.5 14 0 C4 1.5 1.5 4 0 14 C-1.5 4 -4 1.5 -14 0 C-4 -1.5 -1.5 -4 0 -14 Z'/%3E%3Cpath transform='translate(140 158) scale(0.6)' fill='%23d9b45c' opacity='.55' d='M0 -14 C1.5 -4 4 -1.5 14 0 C4 1.5 1.5 4 0 14 C-1.5 4 -4 1.5 -14 0 C-4 -1.5 -1.5 -4 0 -14 Z'/%3E%3Ccircle cx='40' cy='70' r='2.2' fill='%23d9b45c' opacity='.6'/%3E%3Ccircle cx='104' cy='80' r='1.8' fill='%23d9b45c' opacity='.5'/%3E%3Ccircle cx='70' cy='150' r='2' fill='%23d9b45c' opacity='.5'/%3E%3C/svg%3E");
}
.tpl-milestone::before { top: 18px; right: 16px; }
.tpl-milestone::after  { bottom: 18px; left: 16px; transform: rotate(180deg); }
.tpl-milestone .ic-eyebrow { color: #d9b45c; letter-spacing: 6px; }
.tpl-milestone .ic-greeting { color: #efe6ce; }
.tpl-milestone .ic-couple { color: #e3c169; }
.tpl-milestone .ic-date { color: #d9b45c; font-weight: 600; }
.tpl-milestone .ic-venue { color: #d8cfb6; }
.tpl-milestone .ic-message { color: #cfc5aa; }
.tpl-milestone .ic-rsvp { color: #c9ab60; }
.tpl-milestone .ic-rule { background: #d9b45c; opacity: .8; width: 80px; }
.invite-card.tpl-milestone .ic-decor { --bal-a: #d9b45c; --bal-b: #f6efdd; --bal-c: #b98f3e; --bal-d: #8a6d2c; }
.invite-card.tpl-milestone .ic-decor .balloon::after { border-left-color: rgba(217,180,92,.45); }

/* 11 · Golden Rings — ivory, interlocking gold rings (engagement) */
.tpl-rings {
  color: #4a4030;
  background-color: #fffdf8;
  background-image:
    radial-gradient(110% 55% at 50% -8%, rgba(194,161,90,.20), rgba(194,161,90,0) 62%),
    linear-gradient(165deg, #fffdf8 0%, #f6eeda 100%);
  box-shadow: inset 0 0 0 1px rgba(194,161,90,.30), inset 0 0 0 7px rgba(255,253,248,.9), inset 0 0 0 8px rgba(194,161,90,.22);
}
.tpl-rings::before {
  content: ""; position: absolute; top: 4px; left: 50%; margin-left: -90px;
  width: 180px; height: 172px; z-index: 1; opacity: .5;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='200' viewBox='0 0 210 200'%3E%3Cg fill='none' stroke='%23c2a15a' stroke-width='5'%3E%3Ccircle cx='84' cy='104' r='46' opacity='.95'/%3E%3Ccircle cx='128' cy='104' r='46' opacity='.7'/%3E%3C/g%3E%3Cg fill='none' stroke='%23e2cf9a' stroke-width='1.6' opacity='.8'%3E%3Ccircle cx='84' cy='104' r='38'/%3E%3Ccircle cx='128' cy='104' r='38'/%3E%3C/g%3E%3Cpath transform='translate(160 44) scale(1.0)' fill='%23c2a15a' opacity='.9' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3Cpath transform='translate(44 52) scale(0.62)' fill='%23c2a15a' opacity='.65' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3Cpath transform='translate(174 148) scale(0.55)' fill='%23c2a15a' opacity='.5' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3C/svg%3E");
}
.tpl-rings::after {
  content: ""; position: absolute; bottom: 18px; right: 18px; width: 150px; height: 150px; z-index: 1; opacity: .8;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23c2a15a' stroke-width='1.5' opacity='.65'%3E%3Cpath d='M8 92 C8 44 44 8 92 8'/%3E%3Cpath d='M8 118 C8 52 52 8 118 8' opacity='.6'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='3.4' fill='%23c2a15a' opacity='.8'/%3E%3C/svg%3E");
  transform: rotate(180deg);
}
.tpl-rings .ic-eyebrow { color: #a98a3f; letter-spacing: 5px; margin-top: 132px; }
.tpl-rings .ic-couple { color: #8a6d16; }
.tpl-rings .ic-date { color: #7c6733; font-weight: 600; }
.tpl-rings .ic-rsvp { color: #a98a3f; }
.tpl-rings .ic-rule { background: #c2a15a; opacity: .75; }

/* 12 · Blush Bloom — soft pink blooms and script (engagement) */
.tpl-blush-bloom {
  color: #6d4a53;
  background-color: #fff6f7;
  background-image:
    radial-gradient(60% 42% at 12% 8%, rgba(231,168,187,.40), rgba(231,168,187,0) 70%),
    radial-gradient(60% 42% at 90% 94%, rgba(231,168,187,.36), rgba(231,168,187,0) 70%),
    linear-gradient(168deg, #fff8f9 0%, #fbe6ec 100%);
  box-shadow: inset 0 0 0 1px rgba(201,111,134,.22);
}
.tpl-blush-bloom::before, .tpl-blush-bloom::after {
  content: ""; position: absolute; width: 165px; height: 225px; z-index: 1; opacity: .9;
  background-repeat: no-repeat; background-size: contain;
}
.tpl-blush-bloom::before { top: -26px; left: -52px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='165' height='225' viewBox='0 0 165 225'%3E%3Cellipse cx='17' cy='134' rx='18' ry='12' transform='rotate(-42 17 134)' fill='%23e7a8bb' opacity='.36'/%3E%3Cellipse cx='49' cy='42' rx='25' ry='10' transform='rotate(31 49 42)' fill='%23e7a8bb' opacity='.39'/%3E%3Cellipse cx='51' cy='203' rx='17' ry='9' transform='rotate(-43 51 203)' fill='%23e7a8bb' opacity='.42'/%3E%3Cellipse cx='128' cy='148' rx='23' ry='10' transform='rotate(15 128 148)' fill='%23e7a8bb' opacity='.37'/%3E%3Cellipse cx='44' cy='19' rx='23' ry='11' transform='rotate(-35 44 19)' fill='%23e7a8bb' opacity='.41'/%3E%3Cellipse cx='98' cy='114' rx='22' ry='13' transform='rotate(-29 98 114)' fill='%23e7a8bb' opacity='.41'/%3E%3Cellipse cx='69' cy='120' rx='26' ry='13' transform='rotate(-53 69 120)' fill='%23e7a8bb' opacity='.36'/%3E%3Cg transform='translate(127 64) scale(0.86)'%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(0)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(72)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(144)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(216)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(288)' fill='%23fbe2e9'/%3E%3Ccircle r='3' fill='%23e59aae'/%3E%3C/g%3E%3Cg transform='translate(46 55) scale(1.08)'%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(0)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(72)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(144)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(216)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(288)' fill='%23fbe2e9'/%3E%3Ccircle r='3' fill='%23e59aae'/%3E%3C/g%3E%3Cg transform='translate(68 25) scale(0.74)'%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(0)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(72)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(144)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(216)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(288)' fill='%23fbe2e9'/%3E%3Ccircle r='3' fill='%23e59aae'/%3E%3C/g%3E%3Cg transform='translate(87 130) scale(0.99)'%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(0)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(72)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(144)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(216)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(288)' fill='%23fbe2e9'/%3E%3Ccircle r='3' fill='%23e59aae'/%3E%3C/g%3E%3Cg transform='translate(47 71) scale(1.06)'%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(0)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(72)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(144)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(216)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(288)' fill='%23fbe2e9'/%3E%3Ccircle r='3' fill='%23e59aae'/%3E%3C/g%3E%3Cg transform='translate(113 112) scale(0.79)'%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(0)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(72)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(144)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(216)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(288)' fill='%23fbe2e9'/%3E%3Ccircle r='3' fill='%23e59aae'/%3E%3C/g%3E%3C/svg%3E"); }
.tpl-blush-bloom::after  { bottom: -26px; right: -52px; transform: rotate(180deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='165' height='225' viewBox='0 0 165 225'%3E%3Cellipse cx='104' cy='30' rx='23' ry='13' transform='rotate(-2 104 30)' fill='%23e7a8bb' opacity='.53'/%3E%3Cellipse cx='101' cy='79' rx='25' ry='12' transform='rotate(-10 101 79)' fill='%23e7a8bb' opacity='.54'/%3E%3Cellipse cx='24' cy='121' rx='17' ry='9' transform='rotate(-60 24 121)' fill='%23e7a8bb' opacity='.43'/%3E%3Cellipse cx='137' cy='199' rx='25' ry='9' transform='rotate(57 137 199)' fill='%23e7a8bb' opacity='.45'/%3E%3Cellipse cx='123' cy='72' rx='20' ry='13' transform='rotate(5 123 72)' fill='%23e7a8bb' opacity='.46'/%3E%3Cellipse cx='127' cy='75' rx='17' ry='13' transform='rotate(-13 127 75)' fill='%23e7a8bb' opacity='.46'/%3E%3Cellipse cx='101' cy='156' rx='26' ry='10' transform='rotate(-30 101 156)' fill='%23e7a8bb' opacity='.36'/%3E%3Cg transform='translate(36 103) scale(0.74)'%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(0)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(72)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(144)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(216)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(288)' fill='%23fbe2e9'/%3E%3Ccircle r='3' fill='%23e59aae'/%3E%3C/g%3E%3Cg transform='translate(94 116) scale(0.93)'%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(0)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(72)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(144)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(216)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(288)' fill='%23fbe2e9'/%3E%3Ccircle r='3' fill='%23e59aae'/%3E%3C/g%3E%3Cg transform='translate(124 82) scale(0.74)'%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(0)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(72)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(144)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(216)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(288)' fill='%23fbe2e9'/%3E%3Ccircle r='3' fill='%23e59aae'/%3E%3C/g%3E%3Cg transform='translate(131 76) scale(1.12)'%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(0)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(72)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(144)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(216)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(288)' fill='%23fbe2e9'/%3E%3Ccircle r='3' fill='%23e59aae'/%3E%3C/g%3E%3Cg transform='translate(128 103) scale(0.8)'%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(0)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(72)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(144)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(216)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(288)' fill='%23fbe2e9'/%3E%3Ccircle r='3' fill='%23e59aae'/%3E%3C/g%3E%3Cg transform='translate(115 46) scale(1.05)'%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(0)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(72)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(144)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(216)' fill='%23fbe2e9'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(288)' fill='%23fbe2e9'/%3E%3Ccircle r='3' fill='%23e59aae'/%3E%3C/g%3E%3C/svg%3E"); }
.tpl-blush-bloom .ic-eyebrow { color: #c96f86; letter-spacing: 5px; }
.tpl-blush-bloom .ic-couple { font-family: 'Great Vibes', cursive; font-size: 3.9rem; line-height: 1.05; color: #b8556f; }
.tpl-blush-bloom .ic-couple .amp { font-family: 'Great Vibes', cursive; font-size: 2.2rem; }
.tpl-blush-bloom .ic-greeting { font-family: 'Great Vibes', cursive; font-size: 1.9rem; color: #b8556f; }
.tpl-blush-bloom .ic-date { color: #a4566a; font-weight: 600; }
.tpl-blush-bloom .ic-rsvp { color: #c96f86; }
.tpl-blush-bloom .ic-rule { background: #c96f86; opacity: .6; }

/* 13 · Little Star — pale blue, sleepy moon and stars (baby shower) */
.tpl-little-star {
  color: #37475e;
  background-color: #f4f8fd;
  background-image:
    radial-gradient(90% 50% at 50% -6%, rgba(107,143,196,.22), rgba(107,143,196,0) 65%),
    linear-gradient(172deg, #f7fafe 0%, #e3edf9 100%);
  box-shadow: inset 0 0 0 1px rgba(107,143,196,.26), inset 0 0 0 7px rgba(247,250,254,.9), inset 0 0 0 8px rgba(107,143,196,.18);
}
.tpl-little-star::before {
  content: ""; position: absolute; top: 24px; right: 18px; width: 180px; height: 190px; z-index: 1; opacity: .85;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='190' viewBox='0 0 180 190'%3E%3Cpath d='M120 34 A54 54 0 1 0 120 142 A44 44 0 1 1 120 34 Z' fill='%238fb4dd' opacity='.85'/%3E%3Ccircle cx='104' cy='66' r='3' fill='%23f4f8fd' opacity='.9'/%3E%3Cpath transform='translate(44 40) scale(0.8)' fill='%23c8dcf2' opacity='1' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3Cpath transform='translate(150 118) scale(0.6)' fill='%23c8dcf2' opacity='1' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3Cpath transform='translate(60 150) scale(0.5)' fill='%23c8dcf2' opacity='1' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3C/svg%3E");
}
.tpl-little-star::after {
  content: ""; position: absolute; bottom: -10px; left: -20px; width: 170px; height: 220px; z-index: 1; opacity: .85;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='220' viewBox='0 0 170 220'%3E%3Cpath transform='translate(30 26) scale(0.7)' fill='%23a9c8e8' opacity='.8' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3Cpath transform='translate(110 52) scale(0.5)' fill='%23a9c8e8' opacity='.6' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3Cpath transform='translate(58 96) scale(0.85)' fill='%23a9c8e8' opacity='.75' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3Cpath transform='translate(140 130) scale(0.55)' fill='%23a9c8e8' opacity='.55' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3Cpath transform='translate(26 160) scale(0.6)' fill='%23a9c8e8' opacity='.6' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3Cpath transform='translate(104 194) scale(0.7)' fill='%23a9c8e8' opacity='.7' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3Ccircle cx='84' cy='140' r='2.4' fill='%23a9c8e8' opacity='.6'/%3E%3Ccircle cx='148' cy='40' r='2' fill='%23a9c8e8' opacity='.5'/%3E%3C/svg%3E");
}
.tpl-little-star .ic-eyebrow { color: #6b8fc4; letter-spacing: 5px; margin-top: 78px; }
.tpl-little-star .ic-couple { color: #3f6296; }
.tpl-little-star .ic-date { color: #4a6f9f; font-weight: 600; }
.tpl-little-star .ic-rsvp { color: #6b8fc4; }
.tpl-little-star .ic-rule { background: #6b8fc4; opacity: .6; }
.invite-card.tpl-little-star .ic-decor { --bal-a: #6b8fc4; --bal-b: #f7fafe; --bal-c: #a9c8e8; --bal-d: #4a6f9f; }

/* 14 · Pastel Clouds — mint and peach clouds (baby shower) */
.tpl-pastel-cloud {
  color: #3f5750;
  background-color: #f6fbf8;
  background-image:
    radial-gradient(70% 45% at 14% 6%, rgba(168,214,192,.34), rgba(168,214,192,0) 70%),
    radial-gradient(70% 45% at 88% 96%, rgba(246,201,168,.34), rgba(246,201,168,0) 70%),
    linear-gradient(170deg, #f8fcfa 0%, #e6f2ec 100%);
  box-shadow: inset 0 0 0 1px rgba(123,181,156,.28);
}
.tpl-pastel-cloud::before {
  content: ""; position: absolute; top: -6px; left: -24px; width: 200px; height: 180px; z-index: 1; opacity: .95;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='180' viewBox='0 0 200 180'%3E%3Cg transform='translate(70 46) scale(1.0)' fill='%23a8d6c0' opacity='.55'%3E%3Cellipse cx='0' cy='0' rx='34' ry='20'/%3E%3Cellipse cx='-24' cy='6' rx='22' ry='14'/%3E%3Cellipse cx='24' cy='6' rx='24' ry='15'/%3E%3Cellipse cx='4' cy='-12' rx='20' ry='14'/%3E%3C/g%3E%3Cg transform='translate(140 108) scale(0.72)' fill='%23f6c9a8' opacity='.5'%3E%3Cellipse cx='0' cy='0' rx='34' ry='20'/%3E%3Cellipse cx='-24' cy='6' rx='22' ry='14'/%3E%3Cellipse cx='24' cy='6' rx='24' ry='15'/%3E%3Cellipse cx='4' cy='-12' rx='20' ry='14'/%3E%3C/g%3E%3Cg transform='translate(40 140) scale(0.58)' fill='%23a8d6c0' opacity='.4'%3E%3Cellipse cx='0' cy='0' rx='34' ry='20'/%3E%3Cellipse cx='-24' cy='6' rx='22' ry='14'/%3E%3Cellipse cx='24' cy='6' rx='24' ry='15'/%3E%3Cellipse cx='4' cy='-12' rx='20' ry='14'/%3E%3C/g%3E%3C/svg%3E");
}
.tpl-pastel-cloud::after {
  content: ""; position: absolute; bottom: -6px; right: -74px; width: 200px; height: 170px; z-index: 1; opacity: .95;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='170' viewBox='0 0 200 170'%3E%3Cg transform='translate(120 52) scale(0.9)' fill='%23f6c9a8' opacity='.5'%3E%3Cellipse cx='0' cy='0' rx='34' ry='20'/%3E%3Cellipse cx='-24' cy='6' rx='22' ry='14'/%3E%3Cellipse cx='24' cy='6' rx='24' ry='15'/%3E%3Cellipse cx='4' cy='-12' rx='20' ry='14'/%3E%3C/g%3E%3Cg transform='translate(52 108) scale(0.68)' fill='%23a8d6c0' opacity='.5'%3E%3Cellipse cx='0' cy='0' rx='34' ry='20'/%3E%3Cellipse cx='-24' cy='6' rx='22' ry='14'/%3E%3Cellipse cx='24' cy='6' rx='24' ry='15'/%3E%3Cellipse cx='4' cy='-12' rx='20' ry='14'/%3E%3C/g%3E%3Cg transform='translate(150 138) scale(0.5)' fill='%23a8d6c0' opacity='.38'%3E%3Cellipse cx='0' cy='0' rx='34' ry='20'/%3E%3Cellipse cx='-24' cy='6' rx='22' ry='14'/%3E%3Cellipse cx='24' cy='6' rx='24' ry='15'/%3E%3Cellipse cx='4' cy='-12' rx='20' ry='14'/%3E%3C/g%3E%3C/svg%3E");
}
.tpl-pastel-cloud .ic-eyebrow { color: #5f9c82; letter-spacing: 5px; margin-top: 62px; }
.tpl-pastel-cloud .ic-couple { color: #35735c; }
.tpl-pastel-cloud .ic-date { color: #c07a45; font-weight: 600; }
.tpl-pastel-cloud .ic-rsvp { color: #5f9c82; }
.tpl-pastel-cloud .ic-rule { background: #7bb59c; opacity: .65; }
.invite-card.tpl-pastel-cloud .ic-decor { --bal-a: #7bb59c; --bal-b: #fdf6ee; --bal-c: #f0b183; --bal-d: #4f8d73; }

/* 15 · Lotus — serene white with a saffron lotus (almsgiving) */
.tpl-lotus {
  color: #5a4a33;
  background-color: #fffcf5;
  background-image:
    radial-gradient(95% 50% at 50% 104%, rgba(217,135,63,.20), rgba(217,135,63,0) 62%),
    linear-gradient(172deg, #fffdf9 0%, #f8efdc 100%);
  box-shadow: inset 0 0 0 1px rgba(217,135,63,.24);
}
.tpl-lotus::before {
  content: ""; position: absolute; bottom: -18px; left: -34px;
  width: 175px; height: 166px; z-index: 1; opacity: .8;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='190' viewBox='0 0 200 190'%3E%3Cg transform='translate(100 150) scale(1.05)'%3E%3Cpath transform='rotate(-58)' fill='%23d9873f' opacity='.9' d='M0 0 C11 -16 11 -40 0 -58 C-11 -40 -11 -16 0 0 Z'/%3E%3Cpath transform='rotate(-34)' fill='%23f0b878' opacity='.9' d='M0 0 C11 -16 11 -40 0 -58 C-11 -40 -11 -16 0 0 Z'/%3E%3Cpath transform='rotate(-12)' fill='%23d9873f' opacity='.9' d='M0 0 C11 -16 11 -40 0 -58 C-11 -40 -11 -16 0 0 Z'/%3E%3Cpath transform='rotate(12)' fill='%23f0b878' opacity='.9' d='M0 0 C11 -16 11 -40 0 -58 C-11 -40 -11 -16 0 0 Z'/%3E%3Cpath transform='rotate(34)' fill='%23d9873f' opacity='.9' d='M0 0 C11 -16 11 -40 0 -58 C-11 -40 -11 -16 0 0 Z'/%3E%3Cpath transform='rotate(58)' fill='%23f0b878' opacity='.9' d='M0 0 C11 -16 11 -40 0 -58 C-11 -40 -11 -16 0 0 Z'/%3E%3C/g%3E%3Cpath d='M14 176 C60 162 140 162 186 176' fill='none' stroke='%23d9873f' stroke-width='1.6' opacity='.5'/%3E%3Cellipse cx='42' cy='150' rx='26' ry='11' transform='rotate(-18 42 150)' fill='%238fae6e' opacity='.45'/%3E%3Cellipse cx='158' cy='152' rx='24' ry='10' transform='rotate(16 158 152)' fill='%238fae6e' opacity='.4'/%3E%3C/svg%3E");
}
.tpl-lotus::after {
  content: ""; position: absolute; top: 16px; right: 16px; width: 140px; height: 140px; z-index: 1; opacity: .7;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg transform='translate(70 112) scale(0.62)'%3E%3Cpath transform='rotate(-58)' fill='%23d9873f' opacity='.9' d='M0 0 C11 -16 11 -40 0 -58 C-11 -40 -11 -16 0 0 Z'/%3E%3Cpath transform='rotate(-34)' fill='%23f0b878' opacity='.9' d='M0 0 C11 -16 11 -40 0 -58 C-11 -40 -11 -16 0 0 Z'/%3E%3Cpath transform='rotate(-12)' fill='%23d9873f' opacity='.9' d='M0 0 C11 -16 11 -40 0 -58 C-11 -40 -11 -16 0 0 Z'/%3E%3Cpath transform='rotate(12)' fill='%23f0b878' opacity='.9' d='M0 0 C11 -16 11 -40 0 -58 C-11 -40 -11 -16 0 0 Z'/%3E%3Cpath transform='rotate(34)' fill='%23d9873f' opacity='.9' d='M0 0 C11 -16 11 -40 0 -58 C-11 -40 -11 -16 0 0 Z'/%3E%3Cpath transform='rotate(58)' fill='%23f0b878' opacity='.9' d='M0 0 C11 -16 11 -40 0 -58 C-11 -40 -11 -16 0 0 Z'/%3E%3C/g%3E%3Ccircle cx='24' cy='40' r='2.6' fill='%23d9873f' opacity='.55'/%3E%3Ccircle cx='114' cy='30' r='2' fill='%23d9873f' opacity='.45'/%3E%3C/svg%3E");
}
.tpl-lotus .ic-eyebrow { color: #c0762f; letter-spacing: 5px; }
.tpl-lotus .ic-couple { color: #9a6220; }
.tpl-lotus .ic-date { color: #7a6134; font-weight: 600; }
.tpl-lotus .ic-rsvp { color: #c0762f; }
.tpl-lotus .ic-rule { background: #d9873f; opacity: .65; }

/* 16 · Temple Gold — deep saffron with a gold border (almsgiving) */
.tpl-temple-gold {
  color: #f6e6c8;
  background-color: #3a2410;
  background-image:
    radial-gradient(80% 45% at 50% 0%, rgba(224,169,74,.24), rgba(224,169,74,0) 68%),
    radial-gradient(80% 45% at 50% 100%, rgba(224,169,74,.18), rgba(224,169,74,0) 68%),
    linear-gradient(168deg, #4a2e14 0%, #301d0c 100%);
  box-shadow: inset 0 0 0 9px #3a2410, inset 0 0 0 10px rgba(224,169,74,.72), inset 0 0 0 14px #3a2410, inset 0 0 0 15px rgba(224,169,74,.32);
}
.tpl-temple-gold::before {
  content: ""; position: absolute; bottom: 20px; left: -28px;
  width: 172px; height: 172px; z-index: 1; opacity: .85;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg transform='translate(100 148) scale(0.95)'%3E%3Cpath transform='rotate(-58)' fill='%23c2913c' opacity='.9' d='M0 0 C11 -16 11 -40 0 -58 C-11 -40 -11 -16 0 0 Z'/%3E%3Cpath transform='rotate(-34)' fill='%23e6bd6a' opacity='.9' d='M0 0 C11 -16 11 -40 0 -58 C-11 -40 -11 -16 0 0 Z'/%3E%3Cpath transform='rotate(-12)' fill='%23c2913c' opacity='.9' d='M0 0 C11 -16 11 -40 0 -58 C-11 -40 -11 -16 0 0 Z'/%3E%3Cpath transform='rotate(12)' fill='%23e6bd6a' opacity='.9' d='M0 0 C11 -16 11 -40 0 -58 C-11 -40 -11 -16 0 0 Z'/%3E%3Cpath transform='rotate(34)' fill='%23c2913c' opacity='.9' d='M0 0 C11 -16 11 -40 0 -58 C-11 -40 -11 -16 0 0 Z'/%3E%3Cpath transform='rotate(58)' fill='%23e6bd6a' opacity='.9' d='M0 0 C11 -16 11 -40 0 -58 C-11 -40 -11 -16 0 0 Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23e0a94a' stroke-width='1.4' opacity='.6'%3E%3Cpath d='M20 178 C64 164 136 164 180 178'/%3E%3Cpath d='M34 190 C72 178 128 178 166 190' opacity='.7'/%3E%3C/g%3E%3Cpath transform='translate(40 44) scale(0.7)' fill='%23e0a94a' opacity='.7' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3Cpath transform='translate(160 60) scale(0.55)' fill='%23e0a94a' opacity='.6' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3C/svg%3E");
}
.tpl-temple-gold .ic-eyebrow { color: #e0a94a; letter-spacing: 6px; }
.tpl-temple-gold .ic-greeting { color: #f6e6c8; }
.tpl-temple-gold .ic-couple { color: #eec472; }
.tpl-temple-gold .ic-date { color: #e0a94a; font-weight: 600; }
.tpl-temple-gold .ic-venue { color: #e6d6b6; }
.tpl-temple-gold .ic-message { color: #dccba8; }
.tpl-temple-gold .ic-rsvp { color: #cfa155; }
.tpl-temple-gold .ic-rule { background: #e0a94a; opacity: .8; width: 80px; }

/* 17 · Ruby Years — deep ruby and gold (anniversary) */
.tpl-ruby-years {
  color: #6b2b2b;
  background-color: #fff8f7;
  background-image:
    radial-gradient(65% 42% at 10% 6%, rgba(164,36,61,.20), rgba(164,36,61,0) 70%),
    radial-gradient(65% 42% at 92% 95%, rgba(164,36,61,.18), rgba(164,36,61,0) 70%),
    linear-gradient(168deg, #fffafa 0%, #f8e4e1 100%);
  box-shadow: inset 0 0 0 1px rgba(164,36,61,.26), inset 0 0 0 7px rgba(255,250,250,.92), inset 0 0 0 8px rgba(194,161,90,.32);
}
.tpl-ruby-years::before, .tpl-ruby-years::after {
  content: ""; position: absolute; width: 190px; height: 200px; z-index: 1; opacity: .85;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='200' viewBox='0 0 190 200'%3E%3Cg fill='none' stroke='%23a4243d' stroke-width='2' opacity='.55'%3E%3Cpath d='M22 12 C60 60 60 140 22 188'/%3E%3C/g%3E%3Cellipse cx='52' cy='40' rx='20' ry='10' transform='rotate(-30 52 40)' fill='%23c8455c' opacity='.55'/%3E%3Cellipse cx='60' cy='82' rx='18' ry='9' transform='rotate(-12 60 82)' fill='%23c8455c' opacity='.5'/%3E%3Cellipse cx='56' cy='124' rx='19' ry='9' transform='rotate(14 56 124)' fill='%23c8455c' opacity='.5'/%3E%3Cellipse cx='46' cy='164' rx='17' ry='8' transform='rotate(32 46 164)' fill='%23c8455c' opacity='.45'/%3E%3Cg transform='translate(86 58) scale(1.0)'%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(0)' fill='%23f3d7dc'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(72)' fill='%23f3d7dc'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(144)' fill='%23f3d7dc'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(216)' fill='%23f3d7dc'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(288)' fill='%23f3d7dc'/%3E%3Ccircle r='3' fill='%23a4243d'/%3E%3C/g%3E%3Cg transform='translate(94 108) scale(0.82)'%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(0)' fill='%23f3d7dc'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(72)' fill='%23f3d7dc'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(144)' fill='%23f3d7dc'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(216)' fill='%23f3d7dc'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(288)' fill='%23f3d7dc'/%3E%3Ccircle r='3' fill='%23a4243d'/%3E%3C/g%3E%3Cg transform='translate(78 150) scale(0.9)'%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(0)' fill='%23f3d7dc'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(72)' fill='%23f3d7dc'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(144)' fill='%23f3d7dc'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(216)' fill='%23f3d7dc'/%3E%3Cellipse cx='0' cy='-7' rx='4.4' ry='7' transform='rotate(288)' fill='%23f3d7dc'/%3E%3Ccircle r='3' fill='%23a4243d'/%3E%3C/g%3E%3Cpath transform='translate(140 30) scale(0.7)' fill='%23c2a15a' opacity='.7' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3Cpath transform='translate(150 176) scale(0.5)' fill='%23c2a15a' opacity='.55' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3C/svg%3E");
}
.tpl-ruby-years::before { top: -8px; left: -26px; }
.tpl-ruby-years::after  { bottom: -8px; right: -26px; transform: rotate(180deg); }
.tpl-ruby-years .ic-eyebrow { color: #a4243d; letter-spacing: 5px; }
.tpl-ruby-years .ic-couple { color: #8e1f34; }
.tpl-ruby-years .ic-date { color: #a98a3f; font-weight: 600; }
.tpl-ruby-years .ic-rsvp { color: #a4243d; }
.tpl-ruby-years .ic-rule { background: #a4243d; opacity: .7; }

/* 18 · Pearl — ivory and silver elegance (anniversary) */
.tpl-pearl {
  color: #3f4650;
  background-color: #fdfdfb;
  background-image:
    radial-gradient(80% 45% at 50% -6%, rgba(154,163,173,.18), rgba(154,163,173,0) 66%),
    linear-gradient(174deg, #ffffff 0%, #eef0f2 100%);
  box-shadow: inset 0 0 0 1px rgba(154,163,173,.34), inset 0 0 0 6px rgba(255,255,255,.9), inset 0 0 0 7px rgba(154,163,173,.22);
}
.tpl-pearl::before, .tpl-pearl::after {
  content: ""; position: absolute; width: 180px; height: 200px; z-index: 1; opacity: .9;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='200' viewBox='0 0 180 200'%3E%3Cpath d='M26 6 C70 54 70 146 26 194' fill='none' stroke='%23c3c9d1' stroke-width='1.4' opacity='.7'/%3E%3Ccircle cx='34' cy='24' r='8' fill='%23e9edf1' opacity='.95'/%3E%3Ccircle cx='32.4' cy='22.2' r='2.8' fill='%23ffffff' opacity='.9'/%3E%3Ccircle cx='48' cy='52' r='9.5' fill='%23e9edf1' opacity='.95'/%3E%3Ccircle cx='46.4' cy='50.2' r='3.3' fill='%23ffffff' opacity='.9'/%3E%3Ccircle cx='56' cy='84' r='8' fill='%23e9edf1' opacity='.95'/%3E%3Ccircle cx='54.4' cy='82.2' r='2.8' fill='%23ffffff' opacity='.9'/%3E%3Ccircle cx='56' cy='116' r='9' fill='%23e9edf1' opacity='.95'/%3E%3Ccircle cx='54.4' cy='114.2' r='3.1' fill='%23ffffff' opacity='.9'/%3E%3Ccircle cx='48' cy='148' r='8' fill='%23e9edf1' opacity='.95'/%3E%3Ccircle cx='46.4' cy='146.2' r='2.8' fill='%23ffffff' opacity='.9'/%3E%3Ccircle cx='34' cy='176' r='7' fill='%23e9edf1' opacity='.95'/%3E%3Ccircle cx='32.4' cy='174.2' r='2.4' fill='%23ffffff' opacity='.9'/%3E%3Cpath transform='translate(126 46) scale(0.62)' fill='%23aeb6c0' opacity='.6' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3Cpath transform='translate(140 150) scale(0.5)' fill='%23aeb6c0' opacity='.5' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3C/svg%3E");
}
.tpl-pearl::before { top: 10px; left: -14px; }
.tpl-pearl::after  { bottom: 10px; right: -14px; transform: rotate(180deg); }
.tpl-pearl .ic-eyebrow { color: #7b848f; letter-spacing: 6px; }
.tpl-pearl .ic-couple { color: #2f3742; }
.tpl-pearl .ic-date { color: #5b636e; font-weight: 600; }
.tpl-pearl .ic-rsvp { color: #7b848f; }
.tpl-pearl .ic-rule { background: #9aa3ad; opacity: .7; width: 70px; }

/* 19 · New Home — terracotta with a little house (housewarming) */
.tpl-new-home {
  color: #5d3d2b;
  background-color: #fffaf5;
  background-image:
    radial-gradient(95% 48% at 50% 104%, rgba(193,102,58,.20), rgba(193,102,58,0) 62%),
    linear-gradient(170deg, #fffbf7 0%, #f9e7d8 100%);
  box-shadow: inset 0 0 0 1px rgba(193,102,58,.26);
}
.tpl-new-home::before {
  content: ""; position: absolute; bottom: -14px; right: -78px; width: 200px; height: 181px; z-index: 1; opacity: .8;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='190' viewBox='0 0 210 190'%3E%3Cpath d='M28 176 L28 104 L104 46 L180 104 L180 176 Z' fill='%23c1663a' opacity='.85'/%3E%3Cpath d='M14 110 L104 40 L194 110' fill='none' stroke='%23a4522c' stroke-width='6' stroke-linecap='round'/%3E%3Crect x='88' y='128' width='32' height='48' fill='%23f7e3d3' opacity='.95'/%3E%3Ccircle cx='112' cy='152' r='2.6' fill='%23a4522c'/%3E%3Crect x='46' y='120' width='26' height='24' fill='%23f7e3d3' opacity='.8'/%3E%3Crect x='136' y='120' width='26' height='24' fill='%23f7e3d3' opacity='.8'/%3E%3Cpath d='M144 46 L144 26 L158 26 L158 46' fill='none' stroke='%23a4522c' stroke-width='6'/%3E%3Cellipse cx='26' cy='178' rx='22' ry='9' fill='%238fae6e' opacity='.5'/%3E%3Cellipse cx='186' cy='180' rx='20' ry='8' fill='%238fae6e' opacity='.45'/%3E%3C/svg%3E");
}
.tpl-new-home::after {
  content: ""; position: absolute; top: 18px; right: 20px; width: 150px; height: 150px; z-index: 1; opacity: .55;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23c1663a' stroke-width='5' opacity='.8'%3E%3Ccircle cx='42' cy='44' r='20'/%3E%3Cpath d='M56 58 L112 114'/%3E%3Cpath d='M96 98 L110 84'/%3E%3Cpath d='M108 110 L122 96'/%3E%3C/g%3E%3C/svg%3E");
}
.tpl-new-home .ic-eyebrow { color: #b35b32; letter-spacing: 5px; }
.tpl-new-home .ic-couple { color: #a04d27; }
.tpl-new-home .ic-date { color: #7a5335; font-weight: 600; }
.tpl-new-home .ic-rsvp { color: #b35b32; }
.tpl-new-home .ic-rule { background: #c1663a; opacity: .65; }

/* 20 · Hearth — warm amber, cosy and homely (housewarming) */
.tpl-hearth {
  color: #54402a;
  background-color: #fffaf0;
  background-image:
    radial-gradient(90% 50% at 50% 102%, rgba(201,138,60,.22), rgba(201,138,60,0) 64%),
    linear-gradient(170deg, #fffcf4 0%, #faecd2 100%);
  box-shadow: inset 0 0 0 1px rgba(201,138,60,.28), inset 0 0 0 7px rgba(255,252,244,.92), inset 0 0 0 8px rgba(201,138,60,.20);
}
.tpl-hearth::before {
  content: ""; position: absolute; bottom: -10px; right: -68px; width: 186px; height: 177px; z-index: 1; opacity: .75;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='190' viewBox='0 0 200 190'%3E%3Cpath d='M100 40 C124 74 136 96 136 118 A36 36 0 0 1 64 118 C64 96 76 74 100 40 Z' fill='%23e0a24a' opacity='.75'/%3E%3Cpath d='M100 74 C114 96 120 108 120 122 A20 20 0 0 1 80 122 C80 108 86 96 100 74 Z' fill='%23f6d08a' opacity='.9'/%3E%3Cpath d='M28 168 C68 156 132 156 172 168' fill='none' stroke='%23c98a3c' stroke-width='4' opacity='.6'/%3E%3Cpath transform='translate(44 52) scale(0.6)' fill='%23c98a3c' opacity='.55' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3Cpath transform='translate(158 70) scale(0.5)' fill='%23c98a3c' opacity='.5' d='M0 -12 C1.3 -3.5 3.5 -1.3 12 0 C3.5 1.3 1.3 3.5 0 12 C-1.3 3.5 -3.5 1.3 -12 0 C-3.5 -1.3 -1.3 -3.5 0 -12 Z'/%3E%3C/svg%3E");
}
.tpl-hearth .ic-eyebrow { color: #b57a30; letter-spacing: 5px; }
.tpl-hearth .ic-couple { color: #9c6a25; }
.tpl-hearth .ic-date { color: #7a5c31; font-weight: 600; }
.tpl-hearth .ic-rsvp { color: #b57a30; }
.tpl-hearth .ic-rule { background: #c98a3c; opacity: .7; }

/* ============================================================
   Public invitation page (/i/{token}) — standalone, mobile-first
   ============================================================ */
.ip-body {
  margin: 0; min-height: 100vh; padding: 28px 14px 40px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  display: flex; justify-content: center;
  -webkit-font-smoothing: antialiased;
}
.ipbg-classic-gold { background: radial-gradient(90% 60% at 50% 0%, #fdf3d9, #f3e7c6 55%, #e9dcb6 100%); }
.ipbg-botanical    { background: radial-gradient(90% 60% at 50% 0%, #eef7ec, #dcebdd 55%, #cadfcb 100%); }
.ipbg-minimal      { background: radial-gradient(90% 60% at 50% 0%, #ffffff, #f4f4f4 55%, #e9e9e9 100%); }
.ipbg-romantic     { background: radial-gradient(90% 60% at 50% 0%, #fff1f2, #f7dde2 55%, #efc9d2 100%); }
.ipbg-deco         { background: radial-gradient(90% 60% at 50% 0%, #1c3a5e, #10233b 55%, #0a1729 100%); }
.ipbg-rustic       { background: radial-gradient(90% 60% at 50% 0%, #f9f3e8, #e6d7bf 55%, #d9c7a8 100%); }
.ipbg-strawberry   { background: radial-gradient(90% 60% at 50% 0%, #fff0f4, #fadbe4 55%, #f6c6d4 100%); }
.ipbg-rings        { background: radial-gradient(90% 60% at 50% 0%, #fffdf6, #f4ead2 55%, #e9dcb8 100%); }
.ipbg-blush-bloom  { background: radial-gradient(90% 60% at 50% 0%, #fff5f8, #f8dde4 55%, #f1c6d3 100%); }
.ipbg-little-star  { background: radial-gradient(90% 60% at 50% 0%, #f6faff, #dbe8f7 55%, #c3d8ef 100%); }
.ipbg-pastel-cloud { background: radial-gradient(90% 60% at 50% 0%, #f7fdfa, #e2f0e8 55%, #cde5d8 100%); }
.ipbg-lotus        { background: radial-gradient(90% 60% at 50% 0%, #fffdf6, #f7ecd6 55%, #efdcbb 100%); }
.ipbg-temple-gold  { background: radial-gradient(90% 60% at 50% 0%, #5a3a18, #3a2410 55%, #24150a 100%); }
.ipbg-temple-gold .ip-panel { background: rgba(255,255,255,.96); }
.ipbg-temple-gold .ip-foot { color: #e6d6b6; }
.ipbg-temple-gold .env-music-note { color: #cfa155; }
.ipbg-ruby-years   { background: radial-gradient(90% 60% at 50% 0%, #fff7f6, #f6dcd8 55%, #eec4bf 100%); }
.ipbg-pearl        { background: radial-gradient(90% 60% at 50% 0%, #ffffff, #eceef0 55%, #dcdfe3 100%); }
.ipbg-new-home     { background: radial-gradient(90% 60% at 50% 0%, #fffaf4, #f7e3d3 55%, #eecdb4 100%); }
.ipbg-hearth       { background: radial-gradient(90% 60% at 50% 0%, #fffbf2, #f8e8cc 55%, #f0d5a8 100%); }
.ipbg-confetti     { background: radial-gradient(90% 60% at 50% 0%, #fffaf0, #fdeed3 55%, #f7dfb4 100%); }
.ipbg-dino         { background: radial-gradient(90% 60% at 50% 0%, #f0faf1, #d8eeda 55%, #c3e2c7 100%); }
.ipbg-milestone    { background: radial-gradient(90% 60% at 50% 0%, #1c2740, #101726 55%, #0a0f1c 100%); }
.ipbg-milestone .ip-panel { background: rgba(255,255,255,.96); }
.ipbg-milestone .ip-foot { color: #d8cfb6; }
.ipbg-milestone .env-music-note { color: #c9ab60; }

.ip-wrap { width: 100%; max-width: 560px; }
.ip-stage { display: flex; justify-content: center; overflow: hidden; }
.ip-stage .invite-card { transform-origin: top center; box-shadow: 0 24px 60px rgba(0,0,0,.28); border-radius: 4px; }

.ip-panel { background: rgba(255,255,255,.94); border-radius: 16px; padding: 26px 22px; margin-top: 26px; text-align: center; box-shadow: 0 12px 34px rgba(0,0,0,.14); }
.ipbg-deco .ip-panel { background: rgba(255,255,255,.96); }
.ip-panel h2 { margin: 0 0 6px; font-size: 1.5rem; color: #2a2a2a; font-weight: 500; }
.ip-panel .ip-sub { margin: 0 0 18px; color: #6b6b6b; font-size: 1rem; }
.ip-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ip-btn { flex: 1 1 190px; padding: 15px 20px; border-radius: 999px; border: 1px solid transparent; font-family: inherit; font-size: 1.02rem; font-weight: 600; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.ip-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.16); }
.ip-btn:disabled { opacity: .6; cursor: default; transform: none; }
.ip-btn-yes { background: #2e7d52; color: #fff; }
.ip-btn-no  { background: #fff; color: #8a6b6b; border-color: #dcc8c8; }
.ip-link { background: none; border: none; color: #8a6d16; text-decoration: underline; cursor: pointer; font-family: inherit; font-size: .95rem; padding: 6px; }
.ip-error { color: #c0392b; margin: 12px 0 0; min-height: 1em; font-size: .9rem; }

/* toggle ask/confirmation by RSVP state */
.ip-panel .ip-rsvp-done { display: none; }
.ip-panel[data-status="attending"] .ip-rsvp-ask,
.ip-panel[data-status="declined"]  .ip-rsvp-ask { display: none; }
.ip-panel[data-status="attending"] .ip-rsvp-done,
.ip-panel[data-status="declined"]  .ip-rsvp-done { display: block; }

.ip-extras { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.ip-chip { background: rgba(255,255,255,.9); border-radius: 999px; padding: 11px 18px; text-decoration: none; color: #3a3a3a; font-size: .95rem; box-shadow: 0 6px 16px rgba(0,0,0,.10); }
.ip-chip:hover { background: #fff; }
.ip-foot { text-align: center; margin-top: 24px; font-size: .82rem; opacity: .7; }
.ipbg-deco .ip-foot { color: #e8e2cf; }
.ip-foot a { color: inherit; }

/* ============================================================
   Envelope opening sequence (public invite page)
   ============================================================ */
.env-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(70% 55% at 50% 40%, #fffaf0, #f3e7c6 55%, #e6d5a8 100%);
  cursor: pointer; padding: 20px; text-align: center;
  transition: opacity .7s ease, visibility .7s;
}
.env-overlay.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.env-scene { perspective: 1200px; }

.envelope {
  position: relative; width: 320px; height: 214px; margin: 0 auto 26px;
  transform-style: preserve-3d;
  animation: envFloat 4.5s ease-in-out infinite;
}
.env-back, .env-front, .env-flap { position: absolute; inset: 0; border-radius: 8px; }
.env-back  { background: linear-gradient(160deg, #f5e7c2, #e8d3a2); box-shadow: 0 22px 46px rgba(120,92,30,.30); }

/* the card that rises out */
.env-letter {
  position: absolute; left: 50%; bottom: 16px; width: 272px; height: 176px; margin-left: -136px;
  background: linear-gradient(165deg, #fffdf7, #fdf4e0);
  border: 1px solid #e6d3a0; border-radius: 6px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif; color: #6a5320;
  box-shadow: 0 8px 20px rgba(120,92,30,.18);
  transition: transform 1.05s cubic-bezier(.22,1,.36,1) .45s;
}
.env-letter-mono { font-size: 1.45rem; line-height: 1.25; padding: 0 18px; }
.env-letter-mono .amp { display: block; font-size: .85rem; font-style: italic; margin: 2px 0; opacity: .75; }
.env-letter-line { width: 42px; height: 1px; background: #c9a227; margin: 10px auto; }
.env-letter-sub { font-size: .62rem; letter-spacing: 3.4px; text-transform: uppercase; color: #a8851c; }

/* pocket sits in front of the letter */
.env-front {
  z-index: 3;
  background: linear-gradient(170deg, #f7ecd0, #eeddb2);
  clip-path: polygon(0 26%, 50% 66%, 100% 26%, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.env-flap {
  z-index: 4; transform-origin: top center; backface-visibility: hidden;
  background: linear-gradient(170deg, #f2e3bd, #e6d3a2);
  clip-path: polygon(0 0, 100% 0, 50% 62%);
  transition: transform .85s cubic-bezier(.6,.05,.3,1);
}
.env-seal {
  position: absolute; top: 46%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  z-index: 5; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #d8b64a, #a8801a);
  color: #fff6d8; font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-style: italic;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(120,92,30,.4), inset 0 -2px 5px rgba(0,0,0,.18);
  transition: transform .4s ease, opacity .4s ease;
}
.env-hint {
  margin: 0 0 6px; font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; letter-spacing: 1.5px;
  color: #8a6d16; animation: envPulse 2.2s ease-in-out infinite;
}
.env-to { margin: 0; font-family: 'Cormorant Garamond', serif; color: #7a6134; font-size: .95rem; }
.env-to strong { font-weight: 600; }

/* --- opening state --- */
.env-overlay.is-open .env-flap  { transform: rotateX(-172deg); z-index: 1; }
.env-overlay.is-open .env-seal  { transform: scale(.5) translateY(-16px); opacity: 0; }
.env-overlay.is-open .env-letter { transform: translateY(-186px) scale(1.04); }
.env-overlay.is-open .envelope  { animation: none; }
.env-overlay.is-open .env-hint,
.env-overlay.is-open .env-to    { opacity: 0; transition: opacity .3s ease; }

@keyframes envFloat { 0%,100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-9px) rotate(.6deg); } }
@keyframes envPulse { 0%,100% { opacity: .65; } 50% { opacity: 1; } }

/* the invitation itself eases in once the envelope clears */
.ip-wrap { opacity: 0; transform: translateY(22px); }
.ip-wrap.is-revealed { opacity: 1; transform: none; transition: opacity .8s ease .1s, transform .8s cubic-bezier(.22,1,.36,1) .1s; }
.no-env .ip-wrap { opacity: 1; transform: none; }

@media (max-width: 420px) {
  .envelope { width: 268px; height: 180px; }
  .env-letter { width: 228px; height: 148px; margin-left: -114px; }
  .env-letter-mono { font-size: 1.2rem; }
  .env-overlay.is-open .env-letter { transform: translateY(-156px) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .envelope, .env-hint { animation: none; }
  .env-letter, .env-flap, .env-seal, .ip-wrap { transition: none; }
}

/* ============================================================
   Invite editor + public page on phones
   (invites.css previously had NO rules below 1024px)
   ============================================================ */
@media (max-width: 768px) {
  .invite-form { padding: 18px 15px; border-radius: var(--radius-sm); }
  .invite-form .editor-section { padding-bottom: 18px; margin-bottom: 18px; }
  .invite-form h3 { font-size: .9rem; letter-spacing: 1.5px; }
  .invite-form input, .invite-form textarea, .invite-form select { padding: 11px; font-size: 16px; } /* 16px stops iOS zoom-on-focus */

  /* date + time must not be crushed below the native control's minimum */
  .field-row { flex-wrap: wrap; gap: 0 12px; }
  .field-row > div { flex: 1 1 150px; min-width: 150px; }

  /* guest rows: 3 cramped columns → stacked, name full width */
  .guest-row { grid-template-columns: 1fr auto; gap: 8px; }
  .guest-row .g-name { grid-column: 1 / -1; }

  .tpl-picker { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tpl-choice { padding: 8px; }
  .tpl-choice .tpl-blurb { display: none; }

  .invite-stage { padding: 12px; }
  .invite-preview { margin-top: 22px; }

  .guest-share { gap: 8px; }
  .guest-share .gs-btn { padding: 10px 14px; font-size: .82rem; min-height: 40px; }

  /* comfortable thumb targets */
  .info-btn { width: 40px; height: 40px; font-size: 1.1rem; }
  .info-pop-delete { padding: 11px 12px; }
}

@media (max-width: 560px) {
  #saveBtn { width: 100%; }
  .preview-guest-select { max-width: 100%; flex: 1 1 100%; min-height: 44px; }
  /* one field per line — paired fields (date+select, phone+whatsapp) were
     squeezing selects below their longest option and pushing pages sideways */
  .field-row { flex-direction: column; gap: 0; }
  .field-row > div { flex: 1 1 100%; min-width: 0; }
  .editor-section, .invite-form .editor-section { padding-bottom: 16px; margin-bottom: 16px; }
}
@media (max-width: 420px) {
  /* 4-5 pill buttons fragment into ragged rows; two per line reads cleanly */
  .guest-share .gs-btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
  .guest-share .gs-btn.gs-wa { flex-basis: 100%; }
}
@media (max-width: 400px) {
  .tpl-picker { grid-template-columns: 1fr 1fr; }
  .invite-stage { padding: 8px; }
}

/* Public invite page on small phones */
@media (max-width: 420px) {
  .ip-body { padding: 16px 10px 30px; }
  .ip-panel { padding: 20px 16px; border-radius: 14px; }
  .ip-panel h2 { font-size: 1.3rem; }
  .ip-btn { flex: 1 1 100%; padding: 14px 16px; }
  .ip-chip { padding: 10px 14px; font-size: .9rem; }
}

/* ---------- Invitations list ---------- */
.invitation-card { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.invitation-card h3 { margin: 0 0 4px; font-family: var(--font-display); }
.invitation-card .inv-meta { color: var(--text-secondary); font-size: 0.9rem; }
.invitation-card .inv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rsvp-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* Phones: this one card is the list row for menus, cards, albums, bookings AND
   invitations. Side-by-side title/actions left the 4-button cluster wrapping
   into ~97px of ragged rows; stack instead and let the buttons share the width. */
@media (max-width: 560px) {
  .invitation-card { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; margin-bottom: 12px; }
  .invitation-card h3 { font-size: 1.15rem; }
  .invitation-card .inv-meta { font-size: .82rem; line-height: 1.45; }
  .invitation-card .inv-actions { gap: 6px; }
  .invitation-card .inv-actions > .btn,
  .invitation-card .inv-actions > a:not(.info-btn) { flex: 1 1 calc(50% - 3px); justify-content: center; text-align: center; }
  .invitation-card .inv-actions .info-wrap { display: flex; align-items: center; }
}

/* ============================================================
   Background music control (public invitation page)
   ============================================================ */
.music-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.08);
  color: #8a6d16; box-shadow: 0 6px 18px rgba(0,0,0,.14);
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.music-toggle:hover  { background: #fff; transform: translateY(-2px); }
.music-toggle:active { transform: translateY(0); }
.music-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.music-toggle svg          { width: 22px; height: 22px; }
/* the cone is filled, the sound waves are strokes — never let fill hit the waves */
.music-toggle .ico-body    { fill: currentColor; }
.music-toggle .ico-wave    { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.music-toggle.is-muted { color: #9a9a9a; opacity: .8; }

/* keep the control legible on each template's page background */
.ipbg-botanical .music-toggle { color: #4a6b52; }
.ipbg-romantic  .music-toggle { color: #a85f6b; }
.ipbg-minimal   .music-toggle { color: #6a6a6a; }
.ipbg-rustic    .music-toggle { color: #8a6b3f; }
.ipbg-strawberry .music-toggle { color: #c3283f; }
.ipbg-rings        .music-toggle { color: #a98a3f; }
.ipbg-blush-bloom  .music-toggle { color: #b8556f; }
.ipbg-little-star  .music-toggle { color: #4a6f9f; }
.ipbg-pastel-cloud .music-toggle { color: #4f8d73; }
.ipbg-lotus        .music-toggle { color: #c0762f; }
.ipbg-temple-gold  .music-toggle { background: rgba(58,36,16,.92); border-color: rgba(224,169,74,.45); color: #e0a94a; }
.ipbg-temple-gold  .music-toggle:hover { background: rgba(74,46,20,.96); }
.ipbg-temple-gold  .music-toggle.is-muted { color: #9a8a70; }
.ipbg-ruby-years   .music-toggle { color: #a4243d; }
.ipbg-pearl        .music-toggle { color: #5b636e; }
.ipbg-new-home     .music-toggle { color: #b35b32; }
.ipbg-hearth       .music-toggle { color: #b57a30; }
.ipbg-confetti  .music-toggle { color: #c2483e; }
.ipbg-dino      .music-toggle { color: #3f7a4e; }
.ipbg-milestone .music-toggle { background: rgba(20,29,49,.92); border-color: rgba(217,180,92,.45); color: #d9b45c; }
.ipbg-milestone .music-toggle:hover { background: rgba(28,39,64,.96); }
.ipbg-milestone .music-toggle.is-muted { color: #7f8899; }
.ipbg-deco      .music-toggle { background: rgba(20,38,62,.92); border-color: rgba(203,170,94,.45); color: #cbaa5e; }
.ipbg-deco      .music-toggle:hover { background: rgba(28,52,84,.96); }
.ipbg-deco      .music-toggle.is-muted { color: #7f8a99; }

/* a quiet note on the envelope so the sound is never a surprise */
.env-music-note { margin: 8px 0 0; font-size: .78rem; letter-spacing: .6px; color: #9a8145; opacity: .85; }
.ipbg-deco .env-music-note { color: #b9a273; }
.env-overlay.is-open .env-music-note { opacity: 0; transition: opacity .3s ease; }

@media (max-width: 420px) {
  .music-toggle { width: 42px; height: 42px; right: 12px; bottom: 12px; }
  .music-toggle svg { width: 20px; height: 20px; }
}

/* ---------- Occasion picker (wedding / birthday) ---------- */
.occ-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.occ-choice {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 16px 12px; cursor: pointer; border: 2px solid var(--border-color); border-radius: 10px;
  background: var(--bg-color); color: var(--text-primary); font: inherit; transition: .2s;
}
.occ-choice:hover { border-color: var(--accent-primary); }
.occ-choice.selected { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--accent-soft); }
.occ-choice .occ-icon { font-size: 1.7rem; line-height: 1; }
.occ-choice .occ-name { font-weight: 700; font-size: .95rem; }
.occ-choice .occ-blurb { font-size: .74rem; color: var(--text-muted); }

/* only the chosen occasion's templates are shown */
.tpl-choice .tpl-suited { display: none; }
.tpl-choice.off-occasion { display: none; }

/* ============================================================
   Floating balloons — birthday cards only (.ic-decor)
   Placed top-right and bottom-left, i.e. diagonally opposite the
   strawberry clusters, so they never cross the text column.
   ============================================================ */
.invite-card .ic-decor {
  position: absolute !important; inset: 0; z-index: 1 !important;
  pointer-events: none; overflow: hidden;
  /* balloon palette — templates override these four */
  --bal-a: #e0485f; --bal-b: #fff4f7; --bal-c: #f2879e; --bal-d: #c8324a;
}
.invite-card .ic-decor .balloon {
  position: absolute !important; z-index: 1 !important;
  width: 36px; height: 46px;
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background: var(--bal-a); color: var(--bal-a);
  box-shadow: inset -5px -7px 11px rgba(0,0,0,.12), inset 5px 6px 10px rgba(255,255,255,.45),
              0 3px 7px rgba(150,70,90,.22);
  animation: balloonFloat 8s ease-in-out infinite;
}
/* knot */
.invite-card .ic-decor .balloon::before {
  content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -4px;
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 6px solid currentColor;
}
/* curved string */
.invite-card .ic-decor .balloon::after {
  content: ""; position: absolute; left: 50%; top: calc(100% + 4px);
  width: 13px; height: 38px;
  border-left: 1px solid rgba(150, 90, 105, .40);
  border-bottom-left-radius: 14px;
}
@keyframes balloonFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-7px) rotate(3deg); }
}

/* top-right trio */
.ic-decor .balloon:nth-child(1) { left: 348px; top: 26px; animation-duration: 7.5s; }
.ic-decor .balloon:nth-child(2) { left: 404px; top: 12px;  width: 30px; height: 39px; background: var(--bal-b); color: var(--bal-b); animation-duration: 9.2s; animation-delay: -2.4s; }
.ic-decor .balloon:nth-child(3) { left: 450px; top: 42px; width: 27px; height: 35px; background: var(--bal-c); color: var(--bal-c); animation-duration: 8.4s; animation-delay: -4.8s; }
.ic-decor .balloon:nth-child(4) { left: 486px; top: 14px;  width: 22px; height: 28px; background: var(--bal-d); color: var(--bal-d); animation-duration: 10s;  animation-delay: -1.2s; }
/* bottom-left trio */
.ic-decor .balloon:nth-child(5) { left: 20px; top: 556px; animation-duration: 8.8s; animation-delay: -3.1s; }
.ic-decor .balloon:nth-child(6) { left: 66px; top: 596px; width: 30px; height: 39px; background: var(--bal-b); color: var(--bal-b); animation-duration: 7.8s; animation-delay: -5.5s; }
.ic-decor .balloon:nth-child(7) { left: 12px; top: 636px; width: 26px; height: 34px; background: var(--bal-c); color: var(--bal-c); animation-duration: 9.6s; animation-delay: -0.7s; }

@media (prefers-reduced-motion: reduce) {
  .invite-card .ic-decor .balloon { animation: none; }
}

/* occasion picker on phones — must come after the base .occ-picker rule above */
@media (max-width: 560px) {
  .occ-picker { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .occ-choice { padding: 12px 8px; }
  .occ-choice .occ-blurb { display: none; }
}

/* ============================================================
   Registration wall — anonymous editor (/create).
   Markup: components/invite-auth-modal.php · logic: invite-claim.js
   ============================================================ */
.invite-wall-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(12, 14, 22, .55); backdrop-filter: blur(3px);
}
.invite-wall {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1201; width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: auto;
  background: var(--surface-color); border: 1px solid var(--border-color);
  border-radius: var(--radius); box-shadow: var(--shadow-lg, var(--shadow-md));
  padding: 30px 26px 26px; text-align: center;
}
.invite-wall[hidden], .invite-wall-backdrop[hidden] { display: none !important; }
body.wall-open { overflow: hidden; }

.invite-wall-close {
  position: absolute; top: 10px; right: 12px; border: 0; background: none;
  font-size: 1.5rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 6px;
}
.invite-wall-close:hover { color: var(--text-primary); }
.invite-wall-emoji { font-size: 2rem; margin-bottom: 6px; }
.invite-wall-title { font-family: var(--font-display); font-size: 1.45rem; margin: 0 0 8px; }
.invite-wall-reassure { color: var(--text-secondary); font-size: .92rem; margin: 0 0 18px; }

.invite-wall-google { display: flex; justify-content: center; min-height: 44px; margin-bottom: 12px; }
.invite-wall-fb {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 16px; margin-bottom: 12px; border: 0; border-radius: 4px;
  background: #1877F2; color: #fff; font-size: .95rem; font-weight: 600; cursor: pointer;
}
.invite-wall-fb:hover { background: #166fe0; }
.invite-wall-fb svg { width: 20px; height: 20px; fill: #fff; }
.invite-wall-or { color: var(--text-muted); font-size: .82rem; margin: 4px 0 14px; }

.invite-wall form { text-align: left; }
.invite-wall form label { display: block; font-size: .85rem; margin: 0 0 6px; color: var(--text-secondary); }
.invite-wall form input {
  width: 100%; padding: 11px 12px; margin-bottom: 14px;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-color); color: var(--text-primary); font-size: .95rem;
}
.invite-wall form input:focus { outline: 2px solid var(--accent-primary); outline-offset: -1px; }
.invite-wall-pw { position: relative; }
.invite-wall-pw input { padding-right: 62px; }
.invite-wall-pw-toggle {
  position: absolute; right: 8px; top: 8px; border: 0; background: none;
  color: var(--accent-primary); font-size: .8rem; cursor: pointer; padding: 4px 6px;
}
.invite-wall-error {
  color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 14px; font-size: .88rem;
  text-align: left;
}
.invite-wall-toggle {
  border: 0; background: none; color: var(--accent-primary); cursor: pointer;
  font-size: .88rem; margin-top: 16px; text-decoration: underline; text-underline-offset: 3px;
}

.invite-wall-progress { padding: 18px 0 6px; }
.invite-wall-spinner {
  width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%;
  border: 3px solid var(--border-color); border-top-color: var(--accent-primary);
  animation: wallSpin .8s linear infinite;
}
@keyframes wallSpin { to { transform: rotate(360deg); } }
.invite-wall-progress-text { color: var(--text-secondary); font-size: .92rem; margin: 0 0 14px; }
.invite-wall-fail { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.invite-wall-dashlink { color: var(--accent-primary); font-size: .88rem; }
@media (prefers-reduced-motion: reduce) { .invite-wall-spinner { animation: none; } }

/* ============================================================
   /create landing — hero above the anonymous editor
   ============================================================ */
.create-hero {
  max-width: var(--maxw); margin: 0 auto;
  padding: calc(var(--nav-height) + 48px) 24px 8px; text-align: center;
}
.create-hero h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 4.5vw, 3rem); margin: 16px 0 12px; }
.create-hero h1 em { font-style: italic; color: var(--accent-primary); }
.create-hero-desc { color: var(--text-secondary); max-width: 640px; margin: 0 auto 26px; font-size: 1.02rem; }
.create-steps {
  list-style: none; display: flex; justify-content: center; gap: 26px; flex-wrap: wrap;
  margin: 0 auto; padding: 0; max-width: 860px;
}
.create-steps li { display: flex; align-items: center; gap: 9px; color: var(--text-secondary); font-size: .92rem; }
.cs-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent-soft); color: var(--accent-primary); font-weight: 700; font-size: .85rem;
}
.create-editor { padding-top: 28px; }
@media (max-width: 700px) {
  .create-steps { flex-direction: column; align-items: flex-start; gap: 10px; max-width: 320px; }
}