/* Deal landing page -- deals/templates/deals/landing/.
 *
 * Phone first, because the buyers are: they arrive from an Instagram reel,
 * so the first screen is a full-bleed photo, the headline, the price and one
 * button, and everything after it answers a reason not to book yet.
 *
 * Sits on home/base.html, next to Bootstrap and magazine-theme, and must not
 * fight either. So:
 *   - every rule is scoped under .dl (the page root) or body.dl-page, and
 *     every class is prefixed dl-, a prefix neither of them uses;
 *   - margins, list styles and heading sizes are set per component rather
 *     than by a reset -- a reset under .dl would also reach the ticket picker,
 *     which is Bootstrap-styled and takes money;
 *   - colours come from the --dl-* custom properties the template writes on
 *     .dl from deals.landing.THEMES, so the artwork and the CSS share one
 *     palette and a new theme is a Python dict, not a stylesheet.
 *
 * Motion is decoration only and all of it stops under prefers-reduced-motion.
 * Reveal-on-scroll hides nothing until landing.js has run and set .dl-anim,
 * so a script that fails to load leaves a static page, not an empty one.
 */

/* ------------------------------------------------------------ the header */
/* A landing page gets the brand row only on phones: the nav row is a way off
   the page, and it cost ~40px of a first screen that has one job. The bar
   also scrolls away instead of sticking -- the Book bar is what follows the
   reader down. Wide screens keep the full sticky header. */
@media (max-width: 1000px) {
  body.dl-page .mainnav { display: none; }
  body.dl-page .topbar__inner { grid-template-areas: "brand right"; row-gap: 0; }
}
@media (max-width: 991.98px) {
  body.dl-page .topbar { position: relative; }
}

/* -------------------------------------------------------------- the root */
.dl {
  --dl-text: #191b24;
  --dl-muted: #4a4f5e;
  --dl-line: rgba(25, 27, 36, .1);
  --dl-radius: 24px;
  --dl-font: var(--font-display, "Plus Jakarta Sans", system-ui, -apple-system, sans-serif);
  --dl-label: var(--font-label, "Quicksand", system-ui, -apple-system, sans-serif);
  --dl-gutter: 16px;
  font-family: var(--dl-font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--dl-text);
  background: #fff;
  /* clip, not hidden: hidden would make .dl a scroll container and break the
     sticky buy column inside it. Keeps tilted cards from widening the page. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.dl img { max-width: 100%; }
/* magazine-theme.css colours and sizes every bare <p> (grey, 15px), which
   put grey text on the dark hero and trust card. Undone for this page's own
   paragraphs at element specificity -- so any class still wins -- and not
   inside the picker, which keeps the look it has on every other page. */
:where(.dl) p:where(:not(#deal-booking p)) { color: inherit; font-size: inherit; }
.dl-phone-only { display: block; }
@media (min-width: 992px) { .dl-phone-only { display: none; } }

/* ------------------------------------------------- on a partner subdomain */
/* The same page under the partner's own chrome (bookings/partner_site/). That
   header is shorter than Mama Maps' brand row and there is no ticker under the
   hero, so the hero gets that height back instead of stopping short of the
   fold. Scoped to the partner base's own <main> so mamamaps.com, which has
   no .partner-main, keeps the 96px fallback and is untouched. */
.partner-main .dl { --dl-chrome: 78px; }

.dl-preview-banner {
  margin: 0; padding: 8px 16px; text-align: center;
  background: #fff3cd; color: #664d03; font-weight: 700; font-size: 14px;
}

/* ------------------------------------------------------ shared elements */
.dl-kicker {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px;
  font: 700 13px/1.2 var(--dl-label);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--dl-ink);
}
.dl-kicker::before {
  content: ""; flex: none; width: 18px; height: 3px; border-radius: 3px;
  background: var(--dl-a);
}
.dl-h2 {
  margin: 0 0 20px;
  font: 800 clamp(1.6rem, 6.6vw, 2.3rem)/1.12 var(--dl-font);
  letter-spacing: -.02em; color: var(--dl-text);
  text-wrap: balance;
}
.dl-h3 { margin: 0 0 10px; font: 800 1.1rem/1.3 var(--dl-font); color: var(--dl-text); }

/* The saving pill: yellow-ish on every theme, dark text, never wraps. */
.dl-save {
  display: inline-flex; align-items: center;
  padding: 5px 10px; border-radius: 999px;
  background: var(--dl-c); color: #1b1300;
  font: 800 13px/1 var(--dl-font); white-space: nowrap;
}
.dl-save--small { padding: 4px 8px; font-size: 12px; }

.dl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  font: 700 13px/1.2 var(--dl-label);
  background: rgba(255, 255, 255, .18); color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.dl-chip--hot { background: var(--dl-c); color: #1b1300; border-color: transparent; animation: dl-nudge 4s ease-in-out infinite; }
.dl-chip--soft { background: var(--dl-wash); color: var(--dl-ink); border-color: transparent; }

/* The button. One per screen, always the theme's CTA colour, with a sheen
   running across it every few seconds so the eye finds it without it
   having to be large. */
.dl-cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px;
  border: 0; border-radius: 999px;
  background: var(--dl-cta); color: #fff;
  font: 800 17px/1.1 var(--dl-font); letter-spacing: -.005em;
  text-decoration: none; text-align: center;
  box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--dl-cta) 85%, #000), inset 0 -3px 0 rgba(0, 0, 0, .16);
  cursor: pointer; touch-action: manipulation;
  transition: transform .15s ease, box-shadow .2s ease;
}
.dl-cta:hover, .dl-cta:focus-visible { color: #fff; transform: translateY(-2px); }
.dl-cta:active { transform: scale(.97); }
.dl-cta:focus-visible { outline: 3px solid var(--dl-c); outline-offset: 3px; }
.dl-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: dl-shine 5s ease-in-out 1.2s infinite;
}
.dl-cta__arrow { display: inline-block; transition: transform .2s ease; }
.dl-cta:hover .dl-cta__arrow { transform: translateX(4px); }
.dl-cta--block { display: flex; width: 100%; }
.dl-cta--light { background: #fff; color: var(--dl-cta); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .55); }
.dl-cta--light:hover, .dl-cta--light:focus-visible { color: var(--dl-cta); }
.dl-cta--light::after { background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--dl-c) 45%, transparent) 50%, transparent 65%); }

