/* Ad landing popup (Sam, 2026-10-14). A native dialog, so Escape, the focus trap and the backdrop
   come free. promo-dialog.js opens it only for visitors who arrive from a matching ad
   (utm_campaign containing its data-promo key, or ?promo=<key>), once per visit. */
.promo {
  inline-size: min(var(--promo-width), calc(var(--percent-100) - var(--promo-inset)));
  max-block-size: calc(var(--screen-height-dynamic) - var(--promo-inset));
  margin: auto;
  padding: 0;
  border: 0;
  overflow: auto;
  background: var(--promo-background);
  color: var(--promo-foreground);
}
.promo::backdrop { background: var(--overlay); }
.promo[open] { display: grid; grid-template-columns: var(--promo-media-width) minmax(0, 1fr); animation: promo-in var(--motion-enter) var(--motion-ease-reveal) both; }
.promo__body { display: grid; align-content: start; gap: var(--promo-gap); padding: var(--promo-padding); }
/* The dentist beside the offer, on a slow camera drift (a zoom and a pan that ease back and forth). */
.promo__media { position: relative; overflow: hidden; }
.promo__media img { position: absolute; inset: 0; inline-size: var(--percent-100); block-size: var(--percent-100); object-fit: cover; transform-origin: var(--promo-drift-origin); animation: promo-drift var(--promo-drift-duration) var(--promo-drift-ease) infinite alternate; }
@keyframes promo-drift { from { transform: scale(var(--promo-drift-from)); } to { transform: scale(var(--promo-drift-to)) translate3d(calc(var(--promo-drift-x) * -1), calc(var(--promo-drift-y) * -1), 0); } }
@media (max-width: 767.98px) {
  .promo[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--promo-media-height-mobile) auto; }
}
.has-promo, .has-promo body { overflow: hidden; }
.promo__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--promo-gap); }
.promo__tooth { inline-size: var(--promo-tooth-size); block-size: var(--promo-tooth-size); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.promo__close { display: grid; place-items: center; inline-size: var(--touch-target); block-size: var(--touch-target); padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.promo__close svg { inline-size: var(--icon-size); block-size: var(--icon-size); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; }
.promo__close:focus-visible { outline: var(--announcement-focus-ring); }
.promo__title { margin: 0; }
.promo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--promo-gap); margin-block-start: var(--promo-gap); }
@keyframes promo-in { from { opacity: var(--hidden-opacity); transform: translateY(var(--promo-travel)); } to { opacity: var(--shown-opacity); transform: none; } }
html[data-motion='off'] .promo[open], html[data-motion='off'] .promo__media img { animation: none; }
@media (prefers-reduced-motion: reduce) { .promo[open], .promo__media img { animation: none; } }