/* ═══════════════════════════════════════════════════════════════════════
   /mega-sponsors/advertise/ — the billboard sales page, the thank-you page
   after Stripe Checkout, the Ad Policy and the Advertising Terms.

   Kit first: /marquee/site.css carries the tokens, type, buttons, cards,
   fields, stubs, FAQ, eyebrows, prose links and the document layout (and
   `[hidden]{display:none!important}` in its base). Only what these four
   pages need and the kit doesn't have lives here. Behaviour: ./advertise.js.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero: the dark top of the sales sheet ───────────────────────────── */

.adv-hero .phero-in { gap: 18px; }
/* The three pitches sit in ONE grid cell, so the hero keeps the height of
   the longest one and the page below never jumps when the pitch changes.
   advertise.js swaps `hidden` for `.is-off`. */
.adv-pitch { display: grid; }
.adv-pitch > .adv-panel { grid-area: 1 / 1; display: grid; gap: 16px; align-content: start; min-width: 0; }
.adv-panel.is-off { visibility: hidden; }
.adv-panel .t-display { max-width: 15ch; }
.adv-panel .t-lede { max-width: 60ch; }
/* The tablist comes before the pitches in the DOM AND on screen (no CSS
   `order`): keyboard focus goes tab → panel, top to bottom, the way the
   eye reads it (WAI-ARIA tabs pattern). */
.adv-tabs { margin-bottom: 2px; }

/* ── The sheet: why + preview on the left, the booking card on the right ─ */

.adv-sheet { padding-block: clamp(32px, 5vw, 64px) var(--section); }
.adv-flash { margin-bottom: 24px; }
.adv-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 960px) { .adv-body { grid-template-columns: minmax(0, 1fr); } }
.adv-col { display: grid; gap: 22px; align-content: start; min-width: 0; }
.adv-book { display: grid; gap: 22px; align-content: start; min-width: 0; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--sh-2); }
.adv-block { display: grid; gap: 14px; min-width: 0; }

/* A fieldset is a plain group here; its legend is the kit's .eyebrow. */
.adv-fs { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.adv-fs > legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; }
.adv-fs > legend + * { clear: both; }

/* The three reasons. */
.adv-why { display: grid; gap: 18px; }
.adv-why li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--text-2); }
.adv-why strong { color: var(--text); }
.adv-why-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r); background: var(--gold-wash); color: var(--gold-ink); font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); }
.adv-why-ic svg { width: 20px; height: 20px; }

/* "Seen N times" — only printed when the server sends a real number. */
.adv-stat { padding: 12px 14px; border: 1.5px dashed var(--line-3); border-radius: var(--r); color: var(--muted); font-size: var(--fs-sm); }
.adv-stat strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* ── "See it with your brand": the art inside a miniature of the page ─── */