/* The picker's own pay button, in the theme's colour. The picker is
   Bootstrap and is left as it is; only the colour and the pill shape change,
   in the page and in the sheet (which sits inside .dl for this reason). */
.dl .btn-primary {
  background: var(--dl-cta); border-color: var(--dl-cta); color: #fff;
  border-radius: 999px; font-weight: 800;
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--dl-cta) 85%, #000);
}
.dl .btn-primary:hover, .dl .btn-primary:focus { background: color-mix(in srgb, var(--dl-cta) 88%, #000); border-color: transparent; }
.dl .btn-primary:disabled { background: var(--dl-cta); border-color: var(--dl-cta); opacity: .5; box-shadow: none; }
/* The terms line is a sentence the buyer agrees to, not a form heading --
   magazine-theme's bare `label` rule made it shouty capitals. Same fix, for
   the same reason, as the place page's sheet in ticketing.css. */
.dl .form-check-label {
  display: inline; font-size: inherit; font-weight: 400;
  letter-spacing: normal; text-transform: none; color: inherit;
}

/* ----------------------------------------------------------------- hero */
.dl-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* A phone screen, less the brand row above and the ticker below -- so the
     ticker peeks at the bottom and says "there is more". --dl-chrome is what
     sits above the hero: the Mama Maps brand row plus the ticker by default,
     and just the partner's header on a partner subdomain, which has no
     ticker. Overridden there rather than hardcoded twice. */
  min-height: calc(100vh - var(--dl-chrome, 96px));
  min-height: calc(100svh - var(--dl-chrome, 96px));
  color: #fff;
  background: var(--dl-deep);
}
.dl-hero__media { position: absolute; inset: 0; z-index: -1; }
.dl-hero__media picture { position: absolute; inset: 0; }
.dl-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  transform-origin: 60% 40%;
  animation: dl-kenburns 22s ease-in-out infinite alternate;
}
.dl-hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 34%,
    color-mix(in srgb, var(--dl-deep) 72%, transparent) 58%,
    var(--dl-deep) 90%);
}
.dl-hero--poster .dl-hero__media,
.dl-hero--collage .dl-hero__media { background: linear-gradient(165deg, var(--dl-a) 0%, var(--dl-b) 100%); }
.dl-hero--poster .dl-hero__shade,
.dl-hero--collage .dl-hero__shade {
  background: linear-gradient(180deg,
    transparent 0%, transparent 40%,
    color-mix(in srgb, var(--dl-deep) 82%, transparent) 64%,
    var(--dl-deep) 88%);
}
/* The poster has no photo, so it gets a giant ticket to look at instead. */
.dl-hero--poster .dl-hero__media::after {
  content: "🎟️"; position: absolute; left: 50%; top: 13%;
  margin-left: -70px; font-size: 140px; line-height: 1;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .25));
  animation: dl-ticket 6s ease-in-out infinite;
}

