@font-face {
  font-family: "New Icon Script";
  src: url("assets/New-Icon-Script-Exfont1157.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --green: #1f3a2e;
  --green-deep: #13291f;
  --brown: #3b241b;
  --brown-deep: #271711;
  --cream: #f7f2e8;
  --cream-muted: #ded5c2;
  --gold: #b08a4a;
  --olive: #31351a;
  --shadow: 0 18px 45px rgba(13, 8, 5, .28);
  --serif: "Cinzel", "Times New Roman", serif;
  --body-serif: "Gentium Plus", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--brown);
  color: var(--cream);
  font-family: var(--body-serif);
  overflow-x: hidden;
}
button, input, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Persistent controls */
.top-nav {
  position: fixed;
  z-index: 1000;
  top: max(14px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(247,242,232,.28);
  background: rgba(20, 27, 21, .45);
  backdrop-filter: blur(14px);
  border-radius: 999px;
  box-shadow: 0 10px 35px rgba(0,0,0,.15);
}
.nav-control,
.language-option {
  border: 0;
  background: transparent;
  cursor: pointer;
}
.icon-control {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.icon-control:hover,
.icon-control:focus-visible { background: rgba(255,255,255,.12); }
.icon {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.icon-music-off { display: none; }
body.is-muted .icon-music-on { display: none; }
body.is-muted .icon-music-off { display: block; }
.language-switch { display: flex; align-items: center; gap: 7px; font-family: var(--serif); font-size: 11px; letter-spacing: .12em; }
.language-option { padding: 5px 2px; opacity: .55; }
.language-option.is-active { opacity: 1; border-bottom: 1px solid currentColor; }

/* Menu */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(19, 10, 7, .58);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.menu-overlay.is-open { opacity: 1; visibility: visible; }
.menu-panel {
  margin-left: auto;
  height: 100%;
  width: min(440px, 88vw);
  padding: 70px 42px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(155deg, #233c30, #12251d);
  box-shadow: -20px 0 60px rgba(0,0,0,.35);
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.menu-overlay.is-open .menu-panel { transform: translateX(0); }
.menu-close {
  position: absolute;
  top: 16px; right: 24px;
  border: 0; background: none;
  font-size: 38px; font-weight: 200;
  cursor: pointer;
}
.menu-monogram { width: 95px; filter: invert(1) sepia(.2); opacity: .8; }
.menu-eyebrow { font-family: var(--serif); letter-spacing: .25em; font-size: 11px; margin: 18px 0 48px; }
.menu-links { width: 100%; display: grid; gap: 6px; }
.menu-links button {
  border: 0;
  border-bottom: 1px solid rgba(247,242,232,.18);
  background: none;
  padding: 22px 0;
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(19px, 5vw, 27px);
  letter-spacing: .05em;
  cursor: pointer;
}
.menu-links button:hover { padding-left: 12px; color: #d6b878; }
.menu-date { margin-top: auto; font-family: var(--serif); letter-spacing: .3em; font-size: 12px; }

/* Screen system */
.screen {
  display: none;
  min-height: 100svh;
  animation: screenIn .55s ease both;
}
.screen.is-active { display: block; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Intro */
.intro-screen { position: relative; overflow: hidden; min-height: 100svh; }
.intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% center; transform: scale(1.02); }
.intro-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,12,8,.28), rgba(9,12,8,.08)), linear-gradient(0deg, rgba(12,12,8,.32), transparent 62%); }
.intro-content {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  padding: 4.5vh 5vw 3vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.intro-kicker { margin: 0 0 -12px; font-family: var(--serif); letter-spacing: .03em; font-size: clamp(14px, 2vw, 25px); text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.intro-title { width: min(480px, 60vw); margin-bottom: -24px; filter: drop-shadow(0 3px 12px rgba(0,0,0,.25)); }
.intro-content { transform: translateY(5vh); }
.envelope-button { width: min(500px, 62vw); border: 0; background: transparent; padding: 0; cursor: pointer; position: relative; }
.envelope-stack { display: block; position: relative; aspect-ratio: 1.43; filter: drop-shadow(0 26px 28px rgba(0,0,0,.32)); }
.envelope-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .65s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.envelope-open { opacity: 0; transform: translateY(10px) scale(.96); }
.envelope-wax { position: absolute; z-index: 6; width: 15.3%; left: 42.35%; top: 66.85%; transition: opacity .45s ease, transform .65s ease; filter: drop-shadow(0 5px 5px rgba(0,0,0,.32)); }
.envelope-button.is-opening .envelope-wax { opacity: 0; transform: translateY(12px) scale(.75); }
.envelope-button.is-opening .envelope-closed { opacity: 0; transform: translateY(18px) scale(.95); }
.envelope-button.is-opening .envelope-open { opacity: 1; transform: none; }
.open-label { display: inline-block; margin-top: 10px; position: relative; z-index: 4; font-family: var(--serif); font-size: clamp(11px, 1.35vw, 16px); text-decoration: underline; text-underline-offset: 5px; letter-spacing: .02em; }
.intro-helper { display:none; position: absolute; z-index: 3; left: 50%; bottom: max(15px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: 90%; text-align: center; font-style: italic; font-size: 12px; opacity: .72; }

/* Shared artboard */
.stage { position: relative; width: min(100%, 1000px); margin: 0 auto; container-type: inline-size; overflow: hidden; }
.save-screen { background: var(--brown); }
.save-stage { aspect-ratio: 1000 / 1590; background: var(--brown); }
.save-stage > img,
.save-stage > article,
.save-stage > button,
.photo-strip { position: absolute; }
.save-envelope { width: 42%; left: 9%; top: 1.2%; transform: rotate(-6deg); z-index: 3; }
.save-tray { width: 58%; right: 1%; top: 8%; transform: rotate(11deg); z-index: 1; }
.save-orange { width: 18%; right: 29%; top: 12%; z-index: 2; }
.save-red-flower { width: 16%; right: 12%; top: 16%; z-index: 5; }
.save-flowers-gold { width: 18%; right: 4%; top: 9%; z-index: 4; }
.save-flowers-top { width: 26%; right: -6%; top: -1%; z-index: 5; }

.main-card { width: 56%; right: 10%; top: 22%; z-index: 6; filter: drop-shadow(var(--shadow)); }
.main-card > img { width: 100%; }
.main-card-copy { position: absolute; inset: 16% 12% 13%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--green); font-family: var(--serif); }
.main-card-copy p { margin: .45em 0; font-size: 1.55cqi; line-height: 1.4; }
.main-card-copy img { width: 90%; margin: 0 auto; }
.main-card-copy .main-date { margin-top: -1%; font-size: 1.55cqi; }

.photo-strip { width: 25%; left: 11%; top: 31%; aspect-ratio: .48; z-index: 7; transform: rotate(-8deg); filter: drop-shadow(0 15px 14px rgba(0,0,0,.24)); }
.photo-slot { position: absolute; left: 10%; width: 80%; height: 39%; object-fit: cover; z-index: 1; }
.slot-one { top: 8%; }
.slot-two { top: 51%; }
.photo-strip-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }

.action-art { border: 0; padding: 0; background: none; cursor: pointer; transition: transform .28s ease; }
.action-art:hover { transform: translateY(-5px) rotate(var(--rotation, 0deg)); }
.info-card { width: 37%; right: 13%; top: 48%; z-index: 7; --rotation: 3deg; transform: rotate(3deg); filter: drop-shadow(0 15px 18px rgba(0,0,0,.23)); }
.info-card > img { width: 100%; }
.info-card-copy { position: absolute; inset: 15% 11% 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; text-align: center; color: var(--cream); font-size: 1.85cqi; line-height: 1.05; }
.info-card-copy .script-text { font-size: 4.7cqi; font-style: italic; line-height: .85; }
.underlined { font-family: var(--serif); font-size: 1.45cqi; text-decoration: underline; text-underline-offset: 4px; }
.details-medallion { width: 25%; left: 9%; top: 59%; z-index: 8; --rotation: -8deg; transform: rotate(-8deg); filter: drop-shadow(0 12px 13px rgba(0,0,0,.22)); }
.details-medallion > img { width: 100%; }
.details-medallion-copy { position: absolute; inset: 20% 10% 27%; display: grid; place-items: center; text-align: center; color: var(--cream); font-style: italic; font-size: 5cqi; line-height: .72; }
.save-polaroid { width: 31%; right: 8%; top: 67%; transform: rotate(13deg); z-index: 8; filter: drop-shadow(0 16px 15px rgba(0,0,0,.25)); }
.save-coffee { width: 23%; right: 16%; top: 57%; z-index: 3; transform: rotate(15deg); }
.save-flowers-bottom { width: 35%; left: -7%; bottom: 8%; transform: rotate(35deg); z-index: 4; }
.save-hanging { width: 18%; left: 42%; top: 39%; z-index: 8; }
.save-love { width: 39%; left: 30%; bottom: 4.6%; z-index: 7; }
.save-date-bottom { position: absolute; left: 50%; bottom: 2.1%; transform: translateX(-50%); margin: 0; font-family: var(--serif); font-size: 1.5cqi; letter-spacing: .05em; z-index: 8; }

.countdown-section { min-height: 230px; background: var(--cream); color: var(--green); border-top: 11px solid transparent; border-image: linear-gradient(90deg,#74501e,#f1d99a,#7c5622) 1; display: flex; justify-content: center; align-items: center; gap: clamp(18px,5vw,70px); padding: 35px 5vw 40px; }
.countdown-section > img { width: clamp(90px, 13vw, 160px); }
.countdown-wrap { text-align: center; }
.countdown { display: grid; grid-template-columns: repeat(5, minmax(55px, 1fr)); gap: clamp(5px,2vw,18px); }
.countdown span { display: grid; }
.countdown strong { font-family: var(--serif); font-weight: 400; font-size: clamp(20px,4vw,43px); }
.countdown small { font-family: var(--serif); font-size: clamp(7px,1.2vw,11px); letter-spacing: .08em; }
.countdown-wrap > p { margin: 8px 0 0; font-family: var(--serif); font-size: 13px; }
.countdown-wrap .hashtag { font-size: 11px; opacity: .75; }

/* Details */
.details-screen { background: var(--brown); }
.details-hero { position: relative; min-height: clamp(150px, 22vw, 255px); background: #78806c; overflow: hidden; }
.details-hero > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.details-title-img { position: absolute; width: min(610px, 68vw); left: 50%; top: 50%; transform: translate(-50%,-50%); filter: drop-shadow(0 3px 8px rgba(0,0,0,.22)); }
.events-stage { aspect-ratio: 1000 / 920; background: var(--brown); }
.events-stage > * { position: absolute; }
.events-tray { width: 68%; left: 18%; top: 10%; z-index: 1; }
.events-flower { width: 31%; left: -4%; top: 3%; z-index: 5; transform: rotate(8deg); }
.events-red { width: 15%; left: 39%; top: 12%; z-index: 7; }
.events-hanging { width: 18%; left: 34%; top: 46%; z-index: 7; }
.event-ticket { filter: drop-shadow(0 16px 16px rgba(0,0,0,.27)); }
.event-ticket > img { width: 100%; }
.welcome-ticket { width: 54%; left: 5%; top: 24%; z-index: 6; transform: rotate(-8deg); }
.wedding-ticket { width: 59%; left: 20%; top: 58%; z-index: 6; transform: rotate(2deg); }
.brunch-ticket { width: 42%; right: 6%; top: 26%; z-index: 6; transform: rotate(3deg); }
.ticket-copy { position: absolute; inset: 10% 10%; display: grid; grid-template-columns: 12% 1fr; grid-template-rows: auto auto auto 1fr; column-gap: 3%; align-items: start; font-family: var(--serif); }
.dark-copy { color: #4c392e; }
.light-copy { color: #e9dbc2; }
.ticket-number { grid-row: 1 / 5; font-size: 3.6cqi; }
.ticket-day { font-size: 1.3cqi; letter-spacing: .22em; }
.ticket-copy strong { font-size: 2.2cqi; font-weight: 400; line-height: 1.02; }
.ticket-copy small { font-size: 1cqi; line-height: 1.45; }
.brunch-copy { inset: 12% 14% 12% 8%; }

.stay-section { background: var(--cream); color: var(--brown); padding: 0 5vw 70px; }
.stay-heading { max-width: 920px; margin: 0 auto 30px; display: grid; grid-template-columns: 110px 1fr 110px; align-items: start; justify-items: center; }
.stay-heading img { width: 85px; margin-top: -8px; }
.stay-heading img:last-child { transform: scaleX(-1); }
.stay-heading h2 { margin: 20px 0 0; text-align: center; color: #1e2f25; font-size: clamp(45px,8vw,90px); font-style: italic; font-weight: 400; line-height: .72; }
.hotel-grid { max-width: 950px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(30px,7vw,80px); align-items: start; }
.hotel-card { position: relative; min-height: 760px; display: grid; place-items: center; }
.hotel-card > img { width: 88%; filter: drop-shadow(0 15px 18px rgba(0,0,0,.16)); }
.hotel-copy { position: absolute; width: 64%; top: 17%; text-align: center; font-family: var(--serif); }
.hotel-copy h3 { font-weight: 500; font-size: clamp(17px,2.6vw,28px); margin: 0 0 12px; }
.hotel-copy h3 small { font-size: .6em; letter-spacing: .25em; }
.hotel-copy p { font-size: clamp(9px,1.3vw,13px); }
.hotel-copy ul { list-style: none; margin: 19px 0; padding: 0; display: grid; gap: 11px; font-size: clamp(9px,1.2vw,12px); }
.hotel-link { width: 100%; margin: 5px 0; padding: 9px 6px; border: 1px solid currentColor; background: transparent; font-family: var(--serif); font-size: clamp(8px,1.1vw,11px); cursor: pointer; }
.rate-code { margin-top: 32px !important; }
.rate-code strong { display: inline-block; margin-top: 8px; font-size: 1.35em; }
.hotel-dark .hotel-copy { color: #e1c78e; }
.hotel-light .hotel-copy { color: #3c342d; }
.details-note { max-width: 720px; margin: 30px auto 0; text-align: center; font-family: var(--serif); font-size: 11px; letter-spacing: .08em; }

/* Form */
.info-screen { min-height: 100svh; padding: clamp(90px,12vw,135px) 5vw 55px; background: #303515; }
.form-shell { max-width: 760px; margin: 0 auto; text-align: center; }
.form-title-image { width: min(690px, 86vw); margin: 0 auto -15px; }
.form-lead { max-width: 620px; margin: 0 auto 26px; font-family: var(--serif); font-size: clamp(12px,2vw,18px); }
.guest-reservation { margin: 0 auto 24px; padding: 18px 24px; max-width: 650px; border: 1px solid rgba(247,242,232,.35); background: rgba(255,255,255,.06); }
.guest-reservation span,
.guest-reservation small { display: block; }
.guest-reservation strong { display: block; margin: 6px 0; font-size: 25px; font-weight: 400; font-style: italic; }
.guest-form { border: 4px solid #a9aa8f; border-radius: 13px; padding: clamp(24px,5vw,42px); text-align: left; display: grid; gap: 22px; }
.guest-form label > span,
.guest-form legend { display: block; margin-bottom: 8px; font-size: clamp(18px,2.4vw,24px); font-style: italic; }
.guest-form input,
.guest-form textarea { width: 100%; border: 1px solid #aaa990; border-radius: 5px; padding: 13px 14px; color: var(--cream); background: rgba(10,12,5,.08); outline: none; }
.guest-form textarea { min-height: 96px; resize: vertical; }
.guest-form input:focus,
.guest-form textarea:focus { border-color: #e0d4a8; box-shadow: 0 0 0 3px rgba(224,212,168,.12); }
.two-column-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
fieldset { margin: 0; padding: 0; border: 0; }
.radio-option { display: inline-flex; align-items: center; gap: 8px; margin-right: 18px; }
.radio-option input { width: auto; }
.radio-option span { margin: 0 !important; font-size: 17px !important; font-style: normal !important; }
.submit-button { margin-top: 10px; border: 0; border-radius: 16px; background: #b6b69c; color: #32351b; padding: 18px 20px; font-family: var(--serif); letter-spacing: .08em; font-size: 17px; cursor: pointer; }
.submit-button:hover { background: #d0cfb3; }
.prototype-note { text-align: center; margin: -8px 0 0; font-size: 11px; opacity: .6; }
.form-monogram { width: 95px; margin: 35px auto 0; filter: invert(1); opacity: .7; }
.success-message { border: 4px solid #a9aa8f; border-radius: 13px; padding: 45px 30px; text-align: center; }
.success-message img { width: 110px; margin: 0 auto; }
.success-message h2 { margin: 12px 0 0; font-size: 50px; font-weight: 400; font-style: italic; }
.success-message p { font-size: 19px; }
.success-message button { border: 1px solid #a9aa8f; background: transparent; padding: 13px 20px; cursor: pointer; }

.toast { position: fixed; z-index: 1300; left: 50%; bottom: 24px; transform: translate(-50%, 25px); opacity: 0; visibility: hidden; background: #f7f2e8; color: #3b241b; padding: 12px 18px; border-radius: 999px; box-shadow: var(--shadow); transition: .3s ease; text-align: center; max-width: 90vw; }
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

@media (max-width: 720px) {
  .top-nav { top: max(10px, env(safe-area-inset-top)); right: 10px; gap: 5px; padding: 5px 7px; }
  .icon-control { width: 31px; height: 31px; }
  .intro-content { padding: 7vh 4vw 3vh; }
  .intro-title { width: min(440px, 76vw); margin-bottom: -15px; }
  .envelope-button { width: min(500px, 84vw); }
  .open-label { margin-top: 8px; }
  .countdown-section { flex-direction: column; gap: 8px; }
  .countdown-section > img { width: 90px; }
  .stay-heading { grid-template-columns: 70px 1fr 70px; }
  .stay-heading img { width: 58px; }
  .hotel-grid { grid-template-columns: 1fr; max-width: 500px; }
  .hotel-card { min-height: 730px; }
  .hotel-card > img { width: min(86%, 390px); }
  .hotel-copy { width: min(63%, 285px); }
  .two-column-fields { grid-template-columns: 1fr; }
}


@media (orientation: landscape) and (max-height: 900px) {
  .intro-content { padding-top: 3vh; }
  .intro-kicker { margin-top: 0; font-size: clamp(13px, 1.5vw, 21px); }
  .intro-title { width: min(430px, 43vw); margin-bottom: -22px; }
  .envelope-button { width: min(455px, 43vw); }
  .open-label { margin-top: 7px; font-size: clamp(11px, 1.1vw, 15px); }
}

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

/* ------------------------------------------------------------------
   V2 correction: every Canva page behaves as one fixed artboard.
   The artboard scales as a single piece, so objects do not reflow or
   drift independently and the Save the Date fits in one viewport.
   ------------------------------------------------------------------ */
.save-screen {
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  place-items: center;
  background: var(--brown);
}
.save-screen.is-active { display: grid; }
.save-artboard {
  position: relative;
  width: min(100vw, calc(100svh * 0.60445));
  height: min(100svh, calc(100vw / 0.60445));
  aspect-ratio: 2277 / 3767;
  margin: auto;
  overflow: hidden;
  background: var(--brown);
  box-shadow: 0 0 60px rgba(0,0,0,.18);
}
.save-artboard .save-stage {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 89.15%;
  aspect-ratio: auto;
  margin: 0;
}
.save-artboard .countdown-section {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10.85%;
  min-height: 0;
  padding: 1.1% 10% 1.4%;
  gap: 5.5%;
  flex-direction: row;
  border-top-width: clamp(3px, .65vw, 8px);
}
.save-artboard .countdown-section > img {
  width: 12.5%;
  flex: 0 0 auto;
}
.save-artboard .countdown-wrap { width: 55%; }
.save-artboard .countdown {
  grid-template-columns: repeat(5, 1fr);
  gap: 2.5%;
}
.save-artboard .countdown strong { font-size: 2.7cqi; }
.save-artboard .countdown small { font-size: .65cqi; }
.save-artboard .countdown-wrap > p { margin-top: .45%; font-size: 1.05cqi; }
.save-artboard .countdown-wrap .hashtag { font-size: .8cqi; }

/* Alignment corrections against the original Canva composition */
.save-artboard .save-envelope { width: 44%; left: 8.5%; top: .8%; transform: rotate(-2deg); }
.save-artboard .save-tray { width: 55%; right: 4%; top: 7.5%; transform: rotate(4deg); }
.save-artboard .save-orange { width: 15%; right: 34%; top: 13%; }
.save-artboard .save-red-flower { width: 13%; right: 15%; top: 17%; }
.save-artboard .save-flowers-gold { width: 14%; right: 5.5%; top: 10%; }
.save-artboard .save-flowers-top { width: 24%; right: -2%; top: -.5%; }
.save-artboard .main-card { width: 49%; right: 17%; top: 22.5%; }
.save-artboard .photo-strip { width: 27%; left: 13%; top: 31.5%; transform: rotate(-7deg); }
.save-artboard .info-card { width: 31%; right: 18%; top: 49%; transform: rotate(0deg); --rotation: 0deg; }
.save-artboard .details-medallion { width: 27%; left: 17%; top: 61%; transform: rotate(0deg); --rotation: 0deg; }
.save-artboard .save-polaroid { width: 28%; right: 13%; top: 68.2%; transform: rotate(11deg); }
.save-artboard .save-coffee { width: 18%; right: 16%; top: 58%; transform: rotate(8deg); }
.save-artboard .save-flowers-bottom { width: 31%; left: -1%; bottom: 6.5%; transform: rotate(24deg); }
.save-artboard .save-hanging { width: 15%; left: 43%; top: 40%; }
.save-artboard .save-love { width: 25%; left: 37.5%; bottom: 3.1%; }
.save-artboard .save-date-bottom { bottom: 1.55%; font-size: .9cqi; }

/* The controls stay above the artboard without changing its geometry. */
@media (max-width: 720px) {
  .save-artboard .countdown-section {
    flex-direction: row;
    gap: 5.5%;
    padding: 1.1% 9% 1.4%;
  }
  .save-artboard .countdown-section > img { width: 12.5%; }
}

/* ------------------------------------------------------------------
   V4 — Intro refinements approved by Juliana
   - Crop/zoom the video like the Canva composition: couple at the left,
     legs slightly cropped, Gemini diamond outside the frame.
   - Use the monogram seal integrated directly into the closed-envelope art.
   - Keep the CTA visible directly beneath the envelope.
   ------------------------------------------------------------------ */
.intro-video {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 53% center;
  transform: scale(1.08);
  transform-origin: center;
}



.open-label {
  margin-top: 7px;
}

@media (orientation: landscape) {
  .intro-video {
    width: 205%;
    height: 205%;
    left: -81.5%;
    top: -68%;
    right: auto;
    bottom: auto;
    object-fit: cover;
    object-position: center;
    transform: none;
  }
}

@media (orientation: landscape) and (max-height: 900px) {
  .intro-content { padding-top: 2.2vh; transform: translateY(7vh); }
  .intro-title { width: min(410px, 40vw); margin-bottom: -17px; }
  .envelope-button { width: min(445px, 42vw); }
  .open-label { margin-top: 5px; }
}


/* V7: wax seal and monogram are baked into one envelope image. */
.envelope-wax { display: none !important; }


/* ------------------------------------------------------------------
   V9 — Save the Date rebuilt to match the three Canva references.
   The page uses its natural tall artboard ratio instead of stretching
   the absolute-positioned objects across an arbitrary viewport height.
   ------------------------------------------------------------------ */
.save-screen {
  height: auto !important;
  min-height: 100svh !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  place-items: initial !important;
  background: var(--brown);
}
.save-screen.is-active { display: block !important; }

.save-artboard {
  position: relative !important;
  width: min(100%, 1348px) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  overflow: visible !important;
  background: var(--brown);
  box-shadow: none !important;
}

.save-artboard .save-stage {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1000 / 1590 !important;
  margin: 0 !important;
  overflow: hidden;
}

/* Top composition */
.save-artboard .save-envelope {
  width: 44%;
  left: 8.5%;
  top: .8%;
  transform: rotate(-2deg);
}
.save-artboard .save-tray {
  width: 55%;
  right: 4%;
  top: 7.5%;
  transform: rotate(4deg);
}
.save-artboard .save-orange {
  width: 15.5%;
  right: 32.5%;
  top: 12.8%;
  z-index: 2;
}
.save-artboard .save-red-flower {
  width: 12.5%;
  right: 14.3%;
  top: 16.4%;
  z-index: 7;
}
.save-artboard .save-flowers-gold {
  width: 14%;
  right: 5.5%;
  top: 10%;
}
.save-artboard .save-flowers-top {
  width: 24%;
  right: -2%;
  top: -.4%;
}
.save-artboard .main-card {
  width: 49%;
  right: 17%;
  top: 22.1%;
  z-index: 6;
}

/* Photo strip: photos now align with the actual transparent windows. */
.save-artboard .photo-strip {
  width: 27%;
  left: 13%;
  top: 31.5%;
  transform: rotate(-7deg);
}
.save-artboard .photo-slot {
  left: 6.2%;
  width: 87.6%;
  height: 38.1%;
}
.save-artboard .slot-one { top: 3.5%; }
.save-artboard .slot-two { top: 46%; }

/* Information card */
.save-artboard .info-card {
  width: 35%;
  right: 12.5%;
  top: 48.8%;
  transform: rotate(0deg);
  --rotation: 0deg;
  z-index: 8;
}
.save-artboard .info-card-copy {
  inset: 16.5% 14% 14%;
  gap: 3.5%;
  justify-content: center;
  line-height: 1.08;
}
.save-artboard .info-card-title {
  width: 87%;
  height: auto;
  object-fit: contain;
  margin: 0 auto -1%;
}
.save-artboard .info-card-blurb {
  display: block;
  max-width: 88%;
  font-family: var(--serif);
  font-size: 1.35cqi;
  line-height: 1.18;
}
.save-artboard .info-card-copy .underlined {
  font-size: 1.25cqi;
}
.save-artboard .save-hanging {
  width: 18%;
  left: 42.5%;
  top: 38.8%;
  z-index: 10;
}

/* More-details medallion */
.save-artboard .details-medallion {
  width: 27%;
  left: 17%;
  top: 60.7%;
  transform: rotate(-6deg);
  --rotation: -6deg;
}
.save-artboard .details-medallion-copy {
  inset: 25% 13% 27%;
  display: grid;
  place-items: center;
}
.save-artboard .details-medallion-copy img {
  width: 78%;
  height: auto;
  object-fit: contain;
}

/* Lower composition */
.save-artboard .save-polaroid {
  width: 28%;
  right: 13%;
  top: 68.2%;
  transform: rotate(11deg);
}
.save-artboard .save-coffee {
  width: 18%;
  right: 16%;
  top: 57%;
  transform: rotate(8deg);
}
.save-artboard .save-flowers-bottom {
  width: 31%;
  left: -1%;
  bottom: 6.5%;
  transform: rotate(24deg);
}
.save-artboard .save-love {
  width: 25%;
  left: 37.5%;
  bottom: 3.2%;
}
.save-artboard .save-date-bottom {
  bottom: 1.55%;
  font-size: .9cqi;
}

/* Footer matches the artboard width and keeps all countdown rows aligned. */
.save-artboard .countdown-section {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 285px !important;
  padding: 24px 7% 28px !important;
  gap: 5% !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  border-top-width: 8px;
}
.save-artboard .countdown-section > img {
  width: 13.5% !important;
  max-width: 165px;
  flex: 0 0 auto;
}
.save-artboard .countdown-wrap {
  width: 67% !important;
  max-width: none;
  text-align: center;
}
.save-artboard .countdown {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 2.5% !important;
  align-items: end;
}
.save-artboard .countdown span {
  min-width: 0;
  display: grid;
  justify-items: center;
}
.save-artboard .countdown strong {
  font-size: clamp(48px, 6.2vw, 98px) !important;
  line-height: .92;
  white-space: nowrap;
}
.save-artboard .countdown small {
  font-size: clamp(10px, 1.12vw, 17px) !important;
  letter-spacing: .1em;
  white-space: nowrap;
}
.save-artboard .countdown-wrap > p {
  margin-top: 12px !important;
  font-size: clamp(20px, 2.25vw, 34px) !important;
  line-height: 1;
}
.save-artboard .countdown-wrap .hashtag {
  margin-top: 10px !important;
  font-size: clamp(11px, 1vw, 15px) !important;
}

/* Smaller devices retain the same artboard proportions. */
@media (max-width: 720px) {
  .save-artboard .countdown-section {
    padding: 16px 4% 20px !important;
    gap: 3% !important;
  }
  .save-artboard .countdown-section > img { width: 14% !important; }
  .save-artboard .countdown-wrap { width: 76% !important; }
  .save-artboard .countdown strong { font-size: clamp(27px, 7.4vw, 48px) !important; }
  .save-artboard .countdown small { font-size: clamp(7px, 1.55vw, 11px) !important; }
  .save-artboard .countdown-wrap > p { font-size: clamp(14px, 3.5vw, 21px) !important; }
}


/* ------------------------------------------------------------------
   V10 — targeted polish pass from Juliana feedback
   ------------------------------------------------------------------ */
.save-artboard .save-orange {
  right: 31.7%;
  top: 15.2%;
  z-index: 4;
}
.save-artboard .save-red-flower {
  width: 10.8%;
  right: 18.3%;
  top: 18.6%;
  z-index: 9;
}

/* photostrip fine tuning */
.save-artboard .photo-slot {
  left: 7.1%;
  width: 86%;
  height: 37.35%;
}
.save-artboard .slot-one { top: 4.15%; }
.save-artboard .slot-two { top: 47.1%; }

/* flowers should overlap the information card more */
.save-artboard .save-hanging {
  width: 17%;
  left: 42.6%;
  top: 40.4%;
  z-index: 11;
}
.save-artboard .info-card {
  width: 34.4%;
  right: 11.8%;
  top: 49.1%;
}
.save-artboard .info-card-copy {
  inset: 17.5% 16.25% 14.5%;
  gap: 4.2%;
}
.save-artboard .info-card-title {
  width: 74%;
  margin: 0 auto 0.8%;
}
.save-artboard .info-card-blurb {
  max-width: 82%;
  font-size: 1.28cqi;
  line-height: 1.16;
  text-align: center;
  margin: 0 auto;
}
.save-artboard .info-card-copy .underlined {
  font-size: 1.18cqi;
  text-align: center;
}

/* more details centered inside the medallion */
.save-artboard .details-medallion {
  left: 15.8%;
  top: 60.8%;
  width: 27.2%;
}
.save-artboard .details-medallion-copy {
  inset: 29% 15% 30%;
}
.save-artboard .details-medallion-copy img {
  width: 64%;
}

/* slightly rebalance closing signature */
.save-artboard .save-love {
  width: 23.5%;
  left: 38.3%;
  bottom: 4.1%;
}
.save-artboard .save-date-bottom {
  bottom: 2.05%;
}

/* footer should span edge to edge and feel lighter */
.save-artboard .countdown-section {
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  min-height: 250px !important;
  padding: 20px 4.8vw 24px !important;
  gap: clamp(20px, 4vw, 58px) !important;
}
.save-artboard .countdown-section > img {
  width: clamp(86px, 10vw, 138px) !important;
  max-width: 138px;
}
.save-artboard .countdown-wrap {
  width: min(790px, 68vw) !important;
}
.save-artboard .countdown {
  gap: clamp(10px, 1.5vw, 24px) !important;
}
.save-artboard .countdown strong {
  font-size: clamp(34px, 4.55vw, 66px) !important;
}
.save-artboard .countdown small {
  font-size: clamp(9px, .88vw, 13px) !important;
}
.save-artboard .countdown-wrap > p {
  margin-top: 8px !important;
  font-size: clamp(18px, 1.85vw, 28px) !important;
}
.save-artboard .countdown-wrap .hashtag {
  margin-top: 8px !important;
}

@media (max-width: 720px) {
  .save-artboard .countdown-section {
    padding: 16px 4vw 18px !important;
  }
  .save-artboard .countdown-section > img { width: 16% !important; }
  .save-artboard .countdown-wrap { width: 74vw !important; }
  .save-artboard .countdown strong { font-size: clamp(24px, 6vw, 42px) !important; }
  .save-artboard .countdown small { font-size: clamp(7px, 1.35vw, 10px) !important; }
  .save-artboard .countdown-wrap > p { font-size: clamp(14px, 3vw, 20px) !important; }
}


/* ------------------------------------------------------------------
   V11 — composition corrections
   ------------------------------------------------------------------ */
/* top cluster */
.save-artboard .save-orange {
  width: 15.2%;
  right: 30.9%;
  top: 19.2%;
  z-index: 4;
}
.save-artboard .save-red-flower {
  width: 10.3%;
  right: 16.2%;
  top: 24.35%;
  z-index: 9;
}
.save-artboard .main-card {
  z-index: 6;
}

/* photo strip fit */
.save-artboard .photo-strip {
  width: 27.2%;
  left: 12.6%;
  top: 31.4%;
  transform: rotate(-7deg);
}
.save-artboard .photo-slot {
  left: 6.55%;
  width: 87.1%;
  height: 37.65%;
}
.save-artboard .slot-one { top: 3.8%; }
.save-artboard .slot-two { top: 46.35%; }

/* info card and hanging flowers */
.save-artboard .save-hanging {
  width: 18.1%;
  left: 43.7%;
  top: 40.15%;
  z-index: 12;
}
.save-artboard .info-card {
  width: 34.6%;
  right: 12%;
  top: 49.15%;
}
.save-artboard .info-card-copy {
  inset: 18.5% 15.2% 14.7%;
  gap: 4%;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.save-artboard .info-card-title {
  width: 70%;
  margin: 0 auto 1%;
}
.save-artboard .info-card-blurb {
  max-width: 80%;
  margin: 0 auto;
  text-align: center;
  font-size: 1.2cqi;
  line-height: 1.18;
}
.save-artboard .info-card-copy .underlined {
  margin-top: .3%;
  font-size: 1.12cqi;
  text-align: center;
}

/* more details medallion */
.save-artboard .details-medallion {
  left: 15.95%;
  top: 60.9%;
  width: 27%;
}
.save-artboard .details-medallion-copy {
  inset: 31.4% 17% 30.5%;
  display: grid;
  place-items: center;
}
.save-artboard .details-medallion-copy img {
  width: 58%;
}

/* signature fonts */
.save-artboard .save-love {
  position: absolute;
  left: 38.2%;
  bottom: 4.1%;
  width: 24%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25vw;
  text-align: center;
  color: var(--cream);
  z-index: 10;
}
.save-artboard .save-love .love-prefix {
  display: block;
  font-family: var(--serif);
  font-size: 1.45cqi;
  letter-spacing: .06em;
  text-transform: none;
}
.save-artboard .save-love .love-names {
  display: block;
  font-family: "New Icon Script", cursive;
  font-size: 3.05cqi;
  line-height: .92;
  letter-spacing: 0;
}
.save-artboard .save-date-bottom {
  bottom: 2.02%;
}

/* smaller, cleaner countdown */
.save-artboard .countdown-section {
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  min-height: 210px !important;
  padding: 18px 3.2vw 22px !important;
  gap: clamp(16px, 2.8vw, 34px) !important;
}
.save-artboard .countdown-section > img {
  width: clamp(76px, 8vw, 122px) !important;
  max-width: 122px;
}
.save-artboard .countdown-wrap {
  width: min(760px, 72vw) !important;
}
.save-artboard .countdown {
  gap: clamp(8px, 1vw, 16px) !important;
}
.save-artboard .countdown strong {
  font-size: clamp(26px, 3.65vw, 52px) !important;
  line-height: .92;
}
.save-artboard .countdown small {
  font-size: clamp(8px, .72vw, 11px) !important;
  letter-spacing: .08em;
}
.save-artboard .countdown-wrap > p {
  margin-top: 7px !important;
  font-size: clamp(15px, 1.65vw, 24px) !important;
}
.save-artboard .countdown-wrap .hashtag {
  margin-top: 5px !important;
  font-size: clamp(10px, .82vw, 13px) !important;
}

@media (max-width: 720px) {
  .save-artboard .save-orange { right: 30.5%; top: 19.5%; }
  .save-artboard .save-red-flower { right: 15.8%; top: 24.5%; }
  .save-artboard .info-card-blurb { font-size: 1.7cqi; }
  .save-artboard .info-card-copy .underlined { font-size: 1.55cqi; }
  .save-artboard .save-love .love-prefix { font-size: 2.05cqi; }
  .save-artboard .save-love .love-names { font-size: 4.2cqi; }
  .save-artboard .countdown-section { padding: 16px 3vw 18px !important; }
  .save-artboard .countdown-section > img { width: 15% !important; }
  .save-artboard .countdown-wrap { width: 78vw !important; }
  .save-artboard .countdown strong { font-size: clamp(22px, 5vw, 36px) !important; }
  .save-artboard .countdown small { font-size: clamp(6px, 1.2vw, 9px) !important; }
  .save-artboard .countdown-wrap > p { font-size: clamp(12px, 2.8vw, 18px) !important; }
}

/* ------------------------------------------------------------------
   V12 — fine alignment pass from screenshot feedback
   ------------------------------------------------------------------ */
.save-artboard .save-tray {
  width: 54.5%;
  right: 6.8%;
  top: 8.7%;
  transform: rotate(2.2deg);
}
.save-artboard .save-orange {
  width: 13.8%;
  right: 33.2%;
  top: 20.25%;
  z-index: 4;
}
.save-artboard .save-red-flower {
  width: 8.4%;
  right: 19.8%;
  top: 28.35%;
  z-index: 10;
}

/* tighten the polaroid strip image fit */
.save-artboard .photo-strip {
  width: 27.1%;
  left: 12.55%;
  top: 31.55%;
  transform: rotate(-6.8deg);
}
.save-artboard .photo-slot {
  left: 7.05%;
  width: 85.9%;
  height: 36.85%;
  object-position: center center;
}
.save-artboard .slot-one { top: 4.3%; }
.save-artboard .slot-two { top: 46.55%; }

/* make the flowers actually touch the info card */
.save-artboard .save-hanging {
  width: 18.6%;
  left: 43.9%;
  top: 45.35%;
  z-index: 13;
}
.save-artboard .info-card {
  width: 35.2%;
  right: 11.45%;
  top: 48.9%;
}
.save-artboard .info-card-copy {
  inset: 16.4% 15.8% 12.9%;
  gap: 3.5%;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.save-artboard .info-card-title {
  width: 62%;
  margin: 0 auto .6%;
}
.save-artboard .info-card-blurb {
  max-width: 69%;
  margin: 0 auto;
  font-size: 1.07cqi;
  line-height: 1.16;
  text-align: center;
}
.save-artboard .info-card-copy .underlined {
  font-size: 1.05cqi;
  margin-top: .15%;
  text-align: center;
}

/* center the medallion label */
.save-artboard .details-medallion {
  left: 15.65%;
  top: 60.85%;
  width: 27.15%;
}
.save-artboard .details-medallion-copy {
  inset: 24.8% 15.5% 25.5%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.save-artboard .details-medallion-copy img {
  width: 45.5%;
  margin: 0 auto;
}

/* calmer footer/countdown scale */
.save-artboard .countdown-section {
  min-height: 178px !important;
  padding: 14px 2vw 16px !important;
  gap: clamp(12px, 2vw, 26px) !important;
}
.save-artboard .countdown-section > img {
  width: clamp(70px, 7.1vw, 98px) !important;
  max-width: 98px !important;
}
.save-artboard .countdown-wrap {
  width: min(720px, 70vw) !important;
}
.save-artboard .countdown {
  gap: clamp(10px, 1.2vw, 18px) !important;
}
.save-artboard .countdown strong {
  font-size: clamp(22px, 2.85vw, 38px) !important;
  line-height: .9;
}
.save-artboard .countdown small {
  font-size: clamp(7px, .62vw, 10px) !important;
}
.save-artboard .countdown-wrap > p {
  margin-top: 5px !important;
  font-size: clamp(13px, 1.45vw, 21px) !important;
}
.save-artboard .countdown-wrap .hashtag {
  margin-top: 2px !important;
  font-size: clamp(9px, .72vw, 12px) !important;
}

@media (max-width: 720px) {
  .save-artboard .save-tray { right: 4.5%; top: 9.1%; width: 57%; }
  .save-artboard .save-orange { right: 32.6%; top: 19.8%; width: 14.6%; }
  .save-artboard .save-red-flower { right: 19.2%; top: 28.1%; width: 9.4%; }
  .save-artboard .save-hanging { left: 43.2%; top: 45.1%; width: 19.4%; }
  .save-artboard .info-card-blurb { max-width: 72%; font-size: 1.55cqi; }
  .save-artboard .info-card-copy .underlined { font-size: 1.45cqi; }
  .save-artboard .details-medallion-copy img { width: 49%; }
  .save-artboard .countdown-section { min-height: 154px !important; padding: 12px 2vw 14px !important; }
  .save-artboard .countdown-section > img { width: 15.5% !important; }
  .save-artboard .countdown-wrap { width: 78vw !important; }
  .save-artboard .countdown strong { font-size: clamp(18px, 4.2vw, 30px) !important; }
  .save-artboard .countdown-wrap > p { font-size: clamp(11px, 2.2vw, 16px) !important; }
}

/* ------------------------------------------------------------------
   V13 — tighter visual match from latest feedback
   ------------------------------------------------------------------ */
/* top composition */
.save-artboard .save-tray {
  width: 58.2%;
  right: 4.8%;
  top: 8.25%;
  transform: rotate(2.1deg);
}
.save-artboard .save-orange {
  width: 14.8%;
  right: 31.0%;
  top: 19.25%;
  z-index: 4;
}
.save-artboard .save-red-flower {
  width: 7.5%;
  right: 17.15%;
  top: 23.15%;
  z-index: 10;
}

/* photo strip fit */
.save-artboard .photo-strip {
  width: 26.75%;
  left: 12.45%;
  top: 31.45%;
  transform: rotate(-6.9deg);
}
.save-artboard .photo-slot {
  left: 6.15%;
  width: 87.65%;
  height: 37.95%;
  object-fit: cover;
}
.save-artboard .slot-one {
  top: 3.55%;
  object-position: 50% 40%;
}
.save-artboard .slot-two {
  top: 46.15%;
  object-position: 50% 58%;
}

/* info cluster */
.save-artboard .save-hanging {
  width: 17.4%;
  right: 21.0%;
  left: auto;
  top: 44.95%;
  z-index: 13;
}
.save-artboard .info-card {
  width: 35.4%;
  right: 10.95%;
  top: 49.15%;
}
.save-artboard .info-card-copy {
  inset: 14.9% 13.6% 12.3%;
  gap: 2.7%;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.save-artboard .info-card-title {
  width: 67%;
  margin: 0 auto 1.2%;
}
.save-artboard .info-card-blurb {
  max-width: 72%;
  margin: 0 auto;
  font-size: 1.14cqi;
  line-height: 1.18;
  text-align: center;
}
.save-artboard .info-card-copy .underlined {
  font-size: 1.06cqi;
  margin-top: 1.2%;
  text-align: center;
}

/* more details medallion */
.save-artboard .details-medallion {
  left: 15.55%;
  top: 60.95%;
  width: 27.25%;
}
.save-artboard .details-medallion-copy {
  inset: 20.5% 13.5% 21.5%;
  display: grid;
  place-items: center;
}
.save-artboard .details-medallion-copy img {
  width: 52%;
  margin: 0 auto;
  transform: translateY(-5%);
}

/* countdown should feel compact and centered */
.save-artboard .countdown-section {
  min-height: 164px !important;
  padding: 12px 2vw 14px !important;
  gap: clamp(14px, 2vw, 24px) !important;
}
.save-artboard .countdown-section > img {
  width: clamp(70px, 6.4vw, 92px) !important;
  max-width: 92px !important;
}
.save-artboard .countdown-wrap {
  width: auto !important;
  max-width: 640px !important;
}
.save-artboard .countdown {
  grid-template-columns: repeat(5, max-content) !important;
  justify-content: center !important;
  gap: clamp(12px, 1.6vw, 22px) !important;
}
.save-artboard .countdown span {
  min-width: clamp(48px, 6vw, 74px);
}
.save-artboard .countdown strong {
  font-size: clamp(20px, 2.35vw, 31px) !important;
  line-height: .92;
}
.save-artboard .countdown small {
  font-size: clamp(7px, .58vw, 9px) !important;
  letter-spacing: .06em;
}
.save-artboard .countdown-wrap > p {
  margin-top: 4px !important;
  font-size: clamp(12px, 1.28vw, 18px) !important;
}
.save-artboard .countdown-wrap .hashtag {
  margin-top: 1px !important;
  font-size: clamp(8px, .64vw, 11px) !important;
}

@media (max-width: 720px) {
  .save-artboard .save-tray { width: 60.5%; right: 3.6%; top: 8.5%; }
  .save-artboard .save-orange { width: 15.5%; right: 30.2%; top: 19.0%; }
  .save-artboard .save-red-flower { width: 8.4%; right: 16.4%; top: 22.8%; }
  .save-artboard .save-hanging { width: 18.6%; right: 20.4%; top: 44.4%; }
  .save-artboard .info-card-blurb { font-size: 1.52cqi; max-width: 74%; }
  .save-artboard .info-card-copy .underlined { font-size: 1.42cqi; }
  .save-artboard .details-medallion-copy img { width: 56%; }
  .save-artboard .countdown-section { min-height: 150px !important; padding: 11px 2vw 13px !important; }
  .save-artboard .countdown-section > img { width: 14.2% !important; }
  .save-artboard .countdown { gap: clamp(8px, 2vw, 14px) !important; }
  .save-artboard .countdown strong { font-size: clamp(17px, 3.8vw, 25px) !important; }
  .save-artboard .countdown-wrap > p { font-size: clamp(11px, 2vw, 15px) !important; }
}

/* ------------------------------------------------------------------
   V14 — grouped Canva elements for exact visual relationships while
   preserving independent motion and clickable interaction.
   ------------------------------------------------------------------ */
.save-screen {
  height: auto !important;
  min-height: 100svh !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  display: block !important;
  background: var(--brown);
}
.save-screen.is-active { display: block !important; }
.save-artboard {
  position: relative !important;
  width: min(100%, 1000px) !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  overflow: visible !important;
  background: var(--brown);
  box-shadow: none !important;
}
.save-artboard .final-save-stage {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1000 / 1590 !important;
  overflow: hidden;
  background: var(--brown);
}
.save-group { position: absolute; border: 0; padding: 0; background: none; }
.group-image { width: 100%; height: auto; pointer-events: none; }
.final-top-group { width: 82%; left: 8.5%; top: .5%; z-index: 4; }
.final-main-copy {
  position: absolute; left: 39%; top: 56.3%; width: 49.5%; height: 31%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--green); font-family: var(--serif);
}
.final-main-copy p { margin: .45em 0; font-size: 1.18cqi; line-height: 1.25; }
.final-main-copy img { width: 88%; margin: 1% auto; }
.final-photo-strip {
  position: absolute; width: 29.5%; left: 8.4%; top: 29.8%; z-index: 8;
  filter: drop-shadow(0 15px 14px rgba(0,0,0,.24));
}
.final-info-group {
  width: 39.5%; right: 10.5%; top: 43.7%; z-index: 9;
  filter: drop-shadow(0 15px 18px rgba(0,0,0,.23));
}
.final-info-copy {
  position: absolute; left: 27%; top: 43.5%; width: 66%; height: 39%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5%; color: var(--cream); text-align: center;
}
.final-info-copy .info-card-title { width: 77%; margin: 0 auto; }
.final-info-copy .info-card-blurb {
  max-width: 83%; margin: 0 auto; font-family: var(--serif);
  font-size: 1.22cqi; line-height: 1.15;
}
.final-info-copy .underlined { font-size: 1.08cqi; }
.final-details-group {
  width: 27.5%; left: 11.5%; top: 57.2%; z-index: 10;
  filter: drop-shadow(0 12px 13px rgba(0,0,0,.22));
}
.final-details-copy {
  position: absolute; left: 16%; top: 21%; width: 68%; height: 25%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--cream);
}
.final-details-copy img { width: 78%; margin: 0 auto; }
.final-details-copy .details-here { margin-top: -1%; font-family: var(--serif); font-size: 1.15cqi; }
.final-polaroid {
  position: absolute; width: 29.2%; right: 8.5%; top: 66.6%; transform: rotate(10deg);
  z-index: 8; filter: drop-shadow(0 16px 15px rgba(0,0,0,.25));
}
.final-coffee { position: absolute; width: 22%; right: 12%; top: 55.2%; transform: rotate(9deg); z-index: 5; }
.final-bottom-flowers { position: absolute; width: 35%; left: -4%; bottom: 6.5%; transform: rotate(25deg); z-index: 5; }
.final-bottom-seal {
  position: absolute; width: 8.2%; right: 33.5%; bottom: 15.2%; z-index: 10;
  filter: drop-shadow(0 8px 9px rgba(0,0,0,.25));
}
.save-artboard .final-love { left: 38%; bottom: 4.6%; width: 24%; }
.save-artboard .final-love .love-prefix { font-size: 1.25cqi; }
.save-artboard .final-love .love-names { font-size: 2.85cqi; }
.save-artboard .final-date-bottom { bottom: 2.35%; font-size: .85cqi; }
.reveal-group { animation: saveRise .9s cubic-bezier(.2,.8,.2,1) both; }
.delay-one { animation-delay: .12s; }
.delay-two { animation-delay: .24s; }
.delay-three { animation-delay: .36s; }
@keyframes saveRise { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }
.final-info-group:hover, .final-details-group:hover { transform: translateY(-5px); }
.save-artboard .final-footer {
  position: relative !important; left: 50% !important; transform: translateX(-50%) !important;
  width: 100vw !important; min-height: 190px !important; padding: 14px 4vw 16px !important;
  gap: clamp(16px, 2.8vw, 38px) !important; flex-direction: row !important;
  justify-content: center !important; align-items: center !important; border-top-width: 8px;
}
.save-artboard .final-footer > img { width: clamp(72px, 7vw, 104px) !important; max-width: 104px !important; flex: 0 0 auto; }
.save-artboard .final-footer .countdown-wrap {
  width: min(650px, 68vw) !important; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.save-artboard .final-footer .countdown {
  grid-template-columns: repeat(5, max-content) !important; justify-content: center;
  gap: clamp(10px, 1.5vw, 22px) !important;
}
.save-artboard .final-footer .countdown span { min-width: clamp(48px, 5.5vw, 70px); justify-items: center; }
.save-artboard .final-footer .countdown strong { font-size: clamp(22px, 2.55vw, 34px) !important; line-height: .92; }
.save-artboard .final-footer .countdown small { font-size: clamp(6px, .55vw, 9px) !important; letter-spacing: .05em; }
.save-artboard .final-footer .footer-before { margin: 5px 0 0 !important; font-size: clamp(12px, 1.15vw, 17px) !important; }
.save-artboard .final-footer .hashtag { margin: 1px 0 4px !important; font-size: clamp(8px, .65vw, 11px) !important; }
.footer-contact { margin: 2px 0 0; color: #4a4038; font-family: var(--body-serif); font-style: italic; font-size: clamp(9px, .75vw, 12px); }
.footer-phone { color: #334b3c; font-family: var(--serif); font-size: clamp(9px, .72vw, 11px); text-underline-offset: 3px; }
.footer-back { margin-top: 7px; border: 0; background: none; color: #53645a; font-family: var(--serif); font-size: clamp(9px, .72vw, 11px); letter-spacing: .12em; cursor: pointer; }
@media (max-width: 720px) {
  .final-top-group { width: 87%; left: 6%; }
  .final-photo-strip { width: 31%; left: 6.2%; top: 30%; }
  .final-info-group { width: 41%; right: 8%; }
  .final-details-group { width: 29%; left: 9%; }
  .final-polaroid { width: 31%; right: 6%; }
  .final-bottom-flowers { width: 38%; left: -6%; }
  .final-main-copy p { font-size: 1.65cqi; }
  .final-info-copy .info-card-blurb { font-size: 1.62cqi; }
  .final-info-copy .underlined { font-size: 1.48cqi; }
  .final-details-copy .details-here { font-size: 1.55cqi; }
  .save-artboard .final-footer { min-height: 160px !important; padding: 12px 2vw 14px !important; gap: 10px !important; }
  .save-artboard .final-footer > img { width: 15% !important; }
  .save-artboard .final-footer .countdown-wrap { width: 78vw !important; }
  .save-artboard .final-footer .countdown { gap: 7px !important; }
  .save-artboard .final-footer .countdown strong { font-size: clamp(18px, 4.2vw, 27px) !important; }
  .save-artboard .final-footer .countdown small { font-size: clamp(5px, 1.15vw, 8px) !important; }
}

/* ------------------------------------------------------------------
   V15 — exact Canva SVG artwork with interactive web overlays
   ------------------------------------------------------------------ */
.svg-save-screen {
  min-height: 100svh !important;
  height: auto !important;
  display: none;
  overflow-x: hidden;
  overflow-y: visible;
  background: var(--brown);
}
.svg-save-screen.is-active { display: block !important; }
.svg-save-canvas {
  position: relative;
  width: min(100vw, 1366px);
  aspect-ratio: 1366 / 2260;
  margin: 0 auto;
  background: var(--brown);
  overflow: hidden;
}
.svg-save-artwork {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.svg-hotspot {
  position: absolute;
  z-index: 12;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 14px;
}
.svg-hotspot:focus-visible {
  outline: 3px solid rgba(247,242,232,.9);
  outline-offset: 4px;
}
.svg-hotspot-info {
  left: 42.5%;
  top: 40.2%;
  width: 31%;
  height: 18.5%;
}
.svg-hotspot-details {
  left: 18.5%;
  top: 53.2%;
  width: 26.5%;
  height: 22%;
}
.svg-countdown-overlay {
  position: absolute;
  z-index: 13;
  left: 37.1%;
  top: 90.4%;
  width: 36.5%;
  height: 9.1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .5% 1% .35%;
  color: #193d2b;
  background: #fff;
  text-align: center;
  font-family: var(--serif);
}
.svg-countdown {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.2%;
  align-items: end;
}
.svg-countdown span { display: grid; justify-items: center; min-width: 0; }
.svg-countdown strong {
  font-family: var(--serif);
  font-size: clamp(13px, 1.9vw, 28px);
  line-height: .94;
  font-weight: 400;
  white-space: nowrap;
}
.svg-countdown small {
  margin-top: 3px;
  font-family: var(--serif);
  font-size: clamp(4px, .38vw, 6px);
  letter-spacing: .04em;
  white-space: nowrap;
}
.svg-before {
  margin: .45em 0 0;
  font-size: clamp(6px, .58vw, 9px);
  line-height: 1;
}
.svg-hashtag {
  margin: .32em 0 0;
  font-size: clamp(5px, .45vw, 7px);
  line-height: 1;
}
.svg-contact {
  margin: .8em 0 0;
  font-family: var(--body-serif);
  font-style: italic;
  font-size: clamp(5px, .47vw, 7px);
  line-height: 1;
}
.svg-phone {
  color: inherit;
  font-family: var(--body-serif);
  font-style: italic;
  font-size: clamp(5px, .48vw, 7px);
  text-underline-offset: 2px;
}
.svg-back {
  margin-top: .55em;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--serif);
  font-size: clamp(5px, .48vw, 7px);
  letter-spacing: .08em;
  cursor: pointer;
}
@media (max-width: 720px) {
  .svg-save-canvas { width: 100vw; }
  .svg-countdown-overlay {
    left: 34.5%;
    width: 41.5%;
    top: 90.25%;
    height: 9.25%;
  }
  .svg-countdown strong { font-size: clamp(11px, 3.1vw, 20px); }
  .svg-countdown small { font-size: clamp(3px, .75vw, 5px); }
  .svg-before { font-size: clamp(5px, 1.05vw, 7px); }
  .svg-hashtag,
  .svg-contact,
  .svg-phone,
  .svg-back { font-size: clamp(4px, .9vw, 6px); }
}

/* ------------------------------------------------------------------
   V16 — restore true screen navigation + full-width Canva footer
   ------------------------------------------------------------------ */

/* Only the selected screen is rendered. This overrides the legacy V14
   save-screen rule that accidentally kept Save the Date visible beneath
   Los Detalles and Tu Información. */
.screen,
.save-screen,
.svg-save-screen {
  display: none !important;
}
.screen.is-active,
.save-screen.is-active,
.svg-save-screen.is-active {
  display: block !important;
}

/* The Canva SVG intentionally exports the footer background as transparent.
   Rebuild the full-width cream footer and its thin metallic divider behind
   the artwork, so the dynamic countdown blends into the original design. */
.svg-save-screen.is-active {
  position: relative;
  background:
    linear-gradient(
      to bottom,
      var(--brown) 0%,
      var(--brown) 90.18%,
      #9d7741 90.18%,
      #d7bf91 90.34%,
      #f2e8d7 90.48%,
      #a67d42 90.62%,
      #f9f6f0 90.78%,
      #f9f6f0 100%
    );
}
.svg-save-canvas {
  background: transparent !important;
}

/* Central countdown panel: it masks Canva's placeholder countdown while
   remaining visually invisible against the restored full-width footer. */
.svg-countdown-overlay {
  top: 90.72% !important;
  height: 8.95% !important;
  background: #f9f6f0 !important;
  padding-top: .62% !important;
  padding-bottom: .3% !important;
}

/* Make the footer slightly more refined and closer to the Canva reference. */
.svg-countdown strong {
  font-size: clamp(13px, 1.72vw, 25px) !important;
  letter-spacing: .025em;
}
.svg-countdown small {
  margin-top: 4px !important;
  font-size: clamp(4px, .34vw, 5.5px) !important;
}
.svg-before {
  margin-top: .65em !important;
}
.svg-contact {
  margin-top: .9em !important;
}

@media (max-width: 720px) {
  .svg-countdown-overlay {
    top: 90.7% !important;
    height: 9% !important;
  }
}


/* ------------------------------------------------------------------
   V17 — rebuild the footer as one responsive composition
   ------------------------------------------------------------------ */
.svg-save-canvas {
  container-type: inline-size;
}

/* Mask Canva's static footer completely and rebuild it at full width.
   This removes the floating white rectangle/notches and keeps the seal,
   countdown and small copy together as one centered footer cluster. */
.svg-countdown-overlay {
  left: 0 !important;
  right: 0 !important;
  top: 90.12% !important;
  bottom: 0 !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box;
  display: grid !important;
  place-items: center;
  padding: .72cqi 0 .18cqi !important;
  overflow: hidden;
  background: #f8f5ef !important;
  color: #173d29;
}

.svg-countdown-overlay::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto 0;
  height: .72cqi;
  background: linear-gradient(
    to bottom,
    #7f5728 0%,
    #c9a66e 22%,
    #f2dfbd 43%,
    #91652f 62%,
    #d8bc88 80%,
    #fff8ec 100%
  );
  box-shadow: 0 .11cqi .14cqi rgba(91, 56, 25, .22);
}

.svg-footer-inner {
  position: relative;
  z-index: 1;
  width: 39.5cqi;
  max-width: 540px;
  display: grid;
  grid-template-columns: 7.15cqi minmax(0, 1fr);
  align-items: center;
  column-gap: 1.15cqi;
  transform: translateY(-.05cqi);
}

.svg-footer-seal {
  display: block;
  width: 7.15cqi;
  height: 7.15cqi;
  object-fit: contain;
  filter: drop-shadow(0 .15cqi .18cqi rgba(67, 43, 19, .18));
}

.svg-footer-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1;
}

.svg-countdown {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: end !important;
  gap: .55cqi !important;
}

.svg-countdown span {
  display: grid;
  justify-items: center;
  align-items: end;
  min-width: 0;
}

.svg-countdown strong {
  font-family: var(--serif);
  font-size: clamp(8px, 1.78cqi, 24px) !important;
  line-height: .92 !important;
  font-weight: 400;
  letter-spacing: .015em !important;
}

.svg-countdown small {
  margin-top: .30cqi !important;
  font-family: var(--serif);
  font-size: clamp(3px, .34cqi, 5px) !important;
  line-height: 1 !important;
  letter-spacing: .045em !important;
}

.svg-before {
  margin: .50cqi 0 0 !important;
  font-size: clamp(4px, .62cqi, 8.5px) !important;
  line-height: 1 !important;
}

.svg-hashtag {
  margin: .16cqi 0 0 !important;
  font-size: clamp(3px, .43cqi, 6px) !important;
  line-height: 1 !important;
}

.svg-contact {
  margin: .64cqi 0 0 !important;
  font-family: var(--body-serif);
  font-style: italic;
  font-size: clamp(3px, .45cqi, 6.2px) !important;
  line-height: 1 !important;
}

.svg-phone {
  margin-top: .12cqi;
  color: inherit;
  font-family: var(--body-serif);
  font-style: italic;
  font-size: clamp(3px, .46cqi, 6.3px) !important;
  line-height: 1 !important;
  text-underline-offset: .12cqi;
}

.svg-back {
  margin-top: .42cqi !important;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--serif);
  font-size: clamp(3px, .46cqi, 6.3px) !important;
  line-height: 1 !important;
  letter-spacing: .09em !important;
  cursor: pointer;
}

@media (max-width: 720px) {
  .svg-countdown-overlay {
    left: 0 !important;
    top: 90.12% !important;
    width: 100% !important;
    height: auto !important;
    padding: .72cqi 0 .18cqi !important;
  }
  .svg-footer-inner {
    width: 43cqi;
    grid-template-columns: 7.6cqi minmax(0, 1fr);
    column-gap: 1.25cqi;
  }
  .svg-footer-seal {
    width: 7.6cqi;
    height: 7.6cqi;
  }
}

/* ------------------------------------------------------------------
   V18 — readable footer + one continuous divider
   ------------------------------------------------------------------ */

/* Remove the older full-screen segmented gradient. The rebuilt footer
   below is the only element responsible for the cream area and divider. */
.svg-save-screen.is-active {
  background: var(--brown) !important;
  overflow-x: clip !important;
}

.svg-save-canvas {
  overflow: visible !important;
}

/* The footer spans the viewport, even when the Canva artwork is capped at
   1366px. This prevents the centered divider from breaking into sections. */
.svg-countdown-overlay {
  left: 50% !important;
  right: auto !important;
  top: 90.12% !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: auto !important;
  min-height: 0 !important;
  transform: translateX(-50%) !important;
  padding: 18px 20px 12px !important;
  overflow: hidden !important;
  background: #f8f5ef !important;
  box-sizing: border-box !important;
}

/* One seamless metallic divider from edge to edge. */
.svg-countdown-overlay::before {
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: 12px !important;
  background: linear-gradient(
    to bottom,
    #6e451d 0%,
    #9c7137 13%,
    #d6bb87 28%,
    #f5e8cc 45%,
    #9a6b30 62%,
    #caa66d 78%,
    #efe0c2 91%,
    #8a5d28 100%
  ) !important;
  box-shadow: 0 2px 3px rgba(72, 44, 18, .22) !important;
}

.svg-footer-inner {
  width: min(920px, 82vw) !important;
  max-width: none !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  column-gap: 34px !important;
  transform: translateY(3px) !important;
}

.svg-footer-seal {
  width: 150px !important;
  height: 150px !important;
  filter: drop-shadow(0 3px 4px rgba(67, 43, 19, .2)) !important;
}

.svg-footer-copy {
  line-height: 1.05 !important;
}

.svg-countdown {
  gap: 22px !important;
}

.svg-countdown strong {
  font-size: 42px !important;
  line-height: .92 !important;
  letter-spacing: .015em !important;
}

.svg-countdown small {
  margin-top: 6px !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
}

.svg-before {
  margin: 8px 0 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.svg-hashtag {
  margin: 3px 0 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.svg-contact {
  margin: 10px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.05 !important;
}

.svg-phone {
  margin-top: 3px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-underline-offset: 2px !important;
}

.svg-back {
  margin-top: 7px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: .1em !important;
}

@media (max-width: 900px) {
  .svg-countdown-overlay {
    padding: 13px 12px 8px !important;
  }
  .svg-countdown-overlay::before {
    height: 8px !important;
  }
  .svg-footer-inner {
    width: min(620px, 88vw) !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    column-gap: 16px !important;
  }
  .svg-footer-seal {
    width: 88px !important;
    height: 88px !important;
  }
  .svg-countdown {
    gap: 8px !important;
  }
  .svg-countdown strong {
    font-size: clamp(20px, 4vw, 29px) !important;
  }
  .svg-countdown small {
    margin-top: 4px !important;
    font-size: clamp(4px, .8vw, 6px) !important;
  }
  .svg-before {
    margin-top: 6px !important;
    font-size: clamp(7px, 1.25vw, 10px) !important;
  }
  .svg-hashtag {
    font-size: clamp(5.5px, .95vw, 8px) !important;
  }
  .svg-contact,
  .svg-phone {
    font-size: clamp(6px, 1vw, 8.5px) !important;
  }
  .svg-back {
    font-size: clamp(6px, 1vw, 8px) !important;
  }
}

@media (max-width: 520px) {
  .svg-footer-inner {
    width: 94vw !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    column-gap: 9px !important;
  }
  .svg-footer-seal {
    width: 64px !important;
    height: 64px !important;
  }
  .svg-countdown {
    gap: 3px !important;
  }
  .svg-countdown strong {
    font-size: 17px !important;
  }
  .svg-countdown small {
    font-size: 3.5px !important;
    margin-top: 3px !important;
  }
  .svg-before {
    margin-top: 4px !important;
    font-size: 6px !important;
  }
  .svg-hashtag,
  .svg-contact,
  .svg-phone,
  .svg-back {
    font-size: 4.5px !important;
  }
  .svg-contact {
    margin-top: 5px !important;
  }
  .svg-back {
    margin-top: 4px !important;
  }
}

/* ------------------------------------------------------------------
   V19 — enlarge only the lower footer copy
   ------------------------------------------------------------------ */
.svg-before {
  font-size: 18px !important;
  line-height: 1.08 !important;
}
.svg-hashtag {
  margin-top: 4px !important;
  font-size: 13px !important;
  line-height: 1.08 !important;
}
.svg-contact {
  margin-top: 12px !important;
  font-size: 15px !important;
  line-height: 1.12 !important;
}
.svg-phone {
  margin-top: 4px !important;
  font-size: 15px !important;
  line-height: 1.08 !important;
}
.svg-back {
  margin-top: 8px !important;
  font-size: 13px !important;
  line-height: 1.08 !important;
}

@media (max-width: 900px) {
  .svg-before { font-size: clamp(10px, 1.8vw, 14px) !important; }
  .svg-hashtag { font-size: clamp(8px, 1.35vw, 11px) !important; }
  .svg-contact,
  .svg-phone { font-size: clamp(9px, 1.5vw, 12px) !important; }
  .svg-back { font-size: clamp(8px, 1.35vw, 11px) !important; }
}

@media (max-width: 520px) {
  .svg-before { font-size: 8px !important; }
  .svg-hashtag { font-size: 6.5px !important; }
  .svg-contact,
  .svg-phone { font-size: 7px !important; }
  .svg-back { font-size: 6.5px !important; }
}

/* ------------------------------------------------------------------
   V21 — center footer cluster on the same axis as “With Love”
   ------------------------------------------------------------------ */
.svg-footer-inner {
  position: relative !important;
  width: min(640px, 64vw) !important;
  max-width: none !important;
  display: block !important;
  transform: translateY(3px) !important;
}

.svg-footer-copy {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin: 0 auto !important;
}

.svg-footer-seal {
  position: absolute !important;
  left: -122px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 110px !important;
  height: 110px !important;
  object-fit: contain !important;
}

.svg-countdown {
  width: 100% !important;
  grid-template-columns: repeat(5, minmax(60px, 1fr)) !important;
  gap: 12px !important;
}

.svg-countdown strong {
  font-size: 41px !important;
}

.svg-countdown small {
  margin-top: 5px !important;
}

@media (max-width: 900px) {
  .svg-footer-inner {
    width: min(470px, 74vw) !important;
  }

  .svg-footer-seal {
    left: -82px !important;
    width: 76px !important;
    height: 76px !important;
  }

  .svg-countdown {
    grid-template-columns: repeat(5, minmax(42px, 1fr)) !important;
    gap: 7px !important;
  }
}

@media (max-width: 520px) {
  .svg-footer-inner {
    width: min(315px, 76vw) !important;
  }

  .svg-footer-seal {
    left: -56px !important;
    width: 52px !important;
    height: 52px !important;
  }

  .svg-countdown {
    grid-template-columns: repeat(5, minmax(28px, 1fr)) !important;
    gap: 4px !important;
  }
}


/* ------------------------------------------------------------------
   V22 — The Details rebuilt from the final bilingual Canva SVGs
   ------------------------------------------------------------------ */
.svg-details-screen {
  min-height: 100svh !important;
  background: #f8f5ef !important;
  overflow-x: clip !important;
}

.svg-details-screen.is-active {
  display: block !important;
}

.svg-details-canvas {
  position: relative !important;
  width: min(1366px, 100vw) !important;
  margin: 0 auto !important;
  line-height: 0 !important;
  background: #f8f5ef !important;
  overflow: visible !important;
}

.svg-details-artwork {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.svg-details-hotspot {
  position: absolute !important;
  z-index: 5 !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.svg-details-hotspot:hover {
  background: rgba(240, 220, 174, .10) !important;
}

.svg-details-hotspot:focus-visible {
  outline: 2px solid rgba(238, 211, 151, .9) !important;
  outline-offset: 3px !important;
}

/* Coordinates are percentages of Canva's 1366 × 3139 artboard. */
.details-back-top {
  left: 8.0% !important;
  top: 2.35% !important;
  width: 11.5% !important;
  height: 2.45% !important;
}

.details-hotel-lagoon-location {
  left: 16.0% !important;
  top: 70.55% !important;
  width: 17.5% !important;
  height: 2.65% !important;
}

.details-hotel-lagoon-site {
  left: 12.5% !important;
  top: 82.85% !important;
  width: 23.5% !important;
  height: 2.45% !important;
}

.details-sajonia-location {
  left: 62.0% !important;
  top: 70.45% !important;
  width: 18.5% !important;
  height: 2.65% !important;
}

.details-sajonia-site {
  left: 59.2% !important;
  top: 77.95% !important;
  width: 22.7% !important;
  height: 2.35% !important;
}

.details-sajonia-contact {
  left: 59.2% !important;
  top: 80.75% !important;
  width: 22.7% !important;
  height: 2.45% !important;
}

.details-back-bottom {
  left: 43.2% !important;
  top: 96.55% !important;
  width: 13.6% !important;
  height: 2.25% !important;
}

@media (max-width: 700px) {
  .svg-details-hotspot {
    border-radius: 3px !important;
  }
}

/* ------------------------------------------------------------------
   V23 — live venue, hotel and booking links
   ------------------------------------------------------------------ */
.details-santamonica-location {
  left: 31.0% !important;
  top: 42.25% !important;
  width: 31.0% !important;
  height: 3.2% !important;
}


/* ------------------------------------------------------------------
   V24 — fix Reserva Sajonia text alignment on the details page
   ------------------------------------------------------------------ */
.details-sajonia-location {
  overflow: visible !important;
}

.details-sajonia-location-copy {
  position: absolute;
  left: 24.5%;
  top: 9%;
  width: 71%;
  height: 82%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(246, 240, 231, .98);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(181, 166, 136, .18);
  text-align: center;
}

.details-sajonia-location-distance {
  font-family: var(--serif);
  font-size: clamp(9px, .87vw, 14px);
  line-height: 1.03;
  letter-spacing: .03em;
  color: #7a6443;
  text-transform: uppercase;
}

.details-sajonia-location-link {
  margin-top: 3px;
  font-family: var(--serif);
  font-size: clamp(8px, .76vw, 12px);
  line-height: 1.02;
  color: #2e4b37;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.details-sajonia-site {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(246, 240, 231, .98) !important;
  border: 1px solid rgba(143, 127, 94, .92) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 2px rgba(246, 240, 231, .98) !important;
  text-decoration: none !important;
}

.details-sajonia-site-copy {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(8px, .8vw, 13px);
  line-height: 1.05;
  color: #3f523d;
  text-decoration: underline;
  text-underline-offset: 2px;
  letter-spacing: .02em;
}

.details-sajonia-location:hover,
.details-sajonia-location:focus-visible {
  background: transparent !important;
}

.details-sajonia-site:hover,
.details-sajonia-site:focus-visible {
  background: rgba(248, 243, 235, 1) !important;
}

@media (max-width: 900px) {
  .details-sajonia-location-copy { left: 23.5%; width: 72%; top: 7%; height: 86%; }
  .details-sajonia-location-distance { font-size: clamp(6.5px, 1vw, 11px); }
  .details-sajonia-location-link { font-size: clamp(5.5px, .85vw, 9.5px); }
  .details-sajonia-site-copy { font-size: clamp(6.5px, .95vw, 10px); }
}


/* ------------------------------------------------------------------
   V25 — visible button back to the intro from The Details
   ------------------------------------------------------------------ */
.details-home-button {
  left: 39% !important;
  top: 96.28% !important;
  width: 22% !important;
  height: 2.3% !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.details-home-button:hover,
.details-home-button:focus-visible {
  background: transparent !important;
  color: transparent !important;
  outline: none !important;
}

.details-home-button span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
}

@media (max-width: 700px) {
  .details-home-button {
    left: 35.5% !important;
    width: 29% !important;
  }
}

/* ------------------------------------------------------------------
   V27 — remove visual overlay from Reserva Sajonia website hotspot
   ------------------------------------------------------------------ */
.details-sajonia-site {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 6px !important;
}

.details-sajonia-site:hover,
.details-sajonia-site:focus-visible {
  background: rgba(240, 220, 174, .10) !important;
}

/* ------------------------------------------------------------------
   V28 — corrected details SVG + info page green + back home button
   ------------------------------------------------------------------ */
.info-screen {
  background: var(--green) !important;
}

.form-shell {
  max-width: 780px;
}

.prototype-note {
  margin: -8px 0 0;
}

.back-home-inline {
  justify-self: center;
  margin-top: 8px;
  min-width: min(320px, 100%);
  padding: 14px 22px;
  border: 1px solid rgba(247,242,232,.65);
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  font-family: var(--serif);
  letter-spacing: .09em;
  font-size: 15px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.back-home-inline:hover,
.back-home-inline:focus-visible {
  background: rgba(247,242,232,.12);
  border-color: rgba(247,242,232,.95);
}

.form-monogram {
  margin: 26px auto 0 !important;
}


/* ------------------------------------------------------------------
   V31 — connected invitation validation and secure form submission
   ------------------------------------------------------------------ */
.invitation-status {
  max-width: 650px;
  margin: 0 auto 20px;
  padding: 13px 18px;
  border: 1px solid rgba(247,242,232,.38);
  background: rgba(255,255,255,.06);
  text-align: center;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .04em;
}
.invitation-status.is-error {
  border-color: rgba(241,188,168,.75);
  background: rgba(94,28,19,.28);
  color: #ffe7df;
}
.guest-form :disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------
   V32 — Android/mobile Save the Date layout
   Keep the Canva artwork intact, but give the rebuilt countdown footer
   its own real height so it no longer clips or leaves a large brown gap.
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .top-nav {
    top: max(8px, env(safe-area-inset-top)) !important;
    right: 8px !important;
    gap: 3px !important;
    padding: 4px 7px !important;
    border-radius: 999px !important;
  }

  .icon-control {
    width: 29px !important;
    height: 29px !important;
  }

  .icon {
    width: 18px !important;
    height: 18px !important;
  }

  .language-switch {
    gap: 5px !important;
    font-size: 10px !important;
  }

  .svg-save-screen.is-active {
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    background: var(--brown) !important;
  }

  .svg-save-canvas {
    position: relative !important;
    width: 100vw !important;
    max-width: none !important;
    height: calc(149.09vw + 208px) !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: var(--brown) !important;
  }

  .svg-save-artwork {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 1366 / 2260 !important;
    object-fit: contain !important;
  }

  /* Keep hotspots aligned to the original SVG, not to the taller canvas. */
  .svg-hotspot-info {
    left: 42.5% !important;
    top: 66.51vw !important;
    width: 31% !important;
    height: 30.61vw !important;
  }

  .svg-hotspot-details {
    left: 18.5% !important;
    top: 88.02vw !important;
    width: 26.5% !important;
    height: 36.40vw !important;
  }

  .svg-countdown-overlay {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 149.09vw !important;
    bottom: auto !important;
    width: 100vw !important;
    height: 208px !important;
    min-height: 208px !important;
    transform: none !important;
    display: grid !important;
    place-items: center !important;
    padding: 24px 12px 12px !important;
    overflow: hidden !important;
    background: #f8f5ef !important;
  }

  .svg-countdown-overlay::before {
    height: 8px !important;
  }

  .svg-footer-inner {
    position: relative !important;
    width: min(300px, 72vw) !important;
    max-width: none !important;
    display: block !important;
    transform: none !important;
  }

  .svg-footer-seal {
    position: absolute !important;
    left: -54px !important;
    top: 50% !important;
    width: 58px !important;
    height: 58px !important;
    transform: translateY(-50%) !important;
  }

  .svg-footer-copy {
    width: 100% !important;
  }

  .svg-countdown {
    width: 100% !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .svg-countdown strong {
    font-size: 25px !important;
    line-height: .92 !important;
  }

  .svg-countdown small {
    margin-top: 4px !important;
    font-size: 5px !important;
    letter-spacing: .04em !important;
  }

  .svg-before {
    margin-top: 7px !important;
    font-size: 10px !important;
  }

  .svg-hashtag {
    margin-top: 3px !important;
    font-size: 8px !important;
  }

  .svg-contact {
    margin-top: 9px !important;
    font-size: 9px !important;
  }

  .svg-phone {
    margin-top: 3px !important;
    font-size: 9px !important;
  }
}

/* ------------------------------------------------------------------
   V33 — true mobile scale + Android audio affordance
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  body {
    overflow-x: hidden !important;
  }

  /* The original Canva composition is intentionally enlarged on phones.
     It is centered and lightly cropped at the outer edges so the cards,
     photos and text are actually readable instead of looking miniature. */
  .svg-save-screen.is-active {
    width: 100vw !important;
    overflow: hidden !important;
  }

  .svg-save-canvas {
    width: 122vw !important;
    height: calc(181.89vw + 240px) !important;
    margin-left: -11vw !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }

  .svg-save-artwork {
    width: 122vw !important;
    height: auto !important;
  }

  .svg-hotspot-info {
    left: 42.5% !important;
    top: 81.14vw !important;
    width: 31% !important;
    height: 37.34vw !important;
  }

  .svg-hotspot-details {
    left: 18.5% !important;
    top: 107.39vw !important;
    width: 26.5% !important;
    height: 44.41vw !important;
  }

  .svg-countdown-overlay {
    left: 50% !important;
    top: 181.89vw !important;
    width: 100vw !important;
    height: 240px !important;
    min-height: 240px !important;
    transform: translateX(-50%) !important;
    padding: 31px 14px 16px !important;
  }

  .svg-footer-inner {
    width: min(326px, 80vw) !important;
  }

  .svg-footer-seal {
    left: -48px !important;
    width: 62px !important;
    height: 62px !important;
  }

  .svg-countdown {
    gap: 5px !important;
  }

  .svg-countdown strong {
    font-size: 31px !important;
    line-height: .95 !important;
  }

  .svg-countdown small {
    margin-top: 5px !important;
    font-size: 6.5px !important;
    letter-spacing: .04em !important;
  }

  .svg-before {
    margin-top: 8px !important;
    font-size: 11px !important;
  }

  .svg-hashtag {
    margin-top: 4px !important;
    font-size: 9px !important;
  }

  .svg-contact,
  .svg-phone {
    font-size: 10px !important;
  }

  /* Details artwork also gets the same phone-friendly enlargement. */
  .svg-details-screen.is-active {
    width: 100vw !important;
    overflow-x: hidden !important;
  }

  .svg-details-canvas {
    width: 122vw !important;
    max-width: none !important;
    margin-left: -11vw !important;
    margin-right: 0 !important;
  }

  /* Make the opening composition feel intentional on a narrow screen. */
  .intro-title {
    width: min(500px, 94vw) !important;
  }

  .envelope-button {
    width: min(540px, 96vw) !important;
  }

  .intro-kicker {
    font-size: 15px !important;
  }

  .open-label {
    font-size: 12px !important;
  }

  /* Form remains full-width but with slightly more readable controls. */
  .info-screen {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .guest-form {
    padding: 26px 20px !important;
    gap: 24px !important;
  }

  .guest-form label > span,
  .guest-form legend {
    font-size: 20px !important;
  }

  .guest-form input,
  .guest-form textarea {
    font-size: 16px !important;
    padding: 15px 14px !important;
  }

  .submit-button,
  .back-home-inline {
    min-height: 52px !important;
    font-size: 14px !important;
  }
}

/* ------------------------------------------------------------------
   V34 — compact mobile countdown + readable stacked mobile details
   ------------------------------------------------------------------ */
.details-mobile-layout {
  display: none;
}

@media (max-width: 600px) {
  /* Save the Date footer: same visual language as desktop, without the
     oversized blank cream area seen on Android. */
  .svg-save-canvas {
    height: calc(181.89vw + 180px) !important;
  }

  .svg-countdown-overlay {
    height: 180px !important;
    min-height: 180px !important;
    padding: 20px 10px 8px !important;
  }

  .svg-footer-inner {
    width: min(326px, 82vw) !important;
  }

  .svg-footer-seal {
    left: -44px !important;
    width: 54px !important;
    height: 54px !important;
  }

  .svg-countdown {
    gap: 4px !important;
  }

  .svg-countdown strong {
    font-size: 27px !important;
    line-height: .92 !important;
  }

  .svg-countdown small {
    margin-top: 3px !important;
    font-size: 5.5px !important;
  }

  .svg-before {
    margin-top: 6px !important;
    font-size: 10px !important;
  }

  .svg-hashtag {
    margin-top: 2px !important;
    font-size: 8px !important;
  }

  .svg-contact {
    margin-top: 7px !important;
    font-size: 8.5px !important;
  }

  .svg-phone {
    margin-top: 2px !important;
    font-size: 8.5px !important;
  }

  /* Hide the desktop-wide Canva artboard and use mobile crops that keep
     every event and hotel card large enough to read. */
  .svg-details-canvas {
    display: none !important;
  }

  .details-mobile-layout {
    display: block !important;
    width: 100vw;
    margin: 0;
    background: #3b241b;
    overflow: hidden;
    line-height: 0;
  }

  .details-mobile-piece {
    position: relative;
    width: 100%;
    margin: 0;
    line-height: 0;
    overflow: hidden;
  }

  .details-mobile-piece > img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
  }

  .details-mobile-event-card {
    background: #3b241b;
  }

  .details-mobile-event-card > img {
    width: 100%;
  }

  .details-mobile-stay-title,
  .details-mobile-hotel-card {
    background: #f8f5ef;
  }

  .details-mobile-hotel-card > img {
    width: 100%;
  }

  .details-mobile-hotspot {
    position: absolute;
    z-index: 5;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .details-mobile-hotspot:focus-visible {
    outline: 2px solid rgba(238, 211, 151, .95);
    outline-offset: 2px;
  }

  .details-mobile-back-top {
    left: 7%;
    top: 15%;
    width: 18%;
    height: 30%;
  }

  .details-mobile-santamonica {
    left: 28%;
    top: 56%;
    width: 44%;
    height: 16%;
  }

  .details-mobile-lagoon-location {
    left: 32%;
    top: 26%;
    width: 36%;
    height: 12%;
  }

  .details-mobile-lagoon-site {
    left: 25%;
    top: 63%;
    width: 49%;
    height: 10%;
  }

  .details-mobile-sajonia-location {
    left: 24%;
    top: 25%;
    width: 38%;
    height: 12%;
  }

  .details-mobile-sajonia-site {
    left: 18%;
    top: 51%;
    width: 48%;
    height: 9%;
  }

  .details-mobile-sajonia-contact {
    left: 18%;
    top: 60%;
    width: 48%;
    height: 10%;
  }

  .details-mobile-back-bottom {
    left: 37%;
    top: 38%;
    width: 26%;
    height: 50%;
  }
}

/* ------------------------------------------------------------------
   V35 — emergency rollback of the broken sliced mobile Details layout.
   Restore the original, continuous Canva SVG on phones.
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .details-mobile-layout {
    display: none !important;
  }

  .svg-details-screen.is-active {
    display: block !important;
    width: 100vw !important;
    overflow-x: hidden !important;
  }

  .svg-details-canvas {
    display: block !important;
    position: relative !important;
    width: 122vw !important;
    max-width: none !important;
    margin-left: -11vw !important;
    margin-right: 0 !important;
  }

  .svg-details-artwork {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* ------------------------------------------------------------------
   V36 — mobile Details: reveal more of the left edge without changing
   the continuous SVG composition.
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .svg-details-canvas {
    width: 116vw !important;
    margin-left: -8vw !important;
  }
}