/* ===========================================================
   THE PROSPERITY MANUAL (was The Money Manual until 27 Sep 2026) - Meir Ezra live in Leicester + London + Amsterdam
   MADE IMMERSIVE

   v28 - Gal's 16 Aug list: name-first hero, two cities, buy-now in the hero,
         guarantee big + everywhere, whole-day copy, 3 tickets + VIP,
         pick-your-city, early-bird countdown, crossed-out prices.
   v7  - funnel rebuild.
   ONE typeface (Archivo, heavy) the whole way down.
   GOLD = brand + labels.  GREEN = action, and nothing else.
   Dark and light bands alternate. Price and date never leave the screen.
   =========================================================== */

:root{
  /* --- dark bands --- Cape Town (9 Oct 2026): ink is the Atlantic at night,
     the blue in the hero sky, instead of near-black. Gold = the sunset. */
  --ink:#091320;
  --ink-2:#0C1A2B;
  --panel:#10223A;

  /* --- light bands --- */
  --paper:#F4F1EA;
  --paper-2:#E7E2D6;
  --paper-ink:#0C0C10;

  /* --- champagne: the brand signal (labels, rules, the seal) --- */
  --gold:#C9A55C;
  --gold-hi:#E8C77A;
  --gold-deep:#7A5E24;

  /* --- lime: the ACTION colour. buttons and nothing else. --- */
  --green:#C7F04B;
  --green-hi:#DCFF7E;
  --green-ink:#0E1305;

  --ivory:#F4F0E8;
  --muted:rgba(244,240,232,.64);
  --faint:rgba(244,240,232,.34);
  --line:rgba(201,165,92,.22);

  --sans:'Archivo',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --pad:clamp(20px,5vw,64px);
  --maxw:1240px;
  --bar:0px;              /* height of the sticky bar, set by JS */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--ivory);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}

/* ---------- ONE typeface, heavy and tight at display sizes ---------- */
h1,h2,h3{margin:0;font-family:var(--sans);font-weight:800;letter-spacing:-.03em;line-height:1}
h1{font-size:clamp(38px,7.6vw,96px);line-height:.94;letter-spacing:-.038em}
h2{font-size:clamp(28px,4.6vw,54px);line-height:1.02;letter-spacing:-.032em}
h2.big{font-size:clamp(34px,5.8vw,68px);letter-spacing:-.035em}
h3{font-size:clamp(19px,2.1vw,25px);font-weight:700;letter-spacing:-.02em}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.wrap.narrow{max-width:820px}
.section{padding:clamp(60px,8.5vw,116px) 0;position:relative}
/* the nav is sticky, so anchored sections must stop clear of it */
section[id]{scroll-margin-top:clamp(72px,9vw,96px)}

/* ---------- band flips -------------------------------------------------
   Overriding the tokens locally means every rule below adapts on its own. */
.band-paper{
  background:var(--paper);color:var(--paper-ink);
  --ivory:#0C0C10;
  --muted:rgba(12,12,16,.70);
  --faint:rgba(12,12,16,.46);
  --line:rgba(12,12,16,.15);
  --gold:var(--gold-deep);
  --gold-hi:#5E4718;
  --ink:var(--paper);
  --ink-2:var(--paper-2);
  --panel:var(--paper-2);
}
.band-green{
  background:var(--green);color:var(--green-ink);
  --ivory:#0E1305;
  --muted:rgba(14,19,5,.74);
  --faint:rgba(14,19,5,.5);
  --line:rgba(14,19,5,.2);
  --gold:#3D4E13;
  --gold-hi:#2C390C;
}

/* ---------- shared bits ---------- */
.eyebrow{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin:0 0 16px;font-weight:700;
}
.lede{font-size:clamp(17px,1.9vw,21px);color:var(--muted);max-width:60ch;margin-top:20px;font-weight:400}
.prose p{color:var(--muted);max-width:60ch}
/* headings carry no margin of their own, so give the body copy that follows some air */
h2 + .prose,h2 + .acc,h2 + .tickets{margin-top:clamp(20px,2.4vw,28px)}
.prose p strong{color:var(--ivory);font-weight:700}

/* ---------- buttons: clean-cut ticket buttons ----------
   Flat colour, square shoulders, the price on its own ledger — the shape of a
   checkout button, not a pill. Green stays the only action colour. */