.dl-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dl-art--wide { display: none; }
@media (min-width: 700px) {
  .dl-final .dl-art--tall { display: none; }
  .dl-final .dl-art--wide { display: block; }
}
@media (min-width: 992px) {
  .dl-hero .dl-art--tall { display: none; }
  .dl-hero .dl-art--wide { display: block; }
}

/* Three photos as tilted cards. On a phone they are a block of their own
   above the text; from 992px they float in the right half. */
.dl-collage {
  position: relative; flex: none; width: 100%; max-width: 480px; margin: 18px auto 0;
  height: clamp(250px, 40svh, 380px);
}
.dl-collage__card {
  position: absolute; width: 44%; aspect-ratio: 9 / 16; height: auto; max-width: none;
  object-fit: cover; border: 5px solid #fff; border-radius: 20px;
  box-shadow: 0 22px 40px -16px rgba(0, 0, 0, .55);
  animation: dl-card-float 7s ease-in-out infinite alternate;
}
.dl-collage__card { width: auto; height: 86%; }
.dl-collage__card--1 { left: 6%; top: 6%; --dl-tilt: -8deg; transform: rotate(-8deg); }
.dl-collage__card--2 { right: 6%; top: 0; z-index: 2; --dl-tilt: 6deg; transform: rotate(6deg); animation-delay: -2s; }
.dl-collage__card--3 { left: 0; right: 0; margin: 0 auto; top: 16%; height: 84%; z-index: 3; --dl-tilt: -2deg; transform: rotate(-2deg); animation-delay: -4s; }

.dl-hero__content { position: relative; width: 100%; max-width: 640px; padding: 24px var(--dl-gutter) 26px; }
.dl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dl-hero__eyebrow { margin: 0 0 6px; font: 700 14px/1.3 var(--dl-label); opacity: .95; }
.dl-hero__title {
  margin: 0 0 10px;
  font: 800 clamp(2.15rem, 9.6vw, 4.1rem)/1.02 var(--dl-font);
  letter-spacing: -.028em; color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}
