/* ===========================================================
   THE MONEY MANUAL - Meir Ezra live in Leicester + London
   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 --- */
  --ink:#08080B;
  --ink-2:#0D0D12;
  --panel:#111117;

  /* --- 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(8,8,11,.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}

/* ---------- 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(8,8,11,0);border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s,padding .4s;
}
.nav.stuck{background:rgba(8,8,11,.93);border-bottom-color:rgba(201,165,92,.22);padding:10px var(--pad);backdrop-filter:blur(14px)}
.nav-brand img{height:30px;width:auto}
.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));
  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:#08080B}
.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%}
/* 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(8,8,11,.5) 0%,rgba(8,8,11,.06) 24%,rgba(8,8,11,.3) 68%,var(--ink) 100%),
    linear-gradient(90deg,rgba(8,8,11,.72) 0%,rgba(8,8,11,.34) 46%,rgba(8,8,11,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(8,8,11,.44) 0%,rgba(8,8,11,.14) 14%,rgba(8,8,11,.42) 36%,rgba(8,8,11,.84) 58%,rgba(8,8,11,.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)}
  .hero-lead{margin:auto 0}
  .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(46px,6.1vw,82px);margin-bottom:12px}
  .meta-item{padding:9px 18px 10px}
  .hero-body .hero-g{margin-top:20px}   /* 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) */
.hero-title{margin:0 0 18px;font-size:clamp(53px,7.7vw,104px);letter-spacing:-.04em;line-height:.94}
.hero-title span{display:block}
.hero-sub{
  font-size:clamp(15px,1.4vw,17.5px);line-height:1.55;font-weight:500;
  color:rgba(244,240,232,.86);max-width:54ch;margin:0;
}

/* the two dates, straight under the name — the date-panel style from v21 */
.hero-dates{display:flex;gap:clamp(10px,1.3vw,15px);flex-wrap:wrap;margin-top:clamp(26px,3.1vw,40px)}
.meta-item{
  display:flex;flex-direction:column;gap:1px;
  padding:9px 17px 10px;border-left:3px solid var(--green);
  background:rgba(8,8,11,.5);backdrop-filter:blur(6px);
}
.meta-item span{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700}
.meta-item strong{font-size:clamp(14.5px,1.45vw,17.5px);font-weight:800;letter-spacing:-.02em;color:var(--ivory);line-height:1.25}
.meta-item em{font-style:normal;font-size:11.5px;color:var(--muted)}

/* the phone stack for the two 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 two dates sit SIDE BY SIDE on the short form ("Sat 3 Oct"),
   not stacked on the long one — stacked cost ~80px of the fold, which is most
   of the room the ticket band needs to show itself */
.md-short{display:none}
@media (max-width:620px){
  .hero-sub{font-size:13.5px;line-height:1.5}
  .hero-dates{flex-direction:row;gap:8px;margin-top:26px}
  .meta-item{flex:1 1 0;min-width:0;padding:8px 11px 9px;border-left-width:3px}
  .meta-item span{font-size:8.5px;letter-spacing:.14em}
  .meta-item strong{font-size:14.5px}
  .meta-item em{font-size:10.5px}
  .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:0 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-band{
  padding:clamp(14px,1.7vw,22px) var(--pad);
  margin-bottom:clamp(22px,2.6vw,32px);
}
.grab-cd{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0}
.grab-cd span{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:800}
.grab-cd b{font-size:clamp(28px,3.6vw,46px);font-weight:900;letter-spacing:-.015em;color:var(--ivory);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.1}
.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(14px,1.5vw,18px)}
.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) 0 0;font-size:clamp(14px,1.4vw,16.5px);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:0}
  .grab-lead .eyebrow{margin-bottom:6px;font-size:10px}
  .grab-cd-band{padding:12px var(--pad) 13px;margin-bottom:18px}
  .grab-cd b{font-size:26px}
  .grab-cd em{font-size:12px}
  .grab .tickets{margin-top:14px}
  .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{margin-top:clamp(34px,3.4vw,46px);max-width:74ch}
.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}
@media (max-width:620px){
  .hero-g{margin-top:30px}
  .hg-rule{width:32px;margin-bottom:10px}
  .hg-line{font-size:13px}
}

/* ---------- 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(8,8,11,.36),rgba(8,8,11,.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(8,8,11,.52),rgba(8,8,11,.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(8,8,11,.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(8,8,11,.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(8,8,11,.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(8,8,11,.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}
}

.tickets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,28px);margin-top:clamp(22px,2.8vw,32px)}
.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)}
.flag{
  position:absolute;top:0;right:0;transform:translateY(-50%);
  background:var(--green);color:var(--green-ink);
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px;
  border-radius:999px;margin-right:18px;
}
.t-name{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 14px;font-weight:800}
/* 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}
.ticket ul{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:11px;flex:1}
.ticket li{font-size:15px;color:var(--muted);padding-left:26px;position:relative}
.ticket li::before{
  content:"";position:absolute;left:0;top:7px;width:14px;height:8px;
  border-left:2.5px solid var(--green-ink);border-bottom:2.5px 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:980px){
  .tickets{grid-template-columns:minmax(0,1fr);gap:22px}
}

/* ---------- proof ----------
   first band after the hero; a notch off the page ink so it reads as its own
   beat */
.proof{background:var(--ink-2)}
/* 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(8,8,11,.28),rgba(8,8,11,.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}

/* ---------- 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(8,8,11,.84) 40%,rgba(8,8,11,.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(8,8,11,.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 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}
.m-city legend{padding:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--gold-deep);margin-bottom:10px}
.m-city-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-city-card{position:relative;cursor:pointer;min-width:0}
.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:16px;font-weight:800;letter-spacing:-.02em}
.mc-in em{font-style:normal;font-size:12.5px;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)}
/* 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}
@media (max-width:460px){
  .m-grid{grid-template-columns:1fr}
  .m-city-cards{grid-template-columns:1fr}
  .modal{padding:12px}
  .modal-card{max-height:calc(100svh - 24px)}
}