.btn{
  display:inline-flex;-webkit-appearance:none;appearance:none;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:14.5px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;
  padding:17px 30px;border-radius:10px;border:0;cursor:pointer;white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,box-shadow .25s,color .25s;
}
.btn-green{
  background:var(--green);color:var(--green-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 26px -12px rgba(199,240,75,.55);
}
.btn-green:hover{
  background:var(--green-hi);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 14px 30px -12px rgba(199,240,75,.62);
}
/* the second way in. still green, so ACTION still reads as green — just quieter. */
.btn-ghost{
  background:rgba(9,19,32,.35);color:var(--green);
  box-shadow:inset 0 0 0 1.5px rgba(199,240,75,.55);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{
  background:rgba(199,240,75,.1);color:var(--green-hi);transform:translateY(-1px);
  box-shadow:inset 0 0 0 1.5px var(--green-hi);
}
/* the button used ON the green band, so it still reads as the loud thing */
.btn-dark{background:var(--green-ink);color:var(--green);box-shadow:0 12px 30px -12px rgba(14,19,5,.6)}
.btn-dark:hover{background:#000;color:var(--green-hi);transform:translateY(-1px)}

/* the price rides its own ledger inside the label, full strength */
.btn em{
  font-style:normal;font-weight:900;letter-spacing:0;
  padding-left:12px;border-left:1px solid color-mix(in srgb,currentColor 32%,transparent);
}

.btn-sm{padding:12px 22px;font-size:12.5px}
.btn-lg{padding:21px 46px;font-size:16.5px}
/* full-width buttons carry long labels: let them wrap instead of forcing the
   grid track wider than the screen */
.btn.wide{width:100%;white-space:normal;text-align:center}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- repeated inline CTA (used on several bands) ---------- */
.inline-cta{
  margin-top:clamp(38px,5vw,58px);
  display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;
}
.inline-cta p{margin:0;color:var(--muted);font-size:15px}

/* ---------- THE GOLD STRIP (Gal 28 Sep; Zman 28 Sep, one strip) ----------
   The guarantee left, a person to reach right, on the gold of the old ticker
   (which it replaces, at the ticker's own 40px, so the hero's fold maths is
   the pre-contact-line one again). Dark ink words and icons; the seal is a
   dark struck coin with a champagne tick. The edges line up with the nav
   under it (logo edge left, BUY NOW edge right). It scrolls away; the nav
   stays. The .ticker rules below stay: the thank-you page still uses them. */
:root{--tl-h:40px}
.topline{position:relative;z-index:61;background:var(--gold);color:#1B1405;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(27,20,5,.18)}
.tl-in{display:flex;align-items:center;justify-content:space-between;gap:10px 28px;height:var(--tl-h);
  padding-left:max(var(--pad), calc(50% - (var(--maxw) / 2) + var(--pad)));padding-right:var(--pad)}
@media (min-width:1441px){.tl-in{padding-left:calc(clamp(80px,7vw,150px) + var(--pad))}}
.tl-guar{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.tl-seal{width:19px;height:19px;flex:none}
.tl-guar-t{font-weight:800;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#1B1405}
.tl-contact{display:inline-flex;align-items:center}
.tl-contact a{display:inline-flex;align-items:center;gap:8px;color:#1B1405;text-decoration:none;white-space:nowrap;
  font-size:13px;font-weight:600;letter-spacing:.01em;line-height:1;transition:color .2s}
.tl-contact a + a{margin-left:18px;padding-left:18px;border-left:1px solid rgba(27,20,5,.3)}
.tl-contact svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;opacity:.8;transition:opacity .2s}
.tl-contact a:hover{color:#000}
.tl-contact a:hover svg{opacity:1}
.tl-contact a:focus-visible{outline:2px solid #1B1405;outline-offset:4px;border-radius:4px}
@media (max-width:640px){
  :root{--tl-h:54px}
  .tl-in{flex-direction:column;justify-content:center;gap:7px;padding-left:14px;padding-right:14px}
  .tl-seal{width:16px;height:16px}
  .tl-guar{gap:7px}
  .tl-guar-t{font-size:10.5px;letter-spacing:.15em}
  .tl-contact a{font-size:12.5px;gap:6px}
  .tl-contact a + a{margin-left:12px;padding-left:12px}
  .tl-contact svg{width:13px;height:13px}
}
@media (max-width:350px){
  .tl-contact a{font-size:11.5px}
  .tl-contact a + a{margin-left:9px;padding-left:9px}
}
@media (prefers-reduced-motion:reduce){.tl-contact a,.tl-contact svg{transition:none}}

/* ---------- ticker + nav ---------- */
.ticker{
  background:var(--gold);color:#1B1405;text-align:center;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;padding:10px 16px;
  position:relative;z-index:60;
}
.ticker-in{display:flex;align-items:center;justify-content:center;gap:10px}
.dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#1B1405;animation:blink 2.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
/* on a narrow screen the line wraps and the dot orphans itself on the left */
@media (max-width:620px){
  .ticker{font-size:11.5px;letter-spacing:.03em;padding:9px 14px}
  .dot,.tk-tail{display:none}
}

.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px var(--pad);
  background:rgba(9,19,32,0);border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s,padding .4s;
}
.nav.stuck{background:rgba(9,19,32,.93);border-bottom-color:rgba(201,165,92,.22);padding:10px var(--pad);backdrop-filter:blur(14px)}
/* Zman, 21 Aug: the mark reads bigger AND its left edge lines up with the T of
   THE MONEY MANUAL. Two parts to that -
   (a) logo-tight.png is the same artwork cropped to its ink, so the height
       below is real ink instead of ~50% transparent margin;
   (b) the nav's left inset is computed to land on .hero-body's content edge:
       centred inside --maxw up to 1440, then the left-hugging offset above it
       (the 7vw here MUST track the .hero-body rule at min-width:1441px).
   .nav-brand's own padding is the optical nudge for the T's side bearing. */
.nav{padding-left:max(var(--pad), calc(50% - (var(--maxw) / 2) + var(--pad)))}
@media (min-width:1441px){.nav{padding-left:calc(clamp(80px,7vw,150px) + var(--pad))}}
.nav-brand{padding-left:.024em;font-size:clamp(38px,7.6vw,96px)}  /* nudge = T side bearing, scaled off the title's own size */
.nav-brand img{height:clamp(19px,1.75vw,23px);width:auto;transition:height .4s}
.nav.stuck .nav-brand img{height:clamp(18px,1.55vw,21px)}
.nav-links{display:flex;gap:28px}
.nav-links a{font-size:13.5px;font-weight:500;color:rgba(244,240,232,.66);letter-spacing:.01em;transition:color .3s}
.nav-links a:hover{color:var(--green)}
@media (max-width:960px){.nav-links{display:none}}
@media (max-width:520px){.nav .btn-sm{padding:11px 16px;font-size:11.5px}}

/* ---------- hero ---------- */
/* --peek is the whole trick: the hero deliberately stops SHORT of the fold by
   that much, so the top of "Grab your ticket" is already on screen when the
   page lands. You read the promise, and the way in is showing underneath it.
   (Zman, 20 Aug: "a bit shorter... just below it, popping out.") */
.hero{
  /* Zman, 20 Aug (evening): taller hero so Meir's whole face is in frame —
     only the green clock bar and the "Three ways in" line peek at the fold */
  --peek:clamp(130px,19svh,190px);
  position:relative;min-height:calc(100svh - 92px - var(--peek));   /* 92px counts the gold strip (was the ticker) + the nav */
  display:flex;align-items:flex-end;
  padding:clamp(92px,10vw,124px) 0 clamp(44px,6.5vw,104px);margin-top:-70px;overflow:hidden;
}
.hero-media{position:absolute;inset:0;z-index:0;background:#091320}
.hero-media picture{display:block;width:100%;height:100%}
/* the 16:9 plate is taller than the hero's aspect, so cover crops vertically;
   biasing toward the top keeps the whole head in frame (his crown sits at ~8%
   of the plate) while the crop comes out of the empty floor instead */
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
/* CAPE TOWN plate (9 Oct 2026): Meir on a terrace, Table Mountain behind.
   The plate is 2.33:1 and wider than the hero, so cover crops the SIDES:
   anchor it LEFT (that pushes him right) so his head clears PROSPERITY. */
.hero-media img{object-position:8% 30%}
@media (max-aspect-ratio:1/1){ .hero-media img{object-position:62% 0%} }   /* phone crop keeps the mountain left of him */
/* the plate is already dark on the left; the scrim only steadies the text zone
   and melts the bottom into the next band */
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(9,19,32,.5) 0%,rgba(9,19,32,.06) 24%,rgba(9,19,32,.3) 68%,var(--ink) 100%),
    linear-gradient(90deg,rgba(9,19,32,.72) 0%,rgba(9,19,32,.34) 46%,rgba(9,19,32,0) 74%);
}
/* portrait viewports get the portrait crop: his face high, the copy over the
   quiet half, and a vertical scrim instead of a side one */
@media (max-aspect-ratio:1/1){
  /* the copy still has to start UNDER his face, but the block above the fold is
     name + story + dates + guarantee now — no buy block — so the plate rides
     higher and needs roughly half the padding v31 did */
  .hero{padding-top:min(24svh,244px)}
  .hero-media{bottom:auto;height:min(47svh,490px)}
  .hero-media img{object-position:50% 9%}
  .hero-scrim{
    background:linear-gradient(180deg,rgba(9,19,32,.44) 0%,rgba(9,19,32,.14) 14%,rgba(9,19,32,.42) 36%,rgba(9,19,32,.84) 58%,rgba(9,19,32,.97) 80%,var(--ink) 100%);
  }
}
/* landscape: his face sits on the RIGHT, so the copy owns the whole height of
   the left side. Pinning it to the floor left a dead slab of empty plate above
   the name (Zman, 20 Aug: "there's dead space at the top"). Centre the block
   and open the gaps, so the four parts fill the hero instead of huddling. */
@media (min-aspect-ratio:1/1){
  /* the copy already fills this hero, so the padding is the only thing left
     between the guarantee and the ticket band — trimming it is what lets the
     first price clear the fold on a 900px-tall laptop */
  .hero{align-items:stretch;padding-top:clamp(38px,3.6vw,52px);padding-bottom:clamp(20px,2.2vw,30px)}
  /* two groups. The name/story/dates block floats in the middle of the space
     above the guarantee (the auto margins split the free space evenly), and
     the guarantee holds the floor. Spreading them to the extremes put the
     name hard against the nav — Zman wanted it dropped into the centre. */
  .hero-body{display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(22px,3.4vh,46px)}
  /* Zman, 21 Aug: the name was sitting almost on top of the logo while a big
     gap opened under the dates. There is NO slack in this hero - the lead and
     the guarantee already fill it - so --drop moves the whole lead block down
     and takes the SAME amount straight out of the gap below it. Net height
     change: zero, so the green clock band still peeks at the fold.
     Both halves must always use --drop, or the hero grows. */
  .hero{--drop:clamp(14px,3.2vh,32px)}
  .hero-lead{margin:auto 0;padding-top:var(--drop)}
  .hero-body .hero-g{margin-top:calc(clamp(34px,3.4vw,46px) - var(--drop))}
  .hero-title{margin-bottom:clamp(16px,1.9vw,24px)}
}
/* short landscape screens (1366×768 laptops): tighten so the buy block stays
   above the fold */
@media (min-aspect-ratio:1/1) and (max-height:820px){
  .hero{padding-top:84px;padding-bottom:28px}
  .hero-title{font-size:clamp(42px,5.3vw,72px);margin-bottom:12px}
  .meta-item{padding:10px 15px 11px}
  /* short laptops already had a generous gap under the logo (this block pads the
     hero 84px from the top), so they only need a nudge - measured 62/40/40 at
     1366x768 and 1280x800. Still an exact swap out of the 20px gap below. */
  .hero{--drop:clamp(0px,.85vh,8px)}
  .hero-body .hero-g{margin-top:calc(20px - var(--drop))}   /* specificity: the base rule below sets this too */
}
.hero-body{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);width:100%}
/* wide screens: the copy hugs the left so the portrait breathes — 7vw matches
   the auto-centred position at 1441px exactly, then falls behind it as the
   viewport grows (this must stay AFTER the margin shorthand above) */
@media (min-width:1441px){
  .hero-body{margin:0 auto 0 clamp(80px,7vw,150px)}
}
/* the NAME leads (Gal, 16 Aug): one heavy line, the story line under it */
/* the break is deliberate, not left to wrapping — "Manual" always sits under
   "The Money" (Zman, 20 Aug) */
/* Zman, 21 Aug: set in FULL CAPS. Caps carry more width and need more air
   between them than the mixed-case cut did, so the tracking opens from -.04
   to -.018 and the ceiling comes down 104 -> 96 to hold the two-line break. */
/* 27 Sep 2026: "THE PROSPERITY" is five letters longer than "THE MONEY" and at
   96px it ran into Meir's hair at 1440 (measured: line ended at 1015px, his head
   starts at ~1000). Ceiling 96 -> 90 and the laptop cut 76 -> 72 clear him;
   the two-line break is unchanged. */
.hero-title{margin:0 0 18px;font-size:clamp(46px,6.6vw,90px);letter-spacing:-.018em;line-height:.96;text-transform:uppercase}
.hero-title span{display:block}
.hero-sub{
  font-size:clamp(16.5px,1.65vw,20.5px);line-height:1.5;font-weight:500;
  color:rgba(244,240,232,.86);max-width:54ch;margin:0;
}
/* THE FOUR JOURNEYS (Gal, 27 Sep 2026): the story line became "How you will go
   from" + four from -> to pairs. The pair is one object: the starting word in
   the story line's ivory, a gold hairline that ends in a chevron, the
   destination in the gold the old payoff line wore (it IS the promise). Two
   columns on anything wider than a phone so the block costs the same two lines
   the old story did - this hero has no slack (see --drop above). A phone flows
   the pairs and lets them wrap; each pair never breaks inside itself. */
.hero-journeys{
  list-style:none;margin:clamp(9px,1vw,13px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,max-content);
  column-gap:clamp(24px,2.8vw,40px);row-gap:clamp(4px,.5vw,7px);
  font-size:clamp(16.5px,1.65vw,20.5px);line-height:1.5;
}
.hero-journeys li{display:flex;align-items:center;gap:clamp(9px,.85vw,12px);white-space:nowrap}
.hj-from{font-weight:500;color:rgba(244,240,232,.86)}
.hj-to{
  position:relative;flex:none;display:block;width:clamp(22px,2.1vw,30px);height:1px;
  background:linear-gradient(90deg,rgba(232,199,122,.28),var(--gold-hi));
}
.hj-to::after{
  content:"";position:absolute;right:0;top:50%;width:6px;height:6px;
  border-top:1px solid var(--gold-hi);border-right:1px solid var(--gold-hi);
  transform:translateY(-50%) rotate(45deg);
}
.hj-dest{font-weight:700;color:var(--gold-hi)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* the three dates, straight under the name — the date-panel style from v21.
   Amsterdam (24 Aug 2026) made this a THREE-item row, and three panels each
   repeating "Live in" did not fit a phone. So "Live in" is said ONCE, by the
   label above the row, and the gold slot inside each panel carries the city. */
.hero-dates-wrap{margin-top:clamp(26px,3.1vw,40px)}
.hero-dates-lead{
  margin:0 0 clamp(8px,.9vw,11px);font-size:clamp(11.5px,1.05vw,13.5px);
  letter-spacing:.22em;text-transform:uppercase;font-weight:800;
  color:rgba(244,240,232,.6);
}
.hero-dates{display:flex;gap:clamp(9px,1.1vw,14px);flex-wrap:wrap;margin-top:0}
/* Zman, 21 Aug: the dates carry more weight - the panel, the label, the
   date and the hours all step up together so it stays one object, not a big
   date in a small box. */
.meta-item{
  display:flex;flex-direction:column;gap:4px;
  padding:13px 18px 14px;border-left:5px solid var(--green);
  background:rgba(9,19,32,.5);backdrop-filter:blur(6px);
}
.meta-item span{font-size:clamp(16px,1.65vw,20px);letter-spacing:.038em;text-transform:uppercase;color:var(--gold-hi);font-weight:800;line-height:1.1}
.meta-item strong{font-size:clamp(15px,1.35vw,17.5px);font-weight:800;letter-spacing:-.02em;color:var(--ivory);line-height:1.24}
.meta-item em{font-style:normal;font-size:clamp(13px,1.25vw,15.5px);color:var(--muted)}
/* the venue, under the hours. Reads from CONFIG.cities.*.venue; an empty string
   (Amsterdam, still owed) collapses the line entirely instead of leaving a gap. */
.meta-item .md-venue{color:var(--ivory);opacity:.82;margin-top:2px}
.meta-item .md-venue:empty{display:none}

/* the phone row for the date panels (the buy block that used to live here moved
   out into its own band — see GRAB YOUR TICKET below) */
/* on a phone the dates sit SIDE BY SIDE on the short form ("Sat 3 Oct"), not
   stacked on the long one — stacked cost ~80px of the fold with two panels and
   would cost ~120px with three, which is most of the room the ticket band needs
   to show itself. With three across, the hours line is dropped: it said the same
   thing three times, it is in the row's own label instead, and it buys back the
   width the third city costs. */
/* the pinch band. Just above the phone rule the panels go back to the LONG date
   ("Saturday 10 October") while the hero column is still at its narrowest, and
   measured at 621 the three panels came to 556px inside a 559px column - three
   pixels of slack. The padding and the gap come in until the column has grown
   past it. Measured 24 Aug 2026 at 621 / 660 / 700. */
@media (min-width:621px) and (max-width:760px){
  .hero-dates{gap:8px}
  .meta-item{padding:13px 13px 14px}
}
.md-short{display:none}
@media (max-width:620px){
  .hero-sub{font-size:13.5px;line-height:1.5}
  .hero-journeys{display:flex;flex-wrap:wrap;column-gap:16px;row-gap:3px;margin-top:6px;font-size:13.5px}
  .hero-journeys li{gap:7px}
  .hj-to{width:18px}
  .hj-to::after{width:5px;height:5px}
  .hero-dates-wrap{margin-top:26px}
  .hero-dates-lead{margin-bottom:7px;font-size:11px;letter-spacing:.18em}
  .hero-dates{flex-direction:row;gap:6px}
  .meta-item{flex:1 1 0;min-width:0;padding:10px 9px 11px;border-left-width:4px;gap:3px}
  /* three across, so the label has to track the viewport rather than sit at a
     fixed size: "AMSTERDAM" is the widest word on the row and at a flat 11.5px
     it spilled its panel below ~358px. Measured with a Range at 320/360/390. */
  .meta-item span{font-size:clamp(9px,2.9vw,11.5px);letter-spacing:.01em;line-height:1.15}
  .meta-item strong{font-size:clamp(11.5px,3.5vw,13.5px);letter-spacing:-.03em}
  .meta-item em{display:none}
  .md-long{display:none}
  .md-short{display:block}
}

/* ---------- GRAB YOUR TICKET -----------------------------------------------
   The band that lands half on screen. Paper against the dark hero, so it
   announces itself without spending a word, with a gold rule at the seam.
   It uses the SAME big card as "Take your seat" below — the ticket is the
   thing that has to be readable: price, saving, and everything you get, with
   nothing to open. Only the breathing room is tightened, so the cards start
   peeking above the fold instead of sitting a whole scroll away.
   No city picker here — the city is asked once, inside the popup. */
.grab{
  padding:clamp(30px,3.6vw,46px) 0 clamp(34px,4vw,52px);
  border-top:3px solid var(--gold-deep);
}
/* the clock counts to the day itself; it is not a price deadline.
   It lives in its own GREEN bar running edge to edge across the top of the
   band, centred and BIG; the white resumes beneath it (Zman, 20 Aug) */
.grab-cd{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:4px;min-width:0;margin-top:clamp(24px,2.9vw,38px);
}
.grab-cd span{font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:800}
.grab-cd b{font-size:clamp(34px,4.6vw,58px);font-weight:900;letter-spacing:-.015em;color:var(--ivory);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.06}
.grab-cd em{font-style:normal;font-size:13px;color:var(--muted)}
.grab-head{
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.grab-lead .eyebrow{margin:0 0 9px}
.grab-title{font-size:clamp(30px,4.2vw,54px);font-weight:900;letter-spacing:-.035em;line-height:.98;margin:0}
.grab .tickets{margin-top:clamp(28px,3.1vw,44px)}
.grab .ticket{padding:clamp(18px,2.1vw,26px)}
.grab .ticket ul{margin-bottom:clamp(20px,2.4vw,26px)}
.grab .t-price{font-size:clamp(40px,4vw,56px)}
.grab-foot{margin:clamp(18px,2.2vw,26px) auto 0;max-width:98ch;text-align:center;text-wrap:balance;font-size:clamp(15.5px,1.65vw,19.5px);line-height:1.45;color:var(--muted);font-weight:500}
.grab-foot b{color:var(--ivory);font-weight:800}
@media (max-width:620px){
  /* every pixel spent here is a pixel of card that does not reach the fold */
  .grab{padding-top:26px}
  .grab-lead .eyebrow{margin-bottom:6px;font-size:10px}
  .grab-cd{margin-top:24px}
  .grab-cd b{font-size:32px}
  .grab-cd em{font-size:12px}
  .grab .tickets{margin-top:24px}
  .grab .ticket{padding:20px}
}

/* ---------- THE 110% GUARANTEE, right under the buy block ----------
   Gal: "the guarantee majorly sells people, much more than you think." His
   wording, in big letters. Naked seal + words, no box (Zman's standing rule).
   The full detail still gets its own green #guarantee band below. */
/* the seal is sized OFF the sentence beside it — a 60px ring next to a 29px
   two-line statement read as a stray icon, not as part of the line (Zman,
   20 Aug: "the text is so much bigger than the 110% little icon") */
/* The guarantee reads as a side note now, not a second headline: a short gold
   rule, then Gal's two sentences run together on one quiet line. The seal is
   gone — at any size it sat beside the words like a sticker rather than
   belonging to them (Zman, 20 Aug: "it just looks out of place"). */
.hero-g{
  display:flex;align-items:center;gap:clamp(16px,1.9vw,26px);
  margin-top:clamp(34px,3.4vw,46px);max-width:82ch;
}
.hg-text{min-width:0}
.hg-rule{display:block;width:44px;height:2px;background:var(--gold);margin-bottom:13px}
.hg-line{margin:0;font-size:clamp(13px,1.15vw,15px);line-height:1.55;color:var(--muted);font-weight:500}
.hg-line b{color:var(--ivory);font-weight:800}

/* ---- the struck 110% medallion -------------------------------------------
   Sized off the sentence beside it so it reads as part of the line. The face
   is a soft radial so it never becomes a bright disc on the plate; the edge is
   milled by ONE dashed stroke (72 teeth) rather than 72 elements; the legend
   ring turns once a minute and stops dead under reduced motion. */
.hg-seal{flex:0 0 auto;width:clamp(78px,8.2vw,112px)}
.hg-seal svg{display:block;width:100%;height:auto;overflow:visible}
/* no letter-spacing here: textLength does the tracking, and the two together
   fight each other */
.hg-legend{font-family:var(--sans);font-size:12px;font-weight:700;fill:var(--gold);opacity:.68}
/* 28 Sep: one size everywhere and an alphabetic baseline, so the x/y in the
   markup place the INK: "110" + a top-aligned % fit the r=60 ring with room */
.hg-num{
  font-family:var(--sans);font-size:43px;font-weight:900;letter-spacing:-.045em;
  fill:var(--gold-hi);text-anchor:middle;dominant-baseline:alphabetic;
}
.hg-pct{font-size:.42em;letter-spacing:0}
.hg-back{
  font-family:var(--sans);font-size:9.5px;font-weight:800;letter-spacing:.24em;
  fill:var(--gold);opacity:.78;text-anchor:middle;
}
.hg-arc{transform-box:view-box;transform-origin:100px 100px}
@media (prefers-reduced-motion:no-preference){
  .hg-arc{animation:hgSpin 58s linear infinite}
}
@keyframes hgSpin{to{transform:rotate(360deg)}}
@media (max-width:620px){
  .hero-g{margin-top:30px;gap:14px}
  .hg-seal{width:66px}
  .hg-rule{width:32px;margin-bottom:10px}
  .hg-line{font-size:13px}
}

/* ---------- DESKTOP HERO BREATHING PASS (Zman, 27 Sep 2026) ----------
   His read of the first Prosperity Manual cut: the two title lines sat so
   tight they read as one word; the date tabs and the guarantee were as loud
   as the name; the gold destinations could be more vibrant. The order the eye
   should take is name, journeys, cities, guarantee. So: air between the two
   title lines, the journeys step up a size with a brighter gold, the tabs and
   the seal step DOWN, and the gaps between the groups open. Desktop only -
   the phone cut was approved as it was. */
@media (min-width:621px){
  .hero-title{line-height:1.06;margin-bottom:clamp(22px,2.4vw,34px)}
  .hero-sub{font-size:clamp(15px,1.4vw,18px);letter-spacing:.01em;color:rgba(244,240,232,.74)}
  .hero-journeys{margin-top:clamp(10px,1.1vw,14px);font-size:clamp(18px,1.9vw,23.5px);row-gap:clamp(6px,.75vw,10px);column-gap:clamp(30px,3.4vw,52px)}
  .hero-journeys li{gap:clamp(10px,1vw,14px)}
  .hj-to{width:clamp(26px,2.4vw,34px)}
  .hj-dest{color:#F7DC8C;text-shadow:0 0 22px rgba(247,220,140,.32)}
  .hero-dates-wrap{margin-top:clamp(34px,3.8vw,54px)}
  .meta-item{padding:10px 15px 11px;border-left-width:4px;gap:3px}
  .meta-item span{font-size:clamp(13.5px,1.25vw,15.5px)}
  .meta-item strong{font-size:clamp(13.5px,1.15vw,15px)}
  .meta-item em{font-size:clamp(12px,1.05vw,13.5px)}
  .hero-body .hero-g{margin-top:calc(clamp(40px,4.2vw,58px) - var(--drop))}
  .hg-seal{width:clamp(66px,6.4vw,88px)}
  .hg-line{font-size:clamp(12.5px,1.05vw,14px)}
  .hg-rule{width:36px;margin-bottom:10px}
}
/* short laptops (1366x768) keep their tighter budget so the buy band still
   peeks at the fold; the title still gets its air */
@media (min-aspect-ratio:1/1) and (max-height:820px){
  .hero-title{margin-bottom:14px}
  .hero-dates-wrap{margin-top:30px}
  .hero-body .hero-g{margin-top:calc(24px - var(--drop))}
}

/* ---------- HERO ROUND 2: ONE READING ORDER, PREMIUM RHYTHM (Zman, 27 Sep 2026, night) ----------
   The order the eye takes: THE NAME, then "HOW YOU WILL GO FROM" (the one line
   that steps UP: caps, bigger, ivory), then Gal's four sentences a size DOWN
   with the destination in the bright gold he liked, then the three dates on
   the right over Meir's chest (their bottom on the same line as the sentences),
   then the guarantee holding the floor. Gaps BETWEEN groups are wider than the
   gaps inside them. His words: "premium and proper, fit on the page, have a
   rhythm, professionally spaced." The arrows are gone everywhere; a phone gets
   the same four short lines under the sentence. */
.hero-journeys{display:block}
.hero-journeys li{display:block;white-space:nowrap}
.hero-journeys .hj-w{font-weight:400;color:rgba(244,240,232,.58)}
.hero-journeys .hj-from{font-weight:500;color:rgba(244,240,232,.92)}
.md-when,.hg-kicker{display:none}
@media (max-width:620px){
  .hero-sub{text-transform:uppercase;letter-spacing:.08em;font-weight:800;font-size:14.5px;color:var(--ivory)}
  .hero-journeys{margin-top:6px;font-size:16px;line-height:1.5}
}
@media (min-width:621px){
  .hero-title{margin-bottom:clamp(16px,1.7vw,24px)}
  /* item 2 steps up: a third of the title, caps, tracked, ivory */
  .hero-sub{
    font-size:clamp(21px,2.1vw,30px);font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ivory);line-height:1.15;
  }
  /* the four sentences step down */
  .hero-journeys{margin-top:clamp(9px,.9vw,13px);font-size:clamp(17px,1.55vw,22px);line-height:1.42}
  .hero-journeys li + li{margin-top:2px}

  /* THE DATE CARDS: a glass card with a champagne hairline frame and a lit
     top edge, the city as a tracked gold label, the day as a big numeral with
     the weekday and month stacked beside it, then hours and venue. The lime
     left bar is gone (lime is the action colour, buttons only). "Live in"
     becomes a label with a hairline running out of it. */
  .hero-dates-lead{
    display:flex;align-items:center;gap:14px;margin-bottom:clamp(9px,.9vw,12px);
    font-size:clamp(11px,.95vw,12.5px);letter-spacing:.24em;color:var(--gold);
  }
  .hero-dates-lead::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(232,199,122,.5),rgba(232,199,122,0))}
  .hero-dates{gap:clamp(10px,1vw,14px)}
  .meta-item{
    position:relative;gap:0;
    padding:clamp(12px,1.1vw,15px) clamp(13px,1.2vw,16px) clamp(12px,1.1vw,14px);
    border:1px solid rgba(232,199,122,.2);border-radius:6px;
    background:linear-gradient(160deg,rgba(30,25,16,.66),rgba(9,19,32,.6));backdrop-filter:blur(10px);
    box-shadow:0 18px 40px -22px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);
  }
  .meta-item::before{
    content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;border-radius:6px 6px 0 0;
    background:linear-gradient(90deg,var(--gold-hi),rgba(232,199,122,.12));
  }
  .meta-item span{font-size:clamp(11.5px,1vw,13px);letter-spacing:.2em;color:var(--gold);font-weight:800}
  .md-when{display:flex;align-items:baseline;gap:9px;margin-top:8px;color:var(--ivory)}
  .md-when b{font-size:clamp(30px,2.7vw,38px);font-weight:900;line-height:.9;letter-spacing:-.04em}
  .md-wm{display:flex;flex-direction:column;line-height:1.15}
  .md-when i{font-style:normal;font-size:clamp(12px,1.05vw,14px);font-weight:700;color:var(--ivory)}
  .md-when i + i{font-weight:500;color:rgba(244,240,232,.72)}
  .md-long{display:none}
  .meta-item em{margin-top:9px;font-size:clamp(12px,.98vw,13px)}
  .meta-item .md-venue{margin-top:2px}

  /* THE GUARANTEE, bigger and premium: the struck seal on a warm glow, a
     hairline between it and the words, a tracked kicker (the nav's own words),
     Gal's line as an ivory-to-gold headline, the promise under it at reading
     size. Still no box (standing rule). */
  .hero-g{gap:clamp(22px,2.4vw,34px);max-width:none;align-items:center}
  .hg-seal{position:relative;width:clamp(108px,9.6vw,142px)}
  .hg-seal::before{
    content:"";position:absolute;inset:-24%;z-index:-1;border-radius:50%;
    background:radial-gradient(closest-side,rgba(232,199,122,.28),rgba(232,199,122,.09) 55%,rgba(232,199,122,0) 100%);
  }
  .hg-text{max-width:44em;padding-left:clamp(22px,2.4vw,34px);border-left:1px solid rgba(232,199,122,.26)}
  .hg-rule{display:none}
  .hg-kicker{
    display:block;margin-bottom:clamp(8px,.8vw,11px);
    font-size:clamp(11px,.95vw,12.5px);letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:var(--gold);
  }
  .hg-line{font-size:clamp(14px,1.15vw,16.5px);line-height:1.5;color:rgba(244,240,232,.74);text-wrap:balance}
  .hg-line b{
    display:block;margin-bottom:6px;
    font-size:clamp(21px,2vw,29px);line-height:1.12;letter-spacing:-.015em;font-weight:800;
    background:linear-gradient(100deg,#F4F0E8 0%,#FBF0CE 40%,#E8C77A 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}

/* THE DESKTOP GRID (landscape, 1024 and up). The lead is a grid: the title
   across both columns, the promise in the left column, the dates in the right
   column, both bottom-aligned so the sentences and the cards end on ONE line
   and the guarantee has the same air above it all the way across. The dates
   overhang the lead's right edge so the row is centred on Meir's chest (about
   79% across the plate, which is cover-cropped from the centre so that holds
   at every width) and never closer to the edge than the page padding. --edge
   is the lead's own right edge: the centred body up to 1440, the left-hugging
   body above it (the two .hero-body rules further up). */
@media (min-aspect-ratio:1/1) and (min-width:1024px){
  .hero{--dw:clamp(540px,43vw,660px)}
  .hero-lead{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:clamp(28px,3vw,52px)}
  .hero-title{grid-column:1 / -1}
  .hero-promise{grid-column:1;grid-row:2;align-self:end}
  .hero-dates-wrap{
    grid-column:2;grid-row:2;align-self:end;justify-self:end;
    margin:0;width:var(--dw);
    --edge:calc(min(100vw,1240px) / 2 + 50vw - var(--pad));
    margin-right:calc(var(--edge) - 100vw + max(var(--pad),21vw - var(--dw) / 2));
  }
  .hero-dates{flex-wrap:nowrap}
  .hero-dates .meta-item{flex:1 1 0;min-width:0}
}
@media (min-aspect-ratio:1/1) and (min-width:1441px){
  .hero-dates-wrap{--edge:calc(clamp(80px,7vw,150px) + 1240px - var(--pad))}
}
/* short laptops: the dates left the column, so the name gets back the air
   under it that the tight budget took away */
@media (min-aspect-ratio:1/1) and (min-width:1024px) and (max-height:820px){
  .hero-title{margin-bottom:18px}
  .hero-body .hero-g{margin-top:calc(22px - var(--drop))}
  .hg-seal{width:clamp(100px,8.6vw,120px)}
  .hg-line b{font-size:clamp(20px,1.85vw,25px)}
}

/* ---------- THE NAME POPS (Zman, 27 Sep 2026, night) ----------
   "It's so plain, give it a colour." PROSPERITY is the word, so it wears the
   brand champagne: a gradient clipped to the letters with a slow sheen that
   crosses the word every eight seconds (still under reduced motion), and a
   soft gold halo painted by a blurred copy of the word BEHIND it. THE and
   MANUAL stay ivory so the gold word is the one thing that glows. No
   text-shadow and no filter on the clipped element: a shadow shows through
   transparent letters and a filter makes Safari drop the clip. */
.ht-pop{
  position:relative;font-style:normal;
  /* two layers, both clipped to the letters: a narrow light band that sweeps
     across (top), over a bright, balanced champagne (bottom). The resting
     state is the bright gold; the glint passes every nine seconds. */
  background:
    linear-gradient(110deg,rgba(255,255,255,0) 38%,rgba(255,250,235,.9) 50%,rgba(255,255,255,0) 62%) 200% 0 / 250% 100% no-repeat,
    linear-gradient(100deg,#C9A55C 0%,#EED9A0 42%,#F7E3AC 55%,#DDB96A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:htSheen 9s ease-in-out infinite;
}
.ht-pop::before{
  content:attr(data-t);position:absolute;inset:0;z-index:-1;
  color:rgba(232,199,122,.48);filter:blur(24px);
  -webkit-text-fill-color:rgba(232,199,122,.48);
}
@keyframes htSheen{0%,55%{background-position:200% 0,0 0}100%{background-position:-100% 0,0 0}}
@media (prefers-reduced-motion:reduce){.ht-pop{animation:none}}
@media (max-width:620px){.ht-pop::before{filter:blur(16px)}}

/* ---------- THE SWAP (Zman, 27 Sep 2026, night, on the live page) ----------
   His notes, in order: the Leicester / London / Amsterdam block, exactly as it
   is, moves under the text on the left; the 110% guarantee goes to the right,
   shorter, the 110% louder. Then: not on his face. Then: centred, with air.
   Then: "one big sentence doesn't work, add a little of the other text back,
   the stamp back on the left with the text next to it, IN LINE with the
   cards, with space between the cards and the stamp."
   So, on a landscape desktop: the lead grid is title across / promise left /
   dates left (row 3) / the guarantee in the right column of THAT SAME ROW as
   a side-by-side lockup (seal, hairline, headline + one short line), centred
   on the height of the cards and pushed to the page's right padding so there
   is a clear gap after the cards. The kicker only exists on the phone; the
   phone keeps Gal's full sentence, the desktop has the short cut. */
.hg-short{display:none}
@media (min-aspect-ratio:1/1) and (min-width:1024px){
  .hero{--gw:clamp(440px,36vw,500px)}
  .hero-lead{grid-template-rows:auto auto auto}
  .hero-promise{grid-column:1;grid-row:2;align-self:start}
  .hero-dates-wrap{
    grid-column:1;grid-row:3;align-self:start;justify-self:stretch;
    width:auto;max-width:640px;margin:clamp(22px,2.4vw,34px) 0 0;
  }
  /* --edge is the lead's own right edge (the centred body up to 1440, the
     left-hugging body above it), so margin-right lands the lockup exactly on
     the page's right padding. The top margin skips the LIVE IN label so the
     lockup centres on the CARDS, not on label + cards. */
  .hero-lead .hero-g{
    position:relative;grid-column:2;grid-row:3;align-self:stretch;justify-self:end;
    flex-direction:row;align-items:center;text-align:left;
    width:var(--gw);gap:clamp(16px,1.6vw,22px);
    margin:calc(clamp(22px,2.4vw,34px) + clamp(27px,2.2vw,32px)) 0 0;
    --edge:calc(min(100vw,1240px) / 2 + 50vw - var(--pad));
    margin-right:calc(var(--edge) - 100vw + var(--pad));
  }
  /* the words sit on Meir's sweater, the brightest part of the plate: a soft
     dark pool (no edges, no box) behind the lockup, like the scrim behind
     the title */
  .hero-lead .hero-g::before{
    content:"";position:absolute;inset:-22% -10%;z-index:-1;border-radius:50%;
    background:radial-gradient(ellipse at 50% 50%,rgba(9,19,32,.7),rgba(9,19,32,.46) 42%,rgba(9,19,32,.16) 68%,rgba(9,19,32,0) 100%);
    filter:blur(10px);
  }
  .hg-seal{width:clamp(118px,9.2vw,132px)}
  .hg-seal::before{
    inset:-22%;
    background:radial-gradient(closest-side,rgba(232,199,122,.24),rgba(232,199,122,.08) 55%,rgba(232,199,122,0) 100%);
  }
  .hg-text{max-width:22em;padding-left:clamp(16px,1.6vw,22px);border-left:1px solid rgba(232,199,122,.26)}
  .hg-kicker{display:none}
  .hg-line{margin:0;font-size:clamp(13px,1vw,14px);line-height:1.45;color:rgba(244,240,232,.74)}
  .hg-line b{font-size:clamp(18px,1.6vw,22px);line-height:1.12;margin-bottom:6px;letter-spacing:-.01em}
  .hg-long{display:none}
  .hg-short{display:inline}
}
@media (min-aspect-ratio:1/1) and (min-width:1441px){
  .hero-lead .hero-g{--edge:calc(clamp(80px,7vw,150px) + 1240px - var(--pad))}
}
/* short laptops keep the fold: the left column is title + promise + dates now */
@media (min-aspect-ratio:1/1) and (min-width:1024px) and (max-height:820px){
  .hero-dates-wrap{margin-top:20px}
  .hero-lead .hero-g{margin-top:calc(20px + clamp(27px,2.2vw,32px))}
  .hg-seal{width:clamp(108px,8.6vw,122px)}
}

/* ---------- THE CARDS OPEN, THE SEAL MATCHES THEM (Zman, 28 Sep 2026) ----------
   His words: tap a block and it expands a little with the full address and the
   other information (address, the room where there is one, a map link); tap
   it again and it closes; tap the next and that one opens. Smooth, premium.
   And: the 110% seal the same size as the blocks, the guarantee words bigger,
   still in line with the blocks.
   mm.js fills the panel from CONFIG.cities and sets --mdh (the tallest CLOSED
   card) and --mdt (row top to the cards' top line), then .md-on. The panel
   opens on a 0fr -> 1fr grid row, so it animates to its real height with no
   magic numbers; the words slide in inside the clip, a beat behind the height.
   Then (same day): "people won't see the plus, make it explicit, at the bottom
   of the card, so it stands out". The + is gone; every card ends in a gold
   "Click to see details" strip with a pointer (an instruction: "people skip
   past 'see details below'"). Pressed, the strip stays where it is, turns into
   "Hide details", and the details open UNDER it (so "below" is literally true,
   and the map link comes after the button for keyboards too). A light sheen
   crosses the strips (staggered) and the card edges breathe until the first
   tap, then both stop.
   Then: "the updates should be on mobile too". A phone tile is ~110px wide,
   too narrow for an address, so on a phone the strip sits under each tile on
   two short lines and the details open as ONE full-width panel under the row
   (the open tile's own panel, absolutely placed; mm.js reserves its height as
   --ph so everything below slides down in step). The panel there also carries
   the venue and hours, which the phone tiles never showed. */

/* shared: every width */
.hero{--md-ease:cubic-bezier(.22,1,.36,1)}
.md-ph-head,.md-ph-venue,.md-ph-hours{display:none}      /* phone-only panel lines */
.hero-dates .meta-item[data-md]{cursor:pointer;-webkit-tap-highlight-color:transparent}
.md-cta{
  display:flex;align-items:center;justify-content:center;gap:7px;position:relative;overflow:hidden;
  padding:9px 10px;border:0;cursor:pointer;
  font:inherit;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.1;white-space:nowrap;color:#16120a;
  background:linear-gradient(96deg,#F6E7B8 0%,#E8C77A 38%,#C9A55C 72%,#E0BC73 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
  transition:background .5s ease,color .5s ease,box-shadow .5s ease;
}
.md-cta b{font-weight:inherit}
.md-cta svg{width:12px;height:12px;flex:0 0 auto;transition:transform .5s var(--md-ease)}
.md-i-tap{fill:currentColor;stroke:currentColor;stroke-width:.6;stroke-linejoin:round}
.md-i-up{display:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.md-cta-hide{display:none}
.is-open .md-cta{background:rgba(232,199,122,.1);color:var(--gold-hi);border-radius:0;
  box-shadow:inset 0 1px 0 rgba(232,199,122,.32),inset 0 -1px 0 rgba(232,199,122,.18)}
.is-open .md-cta-see{display:none}
.is-open .md-cta-hide{display:inline}
.is-open .md-i-tap{display:none}
.is-open .md-i-up{display:block}
.md-cta:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
/* the sheen: a light band crossing the strip */
.md-cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,252,240,.7) 50%,rgba(255,255,255,0) 65%);
}
/* the panel */
.md-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--md-ease)}
.md-more-in{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear .7s}
.md-pad{opacity:0;transform:translateY(-10px);transition:opacity .28s ease,transform .5s var(--md-ease)}
.is-open .md-more{grid-template-rows:1fr}
.is-open .md-more-in{visibility:visible;transition:visibility 0s}
.is-open .md-pad{opacity:1;transform:none;transition:opacity .6s ease .16s,transform .8s var(--md-ease) .1s}
.md-addr,.md-room{margin:0;font-size:clamp(12px,.98vw,13px);line-height:1.5;text-wrap:balance}   /* never "rooms 1 & / 2" */
.md-addr{color:var(--ivory);font-weight:600}
.md-room{margin-top:5px;color:var(--gold-hi);font-weight:600}
.md-room:empty{display:none}
.md-map{
  display:inline-flex;align-items:center;gap:6px;margin-top:11px;padding:6px 12px 6px 9px;
  border:1px solid rgba(232,199,122,.42);border-radius:999px;
  font-size:clamp(10.5px,.84vw,11.5px);font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;
  color:var(--gold-hi);text-decoration:none;
  transition:background .35s ease,border-color .35s ease,color .35s ease;
}
.md-map svg{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9}
.md-map i{font-style:normal;font-weight:700;transition:transform .4s var(--md-ease)}
.md-map:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:#16120a}
.md-map:hover i{transform:translate(2px,-2px)}
.md-map:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}

/* tablet + desktop: each card opens in place */
@media (min-width:621px){
  .hero-dates{align-items:flex-start;max-width:640px}
  /* three equal cards (the desktop grid already had this; a tablet's cards were
     content-sized, and the strip's one-line label would have pushed them onto
     two rows at 621-640) and each one a size container, so the label below can
     size itself to the card */
  .hero-dates .meta-item{flex:1 1 0;min-width:0;container-type:inline-size}
  .hero-lead.md-on .hero-dates .meta-item{min-height:var(--mdh)}
  .hero-lead.md-measure .hero-dates .meta-item{min-height:0}
  .hero-dates .meta-item[data-md]{
    /* the same padding the round-2 card has, named, so the strip can bleed to the border */
    --mx:clamp(13px,1.2vw,16px);--mb:clamp(12px,1.1vw,14px);
    padding:clamp(12px,1.1vw,15px) var(--mx) 0;   /* the foot is the strip (closed) or the panel's own padding (open) */
    transition:transform .6s var(--md-ease),border-color .5s ease,background .6s ease,box-shadow .6s ease;
  }
  .hero-dates .meta-item[data-md]:not(.is-open):hover{transform:translateY(-2px);border-color:rgba(232,199,122,.42)}
  .hero-dates .meta-item.is-open{
    transform:translateY(-3px);border-color:rgba(232,199,122,.58);
    background:linear-gradient(160deg,rgba(46,37,21,.82),rgba(10,9,12,.76));
    box-shadow:0 30px 60px -28px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.07);
  }
  /* the edge glow: its own layer, so the breath is an opacity change only */
  .hero-dates .meta-item[data-md]::after{
    content:"";position:absolute;inset:-1px;border-radius:6px;pointer-events:none;opacity:0;
    box-shadow:0 0 0 1px rgba(232,199,122,.5),0 0 26px -6px rgba(232,199,122,.42);
    transition:opacity .6s ease;
  }
  .hero-dates .meta-item.is-open::after{opacity:1}

  /* the strip along the card's foot, bled to the side borders (negative
     margins = the card's own padding). margin-top:auto sits every strip on the
     same line whatever the venue's length. */
  .meta-item[data-md] .md-venue{margin-bottom:clamp(11px,1vw,13px)}
  .md-cta{
    margin:auto calc(var(--mx) * -1) 0;border-radius:0 0 5px 5px;
    /* "CLICK TO SEE DETAILS" is 11.75em of Archivo 800 + 20 x .08em tracking =
       13.35em, plus 19px of icon and gap, inside the strip (the card's content
       width 100cqi, plus both side paddings it bleeds over, minus its own
       20px). So the size is whatever holds ONE line, capped at 11.5px. */
    font-size:clamp(9px,calc((100cqi + 2 * var(--mx) - 41px) / 13.6),11.5px);
  }
  .meta-item[data-md]:not(.is-open):hover .md-cta{background:linear-gradient(96deg,#FBF0CE 0%,#F0D48E 38%,#D8B46A 72%,#EDCB84 100%)}
  .meta-item[data-md]:not(.is-open):hover .md-i-tap{transform:translate(1px,1px) scale(.92)}
  .md-more-in{margin:0 -5px;padding:0 5px}   /* room for the map link's focus ring inside the clip */
  .md-pad{padding:clamp(12px,1.1vw,14px) 0 var(--mb)}

  /* a narrow card (a 1024-1150 laptop): the strip's words track tighter so
     they stay on one line, and the map link drops its pill for the same reason */
  @container (max-width:150px){
    .md-cta{gap:4px;padding:8px 4px;letter-spacing:.03em;font-size:clamp(8.5px,calc((100cqi + 2 * var(--mx) - 21px) / 12.6),10px)}
    .md-cta svg{width:9px;height:9px}
    .md-addr,.md-room{font-size:11.5px}
    .md-map{padding:2px 0;border:0;border-radius:0;text-transform:none;letter-spacing:.01em;font-size:12px;white-space:nowrap}
    .md-map:hover{background:none;color:var(--ivory)}
  }
}

/* phone: the strip under each tile, ONE full-width panel under the row */
@media (max-width:620px){
  /* padding, not margin: a margin here collapsed into the guarantee's own 30px
     top margin and the guarantee sat flush on the panel */
  .hero-dates{position:relative;padding-bottom:var(--ph,0px);transition:padding-bottom .7s var(--md-ease)}
  .hero-dates .md-short{margin-bottom:9px}
  .md-cta{
    margin:auto -9px -11px;padding:6px 5px 7px;gap:5px;
    font-size:9.5px;letter-spacing:.05em;line-height:1.2;white-space:normal;text-align:center;text-wrap:balance;
  }
  .md-cta svg{width:10px;height:10px}
  .hero-dates .meta-item.is-open{
    background:linear-gradient(160deg,rgba(46,37,21,.86),rgba(10,9,12,.8));
    box-shadow:inset 0 0 0 1px rgba(232,199,122,.55);
  }
  /* left + width come from mm.js (the tile's blur makes the tile its frame) */
  .md-more{position:absolute;left:0;right:auto;width:100%;top:calc(100% + 8px);z-index:3}
  .md-pad{
    padding:14px 16px 16px;border:1px solid rgba(232,199,122,.38);border-radius:6px;
    background:linear-gradient(160deg,rgba(30,25,16,.94),rgba(9,19,32,.92));
    box-shadow:0 18px 40px -22px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);
  }
  .md-ph-head{display:block;margin:0 0 7px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
  .md-ph-venue{display:block;margin:0;font-size:16px;font-weight:800;line-height:1.3;letter-spacing:-.01em;color:var(--ivory)}
  .md-ph-hours{display:block;margin:3px 0 9px;font-size:13px;color:rgba(244,240,232,.7)}
  .md-addr,.md-room{font-size:14px}
  .md-map{margin-top:13px;font-size:11px}
}
@media (max-width:374px){.md-cta svg{display:none}}

@media (prefers-reduced-motion:no-preference){
  .hero-dates:not(.md-seen) .md-cta::after{animation:mdSheen 4.2s ease-in-out infinite}
  .hero-dates:not(.md-seen) .meta-item:nth-child(2) .md-cta::after{animation-delay:.6s}
  .hero-dates:not(.md-seen) .meta-item:nth-child(3) .md-cta::after{animation-delay:1.2s}
}
@media (min-width:621px) and (prefers-reduced-motion:no-preference){
  .hero-dates:not(.md-seen) .meta-item[data-md]::after{animation:mdBreath 4.2s ease-in-out infinite}
  .hero-dates:not(.md-seen) .meta-item:nth-child(2)::after{animation-delay:.6s}
  .hero-dates:not(.md-seen) .meta-item:nth-child(3)::after{animation-delay:1.2s}
}
@keyframes mdSheen{0%,58%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes mdBreath{0%,100%{opacity:0}35%{opacity:.5}}
@media (prefers-reduced-motion:reduce){
  .md-more,.md-more-in,.md-pad,.md-cta,.md-cta svg,.hero-dates,.hero-dates .meta-item[data-md]{transition:none !important}
}

/* the guarantee beside the cards (landscape desktop): the seal's gold ring is
   exactly as tall as a closed card (the ring is 94.7% of the SVG box, hence
   the divide), its top on the cards' top line; the lockup keeps that height
   while a card is open, so nothing beside the cards moves. Words a size up. */
@media (min-aspect-ratio:1/1) and (min-width:1024px){
  /* the strip made the cards (so the seal) ~30px taller: the words get that
     width back from a tighter seal-to-words gap and a slightly wider lockup,
     still ~35px clear of the cards */
  .hero{--gw:clamp(460px,38.2vw,550px)}
  .hero-lead.md-on .hero-g{align-self:start;height:var(--mdh);margin-top:var(--mdt);gap:clamp(12px,1.1vw,16px)}
  .hero-lead.md-on .hg-seal{width:calc(var(--mdh) / .947)}
  /* the words take what the seal leaves and size off THAT width (cqi), so the
     headline always breaks as "No one offers our 110% / money-back guarantee."
     (the longer line is 11.6em of Archivo 800) and never as "money- / back" */
  .hg-text{flex:1 1 0;min-width:0;max-width:none;container-type:inline-size;padding-left:clamp(12px,1.1vw,16px)}
  .hg-line{font-size:clamp(13px,5cqi,15.5px)}
  .hg-line b{font-size:clamp(18px,8.3cqi,26px)}
}

/* ---------- mono tag + big statements (the Tony rhythm) ---------- */
.mono-tag{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin:0 0 26px;
}
.mono-tag i{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block}
.band-green .mono-tag i{background:var(--green-ink)}
.statement{
  text-align:center;font-size:clamp(32px,5.6vw,66px);font-weight:800;
  letter-spacing:-.035em;line-height:1;margin:0 auto;max-width:18ch;
}

/* ---------- THE ROOM: the film and the photographs, one block ---------- */
.roomfilm .wrap{text-align:center}
.film-wrap{max-width:1080px;margin:clamp(36px,4.6vw,56px) auto 0;padding:0 var(--pad)}
.film-media{position:relative;overflow:hidden;border-radius:14px;background:url(film-poster.jpg) center/cover no-repeat}
.film-media video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
/* the play button lives INSIDE the film — press anywhere on the panel */
.film-hit{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px,1.8vw,22px);
  background:radial-gradient(62% 62% at 50% 48%,rgba(9,19,32,.36),rgba(9,19,32,.05) 72%);
  border:0;padding:0;cursor:pointer;font-family:inherit;color:var(--ivory);
  transition:background .45s;
}
.film-hit:hover,.film-hit:focus-visible{
  background:radial-gradient(72% 72% at 50% 48%,rgba(9,19,32,.52),rgba(9,19,32,.14) 76%);
}
.film-play{
  width:clamp(64px,7vw,92px);height:clamp(64px,7vw,92px);border-radius:50%;
  background:linear-gradient(180deg,var(--green-hi) 0%,var(--green) 62%,#B4DF34 100%);
  display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(199,240,75,.5),0 20px 54px -14px rgba(199,240,75,.62);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.film-play::after{
  content:"";
  border-style:solid;
  border-width:clamp(11px,1.15vw,15px) 0 clamp(11px,1.15vw,15px) clamp(18px,1.85vw,25px);
  border-color:transparent transparent transparent var(--green-ink);
  margin-left:clamp(5px,.55vw,7px);
}
.film-hit:hover .film-play,.film-hit:focus-visible .film-play{transform:scale(1.08)}
.film-hit-cap{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:clamp(11px,1.15vw,13.5px);font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 2px 20px rgba(9,19,32,.92);
}
.film-hit-cap em{
  font-style:normal;font-size:clamp(10.5px,1vw,12px);font-weight:600;letter-spacing:.06em;
  text-transform:none;color:rgba(244,240,232,.74);
}

.film-sound{
  position:absolute;right:14px;bottom:14px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;cursor:pointer;
  background:rgba(9,19,32,.72);border:1px solid rgba(201,165,92,.55);
  color:var(--ivory);font-family:inherit;font-size:11px;font-weight:700;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,border-color .2s;
}
.film-sound:hover{background:rgba(9,19,32,.9);border-color:var(--gold)}
.film-sound .fs-waves{opacity:0;transition:opacity .2s}
.film-sound.is-on .fs-waves{opacity:1}
.film-media.no-video .film-sound{display:none}

/* the full film streams from the client's own channel — nothing is
   downloaded until the play button is pressed */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(9,19,32,.94);display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,48px)}
.lightbox[hidden]{display:none}
.lb-frame{position:relative;width:min(1160px,100%)}
.lb-video{aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.lb-video iframe{width:100%;height:100%;display:block;border:0}
.lb-close{
  position:absolute;right:-6px;top:-48px;width:40px;height:40px;border-radius:50%;
  background:rgba(244,240,232,.1);border:1px solid rgba(244,240,232,.35);color:var(--ivory);
  font-size:22px;line-height:1;cursor:pointer;transition:background .2s;
}
.lb-close:hover{background:rgba(244,240,232,.22)}
.film-media.no-video video{display:none}
.film-media.no-video{aspect-ratio:16/9}
.film-cap{
  text-align:center;font-size:12.5px;letter-spacing:.06em;color:var(--faint);
  margin:14px 0 0;
}

/* the photographs, drifting slowly past underneath the film.
   JS clones the set once so translateX(-50%) loops with no seam. */
.room-rail{
  margin-top:clamp(30px,3.8vw,48px);overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.rail-track{
  display:flex;gap:clamp(10px,1.2vw,16px);width:max-content;
  animation:rail 86s linear infinite;will-change:transform;
}
.room-rail:hover .rail-track{animation-play-state:paused}
.rail-track figure{margin:0;flex:0 0 auto;overflow:hidden;border-radius:12px;background:var(--panel)}
.rail-track img{height:clamp(155px,18.5vw,272px);width:auto;display:block;object-fit:cover}
@keyframes rail{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .rail-track{animation:none}
  .room-rail{overflow-x:auto}
}

/* the payoff line that closes the block */
.roomfilm-end{text-align:center;margin-top:clamp(46px,6vw,80px)}
.roomfilm-cta{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin-top:clamp(26px,3.2vw,38px);
}
.roomfilm-cta p{margin:0;font-size:13.5px;color:var(--muted)}
.roomfilm-cta p strong{color:var(--ivory);font-weight:800}
@media (max-width:560px){.roomfilm-cta .btn{width:100%}}

/* ---------- the record (stats) ---------- */
.stats-sec .wrap{text-align:center}
.stats-lede{color:var(--muted);font-size:clamp(16px,1.8vw,19px);max-width:52ch;margin:20px auto 0}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);
  margin-top:clamp(40px,5.4vw,64px);
}
.stat{display:flex;flex-direction:column;gap:10px;align-items:center}
.stat strong{font-size:clamp(40px,5.6vw,72px);font-weight:800;letter-spacing:-.045em;color:var(--gold-hi);line-height:1;font-variant-numeric:tabular-nums}
.stat strong i{font-style:normal;font-size:.55em;color:var(--muted);font-weight:700}
.stat > span{font-size:13.5px;color:var(--muted);max-width:22ch}
.stat strong .cnt{font:inherit;color:inherit;letter-spacing:inherit}
@media (max-width:820px){
  .stats-grid{grid-template-columns:1fr 1fr;gap:30px 18px}
  .stat > span{font-size:12.5px}
}

/* ---------- THE GUARANTEE: the loudest band on the page ----------
   Green is the action colour, so the risk reversal wears it. The seal is the
   only thing on this page allowed to be this big. */
.guarantee-sec .wrap{text-align:center}
.g-lock{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(28px,5vw,72px);margin-top:clamp(28px,3.8vw,46px);text-align:left;
}
.g-seal-xl{
  flex:0 0 auto;
  width:clamp(148px,17vw,224px);height:clamp(148px,17vw,224px);border-radius:50%;
  border:3px solid var(--green-ink);background:rgba(14,19,5,.05);
  display:grid;place-content:center;justify-items:center;gap:5px;
}
.g-seal-xl span{
  font-size:clamp(42px,5.2vw,68px);font-weight:900;letter-spacing:-.05em;
  line-height:1;color:var(--green-ink);
}
.g-seal-xl span i{font-style:normal;font-size:.5em;vertical-align:.34em}
.g-seal-xl em{
  font-style:normal;font-size:clamp(9px,1vw,11px);font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(14,19,5,.7);
}
.g-copy{max-width:700px;min-width:0}
.g-copy h2{font-size:clamp(25px,3.7vw,46px)}
.g-lead{
  margin:clamp(14px,1.8vw,20px) 0 0;font-size:clamp(16px,1.7vw,20px);line-height:1.45;
  font-weight:700;color:rgba(14,19,5,.9);max-width:52ch;
}
.g-quote{
  margin:clamp(18px,2.4vw,28px) 0 0;padding-left:22px;
  border-left:3px solid var(--green-ink);
  font-size:clamp(15px,1.55vw,17.5px);line-height:1.55;font-weight:500;
  color:rgba(14,19,5,.82);
}
.g-quote cite{
  display:block;font-style:normal;font-size:10.5px;font-weight:800;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(14,19,5,.6);margin-top:16px;
}
.g-points{
  list-style:none;margin:clamp(32px,4.2vw,50px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px clamp(24px,3.4vw,44px);
}
.g-points li{
  position:relative;padding-left:27px;
  font-size:15px;font-weight:700;color:rgba(14,19,5,.86);
}
.g-points li::before{
  content:"";position:absolute;left:0;top:6px;width:15px;height:8px;
  border-left:2.5px solid var(--green-ink);border-bottom:2.5px solid var(--green-ink);
  transform:rotate(-45deg);
}
.g-cta{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin-top:clamp(30px,3.8vw,44px);
}
.g-cta p{margin:0;font-size:13.5px;font-weight:600;color:rgba(14,19,5,.8)}
.g-cta p strong{font-weight:800}
@media (max-width:900px){
  .g-lock{flex-direction:column;text-align:center;gap:26px}
  .g-quote{text-align:left}
}
@media (max-width:560px){.g-cta .btn{width:100%}}

/* ---------- fact strip ---------- */
.strip{background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip-in{
  max-width:var(--maxw);margin:0 auto;padding:clamp(28px,3.6vw,42px) var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px);
}
.fact{display:flex;flex-direction:column;gap:4px}
.fact strong{font-size:clamp(28px,4vw,46px);font-weight:800;letter-spacing:-.035em;color:var(--gold-hi);line-height:1}
.fact span{font-size:12.5px;color:var(--muted)}
@media (max-width:760px){.strip-in{grid-template-columns:1fr 1fr;gap:24px}}

/* ---------- hook ---------- */
.hook{text-align:center;padding:clamp(60px,7.5vw,100px) 0}
/* "the gold is already in front of you" moved down here from the hero;
   Meir's own words sit under it as the explanation */
.hook h2.big{margin:0 auto clamp(22px,2.8vw,32px);max-width:16ch}
.pull.hook-quote{
  font-size:clamp(19px,2.3vw,27px);font-weight:700;letter-spacing:-.024em;line-height:1.3;
  max-width:34ch;color:var(--gold-hi);margin-bottom:clamp(30px,3.6vw,44px);
}
.pull.hook-quote cite{margin-top:16px}
.pull{
  font-weight:800;font-size:clamp(24px,3.7vw,44px);line-height:1.15;letter-spacing:-.032em;
  margin:0 auto 42px;max-width:22ch;color:var(--ivory);
}
.pull cite{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:24px}
.pull.small{font-size:clamp(20px,2.5vw,29px);max-width:26ch;margin:32px 0;text-align:left;color:var(--gold-hi)}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);text-align:left;margin-top:10px}
.cols p{color:var(--muted);margin:0}
@media (max-width:760px){.cols{grid-template-columns:1fr;gap:16px}}

/* ---------- story ---------- */
.story{background:var(--ink-2)}
.story-grid{display:grid;grid-template-columns:1.05fr .85fr;gap:clamp(30px,6vw,90px);align-items:start}
.story-media{display:grid;gap:20px;position:sticky;top:104px}
.story-media figure{margin:0;overflow:hidden}
.story-media img{width:100%;height:230px;object-fit:cover;filter:saturate(.9)}
.story-media .tall img{height:320px}
@media (max-width:900px){
  .story-grid{grid-template-columns:minmax(0,1fr)}
  .story-media{position:static;grid-template-columns:1fr 1fr}
  .story-media img,.story-media .tall img{height:200px}
}

/* ---------- green CTA band ---------- */
.cta-band{padding:clamp(46px,6vw,76px) 0}
.cta-band-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(26px,4vw,60px)}
.cta-band-copy{flex:1 1 460px}
.cta-band-copy h2{font-size:clamp(25px,3.4vw,42px)}
.cta-band-act{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cta-band-fine{margin:0;font-size:13.5px;font-weight:600;color:rgba(14,19,5,.8);letter-spacing:.01em}
.cta-band-fine strong{font-weight:800}
@media (max-width:720px){.cta-band-act{width:100%}.cta-band-act .btn{width:100%}}

/* ---------- what you get ---------- */
.chapters{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.chapters li{background:var(--ink);padding:clamp(26px,3vw,38px)}
.chapters .num{
  font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--gold);
  display:block;margin-bottom:18px;
}
.chapters h3{margin-bottom:10px}
.chapters p{color:var(--muted);font-size:15px;margin:0}
@media (max-width:900px){.chapters{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.chapters{grid-template-columns:1fr}}

/* ---------- seats ----------
   Three tickets (room / VIP / online), a city picker above them, and the
   early-bird clock. Room + VIP are per city; online has no city. */

/* the clock — Chris's early-bird block in our language: a dark panel on the
   paper band, four big tabular digits */
.countdown{
  margin-top:clamp(30px,4vw,48px);
  background:var(--paper-ink);color:#F4F0E8;border-radius:14px;
  padding:clamp(18px,2.4vw,28px) clamp(20px,3vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;
}
.cd-label{display:flex;flex-direction:column;gap:5px}
.cd-label span{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#C9A55C;font-weight:800}
.cd-label em{font-style:normal;font-size:13.5px;color:rgba(244,240,232,.62)}
.cd-digits{display:flex;align-items:flex-start;gap:clamp(8px,1.4vw,20px)}
.cd-cell{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:2.2ch}
.cd-cell b{
  font-size:clamp(34px,4.6vw,60px);font-weight:900;letter-spacing:-.04em;line-height:1;
  color:#F4F0E8;font-variant-numeric:tabular-nums;
}
.cd-cell span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,240,232,.5);font-weight:700}
.cd-digits i{font-style:normal;font-size:clamp(26px,3.4vw,44px);font-weight:900;color:#C9A55C;line-height:1;padding-top:3px}
.countdown.is-over .cd-digits{opacity:.4}
@media (max-width:760px){
  .countdown{justify-content:center;text-align:center;gap:18px}
  .cd-label{align-items:center}
}

/* four tickets since the both-cities bundle joined them (21 Aug 2026).
   Base is 2 x 2 - that is what a tablet and a small laptop get, because a
   quarter-width card is too narrow for the bullet lists. A wide desktop
   gets all four across (see the min-width block at the end of this section)
   and a phone stays one column. */
.tickets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px);row-gap:clamp(42px,4vw,48px);margin-top:clamp(42px,3.8vw,48px);
  /* the ticket grid BLEEDS ~20% past the 1240px wrap (Zman, 31 Aug 2026:
     "broader... fill a bit more of the screen", then "10 more percent").
     124px a side = +248px on the full wrap. The max() lets the bleed use the
     centring margins on wide screens, not just the page padding, and the
     20px floor means smaller screens shrink the bleed to zero — nothing can
     overflow the viewport at any width. */
  margin-inline:calc(-1 * min(124px, max(var(--pad) - 20px, (100vw - var(--maxw)) / 2 + var(--pad) - 20px)));
}
.ticket{
  position:relative;min-width:0;background:#FFF;border:1px solid var(--line);
  padding:clamp(28px,3.4vw,42px);display:flex;flex-direction:column;
}
.ticket.feature{border:2px solid var(--green-ink);box-shadow:0 22px 60px -30px rgba(12,12,16,.5)}
/* smaller pills 28 Aug 2026 (Zman): the bundle and VIP flags were nearly
   touching across the card gutter — tighter type buys back the breathing room */
.flag{
  /* fully ABOVE the card since 28 Aug 2026 (Zman) — straddling the border made
     the ticket read busy. The grid reserves the headroom via row-gap/margin. */
  position:absolute;top:0;right:0;transform:translateY(calc(-100% - 8px));
  background:var(--green);color:var(--green-ink);
  font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;padding:7px 13px;
  border-radius:999px;margin-right:18px;
}
/* The bundle's flag is CHAMPAGNE, not lime: the new card has to be seen without
   stealing the green flag that marks VIP as the feature card.
   🔴 Literal hex, NOT var(--gold): .band-paper remaps --gold to --gold-deep, so
   the var would paint dark brown on dark brown and the pill would vanish. */
.flag-gold{background:#C9A55C;color:#1A1204}
/* the header is TWO layers now (28 Aug 2026): the kicker chip answers
   "in person or on Zoom?", the short name says which of the four this is */
.t-kicks{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.t-kick{
  display:inline-block;padding:5px 9px;
  border-radius:999px;border:2px solid var(--gold);color:var(--gold);
  background:rgba(201,165,92,.13);
  font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;
}
.t-kick--solid{background:var(--ivory);color:var(--paper);border-color:var(--ivory)}
.t-name{font-size:clamp(17px,1.7vw,21px);letter-spacing:.06em;line-height:1.2;text-transform:uppercase;color:var(--gold);margin:0 0 12px;font-weight:800}
@media (min-width:621px){ .t-name{min-height:1.25em} }
/* the real price, then the bigger "was" price crossed out beside it */
.t-price{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-size:clamp(46px,4.6vw,66px);font-weight:800;letter-spacing:-.045em;line-height:1;margin:0 0 8px;color:var(--ivory);
}
.t-price s{font-size:.4em;font-weight:700;letter-spacing:-.02em;color:var(--faint);text-decoration:line-through;text-decoration-thickness:2px}
.t-price s:empty{display:none}
.t-save{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.t-blurb{font-size:15px;line-height:1.45;color:var(--ivory);font-weight:700;margin:0 0 10px}
.t-note{font-size:13px;color:var(--faint);margin:0 0 24px;font-weight:500}
.t-note b{color:var(--ivory);font-weight:800}
/* the one-line "what happens after Buy now" under each card's button —
   BLACK, not faint: it is the instruction, and Zman wants it seen (28 Aug) */
.t-next{margin:10px 0 0;font-size:13px;font-weight:700;color:var(--ivory);text-align:center}
/* the checklist runs smaller and tighter than the header copy (28 Aug 2026,
   Zman: less text enveloping the card) — the blurb carries the message, the
   list just confirms it */
.ticket ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:7px;flex:1}
.ticket li{font-size:13.5px;line-height:1.45;color:var(--muted);padding-left:21px;position:relative}
.ticket li::before{
  content:"";position:absolute;left:0;top:6px;width:11px;height:6px;
  border-left:2px solid var(--green-ink);border-bottom:2px solid var(--green-ink);
  transform:rotate(-45deg);
}
.seats-g{
  margin:clamp(26px,3.2vw,38px) 0 0;text-align:center;
  font-size:clamp(15px,1.5vw,18px);color:var(--muted);font-weight:500;
}
.seats-g b{color:var(--ivory);font-weight:800}

@media (max-width:700px){
  .tickets{grid-template-columns:minmax(0,1fr);gap:22px;row-gap:46px}
}
/* the four-across desktop layout. Everything here only trims the card so four
   fit without the price wrapping - nothing moves at 1180px or below, so the
   phone rules further up this file are untouched. */
/* ---- row alignment across the cards (28 Aug 2026, Zman: prices on one line,
   buttons on one line, text next to each other). Each variable-height slot gets
   the SAME reserved height on every card at that layout, and the flex:1 list
   absorbs the rest, so price, blurb, list, button and next-line all sit level. */
/* (the hand-tuned min-height reservations that lived here are gone —
   equalizeRows() in mm.js now measures and levels every slot live) */
@media (min-width:1181px){
  .tickets{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);row-gap:46px}
  /* the +20% bleed made the type read small against the block (Zman, 31 Aug
     2026: "make everything a little bit bigger... spaced out perfectly") —
     everything inside the card scaled up together here. The old min-height
     reservations are gone: equalizeRows() in mm.js levels the slots live. */
  .ticket{padding:clamp(26px,2.4vw,36px)}
  .t-price{font-size:clamp(38px,3.4vw,50px)}
  .t-name{font-size:clamp(19px,1.55vw,22px)}
  .t-save{font-size:12.5px}
  .t-blurb{font-size:16px;line-height:1.5}
  .t-note{font-size:12.5px}
  .ticket li{font-size:15.5px}
  .ticket ul{gap:9px}
  .t-next{font-size:14px;line-height:1.4}
  .t-loc{font-size:11.5px;padding:5px 11px 5px 9px}
  .t-loc svg{width:12px;height:12px}
  .ticket .btn{font-size:16px;padding:19px 30px}
  .grab .ticket{padding:clamp(20px,2vw,30px)}
  .grab .t-price{font-size:clamp(36px,3.2vw,46px)}
  /* the chip pair must never wrap here: at 1181-1300 the two-chip rows broke
     to a second line while Zoom's single chip did not, and every checklist
     below slid 37px out of line (Zman's tidy-rows pass, 31 Aug 2026). The
     chips slim with the viewport instead. */
  .t-kicks{flex-wrap:nowrap}
  .t-kick{font-size:clamp(9px,.82vw,11px);padding:4px clamp(6px,.66vw,10px);letter-spacing:.07em}
}

/* ---------- proof ----------
   first band after the hero; a notch off the page ink so it reads as its own
   beat */
.proof{background:var(--ink-2)}
/* Zman, 21 Aug: the heading block sits CENTRED over the story rail. Only the
   .wrap is touched - the rail itself is a sibling and keeps its own edges. */
.proof > .wrap{text-align:center}
.proof > .wrap .lede{margin-left:auto;margin-right:auto}
/* the stories drift past like the room photographs, the OTHER way. Tiles are
   16:9 — the same shape the YouTube embed takes over on click — so pressing
   play never reshapes the card. */
.vid-rail{
  margin-top:clamp(36px,4.6vw,54px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.vid-track{
  display:flex;align-items:flex-start;gap:clamp(16px,2vw,26px);width:max-content;
  animation:vids-drift 110s linear infinite;
}
.vid-rail:hover .vid-track,.vid-track.is-holding{animation-play-state:paused}
/* -50% -> 0 = the rail drifts RIGHT, opposite the room rail */
@keyframes vids-drift{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.vid{flex:0 0 auto;width:clamp(280px,30vw,430px)}
@media (prefers-reduced-motion:reduce){
  .vid-track{animation:none}
  .vid-rail{overflow-x:auto;-webkit-mask-image:none;mask-image:none;padding-bottom:8px}
}
.vid-thumb{
  position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);
  background:var(--panel);cursor:pointer;overflow:hidden;aspect-ratio:16/9;
}
.vid-thumb img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.62) contrast(1.08) sepia(.35);
  transition:transform 1s cubic-bezier(.2,.8,.2,1),filter .6s;
}
.vid-thumb::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,19,32,.28),rgba(9,19,32,.62));
}
.vid-thumb:hover img{transform:scale(1.05);filter:grayscale(.15) brightness(.86) contrast(1.02) sepia(.05)}
.play{
  position:absolute;left:16px;bottom:16px;z-index:2;
  width:52px;height:52px;border-radius:50%;background:var(--green);
  display:grid;place-items:center;transition:transform .4s;
  box-shadow:0 8px 26px -8px rgba(199,240,75,.7);
}
.play::after{content:"";border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--green-ink);margin-left:4px}
.vid-thumb:hover .play{transform:scale(1.1)}
.vid iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.vid-quote{font-size:16.5px;font-weight:700;letter-spacing:-.022em;line-height:1.32;margin:14px 0 4px;white-space:normal}
.vid-by{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0}

