/* 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); } }
.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; } }

/* Phones, and a phone held sideways (Sam, 2026-10-14: "even the pop up on mobile needs work"): a sheet that rises
   from the foot of the window and leaves the page showing above it. The photo is a strip with the close button on
   its corner, so the way out never scrolls away; the offer scrolls, if it must, under the two buttons, which stay
   pinned at the thumb, full width and a tap tall. The type steps down a size so the title and the offer take two
   lines each, and the fine print reads as a footnote. */
@media (max-width: 767.98px), (max-height: 30em) {
  .promo { inline-size: min(var(--percent-100), var(--promo-width)); max-inline-size: none; margin: auto auto 0; max-block-size: calc(var(--screen-height-dynamic) - var(--promo-sheet-room)); overflow: hidden; }
  .promo[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--promo-media-height-mobile) minmax(0, 1fr); animation-name: promo-rise; }
  .promo__media img { object-position: var(--promo-media-position-mobile); transform-origin: var(--promo-media-position-mobile); }
  .promo__body { overflow-y: auto; overscroll-behavior: contain; gap: var(--promo-gap-mobile); padding: var(--spacing-md) var(--promo-padding-mobile) 0; }
  .promo__top { display: contents; }
  .promo__tooth { display: none; }
  .promo__close { position: absolute; inset-block-start: var(--promo-close-inset); inset-inline-end: var(--promo-close-inset); z-index: var(--layer-controls); border-radius: var(--round-radius); background: var(--overlay); color: var(--overlay-foreground); }
  .promo__title { font-size: var(--type-h5-size); line-height: var(--type-h5-leading); letter-spacing: var(--type-h5-tracking); text-wrap: balance; }
  .promo__offer { font-size: var(--type-h6-size); line-height: var(--type-h6-leading); letter-spacing: var(--type-h6-tracking); text-wrap: balance; }
  .promo__desc { text-wrap: pretty; }
  .promo__note { font-size: var(--type-label-size); line-height: var(--type-small-leading); text-wrap: pretty; }
  .promo__actions { position: sticky; inset-block-end: 0; flex-direction: column; align-items: stretch; gap: 0; margin: var(--spacing-2xs) calc(var(--promo-padding-mobile) * -1) 0; padding: var(--spacing-sm) var(--promo-padding-mobile) var(--spacing-2xs); border-block-start: var(--hairline) solid currentColor; background: var(--promo-background); }
  .promo__actions .btn-outline { justify-content: center; min-block-size: var(--touch-target); background: var(--button-fill); color: var(--button-ink); outline-color: var(--button-fill); }
  .promo__actions .link-btn { justify-content: center; min-block-size: var(--touch-target); }
}
/* Held sideways the window is too short for the photo: the sheet is the offer alone, the close in its corner. */
@media (max-height: 30em) {
  .promo[open] { grid-template-rows: minmax(0, 1fr); }
  .promo__media { display: none; }
  .promo__title { padding-inline-end: calc(var(--touch-target) + var(--promo-close-inset)); }
}
@keyframes promo-rise { from { transform: translateY(var(--promo-travel-mobile)); } to { 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; } }