/* YOUR TEMPLATES pop-up on "What makes it different" (Kelly, Nov 3, 2026; built from her mock templates-popup-mock-v6 as a layout guide).
   The question bar, then a light grey panel: a blank template, a gold arrow, and three Story frames filled in for Katie and Charles.
   Photos are Amy Carroll Photography's own vertical photos, never a horizontal one cropped to fit. On a phone the frames scroll
   sideways inside the panel; the page never does. */
.diffpop .dptpl[hidden] { display: none; }
.diffpop .dptpl { display: grid; gap: 12px; }
.diffpop .tpask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 16px; background: #fff; border: 1.5px solid var(--line, #ececec); border-radius: 12px; }
.diffpop .tpask p { margin: 0; flex: 1 1 260px; min-width: 0; font: 600 15px/1.45 Montserrat, sans-serif; color: var(--navy, #01223d); }
.diffpop .tppills { display: flex; gap: 8px; flex: none; }
.diffpop .tppill { display: inline-block; padding: 7px 14px; border: 1.5px solid #cbd0d6; border-radius: 999px; background: #fff; font: 600 13px/1 Montserrat, sans-serif; color: var(--slate, #454a52); }
.diffpop .tppill.on { background: var(--navy, #01223d); border-color: var(--navy, #01223d); color: #fff; }
.diffpop .tppanel { display: grid; grid-template-columns: 112px 28px minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 18px; background: #f5f6f8; border-radius: 12px; }
.diffpop .tpblank { box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; aspect-ratio: 9 / 16; padding: 8px; background: #fff; border: 1.5px dashed #b9bfc7; border-radius: 8px; }
.diffpop .tpph { display: grid; place-items: center; flex: none; aspect-ratio: 4 / 5; border-radius: 4px; background: repeating-linear-gradient(135deg, #e6e9ed 0 6px, #f1f3f5 6px 12px); font: 700 8px/1.2 Montserrat, sans-serif; letter-spacing: .08em; color: #7b818a; text-align: center; }
.diffpop .tpblank b { font: 700 11px/1.2 Montserrat, sans-serif; color: var(--navy, #01223d); }
.diffpop .tpblank i { display: block; height: 4px; border-radius: 2px; background: #dfe3e8; }
.diffpop .tpblank i + i { width: 70%; }
.diffpop .tplogo { margin-top: auto; align-self: center; padding: 3px 6px; border: 1px solid #cbd0d6; border-radius: 3px; font: 700 7px/1 Montserrat, sans-serif; letter-spacing: .08em; color: #7b818a; }
.diffpop .tparrow { display: grid; place-items: center; color: #c9a24a; }
.diffpop .tparrow svg { width: 28px; height: 28px; }
.diffpop .tpfilled { min-width: 0; }
.diffpop .tplab { margin: 0 0 8px; font: 700 11px/1.3 Montserrat, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--navy, #01223d); }
.diffpop .tpframes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.diffpop .tpf { box-sizing: border-box; display: flex; flex-direction: column; margin: 0; aspect-ratio: 9 / 16; padding: 7px 7px 9px; background: #fff; border-radius: 8px; box-shadow: 0 6px 18px rgba(1, 34, 61, .10); }
.diffpop .dpshot + .dptpl .tpf img.tpphoto, .diffpop .tpf img.tpphoto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 4px; max-height: none; }
.diffpop .tpf figcaption { margin: 8px 2px 0; font: 600 11px/1.35 Montserrat, sans-serif; color: var(--navy, #01223d); }
.diffpop .tpf img.tplogoimg { display: block; width: auto; height: 22px; margin: auto auto 0; max-height: none; }
.diffpop .tpex { margin: 0; text-align: right; font: 500 13px/1.3 Montserrat, sans-serif; color: var(--slate, #454a52); }
@media (max-width: 640px) {
  .diffpop .tppanel { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 14px; }
  .diffpop .tpblank { width: 104px; justify-self: center; }
  .diffpop .tparrow { transform: rotate(90deg); }
  .diffpop .tpframes { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; overscroll-behavior-x: contain; }
  .diffpop .tpf { flex: 0 0 150px; scroll-snap-align: start; }
}