/* ---------- the wavelength replays ----------
   The beat between the client stories and the record: two free webinars, free
   to watch, sitting where someone who is still deciding will find them. These
   two stills are DESIGNED artwork (the channel's own thumbnails), so unlike the
   story tiles they are never desaturated. They only dim a touch until hovered.
   The green disc sits bottom-RIGHT: both thumbnails carry a white caption pill
   bottom-LEFT, and the page's play mark must not land on top of it. */
.replays{background:var(--ink);border-top:1px solid var(--line)}
.replays > .wrap{text-align:center}
.replays > .wrap .lede{margin-left:auto;margin-right:auto}
.replay-h{font-size:clamp(26px,3.5vw,42px);max-width:26ch;margin:0 auto;text-wrap:balance}
.replay-wrap{margin-top:clamp(34px,4.4vw,52px)}
.replay-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);
  max-width:1000px;margin:0 auto;
}
.replay-thumb{
  position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);
  background:var(--panel);cursor:pointer;overflow:hidden;aspect-ratio:16/9;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.9);
}
.replay-thumb img{
  width:100%;height:100%;object-fit:cover;filter:brightness(.88);
  transition:transform 1s cubic-bezier(.2,.8,.2,1),filter .6s;
}
.replay-thumb::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,19,32,0) 52%,rgba(9,19,32,.5));
}
.replay-thumb:hover img{transform:scale(1.04);filter:brightness(1)}
.replay-thumb .play{left:auto;right:clamp(14px,1.6vw,20px);bottom:clamp(14px,1.6vw,20px)}
.replay-thumb:hover .play{transform:scale(1.1)}
.replay iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.replay-tag{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:18px 0 6px;
}
.replay-title{font-size:clamp(19px,2.1vw,24px);letter-spacing:-.024em;margin:0}
.replay-sub{font-size:14.5px;color:var(--muted);margin:7px 0 0;text-wrap:balance}
@media (max-width:760px){
  .replay-grid{grid-template-columns:1fr;gap:clamp(26px,7vw,36px);max-width:520px}
  .replay-h{max-width:none}
}

