/* ════════════════════════════
       NOTE CARD  — portraits + message
       Like a note pinned to a wall with red tape
    ════════════════════════════ */
    .note-section {
      padding: 72px 24px 24px;
      background: #faf9f7;
      position: relative;
      z-index: 10;
    }

    .note-card {
      background: #fff;
      border-radius: 6px;
      padding: 40px 24px 34px;
      position: relative;
      box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 1px 6px rgba(0,0,0,0.06);
    }

    /* Red tape strip — torn tape look */
    .note-tape {
      position: absolute;
      top: -32px;
      left: 50%;
      transform: translateX(-50%) rotate(-8deg);
      width: 52px;
      height: 96px;
      background: #6e0d18;
      z-index: 5;
      /* torn/rough edges — no smooth border-radius */
      clip-path: polygon(
        2% 0%, 8% 1%, 15% 0%, 22% 2%, 30% 0%, 38% 1%, 45% 0%, 52% 2%, 60% 0%, 68% 1%, 75% 0%, 82% 2%, 90% 0%, 95% 1%, 100% 0%,
        100% 4%, 99% 10%, 100% 18%, 99% 26%, 100% 34%, 99% 42%, 100% 50%, 99% 58%, 100% 66%, 99% 74%, 100% 82%, 99% 90%, 100% 96%,
        100% 100%, 95% 99%, 88% 100%, 80% 98%, 72% 100%, 65% 99%, 58% 100%, 50% 98%, 42% 100%, 35% 99%, 28% 100%, 20% 98%, 12% 100%, 5% 99%, 0% 100%,
        0% 96%, 1% 90%, 0% 82%, 1% 74%, 0% 66%, 1% 58%, 0% 50%, 1% 42%, 0% 34%, 1% 26%, 0% 18%, 1% 10%, 0% 4%
      );
      opacity: 0.88;
    }

    /* Photos row */
    .note-photos {
      display: flex;
      gap: 16px;
      margin-bottom: 28px;
    }

    .note-photo {
      flex: 1;
      height: 300px;
      overflow: hidden;
      border-radius: 50% 50% 8px 8px / 40px 40px 8px 8px;
      background: linear-gradient(160deg, #ede5d8 0%, #cbbda5 55%, #aa9070 100%);
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 10px;
    }

    .note-photo img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .note-photo .p-label {
      position: relative;
      z-index: 1;
      font-family: 'Montserrat', sans-serif;
      font-size: 9px;
      letter-spacing: 0.1em;
      color: rgba(255,255,255,0.75);
    }

    /* Message content inside note */
    .note-message {
      padding: 0 8px;
    }

    .greeting {
      font-family: 'Dancing Script', cursive;
      font-size: 48px;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 16px;
      line-height: 1.2;
    }

    .poem p {
      font-family: 'Dancing Script', cursive;
      font-size: 24px;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 1.75;
    }

    .poem p.gap { margin-top: 20px; }

    /* ════════════════════════════
       QUOTE SECTION
    ════════════════════════════ */
    .quote-section {
      padding: 40px 32px 36px;
      background: #faf9f7;
      position: relative;
      z-index: 10;
    }

    .quote-box {
      position: relative;
      padding: 32px 20px 28px;
    }

    .quote-mark {
      font-family: 'Cormorant Garamond', serif;
      font-size: 88px;
      font-weight: 400;
      color: #6e0d18;
      line-height: 0.6;
      position: absolute;
      user-select: none;
    }

    .quote-mark.open  { top: 0;  left: 0; }
    .quote-mark.close { bottom: 0; right: 0; }

    .quote-text {
      padding: 18px 24px 12px;
      text-align: left;
    }

    .quote-text p {
      font-family: 'Dancing Script', cursive;
      font-size: 23px;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 1.8;
    }

    /* ════════════════════════════
       WAVY DECORATION
    ════════════════════════════ */
    .wave-decor {
      text-align: center;
      padding: 10px 20px 6px;
      background: #faf9f7;
    }

    .wave-decor svg {
      width: 80%;
      height: auto;
      display: inline-block;
    }

    /* ════════════════════════════
       BADGE  【Trọn vẹn】
    ════════════════════════════ */
    .badge-section {
      text-align: center;
      padding: 16px 20px 18px;
      background: #faf9f7;
    }

    .badge {
      display: inline-block;
      background: #6e0d18;
      color: #f0e0c8;
      font-family: 'Montserrat', sans-serif;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.12em;
      padding: 12px 34px;
      border-radius: 4px;
    }

    /* ════════════════════════════
       POEM 4 LINES (serif, centered)
    ════════════════════════════ */
    .poem-four {
      text-align: left;
      padding: 26px 32px 34px;
      background: #faf9f7;
    }

    .poem-four p {
      font-family: 'Dancing Script', cursive;
      font-size: 24px;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 1.85;
    }

    /* (bottom-photo-section removed — merged into gallery) */

    /* ════════════════════════════
       GALLERY  — top photo + grid (photo+text | tall photo) + vi quote
    ════════════════════════════ */
    .gallery-section {
      padding: 10px 20px 0;
      background: #faf9f7;
    }

    /* Top photo — narrower, centered */
    .gallery-main {
      width: 80%;
      margin: 0 auto 12px;
      height: 320px;
      overflow: hidden;
      border-radius: 14px;
    }

    .gallery-main img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .gallery-main-placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(160deg, #e8ddd0 0%, #c0b09a 50%, #9a8060 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #8a7460;
      font-family: 'Montserrat', sans-serif;
      font-size: 13px;
      letter-spacing: 0.1em;
      opacity: 0.6;
    }

    /* Grid: 2 columns — left col stacks photo + text, right col = tall photo */
    .gallery-grid {
      display: grid;
      grid-template-columns: 5fr 7fr;
      grid-template-rows: auto 1fr;
      gap: 12px;
    }

    .gallery-left-photo {
      grid-column: 1;
      grid-row: 1;
      height: 180px;
      overflow: hidden;
      border-radius: 14px;
    }

    .gallery-text {
      grid-column: 1;
      grid-row: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 8px 4px;
    }

    .gallery-text .en {
      font-family: 'Playfair Display', serif;
      font-size: 20px;
      font-style: italic;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 1.55;
    }

    .gallery-right-photo {
      grid-column: 2;
      grid-row: 1 / 3;   /* spans both rows = tall */
      overflow: hidden;
      border-radius: 14px;
    }

    .gallery-left-photo img,
    .gallery-right-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .gallery-small-placeholder,
    .gallery-large-placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(160deg, #e8ddd0 0%, #c0b09a 50%, #9a8060 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #8a7460;
      font-family: 'Montserrat', sans-serif;
      font-size: 12px;
      letter-spacing: 0.1em;
      opacity: 0.6;
    }

    /* Vietnamese closing quote */
    .closing-quote {
      padding: 28px 30px 40px;
      background: #faf9f7;
      text-align: left;
      position: relative;
    }

    .closing-quote .quote-mark {
      position: relative;
    }

    .closing-quote .quote-mark.open {
      top: auto; left: auto;
    }

    .closing-quote .quote-mark.close {
      bottom: auto; right: auto;
      float: right;
    }

    .closing-quote .vi {
      font-family: 'Dancing Script', cursive;
      font-size: 26px;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 1.65;
      padding: 8px 20px;
    }

    /* ════════════════════════════
       COUPLE PHOTO (full width before countdown)
    ════════════════════════════ */
    .couple-photo-section {
      padding: 10px 20px 0;
      background: #faf9f7;
    }

    .couple-photo-frame {
      width: 100%;
      height: 380px;
      overflow: hidden;
      border-radius: 14px;
    }

    .couple-photo-frame img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }

    .couple-photo-placeholder {
      width: 100%; height: 100%;
      background: linear-gradient(160deg, #e8ddd0 0%, #c0b09a 50%, #9a8060 100%);
      display: flex; align-items: center; justify-content: center;
      color: #8a7460; font-family: 'Montserrat', sans-serif;
      font-size: 13px; letter-spacing: 0.1em; opacity: 0.6;
    }

    /* ════════════════════════════
       COUNTDOWN TIMER
    ════════════════════════════ */
    .countdown-section {
      padding: 36px 20px;
      background: #faf9f7;
      text-align: center;
    }

    .countdown-grid {
      display: flex;
      justify-content: center;
      gap: 16px;
    }

    .countdown-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 72px;
    }

    .countdown-num {
      font-family: 'Montserrat', sans-serif;
      font-size: 42px;
      font-weight: 600;
      color: #1a1a1a;
      line-height: 1;
      margin-bottom: 6px;
    }

    .countdown-label {
      font-family: 'Montserrat', sans-serif;
      font-size: 11px;
      font-weight: 500;
      color: #888;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    .countdown-sep {
      font-family: 'Montserrat', sans-serif;
      font-size: 36px;
      font-weight: 300;
      color: #ccc;
      align-self: flex-start;
      margin-top: 4px;
    }

    /* ════════════════════════════
       BADGE 2  【Sau tất cả】
    ════════════════════════════ */
    .badge2-section {
      text-align: center;
      padding: 10px 20px 18px;
      background: #faf9f7;
    }

    /* ════════════════════════════
       POEM 2  (after countdown)
    ════════════════════════════ */
    .poem-two {
      text-align: left;
      padding: 16px 32px 36px;
      background: #faf9f7;
    }

    .poem-two p {
      font-family: 'Dancing Script', cursive;
      font-size: 24px;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 1.85;
    }

    /* ════════════════════════════
       FINAL GALLERY — couple photo + name grid + closing photo
    ════════════════════════════ */
    .final-gallery {
      padding: 10px 20px 0;
      background: #faf9f7;
    }

    .final-wide-photo {
      width: 75%;
      margin: 0 auto 14px;
      height: 320px;
      overflow: hidden;
      border-radius: 14px;
    }

    .final-wide-photo img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }

    .final-wide-placeholder {
      width: 100%; height: 100%;
      background: linear-gradient(160deg, #e8ddd0 0%, #c0b09a 50%, #9a8060 100%);
      display: flex; align-items: center; justify-content: center;
      color: #8a7460; font-family: 'Montserrat', sans-serif;
      font-size: 13px; letter-spacing: 0.1em; opacity: 0.6;
    }

    /* Name + photos grid */
    .name-grid {
      display: grid;
      grid-template-columns: 6fr 4fr;
      gap: 14px;
      margin-bottom: 14px;
    }

    .name-grid-left {
      display: flex;
      flex-direction: column;
    }

    .name-grid-photo {
      width: 100%;
      height: 200px;
      overflow: hidden;
      border-radius: 12px;
      margin-bottom: 16px;
    }

    .name-grid-photo img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }

    .name-grid-photo-placeholder {
      width: 100%; height: 100%;
      background: linear-gradient(160deg, #e8ddd0 0%, #c0b09a 50%, #9a8060 100%);
      display: flex; align-items: center; justify-content: center;
      color: #8a7460; font-family: 'Montserrat', sans-serif;
      font-size: 12px; letter-spacing: 0.1em; opacity: 0.6;
    }

    .name-grid-info {
      text-align: left;
      padding: 0 4px;
    }

    .name-grid-info .person-name {
      font-family: 'Dancing Script', cursive;
      font-size: 38px;
      font-weight: 600;
      color: #1a1a1a;
      line-height: 1.25;
    }

    .name-grid-info .divider-line {
      width: 60px;
      height: 2px;
      background: #1a1a1a;
      margin: 14px 0;
    }

    .name-grid-right {
      overflow: hidden;
      border-radius: 12px;
      margin-top: 40px;
    }

    .name-grid-right img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }

    .name-grid-right-placeholder {
      width: 100%; height: 100%;
      background: linear-gradient(160deg, #e8ddd0 0%, #c0b09a 50%, #9a8060 100%);
      display: flex; align-items: center; justify-content: center;
      color: #8a7460; font-family: 'Montserrat', sans-serif;
      font-size: 12px; letter-spacing: 0.1em; opacity: 0.6;
    }

    .final-bottom-photo {
      width: 85%;
      margin: 70px auto 0;
      height: 340px;
      overflow: hidden;
      border-radius: 14px;
    }

    .final-bottom-photo img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }

    .final-bottom-placeholder {
      width: 100%; height: 100%;
      background: linear-gradient(160deg, #e8ddd0 0%, #c0b09a 50%, #9a8060 100%);
      display: flex; align-items: center; justify-content: center;
      color: #8a7460; font-family: 'Montserrat', sans-serif;
      font-size: 13px; letter-spacing: 0.1em; opacity: 0.6;
    }

    /* ════════════════════════════
       QUOTE 3 — "Từ khi gặp em..."
    ════════════════════════════ */
    .quote3-section {
      padding: 40px 32px 36px;
      background: #faf9f7;
      position: relative;
      z-index: 10;
    }

    .quote3-box {
      position: relative;
      padding: 32px 20px 28px;
    }

    .quote3-box .quote-mark {
      font-family: 'Cormorant Garamond', serif;
      font-size: 88px;
      font-weight: 400;
      color: #6e0d18;
      line-height: 0.6;
      position: absolute;
      user-select: none;
    }

    .quote3-box .quote-mark.open  { top: 0;  left: 0; }
    .quote3-box .quote-mark.close { bottom: 0; right: 0; }

    .quote3-text {
      padding: 18px 24px 12px;
      text-align: left;
    }

    .quote3-text p {
      font-family: 'Dancing Script', cursive;
      font-size: 23px;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 1.8;
    }

    /* ════════════════════════════
       MOUNTAIN DECOR — landscape with sun
    ════════════════════════════ */
    .mountain-decor {
      text-align: center;
      padding: 14px 20px 6px;
      background: #faf9f7;
    }

    .mountain-decor svg {
      width: 85%;
      height: auto;
      display: inline-block;
    }

    /* ════════════════════════════
       BADGE 3 【Dành cho nhau】
    ════════════════════════════ */
    .badge3-section {
      text-align: center;
      padding: 16px 20px 18px;
      background: #faf9f7;
    }

    /* ════════════════════════════
       POEM 3 — "Giữa hàng vạn người..."
    ════════════════════════════ */
    .poem-three {
      text-align: left;
      padding: 26px 32px 36px;
      background: #faf9f7;
    }

    .poem-three p {
      font-family: 'Dancing Script', cursive;
      font-size: 24px;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 1.85;
    }

    /* ════════════════════════════
       EVENT INFO — Calendar + Map + Addresses
    ════════════════════════════ */
    .event-section {
      padding: 36px 24px 24px;
      background: #faf9f7;
      position: relative;
      z-index: 10;
    }

    .event-card {
      background: #fff;
      border-radius: 6px;
      padding: 80px 20px 28px;
      position: relative;
      box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 1px 6px rgba(0,0,0,0.06);
    }

    /* Two torn tape strips — short + long, overlapping */
    .event-tape-l,
    .event-tape-r {
      position: absolute;
      width: 50px;
      background: #6e0d18;
      clip-path: polygon(
        2% 0%, 8% 1%, 15% 0%, 22% 2%, 30% 0%, 38% 1%, 45% 0%, 52% 2%, 60% 0%, 68% 1%, 75% 0%, 82% 2%, 90% 0%, 95% 1%, 100% 0%,
        100% 4%, 99% 10%, 100% 18%, 99% 26%, 100% 34%, 99% 42%, 100% 50%, 99% 58%, 100% 66%, 99% 74%, 100% 82%, 99% 90%, 100% 96%,
        100% 100%, 95% 99%, 88% 100%, 80% 98%, 72% 100%, 65% 99%, 58% 100%, 50% 98%, 42% 100%, 35% 99%, 28% 100%, 20% 98%, 12% 100%, 5% 99%, 0% 100%,
        0% 96%, 1% 90%, 0% 82%, 1% 74%, 0% 66%, 1% 58%, 0% 50%, 1% 42%, 0% 34%, 1% 26%, 0% 18%, 1% 10%, 0% 4%
      );
      filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.35));
    }
    /* Short tape — behind */
    .event-tape-l {
      top: -22px;
      left: calc(50% - 46px);
      height: 68px;
      transform: rotate(-14deg);
      z-index: 5;
    }
    /* Long tape — in front, overlapping */
    .event-tape-r {
      top: -34px;
      left: calc(50% - 10px);
      height: 108px;
      transform: rotate(7deg);
      z-index: 6;
    }

    /* Calendar header bar */
    .cal-header {
      background: #6e0d18;
      color: #f0e0c8;
      text-align: center;
      padding: 12px 16px;
      border-radius: 6px 6px 0 0;
      font-family: 'Montserrat', sans-serif;
      font-size: 20px;
      font-weight: 600;
      letter-spacing: 0.12em;
    }

    /* Calendar body */
    .cal-body {
      position: relative;
      padding: 18px 14px 22px;
      overflow: hidden;
    }

    /* Large year watermark */
    .cal-watermark {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Montserrat', sans-serif;
      font-size: 100px;
      font-weight: 700;
      color: rgba(0,0,0,0.05);
      letter-spacing: 0.05em;
      pointer-events: none;
      user-select: none;
      white-space: nowrap;
    }

    /* Days of week header */
    .cal-days-header {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      margin-bottom: 8px;
    }

    .cal-day-name {
      text-align: center;
      font-family: 'Montserrat', sans-serif;
      font-size: 10px;
      font-weight: 600;
      color: #888;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* Calendar grid */
    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      position: relative;
      z-index: 1;
    }

    .cal-cell {
      text-align: center;
      font-family: 'Montserrat', sans-serif;
      font-size: 17px;
      font-weight: 400;
      color: #1a1a1a;
      padding: 9px 0;
      position: relative;
    }

    .cal-cell.empty {
      visibility: hidden;
    }

    .cal-cell.highlight {
      color: #fff;
      font-weight: 600;
    }

    .cal-cell.highlight::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 36px;
      height: 36px;
      background: #6e0d18;
      border-radius: 50%;
      z-index: -1;
    }

    .cal-cell .cal-heart {
      position: absolute;
      top: -4px;
      right: calc(50% - 24px);
      width: 12px;
      height: 12px;
    }

    /* Google Maps embed */
    .map-frame {
      margin-top: 24px;
      width: 100%;
      height: 220px;
      border-radius: 12px;
      overflow: hidden;
      border: none;
    }

    .map-frame iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }

    .map-placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(160deg, #e0ddd8 0%, #c8c4be 50%, #b0a898 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #8a7a6a;
      font-family: 'Montserrat', sans-serif;
      font-size: 12px;
      letter-spacing: 0.1em;
    }

    /* Address columns */
    .address-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 24px;
    }

    .address-col {
      text-align: center;
    }

    .address-label {
      font-family: 'Cormorant Garamond', serif;
      font-size: 24px;
      font-style: italic;
      font-weight: 500;
      color: #6e0d18;
      margin-bottom: 10px;
    }

    .address-text {
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      font-weight: 400;
      color: #444;
      line-height: 1.8;
      letter-spacing: 0.02em;
    }

    .address-divider {
      width: 1px;
      background: #ddd;
      justify-self: center;
    }

    .address-link {
      display: inline-block;
      text-decoration: none;
      color: #444;
      transition: color 0.2s;
    }
    .address-link:hover { color: #6e0d18; }

    .addr-icon {
      width: 14px;
      height: 14px;
      vertical-align: -2px;
      color: #6e0d18;
      margin-right: 3px;
    }

    /* ════════════════════════════
       LOVE POEM + COUPLE GALLERY
    ════════════════════════════ */
    .love-poem-section {
      text-align: center;
      padding: 40px 32px 32px;
      background: #faf9f7;
    }

    .love-poem-section p {
      font-family: 'Dancing Script', cursive;
      font-size: 25px;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 1.85;
    }

    .love-gallery {
      padding: 10px 20px 0;
      background: #faf9f7;
    }

    .love-gallery-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      align-items: start;
    }

    /* Left: tall photo */
    .love-gallery-left {
      height: 400px;
      overflow: hidden;
      border-radius: 12px;
      background: linear-gradient(160deg, #e8ddd0 0%, #c0b09a 50%, #9a8060 100%);
    }

    .love-gallery-left img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }

    /* Right: smaller photo + names below — offset lower than left */
    .love-gallery-right {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 56px;
    }

    .love-gallery-right-photo {
      height: 280px;
      overflow: hidden;
      border-radius: 12px;
      background: linear-gradient(160deg, #e8ddd0 0%, #c0b09a 50%, #9a8060 100%);
    }

    .love-gallery-right-photo img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }

    .love-gallery-names {
      padding: 6px 6px 0;
      text-align: right;
    }

    .love-name {
      font-family: 'Dancing Script', cursive;
      font-size: 38px;
      font-weight: 600;
      color: #1a1a1a;
      line-height: 1.25;
      display: block;
    }

    .names-amp {
      font-family: 'Dancing Script', cursive;
      font-size: 26px;
      font-weight: 400;
      color: #830f1b;
      display: block;
      line-height: 1.2;
    }

    .love-name-dash {
      display: block;
      width: 40px;
      height: 2px;
      background: #1a1a1a;
      margin: 12px 0 0 auto;
    }

    /* Bottom wide photo */
    .love-bottom-photo {
      width: 88%;
      margin: 24px auto 0;
      height: 320px;
      overflow: hidden;
      border-radius: 12px;
      background: linear-gradient(160deg, #e8ddd0 0%, #c0b09a 50%, #9a8060 100%);
    }

    .love-bottom-photo img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }

    /* ════════════════════════════
       DEAR FRIEND CARD
    ════════════════════════════ */
    .dear-section {
      padding: 52px 58px 40px;
      background: #faf9f7;
      position: relative;
      z-index: 10;
    }

    .dear-circles {
      position: relative;
      height: 44px;
      margin-top: 10px;
      margin-bottom: 20px; /* pill at top:-20px → gap = 0px */
      margin-left: 18px;
    }
    .dear-circle-sm {
      position: absolute;
      top: 0; left: 0;
      width: 13px; height: 13px;
      border-radius: 50%;
      background: #1a1a1a;
    }
    .dear-circle-lg {
      position: absolute;
      top: 8px; left: 16px;
      width: 22px; height: 22px;
      border-radius: 50%;
      border: 2px solid #1a1a1a;
      background: transparent;
    }

    .dear-card {
      background: #fff;
      border-radius: 8px;
      padding: 46px 22px 30px;
      position: relative;
      box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 1px 6px rgba(0,0,0,0.06);
    }

    .dear-title {
      position: absolute;
      top: -20px;
      left: 40px;
      background: #fff;
      border: 1.5px solid #1a1a1a;
      border-radius: 50px;
      padding: 8px 30px;
      font-family: 'Dancing Script', cursive;
      font-size: 22px;
      font-weight: 600;
      color: #1a1a1a;
      white-space: nowrap;
      z-index: 2;
    }

    .dear-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 30px;
    }

    .dear-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .dear-item-heart {
      width: 19px;
      height: 19px;
      flex-shrink: 0;
      margin-top: 3px;
      object-fit: contain;
    }

    .dear-item-text {
      font-family: 'Montserrat', sans-serif;
      font-size: 13.5px;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 1.75;
    }

    .dear-buttons {
      display: flex;
      gap: 48px;
      justify-content: center;
      flex-wrap: nowrap;
    }

    .dear-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      background: #6e0d18;
      color: #fff;
      border: none;
      border-radius: 50px;
      padding: 13px 26px;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      letter-spacing: 0.03em;
      cursor: pointer;
      transition: background 0.2s;
    }
    .dear-btn:hover { background: #8b1020; }
    .dear-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

    /* ════════════════════════════
       CLOSING / THANK YOU SECTION
    ════════════════════════════ */
    .closing-section {
      padding: 40px 24px 48px;
      background: #faf9f7;
      text-align: center;
    }

    .closing-label {
      font-family: 'Playfair Display', serif;
      font-size: 28px;
      font-weight: 400;
      font-style: italic;
      letter-spacing: 0.06em;
      color: #7a7068;
      margin-bottom: 10px;
      white-space: nowrap;
    }

    .closing-photo {
      width: 82%;
      height: 430px;
      overflow: hidden;
      border-radius: 14px;
      margin: 0 auto 28px;
      background: linear-gradient(160deg, #e8ddd0 0%, #c0b09a 50%, #9a8060 100%);
    }

    .closing-photo img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }

    .closing-text {
      padding: 0 16px;
      margin-bottom: 36px;
    }

    .closing-text p {
      font-family: 'Dancing Script', cursive;
      font-size: 22px;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 1.9;
    }

    /* Cute car SVG illustration */
    .closing-car {
      margin: 0 auto 12px;
      width: 200px;
    }

    .closing-car svg {
      width: 100%;
      height: auto;
      display: block;
    }

    .closing-thankyou {
      font-family: 'Dancing Script', cursive;
      font-size: 54px;
      font-weight: 700;
      color: #1a1a1a;
      line-height: 1;
    }