.dl-hero__lede {
  margin: 0 0 18px; max-width: 34em; font-size: 16px; line-height: 1.45; opacity: .93;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.dl-hero__buy { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 16px; }
.dl-price-tag { display: flex; flex-direction: column; line-height: 1.05; }
.dl-price-tag__from { font: 700 12px/1.2 var(--dl-label); text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.dl-price-tag__row { display: flex; align-items: center; gap: 8px; }
.dl-price-tag__amount { font: 800 36px/1 var(--dl-font); letter-spacing: -.02em; }
.dl-price-tag__desk { margin-top: 4px; font-size: 12px; opacity: .85; white-space: nowrap; }
.dl-cta--hero { flex: 1 1 170px; }
.dl-hero__proof {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin: 16px 0 0; padding: 0; list-style: none;
  font-size: 13px; font-weight: 600; opacity: .95;
}
.dl-hero__proof li::before { content: "✓"; margin-right: 5px; color: var(--dl-c); font-weight: 800; }
.dl-hero__social { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; font-weight: 700; }
.dl-pulse { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; animation: dl-pulse 2s infinite; }
.dl-hero__scroll { display: none; }

/* --------------------------------------------------------------- ticker */
.dl-ticker {
  display: flex; align-items: center; height: 44px; overflow: hidden;
  background: var(--dl-deep); color: #fff;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.dl-ticker__track { display: flex; width: max-content; animation: dl-marquee 40s linear infinite; }
.dl-ticker__list {
  display: flex; gap: 30px; margin: 0; padding: 0 30px 0 0; list-style: none;
  white-space: nowrap; font: 700 14px/1 var(--dl-label);
}
.dl-ticker__list li { opacity: .95; }

/* --------------------------------------------------------------- layout */
.dl-layout { max-width: 1200px; margin: 0 auto; padding: 0 var(--dl-gutter); }
.dl-section { padding: 44px 0 8px; }

/* ----------------------------------------------------------------- prices */
.dl-offers { display: grid; gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; }
.dl-offer {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 16px; border-radius: 20px;
  background: var(--dl-wash);
  border: 1px solid color-mix(in srgb, var(--dl-a) 20%, transparent);
}
.dl-offer__text { min-width: 0; }
.dl-offer__text strong { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; }
.dl-offer__text span { display: block; margin-top: 2px; font-size: 14px; color: var(--dl-muted); }
.dl-offer__text em { display: inline-block; margin-top: 4px; font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--dl-muted); }
.dl-offer__price { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.dl-offer__price strong { font: 800 24px/1 var(--dl-font); font-variant-numeric: tabular-nums; }
.dl-offer__desk { font-size: 12px; color: var(--dl-muted); white-space: nowrap; }
.dl-prices__note, .dl-prices__urgency { margin: 12px 0 0; font-size: 14px; color: var(--dl-muted); text-align: center; }

/* ------------------------------------------------------------------ intro */
.dl-fit {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 18px; padding: 14px 16px; border-radius: 18px;
  background: color-mix(in srgb, var(--dl-b) 16%, #fff);
  font-weight: 700;
}
.dl-richtext { font-size: 17px; line-height: 1.6; color: #2b2e3a; }
.dl-richtext p { margin: 0 0 1em; }
.dl-included { margin-top: 18px; }
.dl-checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dl-checks li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; }
.dl-checks li::before {
  content: "✓"; flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--dl-a); color: #fff; font-size: 13px; font-weight: 800;
}

/* ------------------------------------------------------------- highlights */
.dl-cards {
  display: flex; gap: 12px;
  margin: 0 calc(-1 * var(--dl-gutter)); padding: 4px var(--dl-gutter) 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.dl-cards::-webkit-scrollbar { display: none; }
.dl-card {
  flex: 0 0 78%; scroll-snap-align: center;
  position: relative; overflow: hidden;
  padding: 20px; border-radius: var(--dl-radius);
  background: var(--dl-wash);
}
.dl-tone-a { background: color-mix(in srgb, var(--dl-a) 13%, #fff); }
.dl-tone-b { background: color-mix(in srgb, var(--dl-b) 17%, #fff); }
.dl-tone-c { background: color-mix(in srgb, var(--dl-c) 22%, #fff); }
.dl-card__emoji {
  display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 14px;
  border-radius: 17px; background: #fff; font-size: 28px; line-height: 1;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .3);
  transform: rotate(-6deg); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.dl-card:nth-child(even) .dl-card__emoji { transform: rotate(5deg); }
.dl-card:hover .dl-card__emoji { transform: rotate(0) scale(1.12); }
.dl-card__title { margin: 0 0 6px; font: 800 18px/1.25 var(--dl-font); color: var(--dl-text); }
.dl-card__text { margin: 0; font-size: 15px; line-height: 1.5; color: #353947; }

/* ---------------------------------------------------------------- gallery */
.dl-stories {
  display: flex; gap: 12px;
  margin: 0 calc(-1 * var(--dl-gutter)); padding: 6px var(--dl-gutter) 22px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.dl-stories::-webkit-scrollbar { display: none; }
/* A story ring, as on Instagram: the gradient border is the card's own
   background showing round the photo. */
.dl-story {
  flex: 0 0 58%; max-width: 250px; aspect-ratio: 9 / 16;
  margin: 0; padding: 3px; border-radius: 24px;
  position: relative; scroll-snap-align: center;
  background: linear-gradient(45deg, var(--dl-c), var(--dl-a), var(--dl-b));
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .5);
}
.dl-story:nth-child(odd) { transform: rotate(-1.2deg); }
.dl-story:nth-child(even) { transform: rotate(1.2deg) translateY(8px); }
.dl-story img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 21px; border: 2px solid #fff; }
.dl-story figcaption {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  padding: 6px 10px; border-radius: 12px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; font-weight: 600;
}
.dl-insta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 6px;
  padding: 8px 16px 8px 8px; border-radius: 999px;
  background: var(--dl-wash); color: var(--dl-text); font-weight: 800; text-decoration: none;
}
.dl-insta:hover { color: var(--dl-ink); }
.dl-insta__play {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  color: #fff; font-size: 12px;
}

/* -------------------------------------------------------------------- tip */
.dl-note {
  position: relative; max-width: 560px; margin: 10px auto 0;
  padding: 28px 22px 22px; border-radius: 6px 6px 26px 6px;
  background: #fff4a8; color: #3b3300;
  transform: rotate(-1.5deg);
  box-shadow: 0 20px 30px -20px rgba(80, 60, 0, .6);
}
.dl-note::before {
  content: ""; position: absolute; top: -12px; left: 50%;
  width: 100px; height: 26px; margin-left: -50px; border-radius: 3px;
  background: color-mix(in srgb, var(--dl-b) 55%, rgba(255, 255, 255, .5));
  transform: rotate(2deg); opacity: .9;
}
.dl-note__label { margin: 0 0 8px; font: 700 13px/1.2 var(--dl-label); text-transform: uppercase; letter-spacing: .06em; }
.dl-note__text { margin: 0; font: 700 18px/1.45 var(--dl-label); }

/* ---------------------------------------------------------------- reviews */
.dl-quote {
  position: relative; overflow: hidden; margin: 0;
  padding: 30px 22px 22px; border-radius: var(--dl-radius);
  background: var(--dl-deep); color: #fff;
}
.dl-quote__mark {
  position: absolute; top: -26px; right: 12px;
  font: 800 150px/1 Georgia, "Times New Roman", serif; color: var(--dl-a); opacity: .55;
}
.dl-quote__text { position: relative; margin: 0 0 14px; font: 700 20px/1.42 var(--dl-font); }
.dl-quote__source { position: relative; font-size: 13px; opacity: .8; }

/* ----------------------------------------------------------- how it works */
.dl-steps { margin: 0; padding: 0; list-style: none; counter-reset: dl-step; }
.dl-step { position: relative; display: flex; gap: 16px; padding-bottom: 24px; counter-increment: dl-step; }
.dl-step::before {
  content: ""; position: absolute; left: 27px; top: 60px; bottom: 4px; width: 2px;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--dl-a) 50%, transparent) 0 6px, transparent 6px 12px);
}
.dl-step:last-child::before { display: none; }
.dl-step__icon {
  position: relative; flex: none; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 18px;
  background: var(--dl-wash); font-size: 26px; line-height: 1;
}
.dl-step__icon::after {
  content: counter(dl-step);
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--dl-a); color: #fff; font: 800 12px/22px var(--dl-font); text-align: center;
}
.dl-step strong { display: block; margin-top: 4px; font-size: 17px; font-weight: 800; }
.dl-step p { margin: 2px 0 0; font-size: 15px; color: var(--dl-muted); }

/* Validity, as a ticket: the notches are cut with a mask. */
.dl-validity {
  display: flex; gap: 14px; margin-top: 4px; padding: 20px 24px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--dl-c) 24%, #fff);
  -webkit-mask:
    radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.dl-validity__icon { flex: none; font-size: 28px; line-height: 1.1; }
.dl-validity strong { display: block; font-size: 18px; font-weight: 800; }
.dl-validity p { margin: 4px 0 0; font-size: 15px; color: #353947; }
.dl-validity__refund { padding-top: 10px; margin-top: 10px !important; border-top: 2px dashed rgba(0, 0, 0, .12); }

/* ------------------------------------------------------------------ trust */
.dl-trust__card {
  position: relative; overflow: hidden;
  padding: 26px 20px; border-radius: 28px;
  background: var(--dl-deep); color: #fff;
}
.dl-trust__card::before {
  content: ""; position: absolute; top: -140px; right: -140px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--dl-a) 65%, transparent), transparent 70%);
}
.dl-trust__head { position: relative; display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.dl-trust__logo { flex: none; width: 56px; height: 56px; border-radius: 16px; background: #fff; }
.dl-trust__card .dl-h2 { margin: 0; color: #fff; }
.dl-kicker--light { color: color-mix(in srgb, var(--dl-c) 80%, #fff); }
.dl-kicker--light::before { background: var(--dl-c); }
.dl-trust__about { position: relative; margin: 0 0 18px; opacity: .86; }
.dl-trust__grid { position: relative; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dl-trust__grid li {
  display: flex; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1);
}
.dl-trust__emoji {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 12px; background: rgba(255, 255, 255, .1); font-size: 20px; line-height: 1;
}
.dl-trust__grid strong { display: block; font-weight: 800; line-height: 1.3; }
.dl-trust__grid p { margin: 3px 0 0; font-size: 14px; line-height: 1.45; opacity: .84; }
.dl-trust__legal { position: relative; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; font-size: 13px; }
.dl-trust__legal a { color: #fff; opacity: .8; }
.dl-trust__legal a:hover { opacity: 1; color: #fff; }

/* ------------------------------------------------------------------- plan */
.dl-address, .dl-plan__list li {
  display: flex; gap: 12px; padding: 16px; border-radius: 18px;
}
.dl-address { margin-bottom: 10px; background: var(--dl-wash); font-size: 22px; line-height: 1.2; }
.dl-address strong { display: block; font-size: 16px; font-weight: 800; }
.dl-address p { margin: 2px 0 6px; font-size: 15px; line-height: 1.45; color: var(--dl-muted); }
.dl-address a { font-size: 15px; font-weight: 800; color: var(--dl-ink); }
.dl-plan__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dl-plan__list li { border: 1px solid var(--dl-line); }
.dl-plan__emoji { flex: none; font-size: 22px; line-height: 1.2; }
.dl-plan__list strong { display: block; font-weight: 800; }
.dl-plan__list p { margin: 2px 0 0; font-size: 15px; line-height: 1.45; color: var(--dl-muted); }

/* -------------------------------------------------------------------- faq */
.dl-faq__list { display: grid; gap: 10px; }
.dl-faq__item {
  overflow: hidden; border-radius: 18px;
  background: #fff; border: 1px solid var(--dl-line);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.dl-faq__item[open] { border-color: color-mix(in srgb, var(--dl-a) 40%, transparent); box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .4); }
.dl-faq__item summary {
  position: relative; min-height: 44px; padding: 16px 56px 16px 18px;
  list-style: none; cursor: pointer; font-weight: 800; line-height: 1.35;
}
.dl-faq__item summary::-webkit-details-marker { display: none; }
.dl-faq__item summary::after {
  content: "+"; position: absolute; top: 50%; right: 14px;
  display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
  background: var(--dl-wash); color: var(--dl-ink); font-size: 20px; font-weight: 700;
  transition: transform .25s ease;
}
.dl-faq__item[open] summary::after { transform: rotate(45deg); }
.dl-faq__answer { padding: 0 18px 18px; color: #353947; }
.dl-faq__more { margin: 16px 0 0; color: var(--dl-muted); }
.dl-faq__more a { color: var(--dl-ink); font-weight: 800; }

/* -------------------------------------------------------------- buy card */
.dl-buy { padding: 40px 0; }
.dl-buy__card {
  padding: 22px 18px; border-radius: 28px; background: #fff;
  box-shadow: 0 30px 60px -32px rgba(15, 20, 50, .5), 0 0 0 1px var(--dl-line);
}
.dl-buy__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.dl-buy__title { margin: 0; font: 800 22px/1.2 var(--dl-font); color: var(--dl-text); }
.dl-buy__facts, .dl-buy__proof { margin: 0; padding: 0; list-style: none; }
.dl-buy__facts { display: grid; gap: 4px; margin-bottom: 14px; font-size: 14px; color: var(--dl-muted); }
.dl-buy__proof {
  display: grid; gap: 6px; margin-top: 18px; padding-top: 14px;
  border-top: 1px dashed rgba(25, 27, 36, .18);
  font-size: 13px; font-weight: 600; color: var(--dl-muted);
}
.dl-buy__teaser { display: flex; flex-direction: column; gap: 2px; margin: 0 0 16px; }
.dl-buy__teaser strong { font: 800 28px/1.1 var(--dl-font); }
.dl-buy__teaser span, .dl-buy__teaser del { font-size: 14px; color: var(--dl-muted); }
/* Phones buy in the sheet: once the sheet script has moved the picker there,
   this card is empty, so it goes. Without JavaScript it stays -- see
   _buy_card.html. */
@media (max-width: 991.98px) {
  .dl-js .dl-buy { display: none; }
}
.dl-custom-tickets { max-width: 620px; margin: 0 auto; padding: 0 var(--dl-gutter); }

/* -------------------------------------------------------------- final cta */
/* Deep in the middle, colour round the edges (the "edges" artwork), so the
   white text sits on something dark without a grey veil over the shapes. */
.dl-final {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: 56px; padding: 88px var(--dl-gutter);
  text-align: center; color: #fff;
  background: var(--dl-deep);
}
.dl-final .dl-art { z-index: -2; }
.dl-final::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 55% 50% at 50% 50%,
    color-mix(in srgb, var(--dl-deep) 85%, transparent) 0%, transparent 100%);
}
.dl-final__inner { max-width: 560px; margin: 0 auto; }
.dl-final__emoji { margin: 0; font-size: 46px; line-height: 1; animation: dl-bob 2.6s ease-in-out infinite; }
.dl-final__title {
  margin: 10px 0 8px;
  font: 800 clamp(1.9rem, 8vw, 3rem)/1.05 var(--dl-font);
  letter-spacing: -.02em; color: #fff; text-wrap: balance;
}
.dl-final__sub { margin: 0 0 18px; opacity: .92; }
.dl-final__price { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 20px; font-size: 18px; }
.dl-final__price strong { font: 800 36px/1 var(--dl-font); }
.dl-final__deadline { margin: 18px 0 0; font-size: 14px; opacity: .92; }

/* ----------------------------------------------------------------- nearby */
.dl-nearby { max-width: 1200px; margin: 0 auto; padding: 44px var(--dl-gutter) 40px; }
.dl-nearby__row {
  display: flex; gap: 12px;
  margin: 0 calc(-1 * var(--dl-gutter)); padding: 4px var(--dl-gutter) 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.dl-nearby__row::-webkit-scrollbar { display: none; }
.dl-nearby__card {
  flex: 0 0 210px; scroll-snap-align: start;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; background: #fff; border: 1px solid var(--dl-line);
  color: inherit; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dl-nearby__card:hover { color: inherit; transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(0, 0, 0, .45); }
.dl-nearby__card img { width: 100%; height: 124px; object-fit: cover; }
.dl-nearby__label { margin: 10px 12px 0; font: 700 11px/1.2 var(--dl-label); text-transform: uppercase; letter-spacing: .06em; color: var(--dl-ink); }
.dl-nearby__card strong { margin: 3px 12px 0; font-weight: 800; line-height: 1.3; }
.dl-nearby__meta { margin: 3px 12px 0; font-size: 13px; color: var(--dl-muted); }
.dl-nearby__card > :last-child { margin-bottom: 14px; }

/* ---------------------------------------------------------------- bookbar */
.dl-bookbar {
  position: fixed; z-index: 60;
  left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 18px 40px -12px rgba(10, 15, 40, .45), 0 0 0 1px rgba(0, 0, 0, .06);
  transform: translateY(160%);
  transition: transform .4s cubic-bezier(.2, .9, .3, 1.15);
}
.dl-bookbar.is-visible { transform: none; }
html:not(.dl-js) .dl-bookbar { transform: none; }
.dl-bookbar__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; min-width: 0; color: var(--dl-text); line-height: 1.1; }
.dl-bookbar__from { font-size: 12px; font-weight: 700; color: var(--dl-muted); }
.dl-bookbar__price strong { font: 800 22px/1 var(--dl-font); white-space: nowrap; }
.dl-bookbar .dl-cta { flex: none; min-height: 48px; padding: 0 22px; font-size: 16px; }

/* ---------------------------------------------------------------- desktop */
@media (min-width: 700px) {
  .dl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
  .dl-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-plan__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-story { flex-basis: 220px; }
  .dl-trust__card { padding: 36px 32px; }
}

@media (min-width: 992px) {
  .dl { --dl-gutter: 40px; }
  .dl-hero { min-height: min(86vh, 860px); justify-content: center; }
  .dl-hero__content {
    max-width: 600px; padding: 80px 0;
    margin-left: max(40px, calc((100vw - 1200px) / 2 + 40px));
  }
  .dl-hero--photo .dl-hero__shade {
    background:
      linear-gradient(90deg, var(--dl-deep) 0%, color-mix(in srgb, var(--dl-deep) 78%, transparent) 36%, transparent 68%),
      linear-gradient(0deg, color-mix(in srgb, var(--dl-deep) 45%, transparent), transparent 30%);
  }
  .dl-hero--poster .dl-hero__shade,
  .dl-hero--collage .dl-hero__shade {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--dl-deep) 92%, transparent) 0%,
      color-mix(in srgb, var(--dl-deep) 60%, transparent) 42%,
      transparent 66%);
  }
  .dl-hero--poster .dl-hero__media::after { left: auto; right: 16%; top: 28%; margin: 0; font-size: 220px; }
  .dl-collage { position: absolute; left: 50%; right: 3%; top: 9%; bottom: 9%; height: auto; max-width: 640px; margin: 0; }
  .dl-collage__card { height: 78%; }
  .dl-collage__card--1 { left: 4%; top: 10%; }
  .dl-collage__card--2 { right: 4%; top: 0; }
  .dl-collage__card--3 { top: 22%; height: 76%; }
  .dl-hero__scroll {
    display: grid; place-items: center; position: absolute; left: 0; right: 0; bottom: 18px;
    width: 44px; height: 44px; margin: 0 auto; border-radius: 50%;
    background: rgba(255, 255, 255, .16); color: #fff;
    animation: dl-bob 2.2s ease-in-out infinite;
  }
  .dl-hero__scroll:hover { color: #fff; background: rgba(255, 255, 255, .28); }

  .dl-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 64px; align-items: start;
  }
  .dl-layout--single { display: block; max-width: 880px; }
  .dl-main { padding-bottom: 20px; }
  .dl-section { padding-top: 56px; }
  /* Sticky beside the story. Its own scroll when the picker is taller than
     the window -- the date picker is -- rather than a pay button nobody can
     reach until the page ends. Top clears the 73px sticky header. */
  .dl-buy { position: sticky; top: 92px; margin-top: 40px; padding: 0; }
  .dl-buy__card { max-height: calc(100vh - 112px); overflow-y: auto; overscroll-behavior: contain; padding: 26px 24px; }
  .dl-buy--inline { position: static; margin: 40px 0; }
  .dl-buy--inline .dl-buy__card { max-height: none; overflow: visible; }
  .dl-bookbar { display: none; }
  .dl-cta--hero { flex: 0 1 320px; }
  .dl-card { padding: 24px; }
  .dl-final { padding: 96px 40px; }
}

/* ------------------------------------------------ focused booking page */
/* bookings/partner_site/booking_focused.html: the partner's own site sent
   the family here to book, so the header is a band rather than a screen and
   the picker follows it at once -- in the page, not in a sheet. Everything is
   scoped under .dl-focus; the sales page is untouched. */
.dl-fhero {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff; background: var(--dl-deep);
}
.dl-fhero .dl-art { z-index: -2; }
.dl-fhero .dl-art--wide { display: none; }
.dl-fhero__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; max-width: none; object-fit: cover;
}
.dl-fhero__shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--dl-deep) 40%, transparent) 0%,
    color-mix(in srgb, var(--dl-deep) 88%, transparent) 100%);
}
.dl-fhero__inner { max-width: 1200px; margin: 0 auto; padding: 30px var(--dl-gutter) 56px; }
.dl-fhero__title {
  margin: 0 0 8px;
  font: 800 clamp(1.9rem, 7.4vw, 3.1rem)/1.05 var(--dl-font);
  letter-spacing: -.025em; color: #fff; text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .22);
}
.dl-fhero__facts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; }
.dl-fhero__facts .dl-hero__proof { margin: 0; }

/* The picker straight under the header, lifted onto it by a little so the
   two read as one card, not a banner and then a form. */
.dl-focus .dl-buy { position: relative; z-index: 2; margin-top: -32px; padding: 0 0 8px; }
@media (max-width: 991.98px) {
  .dl-focus .dl-layout { display: flex; flex-direction: column; }
  .dl-focus .dl-buy { order: -1; }
  /* The sales page hides this card on phones once its sheet has taken the
     picker. This page has no sheet, so the card stays. */
  .dl-js .dl-focus .dl-buy { display: block; }
}
@media (min-width: 700px) {
  .dl-fhero .dl-art--tall { display: none; }
  .dl-fhero .dl-art--wide { display: block; }
}
@media (min-width: 992px) {
  .dl-fhero__inner { padding: 56px var(--dl-gutter) 64px; }
  /* Clear of the buy column, which rises into the band beside the text. */
  .dl-fhero__inner > * { max-width: calc(100% - 474px); }
  .dl-focus .dl-buy { position: sticky; margin-top: -120px; }
  .dl-focus .dl-main { padding-top: 8px; }
}

/* ------------------------------------------------------ reveal on scroll */
/* .dl-anim is set by landing.js, not by the inline script, so that if the
   script never arrives nothing stays invisible. */
.dl-anim .dl-reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.dl-anim .dl-reveal.is-in { opacity: 1; transform: none; }
.dl-anim .dl-story.dl-reveal.is-in:nth-child(odd) { transform: rotate(-1.2deg); }

/* ----------------------------------------------------- generated artwork */
/* transform-box so each shape turns round its own middle, not the SVG's. */
.dl-art .dl-float, .dl-art .dl-twinkle, .dl-art .dl-drift { transform-box: fill-box; transform-origin: center; }
.dl-art .dl-float { animation: dl-float-a 14s ease-in-out infinite alternate; }
.dl-art .dl-float--1 { animation-name: dl-float-b; animation-duration: 17s; }
.dl-art .dl-float--2 { animation-name: dl-float-c; animation-duration: 11s; }
.dl-art .dl-twinkle { animation: dl-twinkle 3.4s ease-in-out infinite; }
.dl-art .dl-drift { animation: dl-drift 8s ease-in-out infinite alternate; }

@keyframes dl-kenburns { from { transform: scale(1.02); } to { transform: scale(1.13) translate(-1.5%, -1%); } }
@keyframes dl-float-a { from { transform: translate(0, 0) rotate(0) scale(1); } to { transform: translate(14px, -20px) rotate(9deg) scale(1.06); } }
@keyframes dl-float-b { from { transform: translate(0, 0) rotate(0); } to { transform: translate(-18px, 12px) rotate(-11deg); } }
@keyframes dl-float-c { from { transform: translate(0, 0) rotate(0); } to { transform: translate(12px, 16px) rotate(7deg); } }
@keyframes dl-twinkle { 0%, 100% { transform: scale(.55) rotate(0); opacity: .45; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes dl-drift { from { transform: translateY(0) rotate(0); } to { transform: translateY(-18px) rotate(25deg); } }
@keyframes dl-card-float { from { transform: rotate(var(--dl-tilt)) translateY(0); } to { transform: rotate(calc(var(--dl-tilt) * -0.4)) translateY(-10px); } }
@keyframes dl-ticket { 0%, 100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-14px); } }
@keyframes dl-marquee { to { transform: translateX(-50%); } }
@keyframes dl-shine { 0%, 62% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes dl-pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .7); } 70% { box-shadow: 0 0 0 10px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
@keyframes dl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes dl-nudge { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-3deg); } 96% { transform: rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  .dl *, .dl *::before, .dl *::after { animation: none !important; transition: none !important; }
  .dl-anim .dl-reveal { opacity: 1; transform: none; }
}