/* ---------- who ---------- */
.who-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center}
.who-img{margin:0;overflow:hidden}
.who-img img{width:100%;height:auto}
.rules{margin-top:32px;display:grid;gap:12px;border-left:3px solid var(--green);padding-left:24px}
.rules p{font-size:clamp(16.5px,1.8vw,21px);font-weight:700;letter-spacing:-.022em;line-height:1.35;margin:0;color:var(--ivory)}
@media (max-width:900px){.who-grid{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.acc{margin-top:40px;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-size:clamp(16px,1.8vw,19px);font-weight:700;letter-spacing:-.02em;transition:color .3s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s;
}
.acc details[open] summary{color:var(--green)}
.acc details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.acc details p{color:var(--muted);margin:0 0 24px;max-width:68ch;font-size:16px}

/* ---------- close ---------- */
.close{position:relative;padding:clamp(78px,10vw,140px) 0;text-align:center;overflow:hidden}
.close-media{position:absolute;inset:0;z-index:0}
.close-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4)}
.close-scrim{position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,rgba(9,19,32,.84) 40%,rgba(9,19,32,.92) 100%)}
.close-body{position:relative;z-index:2}
.close h2{font-size:clamp(34px,6vw,76px);line-height:1;margin-bottom:22px}
.close p{color:var(--muted);font-size:clamp(16px,1.9vw,19px);max-width:52ch;margin:0 auto 34px}
.close-note{font-size:13px !important;color:var(--faint) !important;margin-top:24px !important}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:50px 0 calc(52px + var(--bar));text-align:center}
.foot-logo{height:32px;width:auto;margin:0 auto 20px;opacity:.85}
.foot p{color:var(--faint);font-size:13.5px;margin:0 0 8px}
.foot .fine{font-size:12px;opacity:.72;max-width:60ch;margin:14px auto 0}
.foot .fine a{text-decoration:underline;text-underline-offset:3px}
.foot .fine a:hover{color:var(--ivory)}