.adv-prev { display: grid; grid-template-columns: minmax(0, 1fr) clamp(96px, 26%, 150px); gap: 14px; align-items: end; padding: 14px; border-radius: var(--r-lg); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.adv-mock { margin: 0; min-width: 0; }
.adv-mock-desk { overflow: hidden; border-radius: var(--r); background: var(--paper); box-shadow: var(--sh-1); }
.adv-mock-bar { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; background: var(--ink-2); }
.adv-mock-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); flex: none; }
.adv-mock-bar span { min-width: 0; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--on-ink-3); }
.adv-mock-page { display: grid; gap: 6px; padding: 10px; }
.adv-mock-phone { padding: 6px; border-radius: 22px; background: var(--ink); box-shadow: 0 0 0 1.5px var(--ink-4), var(--sh-2); }
.adv-mock-phone .adv-mock-page { border-radius: 16px; background: var(--paper); padding: 18px 7px 14px; }
.adv-ln { display: block; height: 7px; border-radius: var(--r-xs); background: var(--paper-3); }
.adv-ln.w40 { width: 40%; } .adv-ln.w55 { width: 55%; } .adv-ln.w70 { width: 70%; }
.adv-spon { justify-self: end; margin-top: 4px; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.adv-bb { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: var(--r-xs); aspect-ratio: 97 / 25; background: linear-gradient(120deg, var(--navy), var(--red)); color: var(--on-ink); }
.adv-bb.is-phone { aspect-ratio: 6 / 5; }
.adv-bb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.adv-bb-ph { padding: 0 8px; font-family: var(--font-display); font-stretch: var(--stretch-tight); font-weight: 800; font-size: clamp(0.75rem, 1.4vw, 1rem); line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em; text-align: center; }
.adv-bb.has-art .adv-bb-ph { display: none; }

/* Two uploads. The real <input type=file> stays in the tab order (it is
   what the label opens); the label wears the button. */
.adv-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 520px) { .adv-files { grid-template-columns: minmax(0, 1fr); } }
.adv-file { position: relative; display: grid; gap: 6px; align-content: start; min-width: 0; }
.adv-file input[type='file'] { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.adv-file label.btn { justify-content: flex-start; width: 100%; }
/* One control, so a ring on ANY focus: after a mouse click on Reserve the
   first error can be this input, and :focus-visible wouldn't draw it. */
.adv-file input:focus + label { --b-bd: var(--text); outline: var(--focus-w) solid var(--red); outline-offset: var(--focus-off); }
.adv-file input[aria-invalid='true'] + label { --b-bd: var(--red-2); }
.adv-hint { font-size: var(--fs-xs); color: var(--muted); }

/* Inline notes: ok (green), warning (yellow), error (red). Empty = gone. */
.adv-note { padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 600; line-height: 1.45; background: var(--paper-2); color: var(--text-2); }
.adv-note:empty { display: none; }
.adv-note.is-ok { background: var(--ok-wash); color: var(--ok); }
.adv-note.is-warn { background: var(--gold-wash); color: var(--gold-ink); }
.adv-note.is-err { background: var(--red-wash); color: var(--red-2); }
.adv-err { font-size: var(--fs-xs); font-weight: 600; color: var(--red-2); }
.adv-err:empty { display: none; }
.input[aria-invalid='true'], .select[aria-invalid='true'] { border-color: var(--red-2); }
/* Focused AND invalid: the red border alone looks exactly like the same
   field without focus. Focus takes the kit's focus border (--text, as
   site.css `.input:focus`) with a red-wash halo instead of the grey one, so
   it reads both "here" and "still wrong". */
.input[aria-invalid='true']:focus, .select[aria-invalid='true']:focus { border-color: var(--text); box-shadow: 0 0 0 4px var(--red-wash); }
.adv-optional { font-weight: 500; color: var(--muted); }
/* Two fields side by side (.form-row) stretch to the taller one; without
   this the kit's .field grid spread that height over its rows, and Phone's
   label and box slid down next to E-mail (which has a hint line). */
.adv-sheet .field { align-content: start; }

/* ── Booking card: space, week, price, details, the button ───────────── */

/* Radio cards. The input keeps its own focus; the card shows it. */
.adv-opt { position: relative; display: block; min-width: 0; }
.adv-opt input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.adv-opt input:focus-visible + span { outline: var(--focus-w) solid var(--red); outline-offset: var(--focus-off); }

.adv-slots { display: grid; gap: 8px; }
.adv-slot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; min-height: 56px; padding: 11px 14px; border-radius: var(--r); border: 1.5px solid var(--line-2); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.adv-slot strong { font-weight: 700; }
.adv-slot-where { grid-column: 1; font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.adv-slot-price { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* A space that couldn't load: picking it again retries (advertise.js). */
.adv-slot-price.is-failed { max-width: 11ch; white-space: normal; text-align: right; font-size: var(--fs-micro); color: var(--red-2); }
.adv-opt:hover input:not(:checked) + .adv-slot { border-color: var(--text); }
.adv-opt input:checked + .adv-slot { border-color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.adv-opt input:disabled + .adv-slot { cursor: not-allowed; color: var(--muted); }

.adv-weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.adv-wk { display: grid; align-content: center; justify-items: center; gap: 2px; min-height: 60px; height: 100%; padding: 8px 4px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); text-align: center; font-size: var(--fs-xs); line-height: 1.25; color: var(--muted); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.adv-wk b { font-size: var(--fs-sm); font-weight: 700; color: var(--text); white-space: nowrap; }
.adv-wk em { font-style: normal; font-size: var(--fs-micro); font-weight: 700; color: var(--red-2); text-wrap: balance; }
.adv-opt.is-hot .adv-wk { border-color: var(--red); }
.adv-opt:hover input:not(:checked):not(:disabled) + .adv-wk { border-color: var(--text); }
.adv-opt input:checked + .adv-wk, .adv-opt.is-span .adv-wk { background: var(--ink); border-color: var(--ink); color: var(--on-ink-2); }
.adv-opt input:checked + .adv-wk b, .adv-opt.is-span .adv-wk b { color: var(--on-ink); }
.adv-opt input:checked + .adv-wk em, .adv-opt.is-span .adv-wk em { color: var(--red-hot); }
.adv-opt.is-span .adv-wk { background: var(--ink-3); border-color: var(--ink-3); }
/* A taken week: only the date and "taken" are struck; a holiday name under
   them stays whole and muted (struck red, it read like an error mark). */
.adv-opt input:disabled + .adv-wk { cursor: not-allowed; background: var(--paper-2); border-color: transparent; }
.adv-opt input:disabled + .adv-wk > b, .adv-opt input:disabled + .adv-wk > span { text-decoration: line-through; }
.adv-opt input:disabled + .adv-wk b { color: var(--muted); }
.adv-opt input:disabled + .adv-wk em { color: var(--muted); font-weight: 600; }
.adv-opt.is-clash .adv-wk { box-shadow: inset 0 0 0 2px var(--red-2); }

/* Price, the sum, the founding line. */
.adv-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.adv-price strong { font-family: var(--font-display); font-stretch: var(--stretch-tight); font-weight: 850; font-size: clamp(2.4rem, 4vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.adv-price span { color: var(--muted); font-size: var(--fs-sm); }
.adv-sum > div { padding: 9px 0; font-size: var(--fs-sm); }
.adv-sum dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.adv-sum .is-total { border-bottom: 0; }
.adv-sum .is-total dt { color: var(--text); font-weight: 650; }
.adv-sum .is-total dd { font-size: 1.125rem; }
.adv-sum .is-discount dd { color: var(--ok); }
.adv-lock { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 14px; border-radius: var(--r-sm); background: var(--gold-wash); color: var(--gold-ink); font-size: var(--fs-sm); line-height: 1.45; }
.adv-lock svg { width: 18px; height: 18px; margin-top: 2px; }
.adv-lock strong { color: var(--gold-ink); }

.adv-safe { font-size: var(--fs-xs); color: var(--muted); text-align: center; line-height: 1.5; text-wrap: balance; }
/* Links inside these sentences wear the kit's .prose link (red-2, underlined).
   .prose also brings its 68ch measure; the line is centred on the card like
   .adv-safe above it, so it takes the card's full width instead. */
.adv-agree { font-size: var(--fs-xs); color: var(--muted); text-align: center; max-width: none; }
/* The privacy notice under it: a paragraph, so it reads left-aligned. */
.adv-privacy { text-align: left; line-height: 1.5; padding-top: 12px; border-top: 1px dashed var(--line-3); }
.adv-privacy strong { color: var(--text-2); }
/* Busy, not disabled: `aria-disabled` keeps the button focusable, so the
   keyboard doesn't fall to <body> while the request runs. No opacity: it
   would dim the kit's focus ring along with the button. The colours change
   instead, as on the report page (busy label 7.7:1 on red-wash, 6.4:1 on
   paper), and the ring stays at full strength. `.btn` in each selector
   outranks the kit's :hover / :active rules. */
.btn.adv-cta[aria-disabled="true"], .btn#adv-retry[aria-disabled="true"] { cursor: progress; transform: none; box-shadow: none; }
.btn-red.adv-cta[aria-disabled="true"] { --b-bg: var(--red-wash); --b-fg: var(--red-3); --b-bd: transparent; }
.btn-red.adv-cta[aria-disabled="true"]::before { display: none; }
.btn.adv-cta[aria-disabled="true"] svg.i-arrow { transform: none; }
.btn-line#adv-retry[aria-disabled="true"] { --b-bg: var(--paper); --b-fg: var(--muted); --b-bd: var(--line-2); }
.adv-cta > span { min-width: 0; }

/* Waiting / closed / could-not-load states of the booking card. */
.adv-status { display: grid; gap: 12px; justify-items: start; color: var(--text-2); }
.adv-closed { font-size: var(--fs-lg); font-weight: 650; color: var(--text); line-height: 1.4; }

/* The kit's tap-target rule (≥ 44px on phones) for the two upload buttons
   and "Try again" (.btn-sm is 40px). */
@media (max-width: 767px) { .adv-file label.btn, #adv-retry { min-height: 44px; } }

/* Windows High Contrast / forced colours: backgrounds and shadows are
   dropped there, so the chosen space, the start week, the weeks it covers
   and the selected audience tab are drawn with system-colour outlines. */
@media (forced-colors: active) {
  .adv-opt input:checked + span { outline: 2px solid Highlight; outline-offset: -5px; }
  .adv-opt input:checked:focus-visible + span { outline: 3px solid Highlight; outline-offset: var(--focus-off); }
  .adv-opt.is-span .adv-wk { border-style: dashed; border-color: Highlight; }
  .adv-opt.is-clash .adv-wk { border-style: double; border-width: 4px; }
  .adv-opt input:disabled + .adv-wk, .adv-opt input:disabled + .adv-slot { color: GrayText; }
  .adv-tabs .chip[aria-selected='true'] { outline: 2px solid Highlight; outline-offset: 2px; }
  /* Selected AND focused must look different from selected alone: a thicker
     ring further out (the chosen radio above does the same). */
  .adv-tabs .chip[aria-selected='true']:focus-visible { outline: 4px double Highlight; outline-offset: var(--focus-off); }
  /* Focused invalid field: the error border is gone here, the ring stays. */
  .input[aria-invalid='true']:focus, .select[aria-invalid='true']:focus { outline: 3px solid Highlight; }
  /* The busy colours above are dropped here: say "unavailable" in GrayText. */
  .adv-cta[aria-disabled='true'], #adv-retry[aria-disabled='true'] { color: GrayText; border-color: GrayText; }
}

/* ── How it works, all spaces, FAQ, footer strip ─────────────────────── */

.adv-steps .stubs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adv-steps .stub { min-height: 0; }
@media (max-width: 860px) { .adv-steps .stubs { grid-template-columns: minmax(0, 1fr); } }

/* All spaces: the three billboards, each in a mini page that shows where
   the band sits. Reuses the preview's mock classes. */
.adv-space-list { --cols: 3; --cols-md: 3; --cols-sm: 1; }
.adv-space { align-content: start; }
/* Three across: the cards share their rows (subgrid), so the mock pages are
   one height and the titles, lines and links under them line up. Each mock
   page fills its frame and centres its sketch. One column: nothing to align. */
@media (min-width: 821px) {
  @supports (grid-template-rows: subgrid) {
    .adv-space { grid-row: span 5; grid-template-rows: subgrid; row-gap: 10px; }
    .adv-space .adv-mock-desk { display: grid; grid-template-rows: auto minmax(0, 1fr); }
    .adv-space .adv-mock-page { align-content: center; }
  }
}
.adv-space .adv-mock-desk { margin-bottom: 8px; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.adv-space .adv-bb-ph { font-size: var(--fs-micro); }
.adv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.adv-tiles i { display: block; height: 18px; border-radius: var(--r-xs); background: var(--paper-3); }
.adv-tix { display: block; height: 26px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1.5px var(--line-3); }
.adv-space-kv { margin-top: 2px; }
.adv-space-kv > div { padding: 9px 0; font-size: var(--fs-sm); }
.adv-space-kv dd { font-family: var(--font-mono); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A 44px tap target on phones without moving the underline off the words. */
@media (max-width: 767px) { .adv-space .link { position: relative; } .adv-space .link::after { content: ''; position: absolute; inset: -12px -4px; } }

.adv-faq .faq { max-width: 880px; }
.adv-foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-block: 22px; border-top: 1px solid var(--line-2); }
.adv-foot p { color: var(--text-2); }
.adv-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: var(--fs-sm); }
.adv-foot-k { display: inline-flex; align-items: center; gap: 6px; }
.adv-foot-k .ico { width: 16px; height: 16px; }
@media (max-width: 767px) { .adv-foot-links a { min-height: 44px; display: inline-flex; align-items: center; } }

/* ── Thank-you page ──────────────────────────────────────────────────── */

.adv-thanks { display: grid; gap: 22px; justify-items: start; max-width: 560px; }
.adv-thanks .receipt { justify-self: stretch; max-width: none; }
.adv-thanks .receipt dd { text-align: right; }

/* ── Ad Policy and Terms: the document layout of /refunds/ ───────────── */

.adv-doc .phero-in { gap: 18px; }
.helpnav { display: grid; gap: 12px; margin-top: 10px; padding-top: 20px; border-top: 1px dashed var(--ink-line-2); }
.doc { padding-block: clamp(36px, 5vw, 72px) var(--section); }
.toc-d > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
.toc-d > summary::-webkit-details-marker { display: none; }
.toc-d > summary svg { display: none; width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.toc-d > ol { margin-top: 14px; }
.toc-d ol a { display: grid; grid-template-columns: 2.3em minmax(0, 1fr); align-items: baseline; }
.doc-toc .tn { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.doc-toc a.is-on .tn { color: var(--red-2); }
.toc-help { display: grid; gap: 6px; margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line-3); font-size: var(--fs-sm); color: var(--muted); }
.doc-toc .toc-help a { display: block; margin: 0; padding: 0; border: 0; color: var(--text); font-weight: 650; overflow-wrap: anywhere; }
.toc-help a:hover { color: var(--red-2); }
@media (min-width: 961px) { .toc-d > summary { pointer-events: none; } }
@media (max-width: 960px) {
  .doc { gap: 28px; }
  .doc-toc { padding: 0; gap: 0; }
  .toc-d > summary { min-height: 56px; padding: 0 18px; cursor: pointer; }
  .toc-d > summary svg { display: block; }
  .toc-d[open] > summary svg { transform: rotate(180deg); }
  .toc-d > ol { margin: 0 18px 12px; }
  .toc-d ol a { min-height: 44px; align-items: center; }
  .doc-toc .toc-help a { min-height: 44px; display: flex; align-items: center; }
  .toc-help { margin: 0 18px 18px; }
}
.doc-body h2, .doc-body h3 { scroll-margin-top: 8px; }
.doc-meta { margin-bottom: 4px; }
.doc-body .doc-meta + h2 { margin-top: 1.4em; }
.doc-body .callout { margin-block: 1.4em; }
.doc-body .callout > div > * + * { margin-top: 0.6em; }
.doc-body .checks { padding-left: 0; gap: 12px; }
.doc-draft { color: var(--red-2); }
.adv-msg:empty { display: none; }

/* ── Shared by the sponsor pages ────────────────────────────────────────
   The report (/mega-sponsors/report/) carries a copy of this block in its
   own <style>, and /mega-sponsors/ a copy of the WhatsApp part: neither
   loads this file. Change all three together. */

/* Breadcrumb: each "/" travels with the item after it (.crumb), so a wrap
   never leaves a separator hanging at the end of a line. */
.crumbs .crumb { display: inline-flex; align-items: center; gap: 6px; }

/* The floating WhatsApp button (and Crisp's, when it shows, under it) sits
   in the bottom-right corner over the page (Task 15, P4). Only these pages
   change; mtu-whatsapp.js and mtu-nav.js stay as they are site-wide.
   - The footer's last line ends above the buttons, so at the bottom of the
     page nothing stays under them. mtu-whatsapp.js: 54px at 18px from the
     bottom, 50px at 14px up to 520px wide, lifted 10px over the tab bar on
     phones (that bar's own room is chrome.css's body padding); with Crisp,
     the WhatsApp button stacks 54px higher.
   - A focused field is never scrolled in under the button (WCAG 2.4.11):
     the scroll padding clears its corner (chrome.css clears only the tab
     bar). */
body[data-page^='mega-sponsors'] .mq-ftr-bottom { padding-bottom: calc(22px + 80px + env(safe-area-inset-bottom)); }
html:has(#crisp-chatbox[data-hidden='false']) body[data-page^='mega-sponsors'] .mq-ftr-bottom { padding-bottom: calc(22px + 148px + env(safe-area-inset-bottom)); }
html:has(> body[data-page^='mega-sponsors']) { scroll-padding-bottom: calc(18px + 54px + 16px); }
@media (max-width: 767px) {
  html:has(> body[data-page^='mega-sponsors']) { scroll-padding-bottom: calc(64px + 10px + 18px + 54px + 16px + env(safe-area-inset-bottom)); }
}