/* ---------- sticky bar: date + price + CTA, every screen size ---------- */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(9,19,32,.94);backdrop-filter:blur(16px);
  border-top:1px solid rgba(199,240,75,.28);
  transform:translateY(110%);transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.sticky-bar.show{transform:none}
.sticky-in{
  max-width:var(--maxw);margin:0 auto;padding:12px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.sticky-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.sticky-info strong{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--ivory);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sticky-info span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sticky-bar .btn{flex:0 0 auto}
@media (max-width:560px){
  .sticky-in{padding:10px 14px;gap:12px}
  .sticky-info strong{font-size:13.5px}
  .sticky-info span{font-size:11.5px}
  .sticky-bar .btn{padding:14px 20px;font-size:12.5px}
}

/* ---------- STEP 1 OF 2 — the identity popup -------------------------------
   Our own card, our own form. It stands between the ticket and the checkout
   for one reason: a payment link never tells us who clicked and didn't pay.
   Name, email and mobile captured HERE turn an abandoner into a named contact
   with a ticket and a city — the only thing a follow-up can be built on.
   Paper card, so it reads as the same family of object as the Grab band. */
.modal{position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-scrim{position:absolute;inset:0;background:rgba(4,4,6,.8);backdrop-filter:blur(4px);animation:m-fade .25s ease}
.modal-card{
  position:relative;width:min(560px,100%);max-height:calc(100svh - 40px);overflow-y:auto;
  background:var(--paper);color:var(--paper-ink);
  /* the same token flip the paper bands use, so every rule below adapts on its own */
  --ivory:#0C0C10;
  --muted:rgba(12,12,16,.70);
  --faint:rgba(12,12,16,.46);
  --line:rgba(12,12,16,.15);
  --gold:var(--gold-deep);
  border-radius:18px;padding:clamp(24px,3.2vw,38px);
  border-top:4px solid var(--gold-deep);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.85);
  animation:m-rise .32s cubic-bezier(.2,.8,.2,1);
}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal-scrim,.modal-card{animation:none}}

.modal-x{
  position:absolute;top:12px;right:12px;width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(12,12,16,.06);color:var(--paper-ink);cursor:pointer;
  display:grid;place-items:center;transition:background .2s;
}
.modal-x:hover{background:rgba(12,12,16,.14)}
.modal-x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

.modal-step{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-deep);font-weight:800;margin:0 0 8px}
.modal-title{font-size:clamp(26px,3.2vw,38px);font-weight:900;letter-spacing:-.035em;line-height:1;margin:0;padding-right:44px}
.modal-sub{margin:9px 0 0;font-size:14.5px;color:var(--muted)}

/* the ticket you clicked, restated — nobody should have to remember it */
.modal-tier{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:clamp(18px,2vw,24px) 0;padding:14px 18px;border-radius:12px;
  background:#FFF;border:1px solid var(--line);
}
.mt-label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);font-weight:800}
.mt-price{display:flex;align-items:baseline;gap:9px;line-height:1}
.mt-price b{font-size:28px;font-weight:900;letter-spacing:-.04em}
.mt-price s{font-size:14px;font-weight:700;color:var(--faint);text-decoration:line-through}
.mt-price s:empty{display:none}

/* the both-cities bundle has no day question, so it says the days here instead */
.mt-note{margin:-8px 0 18px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.mt-note b{color:var(--paper-ink);font-weight:800}
.mt-note[hidden]{display:none}

/* the city, asked once, here — hidden entirely for the online ticket */
.m-city{border:0;padding:0;margin:0 0 18px;min-width:0}
.m-city[hidden]{display:none}
/* the day question got LOUDER 28 Aug 2026 (Zman): it is the one decision the
   popup asks for, so it reads at body size, not label size */
.m-city legend{padding:0;font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--gold-deep);margin-bottom:12px}
.m-city-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.m-city-card{position:relative;cursor:pointer;min-width:0}
/* The all-three-cities bundle sits under the three day cards as its own
   full-width row, and it does NOT look like a fourth day: green rule, a tinted
   ground and a "Save £259" pill, so the £95 option is seen and not scrolled past
   (Zman, 21 Aug 2026: "needs to stand out a bit more"). */
.m-city-both{grid-column:1/-1;margin-top:2px}
/* the tinted ground and the Save pill carry the loudness on their own — the
   permanent green border came OFF 28 Aug 2026, because an always-green border
   read as "already selected" next to a genuinely selected day card */
.m-city-both .mc-in{
  background:linear-gradient(180deg,#FCFFF3,#F1FBDD);
  padding-right:104px;
}
/* the bundle is picked ⇒ the day cards are out of the running, and they look it */
.m-city-cards:has(input[value="both"]:checked) .m-city-card:not(.m-city-both) .mc-in{opacity:.4}
.m-city-both .mc-in b{font-size:17.5px}
.m-city-both .mc-in em{color:rgba(12,12,16,.72);font-weight:600}
.m-city-both input:checked + .mc-in{box-shadow:inset 0 0 0 2px var(--green-ink)}
.mc-flag{
  position:absolute;top:50%;right:14px;transform:translateY(-50%);
  background:var(--green);color:var(--green-ink);
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;white-space:nowrap;
}
.m-city-card[hidden]{display:none}
.m-city-card input{position:absolute;opacity:0;width:0;height:0}
.mc-in{
  display:flex;flex-direction:column;gap:3px;padding:13px 16px;border-radius:11px;
  background:#FFF;border:2px solid var(--line);transition:border-color .2s,box-shadow .2s;
}
.mc-in b{font-size:18px;font-weight:800;letter-spacing:-.02em}
.mc-in em{font-style:normal;font-size:14px;color:var(--muted)}
.m-city-card:hover .mc-in{border-color:rgba(12,12,16,.35)}
.m-city-card input:checked + .mc-in{border-color:var(--green-ink);box-shadow:inset 0 0 0 1px var(--green-ink)}
.m-city-card input:focus-visible + .mc-in{outline:3px solid var(--gold-deep);outline-offset:2px}

.m-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.m-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.m-wide{grid-column:1/-1}
.m-f span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--gold-deep)}
/* the country-code hint that sits beside the MOBILE label. Lower case and
   unspaced so it reads as an instruction, not as more shouted label
   ([[feedback_mono_label_never_sentence]] in spirit: a caps label is a LABEL,
   never a sentence). Wraps under the label on a narrow phone.
   It is FULL BLACK, not faint (Zman, 4 Sep 2026): this is the one
   instruction on the form that stops a number being mangled, so it has to
   be read, not skimmed past. The bracketed codes make it concrete. */
.m-f span em{display:inline-block;font-style:normal;text-transform:none;letter-spacing:.01em;font-weight:700;font-size:12px;color:var(--paper-ink)}
/* 16px is not a taste call: anything smaller makes iOS zoom the page on focus */
.m-f input{
  font-family:inherit;font-size:16px;font-weight:600;color:var(--paper-ink);width:100%;
  padding:13px 15px;border-radius:10px;border:2px solid var(--line);background:#FFF;
  transition:border-color .2s;
}
.m-f input:focus{outline:0;border-color:var(--green-ink)}
.m-f input.is-bad{border-color:#B33A2B}
.m-err{margin:12px 0 0;font-size:13.5px;font-weight:700;color:#B33A2B}
.m-err[hidden]{display:none}
.modal-form .btn.wide{margin-top:18px}
.modal-form .btn[disabled]{opacity:.6;cursor:progress}
.m-fine{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--faint)}
.m-fine b{color:var(--muted);font-weight:800}
/* 519, not 460. The city question is THREE cards across now, and the base
   .mc-in (16px name, 16px side padding) needs ~127px per card to hold
   "Amsterdam" - which the modal only has once the viewport passes ~516px,
   because below that the modal is viewport-width-bound rather than capped at
   its 560px. Measured at 470: the name ran 90.7px in an 84.7px card. */
@media (max-width:519px){
  .m-grid{grid-template-columns:1fr}
  /* three day cards STAY three across here. Stacked, the city question plus the
     bundle is a four-card wall that pushes the form and the buy button off the
     bottom of the modal — the one thing this popup exists to reach. Across, the
     card carries the city over the short date and stays one tap. */
  .m-city-cards{grid-template-columns:repeat(3,1fr);gap:6px}
  /* "Amsterdam" is the widest city on the row and it decides this whole block.
     Measured with a Range at 320 / 360 / 375 / 390: at a flat 13.5px it spilled
     its card below ~388px, so the padding comes in, the gap comes in and the
     name tracks the viewport. Do not put a fixed font-size back here. */
  .mc-in{padding:11px 6px;gap:2px}
  .mc-in b{font-size:clamp(12px,3.8vw,15px);letter-spacing:-.03em}
  .mc-in em{font-size:clamp(10.5px,3.2vw,12.5px);line-height:1.25}
  .m-city-both .mc-in{padding:13px 16px}
  .m-city-both .mc-in b{font-size:14.5px}
  /* no room for the pill beside the words at this width - it goes above them */
  .m-city-both .mc-in{padding-right:16px}
  .mc-flag{position:static;transform:none;align-self:flex-start;margin-bottom:5px}
  .modal{padding:12px}
  .modal-card{max-height:calc(100svh - 24px)}
}

/* ============ THE CITY PICKER (31 Aug 2026) ============
   "Pick your city." Three flag segments above the cards; the picked flag
   ILLUMINATES (full colour + gold ring), the rest hold in a dimmed
   monochrome. Amsterdam re-renders the cards in euros. Sized up + words
   CENTRED on Zman's same-day call; the flag-background BUY buttons were
   tried and pulled the same day ("look too similar") — buttons are green.
   🔴 Literal ivory/gold hexes in here, NOT the vars: this block only ever
   renders inside .band-paper, which remaps --gold/--gold-hi to the DARK
   values — the vars would paint dark-on-dark (same trap as .flag-gold). */
.citypick{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  max-width:860px;margin-top:clamp(24px,2.8vw,34px);
}
/* the grab band's heading is centred, so its picker centres with it;
   "Take your seat" is left-set and keeps the picker on its margin */
.grab .citypick{margin-inline:auto}
/* RETIRED 1 Sep 2026 — the per-square "Pay in £/€" label was replaced by the
   .curpick toggle below, because currency is now the BUYER's pick, not the
   city's. The rules are kept (renderPickers no longer emits .cp-over) so the
   row-gap still holds if the label ever comes back. */
.citypick{row-gap:8px}
.cp-over{
  align-self:end;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:clamp(10.5px,1.05vw,13px);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(12,12,16,.55);
}
/* the bare £ / € symbol at the end of the label — no circle (Zman, 31 Aug) */
.cp-cur{font-style:normal;font-size:1.2em;font-weight:800;letter-spacing:0;line-height:1}
.cp-over.is-on{color:#8A6A2C}
.cp-btn{
  position:relative;overflow:hidden;min-width:0;border:0;padding:0;cursor:pointer;
  border-radius:12px;background:#091320;text-align:center;font-family:var(--sans);
  box-shadow:0 14px 34px -20px rgba(12,12,16,.55);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
}
.cp-flag{position:absolute;inset:0;z-index:0;filter:grayscale(1) brightness(.42);opacity:.85;transition:filter .35s,opacity .35s}
.cp-flag .fl{position:absolute;inset:0;width:100%;height:100%;display:block}
.cp-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(9,19,32,.72),rgba(9,19,32,.84));transition:background .35s}
.cp-in{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:clamp(18px,2vw,26px) 14px;
  text-shadow:0 1px 3px rgba(0,0,0,.65),0 2px 14px rgba(0,0,0,.6);
}
.cp-in b{font-size:clamp(16px,1.9vw,23px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#F4F1EA;line-height:1.05}
.cp-in em{font-style:normal;font-size:clamp(12.5px,1.2vw,15px);font-weight:700;letter-spacing:.05em;color:rgba(244,241,234,.78)}
.cp-btn:hover .cp-flag{filter:grayscale(.35) brightness(.6)}
.cp-btn.is-on{transform:translateY(-2px);box-shadow:0 0 0 2px #C9A55C,0 18px 40px -18px rgba(201,165,92,.65)}
.cp-btn.is-on .cp-flag{filter:none;opacity:1}
/* centred words want an EVEN scrim (no dark shoulder) — the text-shadow is
   what keeps ivory legible over the Dutch flag's white band when it is lit */
.cp-btn.is-on .cp-scrim{background:linear-gradient(180deg,rgba(9,19,32,.42),rgba(9,19,32,.58))}
.cp-btn.is-on .cp-in em{color:#E8C77A}
@media (max-width:560px){
  .citypick{gap:8px}
  .cp-in{padding:15px 6px 14px}
  /* "Amsterdam" is the widest name and decides this row, same law as the
     popup's city cards: it was kissing its segment edge at 375 */
  .cp-in b{font-size:clamp(12px,3.7vw,16px);letter-spacing:.02em}
  .cp-in em{font-size:clamp(10.5px,3.1vw,12.5px)}
}

/* a city switch repaints the cards with a short settle instead of the scroll
   reveal (the observer only knows the first render's elements) */
@keyframes tswitch{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ticket.switch-in{animation:tswitch .4s cubic-bezier(.2,.7,.2,1) both}
.ticket.switch-in:nth-child(2){animation-delay:.05s}
.ticket.switch-in:nth-child(3){animation-delay:.1s}
.ticket.switch-in:nth-child(4){animation-delay:.15s}
/* the card a link pointed at (?ticket= from the Wavelength replay page,
   25 Sep 2026): a gold ring that draws in once and stays */
@keyframes tlinked{from{outline-offset:18px;outline-color:rgba(201,165,92,0)}to{outline-offset:6px;outline-color:#C9A55C}}
.ticket.is-linked{outline:3px solid #C9A55C;outline-offset:6px;animation:tlinked 1.2s cubic-bezier(.2,.7,.2,1) .3s both}
@media (prefers-reduced-motion:reduce){
  .ticket.is-linked{animation:none}
  .ticket.switch-in{animation:none}
  .cp-btn,.cp-flag,.cp-scrim{transition:none}
}

/* the "In the room" pin sticker beside an in-person ticket's name
   (31 Aug 2026). It began life as a pulsing red LIVE dot and was re-cut the
   same hour — red-dot LIVE reads as "streaming right now"; the gold map-pin
   says you are AT the event. Literal gold hexes, same .band-paper var trap. */
.t-tag{margin:0 0 11px}
.t-loc{
  display:inline-flex;align-items:center;gap:5px;
  padding:4.5px 10px 4.5px 8px;border-radius:999px;
  background:#C9A55C;color:#1A1204;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1;
  white-space:nowrap;
}
.t-loc svg{width:11px;height:11px;fill:#1A1204;flex:none}
/* the Zoom counterpart: dark, with a little play-screen */
.t-loc--online{background:#0C0C10;color:#F4F1EA}
.t-loc--online svg{fill:#F4F1EA}

/* the highlighted words inside the checklists (31 Aug 2026) — heavier and
   inked so the city, the date and the guarantee stand out of the grey */
.ticket li b{font-weight:800;color:#0C0C10}

/* the deliberate two-line name stack ("Leicester / ticket", "All three /
   events") exists only on the four-across desktop, where it fills the line
   VIP's two-line name reserves; narrower layouts keep the names flowing */
.t-name br.nb{display:none}
@media (min-width:1181px){.t-name br.nb{display:inline}}

/* ============ THE CURRENCY TOGGLE (1 Sep 2026) ============
   Two segments side by side under the city squares: pounds or euros, for any
   city and any ticket. Same gold-illuminates-the-pick language as the city
   picker, deliberately QUIETER than it — the city is the big decision, the
   currency is the small one right after it.
   🔴 Literal ivory/gold hexes, not the vars: this block only ever renders
   inside .band-paper, which remaps --gold to the dark values. */
.curpick{
  max-width:860px;margin-top:clamp(16px,1.8vw,22px);
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
}
.seats .curpick{align-items:flex-start;text-align:left}
.grab .curpick{margin-inline:auto}
.cur-q{
  margin:0;font-size:clamp(10.5px,1.05vw,13px);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(12,12,16,.55);
}
.curtog{
  display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  padding:6px;border-radius:14px;background:rgba(12,12,16,.06);
  box-shadow:inset 0 1px 3px rgba(12,12,16,.10);
}
.cur-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-width:clamp(126px,15vw,168px);
  padding:11px 16px;border:0;border-radius:10px;cursor:pointer;
  background:transparent;font-family:var(--sans);color:rgba(12,12,16,.62);
  transition:background .25s,color .25s,box-shadow .25s,transform .25s cubic-bezier(.2,.8,.2,1);
}
.cur-btn .cur-sym{font-style:normal;font-size:20px;font-weight:800;line-height:1}
.cur-btn b{font-size:clamp(13px,1.25vw,15.5px);font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.cur-btn em{
  font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;
  color:rgba(12,12,16,.38);
}
.cur-btn:hover{background:rgba(12,12,16,.05);color:rgba(12,12,16,.82)}
.cur-btn.is-on{
  background:#0C0C10;color:#F4F1EA;transform:translateY(-1px);
  box-shadow:0 0 0 2px #C9A55C,0 14px 30px -18px rgba(201,165,92,.7);
}
.cur-btn.is-on em{color:#E8C77A}
.cur-note{
  margin:0;max-width:52ch;font-size:clamp(12px,1.15vw,14px);line-height:1.5;
  color:rgba(12,12,16,.55);
}
.cur-note b{color:#8A6A2C}
@media (max-width:560px){
  .curpick{align-items:stretch}
  .seats .curpick{align-items:stretch}
  .curtog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .cur-btn{min-width:0;padding:12px 6px}
  .cur-note{text-align:center;max-width:none}
  .seats .cur-q{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .cur-btn{transition:none}
}

/* ===========================================================
   BUY ONE, GET ONE FREE (2 Oct 2026, Gal via Zman)
   A dark-and-gold banner above the city picker in both ticket bands,
   the same width as the picker so the column reads as one. The whole
   banner and its gold strip open a short "how it works" panel under the
   strip (same feel as the hero city cards). Rendered by renderBogo() in
   mm.js from CONFIG.bogo; on:false empties every slot.
   🔴 Literal hexes inside: the banner only renders inside .band-paper,
   which remaps --gold / --ivory to the dark values.
   =========================================================== */
.bogo-slot{max-width:860px;margin-top:clamp(26px,3vw,38px)}
.bogo-slot:empty{display:none}
.grab .bogo-slot{margin-inline:auto}
.bogo{
  --b-ivory:#F4F0E8;--b-gold:#C9A55C;--b-gold-hi:#E8C77A;--b-ease:cubic-bezier(.22,1,.36,1);
  position:relative;overflow:hidden;text-align:left;border-radius:16px;color:var(--b-ivory);
  background:
    radial-gradient(90% 160% at 0% 0%,rgba(232,199,122,.20),rgba(232,199,122,0) 55%),
    radial-gradient(60% 120% at 100% 100%,rgba(232,199,122,.09),rgba(232,199,122,0) 60%),
    linear-gradient(160deg,#17151C 0%,#0B0B0F 62%,#091320 100%);
  border:1px solid rgba(232,199,122,.42);
  box-shadow:0 26px 60px -30px rgba(12,12,16,.6),inset 0 1px 0 rgba(255,255,255,.06);
}
.bogo-face{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);cursor:pointer;
  padding:clamp(18px,2.3vw,26px) clamp(20px,3vw,34px);-webkit-tap-highlight-color:transparent;
}
.bogo-art{width:clamp(78px,8.4vw,104px);height:auto;flex:0 0 auto;overflow:visible;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.5));transition:transform .6s var(--b-ease)}
.bogo-t2{fill:rgba(232,199,122,.10);stroke:#C9A55C;stroke-width:1.6}
.bogo-perf{stroke:#C9A55C;stroke-opacity:.6;stroke-width:1.3;stroke-dasharray:2.6 3}
.bogo-nw{white-space:nowrap}
.bogo-plus{font-family:var(--sans);font-size:19px;font-weight:900;letter-spacing:-.04em;fill:#16120a}
.bogo-copy{min-width:0}
.bogo-kick{margin:0 0 7px;font-size:11.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--b-gold-hi)}
.bogo-title{margin:0;font-size:clamp(28px,3.5vw,44px);font-weight:900;letter-spacing:-.035em;line-height:1;color:var(--b-ivory)}
.bogo-title em{font-style:normal;color:var(--b-gold-hi);
  background:linear-gradient(96deg,#F6E7B8 0%,#E8C77A 45%,#C9A55C 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bogo-line{margin:9px 0 0;font-size:clamp(15.5px,1.5vw,18px);font-weight:500;line-height:1.4;color:rgba(244,240,232,.80)}
/* the strip: the same gold as the hero cards' "Click to see details" */
.bogo-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;position:relative;overflow:hidden;
  padding:13px 16px;border:0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.1;color:#16120a;
  background:linear-gradient(96deg,#F6E7B8 0%,#E8C77A 38%,#C9A55C 72%,#E0BC73 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
  transition:background .5s ease,color .5s ease,box-shadow .5s ease;
}
.bogo-cta svg{width:13px;height:13px;flex:0 0 auto}
.bogo-i-tap{fill:currentColor;stroke:currentColor;stroke-width:.6;stroke-linejoin:round}
.bogo-i-up{display:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bogo-hide{display:none}
.bogo.is-open .bogo-cta{background:rgba(232,199,122,.1);color:var(--b-gold-hi);
  box-shadow:inset 0 1px 0 rgba(232,199,122,.32),inset 0 -1px 0 rgba(232,199,122,.18)}
.bogo.is-open .bogo-see,.bogo.is-open .bogo-i-tap{display:none}
.bogo.is-open .bogo-hide{display:inline}
.bogo.is-open .bogo-i-up{display:block}
.bogo-cta:focus-visible{outline:2px solid #E8C77A;outline-offset:-4px}
.bogo-cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,252,240,.7) 50%,rgba(255,255,255,0) 65%);
}
/* the panel */
.bogo-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--b-ease)}
.bogo-more-in{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear .7s}
.bogo-pad{padding:clamp(20px,2.6vw,30px) clamp(20px,3vw,34px) clamp(22px,2.8vw,32px);
  opacity:0;transform:translateY(-10px);transition:opacity .28s ease,transform .5s var(--b-ease)}
.bogo.is-open .bogo-more{grid-template-rows:1fr}
.bogo.is-open .bogo-more-in{visibility:visible;transition:visibility 0s}
.bogo.is-open .bogo-pad{opacity:1;transform:none;transition:opacity .6s ease .16s,transform .8s var(--b-ease) .1s}
.bogo-lead{margin:0 0 clamp(16px,2vw,20px);font-size:clamp(18px,1.9vw,22px);font-weight:800;letter-spacing:-.015em;line-height:1.25;color:var(--b-ivory);text-wrap:balance}
.bogo-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,16px)}
.bogo-steps li{display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid rgba(232,199,122,.2)}
.bogo-n{display:grid;place-items:center;width:30px;height:30px;margin-bottom:6px;border-radius:50%;
  font-size:14px;font-weight:900;color:#16120a;background:linear-gradient(135deg,#F6E7B8,#C9A55C)}
.bogo-steps b{font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:var(--b-ivory)}
.bogo-steps li > span:last-child{font-size:14.5px;line-height:1.45;color:rgba(244,240,232,.74)}
.bogo-no{display:block;margin-top:6px;font-weight:700;color:#E8C77A}
.bogo-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 20px;margin-top:clamp(16px,2vw,22px)}
.bogo-fine{margin:0;font-size:13.5px;font-weight:500;color:rgba(244,240,232,.62)}
.bogo-go{padding:14px 24px;font-size:13.5px}
@media (hover:hover){
  .bogo:not(.is-open) .bogo-face:hover .bogo-art{transform:rotate(-3deg) scale(1.04)}
  .bogo:not(.is-open) .bogo-cta:hover{background:linear-gradient(96deg,#FBF0CE 0%,#F0D48E 38%,#D8B46A 72%,#EDCB84 100%)}
}
/* the phone: art beside the words, steps stacked as rows, button full width */
@media (max-width:620px){
  .bogo{border-radius:14px}
  .bogo-face{gap:14px;padding:18px 18px 16px}
  .bogo-art{width:64px}
  .bogo-kick{font-size:10.5px;letter-spacing:.18em;margin-bottom:6px}
  .bogo-title{font-size:clamp(23px,7vw,29px)}
  .bogo-line{font-size:15px;margin-top:7px}
  .bogo-cta{font-size:12px;padding:13px 12px}
  .bogo-pad{padding:20px 18px 22px}
  .bogo-steps{grid-template-columns:1fr}
  .bogo-steps li{display:grid;grid-template-columns:30px 1fr;column-gap:12px;row-gap:3px;padding:14px}
  .bogo-n{grid-row:span 2;margin:0}
  .bogo-foot{flex-direction:column;align-items:stretch}
  .bogo-go{width:100%}
}
@media (prefers-reduced-motion:no-preference){
  .bogo:not(.bogo-seen) .bogo-cta::after{animation:mdSheen 4.2s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){
  .bogo-more,.bogo-more-in,.bogo-pad,.bogo-cta,.bogo-art{transition:none !important}
}

/* the small +1 card in the HERO, under the three city cards (Zman, 2 Oct 2026):
   it steps DOWN from the dates and the guarantee (smaller words, a glass card),
   the ticket art and three arrows running down are what catch the eye. A click
   glides to the banner in "Grab your ticket" and opens its details. */
.hb-slot{margin-top:clamp(12px,1.2vw,16px)}
.hb-slot:empty{display:none}
.hb{
  display:flex;align-items:center;gap:clamp(12px,1.2vw,16px);position:relative;
  padding:9px clamp(14px,1.4vw,18px) 9px 12px;border-radius:12px;text-decoration:none;color:#F4F0E8;
  background:linear-gradient(100deg,rgba(232,199,122,.17) 0%,rgba(20,18,24,.72) 46%,rgba(9,19,32,.66) 100%);
  border:1px solid rgba(232,199,122,.5);
  box-shadow:0 16px 34px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.07);
  transition:border-color .4s ease,background .4s ease,transform .4s cubic-bezier(.22,1,.36,1);
  -webkit-tap-highlight-color:transparent;
}
.hb .bogo-art{width:clamp(54px,4.4vw,62px)}
.hb-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.hb-title{font-size:clamp(17px,1.4vw,20px);font-weight:900;letter-spacing:-.02em;line-height:1.05;color:#F4F0E8}
.hb-title em{font-style:normal;color:#E8C77A;
  background:linear-gradient(96deg,#F6E7B8 0%,#E8C77A 45%,#C9A55C 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hb-line{font-size:clamp(12.5px,.95vw,13.5px);font-weight:500;line-height:1.3;color:rgba(244,240,232,.74)}
.hb-arrows{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;margin-left:auto}
.hb-arrows svg{display:block;width:22px;height:12.5px;margin-top:-3px;fill:none;stroke:#F0D48E;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.hb:focus-visible{outline:2px solid #E8C77A;outline-offset:3px}
@media (hover:hover){
  .hb:hover{border-color:rgba(240,212,142,.85);transform:translateY(-1px);
    background:linear-gradient(100deg,rgba(232,199,122,.24) 0%,rgba(24,21,28,.74) 46%,rgba(9,19,32,.68) 100%)}
  .hb:hover .bogo-art{transform:rotate(-3deg) scale(1.05)}
}
/* the arrows run down, one after the other, on a loop */
@media (prefers-reduced-motion:no-preference){
  .hb-arrows svg{opacity:.22;animation:hbArrow 1.7s ease-in-out infinite}
  .hb-arrows svg:nth-child(2){animation-delay:.2s}
  .hb-arrows svg:nth-child(3){animation-delay:.4s}
}
@keyframes hbArrow{0%,100%{opacity:.22;transform:translateY(-2px)}35%{opacity:1;transform:translateY(2px)}70%{opacity:.22}}
@media (max-width:620px){
  .hb-slot{margin-top:12px}
  .hb{padding:9px 14px 9px 10px;gap:12px}
  .hb .bogo-art{width:48px}
  .hb-title{font-size:17px}
  .hb-line{font-size:12.5px}
}

/* the hero card PULSES gold so it really stands out (Zman, 2 Oct 2026: "make it
   just stand out like a gold hue"): the card fills with a gold wash and glows
   gold around its edge, then settles; a gold ring swells out of the edge and
   fades. In step with the arrows. isolation keeps the wash inside the card. */
.hb{
  isolation:isolate;border:1.5px solid #E8C77A;
  background:linear-gradient(100deg,rgba(240,212,142,.30) 0%,rgba(201,165,92,.15) 40%,rgba(22,19,24,.76) 74%,rgba(10,10,13,.72) 100%);
  box-shadow:0 0 22px 2px rgba(232,199,122,.32),0 16px 34px -20px rgba(0,0,0,.85);
}
.hb::before,.hb::after{content:"";position:absolute;border-radius:inherit;pointer-events:none}
.hb::before{inset:0;z-index:-1;opacity:.25;
  background:linear-gradient(100deg,rgba(246,231,184,.62) 0%,rgba(232,199,122,.46) 42%,rgba(201,165,92,.30) 100%)}
.hb::after{inset:-1.5px;box-shadow:0 0 0 0 rgba(240,212,142,.7)}
.hb-title,.hb-line{text-shadow:0 1px 10px rgba(9,19,32,.5)}
/* on the gold wash a gold-gradient word disappears: here "free" is a solid pale
   gold with the same dark lift, and the ticket art gets a dark rim */
.hb-title em{background:none;-webkit-text-fill-color:currentColor;color:#FFE7A3}
.hb .bogo-art{filter:drop-shadow(0 0 1.2px rgba(9,19,32,.95)) drop-shadow(0 8px 12px rgba(0,0,0,.55))}
@media (prefers-reduced-motion:no-preference){
  .hb{animation:hbGlow 2.2s ease-in-out infinite}
  .hb::before{animation:hbWash 2.2s ease-in-out infinite}
  .hb::after{animation:hbRing 2.2s ease-out infinite}
  .hb .bogo-art{animation:hbLift 2.2s ease-in-out infinite}
}
@keyframes hbGlow{
  0%,100%{box-shadow:0 0 18px 1px rgba(232,199,122,.26),0 16px 34px -20px rgba(0,0,0,.85)}
  50%{box-shadow:0 0 34px 8px rgba(240,212,142,.62),0 0 80px 14px rgba(201,165,92,.30),0 16px 34px -20px rgba(0,0,0,.85)}
}
@keyframes hbWash{0%,100%{opacity:.18}50%{opacity:.8}}
@keyframes hbRing{0%{box-shadow:0 0 0 0 rgba(240,212,142,.75)}70%,100%{box-shadow:0 0 0 13px rgba(240,212,142,0)}}
@keyframes hbLift{0%,100%{transform:none}50%{transform:rotate(-3deg) scale(1.06)}}

/* ===== THREE TICKETS (8 Oct 2026, Amsterdam only: room, VIP, Zoom) =========
   The rows above were cut for FOUR cards: four across on a laptop, two by two
   on a tablet. With three, the fourth slot sat empty and the row hung left.
   mm.js puts .t-n3 on a ticket box holding three cards. Laptop: three across
   the wrap itself (no bleed), so the row is centred. 960-1180: three across
   too (each card is as wide as a four-across card at 1440). 701-959: two,
   with the third centred under them. Phone: one column, unchanged. */
@media (min-width:960px){
  .tickets.t-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1181px){
  .tickets.t-n3{margin-inline:0}
}
@media (min-width:701px) and (max-width:959px){
  .tickets.t-n3 > .ticket:nth-child(3){grid-column:1 / -1;justify-self:center;width:calc(50% - clamp(18px,2.4vw,28px) / 2)}
}

/* =====================================================================
   CAPE TOWN (Zman, 9 Oct 2026)
   ===================================================================== */

/* 1. "PROSPERITY" with the South African flag running through it, not gold.
   The flag is the fill of the letters (clipped to the text), brightened a
   touch so the blue half still reads on the night-blue hero, with the same
   white glint sweeping across every nine seconds. */
.ht-pop{
  background:
    linear-gradient(110deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 62%) 200% 0 / 250% 100% no-repeat,
    url("flag-za-text.svg") 0 0 / 100% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.35));
}
.ht-pop::before{color:rgba(255,255,255,.12);-webkit-text-fill-color:rgba(255,255,255,.12)}

/* 2. the date card is ONE small ticket box (it read "super stretched") */
.hero-dates{max-width:none}
.ct-card{
  position:relative;display:inline-grid;grid-template-columns:auto auto;align-items:center;
  column-gap:22px;row-gap:6px;width:auto;
  padding:14px 18px 0;border:1px solid rgba(232,199,122,.28);border-radius:8px;overflow:hidden;
  background:linear-gradient(160deg,rgba(30,25,16,.66),rgba(9,19,32,.72));backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--ivory);text-decoration:none;transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .4s;
}
.ct-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#E03C31 0 33%,#FFB81C 33% 50%,#007749 50% 75%,#001489 75%)}
.ct-card:hover{transform:translateY(-2px);border-color:rgba(232,199,122,.5)}
.ct-when{display:flex;align-items:center;gap:9px;grid-row:span 2}
.ct-when b{font-size:clamp(38px,3.4vw,48px);font-weight:900;letter-spacing:-.04em;line-height:.9}
.ct-when span{display:flex;flex-direction:column;line-height:1.15}
.ct-when i{font-style:normal;font-size:14px;font-weight:700}
.ct-when i + i{font-weight:500;color:var(--muted)}
.ct-hours{font-size:13.5px;color:var(--muted);font-weight:600}
.ct-price{font-size:15px;font-weight:600;color:var(--ivory)}
.ct-price b{color:var(--gold-hi);font-weight:800}
.ct-price i{font-style:normal;color:var(--muted);font-weight:500}
.ct-cta{
  grid-column:1 / -1;margin:8px -18px 0;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 14px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#16120a;
  background:linear-gradient(96deg,#F2E2B3 0%,#E2C47F 38%,#C9A55C 72%,#E0BC73 100%);
}
.ct-cta svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
@media (max-width:620px){
  .ct-card{display:grid;width:100%;column-gap:16px}
  .ct-when b{font-size:40px}
}

/* 3. the currency toggle wears the flag of the money you picked */
.cur-btn{position:relative;overflow:hidden;isolation:isolate}
.cur-btn.is-on::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(9,19,32,.62),rgba(9,19,32,.38)),var(--flag) center / cover no-repeat;
}
.cur-btn.is-on[data-cur="zar"]{--flag:url("flag-za.svg")}
.cur-btn.is-on[data-cur="usd"]{--flag:url("flag-us.svg")}
.cur-btn.is-on{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.cur-btn.is-on em{color:#fff}

/* the Cape Town box opens in place */
.ct-card{cursor:default}
.ct-cta{border:0;cursor:pointer;font-family:var(--sans);width:calc(100% + 36px)}
.ct-cta .ct-hide{display:none}
.ct-card.is-open .ct-cta .ct-see{display:none}
.ct-card.is-open .ct-cta .ct-hide{display:inline}
.ct-card.is-open .ct-cta svg{transform:rotate(180deg)}
.ct-cta svg{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.ct-more{grid-column:1 / -1;max-width:420px;margin-top:6px;padding-top:12px;border-top:1px solid rgba(232,199,122,.2)}
.ct-more p{display:grid;grid-template-columns:72px 1fr;gap:10px;margin:0 0 9px;font-size:14px;line-height:1.45;color:var(--ivory)}
.ct-more p b{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);padding-top:2px}
.ct-go{display:inline-block;margin:2px 14px 4px 0;font-size:13px;font-weight:700;color:var(--gold-hi);border-bottom:1px solid rgba(232,199,122,.4)}
.ct-go:hover{border-color:var(--gold-hi)}
.ct-go[hidden]{display:none}