/* =========================================================================
   Atlantic Convenience Expo — design system
   Fonts: Space Grotesk (display) + Inter (body)
   Brand: blue #5676fb · yellow #ffd23f · purple #c654ff · ink #0e1116
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap");

/* Monument Grotesk ships broken vertical metrics: its `hhea` table claims an
   ascender of 4495 and a descender of -1212 on a 2048-unit em — a natural line
   height of 2.79em — and it does not set the USE_TYPO_METRICS flag that would
   tell browsers to prefer its sane OS/2 typo values (1628 / -420, exactly
   1.0em). Browsers then disagree: Chrome falls back to the winAscent/Descent
   pair (1.36em), Safari on macOS uses `hhea` and gets 2.79em. With headings set
   to `line-height: 1`, that put the glyphs ~0.9em outside their own line box on
   Mac, so every big heading visually crashed into the paragraph beneath it and
   any `overflow: hidden` mask sliced through the letterforms.

   Fixed in two places, because one isn't enough on its own:

   1. The TTF itself now carries hhea 1628 / -420 / 0 and has USE_TYPO_METRICS
      set (`MonumentGrotesk-Bold.original.ttf` is the untouched file — only 15
      bytes differ: the metric fields and their checksums, no glyph data). This
      is what covers Safari 16 and older, which predate the descriptors below.
   2. These descriptors, which pin the same values from CSS for any engine that
      would still prefer a different table.

   Either way the line box is exactly 1em and the layout stops depending on
   which table the browser happens to trust. */
@font-face {
  font-family: "Monument Grotesk";
  src: url("./MonumentGrotesk-Bold.ttf") format("truetype");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  ascent-override: 79.49%;
  descent-override: 20.51%;
  line-gap-override: 0%;
}

:root {
  --blue: #5676fb;
  --yellow: #ffd23f;
  --purple: #c654ff;
  --ink: #0e1116;
  --paper: #ffffff;
  --muted: rgba(14, 17, 22, 0.62);
  --line: rgba(14, 17, 22, 0.1);
  --font-display: "Monument Grotesk", "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --maxw: 1200px;
  --radius: 18px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Held while the mobile menu or the lightbox is open. `touch-action: none` is
   what actually stops iOS from rubber-banding the page behind the overlay —
   `overflow: hidden` alone doesn't. Overlays opt scrolling back in for
   themselves below. */
html.is-scroll-locked,
html.is-scroll-locked body {
  overflow: hidden;
  touch-action: none;
}
.mobile-menu,
.lightbox {
  touch-action: pan-y;
}

body {
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}

a {
  color: var(--blue);
}

img {
  max-width: 100%;
}

/* ---- Background video ----
   These play as page furniture, not as a player. Mobile Safari and Chrome
   otherwise stamp a large "tap to play" glyph over the frame whenever a video
   isn't running, which is exactly the wrong affordance for something sitting
   behind the copy. The poster carries the frame until playback starts, so a
   slow connection shows a photograph rather than a black rectangle. ---- */
video[data-bg-video] {
  background-color: var(--ink);
  pointer-events: none;
}
video[data-bg-video]::-webkit-media-controls,
video[data-bg-video]::-webkit-media-controls-panel,
video[data-bg-video]::-webkit-media-controls-overlay-play-button,
video[data-bg-video]::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
}

.section-shell {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 14px;
}

/* =========================================================================
   HEADER — floating glass pill with mega-menu
   ========================================================================= */
header#page-header {
  height: 62px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 0 10px 0 18px;
  z-index: 200;
  color: var(--ink);
  border-radius: 50rem;
  background-color: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background-color 0.35s ease, box-shadow 0.35s ease,
    border-color 0.35s ease, backdrop-filter 0.35s ease;
}

/* Background only appears once you scroll onto the video / past the hero */
header#page-header[scrolled="true"] {
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 12px 40px rgba(25, 35, 90, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.header-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 10px;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.header-logo:hover {
  transform: scale(1.04);
}
/* Full lock-up sized off its height; width follows the 1400×415 artwork. */
.header-logo img {
  display: block;
  height: 34px;
  width: auto;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-item {
  position: relative;
}

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15.5px;
  color: var(--ink);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 9px 14px;
  border-radius: 50rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-trigger:hover,
.nav-item.open .nav-trigger {
  background-color: rgba(14, 17, 22, 0.06);
}
.nav-caret {
  transition: transform 0.2s ease;
  opacity: 0.65;
}
.nav-item.open .nav-caret {
  transform: rotate(180deg);
}

/* Mega panel */
.mega-panel {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 320px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(25, 35, 90, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  z-index: 5;
}
/* invisible hover bridge so the gap doesn't drop the menu */
.mega-panel::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
}
.nav-item.open .mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-blurb {
  margin: 2px 4px 12px;
  font-size: 13px;
  color: var(--muted);
}
.mega-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mega-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 0.18s ease;
}
.mega-link:hover {
  background-color: rgba(86, 118, 251, 0.08);
}
.mega-link-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
/* Outbound glyph on off-site nav links (desktop + mobile) */
.mega-link-out {
  flex: 0 0 auto;
  opacity: 0.45;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.mega-link:hover .mega-link-out {
  opacity: 0.9;
  transform: translate(1px, -1px);
}
.mobile-group-links a .mega-link-out {
  margin-left: 7px;
  vertical-align: -1px;
}
.mega-link-desc {
  font-size: 12.5px;
  color: var(--muted);
}

.header-notify {
  flex: 0 0 auto;
  background-color: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 50rem;
  margin-left: 6px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.header-notify:hover {
  background-color: #2a2a2a;
  transform: translateY(-1px);
}

/* Hamburger */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  flex: 0 0 auto;
}
.hamburger-btn span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.hamburger-btn.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger-btn.open span:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: 80px;
  left: 12px;
  right: 12px;
  z-index: 199;
  padding: 10px 12px 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(25, 35, 90, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  /* dvh tracks the mobile URL bar as it collapses; vh is the fallback. */
  max-height: calc(100vh - 100px);
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  /* Keeps a drag inside the menu from chaining out to the page behind it —
     without this the page rubber-bands and the menu appears to refuse to
     scroll. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
}
.mobile-group-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 12px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(14, 17, 22, 0.07);
  cursor: pointer;
}
.mobile-group-trigger svg {
  transition: transform 0.2s ease;
  opacity: 0.6;
}
.mobile-group.open .mobile-group-trigger svg {
  transform: rotate(180deg);
}
.mobile-group-links {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.mobile-group.open .mobile-group-links {
  grid-template-rows: 1fr;
}
.mobile-group-inner {
  overflow: hidden;
}
.mobile-group-links a {
  display: block;
  padding: 12px 12px 12px 24px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}
.mobile-group-links a:hover {
  color: var(--ink);
}
.mobile-menu-notify {
  margin-top: 14px;
  padding: 15px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-align: center;
  border-radius: 50rem;
  text-decoration: none;
}

@media (max-width: 980px) {
  header#page-header {
    justify-content: space-between;
    gap: 0;
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
    max-width: none;
    padding: 0 10px 0 18px;
  }
  .header-nav,
  .header-notify,
  .lang-desktop {
    display: none;
  }
  .hamburger-btn {
    display: flex;
  }
  .mobile-menu {
    display: block;
  }
  /* Logo shrinks so it never crowds the hamburger on narrow phones */
  .header-logo img {
    height: clamp(26px, 7.4vw, 32px);
  }
}

/* ---- Language switcher ---- */
.lang-switch {
  position: relative;
  flex: 0 0 auto;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  border-radius: 50rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.lang-btn:hover {
  background: #fff;
  border-color: rgba(14, 17, 22, 0.2);
}
.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(25, 35, 90, 0.18);
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  max-height: 60vh;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 10;
}
.lang-switch.open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-option {
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.lang-option:hover {
  background: rgba(14, 17, 22, 0.05);
}
.lang-option.active {
  background: rgba(86, 118, 251, 0.1);
  color: var(--blue);
  font-weight: 600;
}
/* ---- Mobile language block inside the slide-out menu ----
   On a phone the list expands inline instead of floating above the button.
   A floating panel can't escape the menu here — `.mobile-menu` sets
   `backdrop-filter`, which makes it the containing block even for
   `position: fixed` children — so the popover was trapped inside a scroll box,
   clipped, and every drag on it scrolled the menu underneath instead. Laying
   the options out in the flow means the whole menu scrolls as one list. ---- */
.mobile-lang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.mobile-lang-label {
  font-weight: 600;
  color: var(--muted);
}
.lang-mobile .lang-menu {
  right: 0;
  bottom: calc(100% + 10px);
  top: auto;
}

@media (max-width: 980px) {
  .mobile-lang {
    display: block;
  }
  .mobile-lang-label {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .lang-mobile {
    display: block;
  }
  .lang-mobile .lang-btn {
    width: 100%;
    height: 48px;
    justify-content: space-between;
    background: rgba(14, 17, 22, 0.04);
    font-size: 15px;
  }
  .lang-mobile .lang-btn::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.5;
    transition: transform 0.22s ease;
  }
  .lang-mobile.open .lang-btn::after {
    transform: translateY(2px) rotate(-135deg);
  }
  .lang-mobile .lang-current {
    margin-right: auto;
    margin-left: 2px;
  }
  /* Static, in-flow, and collapsed to zero height when closed. */
  .lang-mobile .lang-menu {
    position: static;
    min-width: 0;
    max-height: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: max-height 0.28s ease, opacity 0.2s ease, padding 0.28s ease,
      visibility 0.28s ease;
  }
  .lang-mobile.open .lang-menu {
    max-height: 620px;
    padding: 10px 0 2px;
    opacity: 1;
    visibility: visible;
  }
  .lang-mobile .lang-option {
    padding: 12px 10px;
    text-align: center;
    font-size: 14.5px;
    border-radius: 12px;
    background: rgba(14, 17, 22, 0.04);
  }
  .lang-mobile .lang-option.active {
    background: rgba(86, 118, 251, 0.12);
  }
}

/* Neutralize Google Translate's injected banner/tooltip chrome */
.goog-te-banner-frame,
.skiptranslate iframe,
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}
body {
  top: 0 !important;
}
.goog-tooltip,
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

/* =========================================================================
   BLOBS (shared gradient background system)
   ========================================================================= */
.blob-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
  z-index: 0;
}
/* ---- Geometry ----
   The three blobs are deliberately identical in size and evenly spaced, so no
   colour can dominate: blue sits a sixth of the way in, yellow dead centre,
   purple a sixth from the right, and the two outer ones hang off their edges by
   exactly the same amount.

   They are ellipses, not circles, and that is the part doing the real work.
   A circle takes its height from its width, so its vertical reach is set by how
   *wide* the screen is: the same blob that sits low on a tall window swallows a
   short, wide MacBook whole, and a narrow phone gets a thin strip. Splitting the
   two axes — width in `vw`, height in `vh` — pins the colour to the bottom third
   of the viewport and the full width of it on every screen, whatever its shape.
   Nobody reads these as circles; they're 90%-transparent gradients. ---- */
.hero-blob {
  position: absolute;
  bottom: 0;
  width: 78vw;
  height: 64vh;
  pointer-events: none;
  will-change: transform;
}
.hero-blob-1 {
  left: 15%;
  background-image: radial-gradient(50% 50% at 50% 50%, #5676fb, #5676fbfc, #5676fbf5, #5676fbeb, #5676fbd9, #5676fbc4, #5676fbab, #5676fb8f, #5676fb70, #5676fb54, #5676fb3b, #5676fb26, #5676fb14, #5676fb0a, #5676fb03, #5676fb00);
  animation: hero-blob-1 22s ease-in-out infinite alternate;
}
/* The one asymmetry, and it is vertical only: three blobs of identical height
   sitting on the same baseline give the colour a dead-flat horizontal edge. The
   centre one runs taller so the skyline curves. Left-to-right weight is
   untouched, which is the balance that matters. */
.hero-blob-2 {
  left: 50%;
  height: 74vh;
  background-image: radial-gradient(50% 50% at 50% 50%, #ffd23f, #ffd23ffc, #ffd23ff5, #ffd23feb, #ffd23fd9, #ffd23fc4, #ffd23fab, #ffd23f8f, #ffd23f70, #ffd23f54, #ffd23f3b, #ffd23f26, #ffd23f14, #ffd23f0a, #ffd23f03, #ffd23f00);
  animation: hero-blob-2 26s ease-in-out infinite alternate;
}
.hero-blob-3 {
  left: 85%;
  background-image: radial-gradient(50% 50% at 50% 50%, #c654ff, #c654fffc, #c654fff5, #c654ffeb, #c654ffd9, #c654ffc4, #c654ffab, #c654ff8f, #c654ff70, #c654ff54, #c654ff3b, #c654ff26, #c654ff14, #c654ff0a, #c654ff03, #c654ff00);
  animation: hero-blob-3 30s ease-in-out infinite alternate;
}
/* ---- Taller on a computer ----
   The heights above are the phone composition, which stays as it is. On a
   desktop or laptop the colour climbs higher up the hero: about 1.6× the
   height, so its reach goes from a third of the viewport to a half. The
   headline still clears it; the buttons now sit on the gradient rather than
   above it. Width and spacing are untouched, so the three stay balanced. */
@media (min-width: 768px) {
  .hero-blob { height: 100vh; }
  .hero-blob-2 { height: 116vh; }
}
/* The drift is mirrored between the outer two so the balance survives it: as
   the blue leans right the purple leans left by the same amount, and the yellow
   breathes on the spot. */
@keyframes hero-blob-1 {
  from { transform: translate(-50%, 50%) scale(1); }
  to { transform: translate(-44%, 44%) scale(1.07); }
}
@keyframes hero-blob-2 {
  from { transform: translate(-50%, 50%) scale(1.04); }
  to { transform: translate(-50%, 45%) scale(0.97); }
}
@keyframes hero-blob-3 {
  from { transform: translate(-50%, 50%) scale(1); }
  to { transform: translate(-56%, 44%) scale(1.07); }
}

/* Inner pages use a single calm tint (a different color per page) instead of
   the home page's multi-color blobs. */
body:not([data-page="home"]) {
  --page-tint: 86, 118, 251; /* blue (default) */
}
body[data-page="directory"] { --page-tint: 198, 84, 255; } /* purple */
body[data-page="sponsors"] { --page-tint: 255, 176, 0; }   /* amber */
body[data-page="sponsorship"] { --page-tint: 224, 17, 95; } /* ruby */
body[data-page="exhibit"] { --page-tint: 36, 170, 156; }   /* teal */
body[data-page="manual"] { --page-tint: 90, 110, 240; }    /* indigo */
body[data-page="hotel"] { --page-tint: 232, 122, 90; }     /* warm */
body[data-page="plan"] { --page-tint: 110, 150, 255; }     /* sky */
body[data-page="floor-plan"] { --page-tint: 32, 191, 158; }  /* mint */
body[data-page="notify"] { --page-tint: 86, 118, 251; }

body:not([data-page="home"]) .blob-stage .hero-blob {
  display: none;
}
body:not([data-page="home"]) .blob-stage {
  background:
    radial-gradient(56% 80% at 12% 108%, rgba(var(--page-tint), 0.34), transparent 62%),
    radial-gradient(46% 64% at 92% -8%, rgba(var(--page-tint), 0.16), transparent 60%),
    #fff;
}

.noise-filter {
  background-repeat: repeat;
  background-size: 100px;
  mix-blend-mode: overlay;
  opacity: 0.8;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("https://pw-renderer-production-c.squarecdn.com/608a765f1bc1d20d1f5c761775c9a8fadf17e65f/_svelte/noise.svg");
}

/* ---- Blob entrance ----
   The blobs pop up on first paint and then hand off to the endless drift.
   Only the blobs animate in — the hero content itself is untouched. `scale` is
   used here (not `transform`) so it composes with the drift keyframes and the
   cursor parallax on `translate` instead of overwriting them. ---- */
@keyframes blob-intro {
  from { scale: 0.28; opacity: 0; }
  60%  { opacity: 1; }
  to   { scale: 1; opacity: 1; }
}
html[data-intro="play"] .hero-blob-1 {
  animation: hero-blob-1 22s ease-in-out infinite alternate,
             blob-intro 1700ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both;
}
html[data-intro="play"] .hero-blob-2 {
  animation: hero-blob-2 26s ease-in-out infinite alternate,
             blob-intro 1900ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}
html[data-intro="play"] .hero-blob-3 {
  animation: hero-blob-3 30s ease-in-out infinite alternate,
             blob-intro 2100ms cubic-bezier(0.16, 1, 0.3, 1) 340ms both;
}
/* Hold the blobs back until the intro is armed, so there's no flash of the
   finished state on a slow first paint. */
html:not([data-intro]) .hero-blob { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-blob,
  #hero-sponsor-logos .logo-track {
    animation: none;
  }
  html[data-intro="done"] .hero-blob {
    opacity: 1;
    animation: none;
  }
}

/* ---- Phones and tablets: paint the blobs once, then leave them alone ----
   The blobs are the largest painted surfaces on the site. Promoting three of
   them to their own compositing layers (`will-change`), running endless
   transform keyframes on all three, and then blending a noise texture over the
   result pushes iOS Safari past its layer budget: it evicts a layer, repaints,
   and the blob blinks out and back. The purple one goes first because it's
   painted last, and the sponsor marquee — masked and filtered, so it is also
   expensive — loses tiles for the same reason. Touch devices get the identical
   picture, composed once and held still, which is what the drift settles to
   anyway. The transforms have to be restated: with `animation: none` the
   keyframed `transform` is gone, and without a replacement every blob would
   snap back to an untranslated position. ---- */
@media (pointer: coarse), (max-width: 767px) {
  .hero-blob {
    animation: none !important;
    will-change: auto;
  }
  .hero-blob,
  html:not([data-intro]) .hero-blob,
  html[data-intro="play"] .hero-blob {
    opacity: 1;
  }
  /* The `from` state of each drift, so the three stay evenly weighted. */
  .hero-blob-1 { transform: translate(-50%, 50%) scale(1); }
  .hero-blob-2 { transform: translate(-50%, 50%) scale(1.04); }
  .hero-blob-3 { transform: translate(-50%, 50%) scale(1); }

  /* The grain keeps its `overlay` blend. What made it expensive was blending
     over three layers that were repainting every frame; with those held still
     the hero composites once and stays composited. Flattening it to a normal
     blend instead would lay real grey over the white and dull the whole page. */
}

/* =========================================================================
   HERO (home)
   ========================================================================= */
#hero {
  padding: 120px 20px 150px;
  min-height: 100vh;
  /* dvh so the hero fills the screen as the mobile browser bars collapse,
     rather than leaving a band of page background under them. */
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  text-align: center;
  background-color: #fff;
  color: var(--ink);
  display: grid;
  align-content: center;
  justify-content: center;
  position: relative;
}
#hero .hero-header-content-container {
  position: relative;
  z-index: 10;
}
#hero .hero-background-video {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 0;
}
#hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  padding: 8px 16px;
  border-radius: 50rem;
  margin: 0 0 24px;
}
#hero h1 {
  font-size: clamp(40px, 8vw, 104px);
  line-height: 1.0;
  font-weight: 600;
  margin: 0;
}
#hero .hero-subtext {
  max-width: 560px;
  margin: 22px auto 0;
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.55;
  color: var(--muted);
}
#hero .hero-btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px auto 0;
  gap: 16px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  padding: 0 30px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  border-radius: 50rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary {
  background-color: var(--ink);
  color: #fff;
}
.btn-primary:hover {
  background-color: #2a2a2a;
  transform: translateY(-2px);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 1.5px rgba(14, 17, 22, 0.18);
  color: var(--ink);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}
/* The primary hero CTA carries a long label — stack the pair on small screens
   rather than letting it squeeze. */
@media (max-width: 560px) {
  #hero .hero-btn-group {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  #hero .hero-btn-group .btn {
    width: 100%;
    padding: 0 18px;
    font-size: 16px;
  }
}

/* ---- Countdown band ----
   A full-bleed white band right after the ACE story: four huge tabular numbers
   spanning the whole width, hairline rules between them, and a single notify
   CTA underneath. Two blobs from the hero palette anchor it, one per side, so
   the band belongs to the same world as the hero without repeating it: the
   blue rises from the bottom-left, the purple hangs from the top-right. Both
   are round radial gradients (not band-wide washes) and drift slowly, the
   same way the hero blobs do. ---- */
#countdown-band {
  position: relative;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  padding: clamp(64px, 9vw, 112px) 24px;
}
#countdown-band::before,
#countdown-band::after {
  content: "";
  position: absolute;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
/* Blue, bottom-left */
#countdown-band::before {
  width: min(70vw, 780px);
  left: 0;
  bottom: 0;
  background-image: radial-gradient(50% 50% at 50% 50%, #5676fb, #5676fbf0, #5676fbd4, #5676fbb0, #5676fb85, #5676fb5c, #5676fb38, #5676fb1c, #5676fb0a, #5676fb00);
  opacity: 0.42;
  animation: countdown-blob-blue 24s ease-in-out infinite alternate;
}
/* Pinkish purple, top-right */
#countdown-band::after {
  width: min(62vw, 680px);
  right: 0;
  top: 0;
  background-image: radial-gradient(50% 50% at 50% 50%, #c654ff, #c654fff0, #c654ffd4, #c654ffb0, #c654ff85, #c654ff5c, #c654ff38, #c654ff1c, #c654ff0a, #c654ff00);
  opacity: 0.34;
  animation: countdown-blob-purple 28s ease-in-out infinite alternate;
}
@keyframes countdown-blob-blue {
  from { transform: translate(-34%, 42%) scale(1); }
  to { transform: translate(-28%, 36%) scale(1.09); }
}
@keyframes countdown-blob-purple {
  from { transform: translate(32%, -40%) scale(1.05); }
  to { transform: translate(26%, -34%) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
  #countdown-band::before,
  #countdown-band::after { animation: none; }
}
.countdown-band-inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
}
.countdown-band-label {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(14, 17, 22, 0.5);
}
.countdown-band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  margin-top: clamp(22px, 3.5vw, 38px);
}
.cbd {
  position: relative;
  text-align: center;
  padding: 6px 8px 0;
}
.cbd + .cbd::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 64%;
  background: rgba(14, 17, 22, 0.12);
}
.cbd b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(52px, 10.5vw, 148px);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.cbd i {
  display: block;
  margin-top: clamp(8px, 1.6vw, 16px);
  font-style: normal;
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(14, 17, 22, 0.45);
}
.countdown-band-grid[data-state="live"] .cbd b {
  color: var(--blue);
}
.countdown-band-live {
  margin: 22px 0 0;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--blue);
}
.countdown-band-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: clamp(34px, 5vw, 54px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid rgba(14, 17, 22, 0.1);
}
.countdown-band-foot p {
  margin: 0;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 560px;
}
.countdown-band-btn {
  background: var(--ink);
  color: #fff;
  flex-shrink: 0;
}
.countdown-band-btn:hover {
  background: #2a2a2a;
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .countdown-band-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 26px;
  }
  /* In a 2×2 the third cell starts a new row — no hairline on its left. */
  .cbd:nth-child(3)::before { display: none; }
  .cbd b { font-size: clamp(56px, 17vw, 72px); }
  .countdown-band-foot {
    flex-direction: column;
    text-align: center;
  }
  .countdown-band-foot .btn { width: 100%; }
}
@media (max-width: 560px) {
  #hero { padding: 104px 16px 118px; }
}

/* ---- Laptop heights ----
   A 13–15" MacBook gives the hero roughly 790–870px of viewport. The headline
   keeps its size — it's the spacing around it that gives ground, so the
   centered stack and the sponsor marquee never crowd each other. */
@media (min-width: 861px) and (max-height: 900px) {
  #hero { padding: 96px 20px 140px; }
  #hero .hero-subtext { margin-top: 18px; }
  #hero .hero-btn-group { margin-top: 26px; }
  #hero .hero-btn-group .btn { height: 54px; font-size: 16px; }
  #hero-sponsor-logos { padding: 22px 0 calc(22px + env(safe-area-inset-bottom)); }
  #hero-sponsor-logos .logo-track img { height: 32px; margin-right: 56px; }
}

/* Hero sponsor marquee */
#hero-sponsor-logos {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  padding: 30px 0 calc(30px + env(safe-area-inset-bottom));
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
#hero-sponsor-logos .logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: scroll-logos 30s linear infinite;
}
/* Every mark is drawn on the same 140px-tall canvas, so a shared height is
   what makes them optically consistent — each one then takes whatever width
   its own artwork needs. `width: auto` is load-bearing: these are flex items,
   so without it the `width` attribute on the <img> becomes the used width and
   every logo gets stretched to the same box. The attributes are still there
   for the aspect ratio, which reserves the right space before they load. */
#hero-sponsor-logos .logo-track img {
  height: 38px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  filter: brightness(0);
  opacity: 0.62;
  margin-right: 64px;
}
@keyframes scroll-logos {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* The marquee is a masked, filtered, permanently animating strip — on a phone
   that is enough on its own to get its tiles dropped mid-scroll, which reads as
   logos that never appear or freeze in place. Pinning it to one promoted layer
   (and keeping the strip out of the hero's own repaints with `contain`) means
   the compositor rasterises it once and then only slides it. */
#hero-sponsor-logos {
  contain: paint;
}
#hero-sponsor-logos .logo-track {
  will-change: transform;
  backface-visibility: hidden;
}

/* =========================================================================
   ACE STORY (scroll-driven video) — home
   ========================================================================= */
#ace-story {
  position: relative;
  height: 420vh;
  background: #000;
}
#ace-story .ace-story-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  /* svh, not vh or dvh: vh on mobile is the *large* viewport, so the pinned
     panel runs taller than the visible area and its lower half — including
     most of the video — sits behind the browser chrome. svh is the height
     that's always on screen, and unlike dvh it doesn't resize mid-scroll. */
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.ace-story-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  transform-origin: center center;
  will-change: transform;
}
.ace-story-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ace-story-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.6));
}
.ace-story-panels {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.ace-story-panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  color: #fff;
  padding: 0 20px;
}
.ace-story-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 18px;
  opacity: 0.85;
}
.ace-story-heading {
  font-weight: 600;
  font-size: clamp(40px, 8vw, 104px);
  line-height: 1.02;
  margin: 0;
}
/* Longer caption lines step down a size so they still hold two lines */
.ace-story-heading.long {
  font-size: clamp(34px, 6.4vw, 82px);
}
.ace-story-sub {
  margin: 22px auto 0;
  max-width: 540px;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.5;
  opacity: 0.88;
}

/* =========================================================================
   WHY ATTEND ACE — TwitchCon-style grid (home)
   ========================================================================= */
#why-attend {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
}
#why-attend .blob-stage {
  opacity: 0.5;
}
.things-head {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}
.things-head h2 {
  font-size: clamp(40px, 7vw, 84px);
  line-height: 1;
  margin: 0;
}
.things-head p {
  margin: 20px auto 0;
  font-size: clamp(16px, 2.2vw, 19px);
  color: var(--muted);
  line-height: 1.55;
}
/* Small label that opens the numbered rows */
.things-subhead {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 auto;
  max-width: 720px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.things-subhead::before,
.things-subhead::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---- Split-reveal section headline ----
   Each word sits in its own clipping box so the inner span can slide up from
   below it. The box has to be taller than the line box or it shears the tops
   and tails off the letters — ascenders and the odd descender overshoot the em
   in any display face. The padding opens the mask up and the matching negative
   margin takes that space back out of the layout, so the headline still sets on
   its intended leading. ---- */
.adventure-line .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.18em 0.04em 0.22em;
  margin: -0.18em -0.04em -0.22em;
}
.adventure-line .word > span {
  display: inline-block;
}

/* Alternating photo / text storytelling rows */
.thing-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  padding: clamp(40px, 7vw, 88px) 0;
}
.thing-row.reverse .thing-media {
  order: 2;
}
.thing-media {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 70px rgba(25, 35, 90, 0.18);
  background: #e9edf6;
}
.thing-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.thing-row:hover .thing-media img {
  transform: scale(1.04);
}
.thing-num {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blue);
  margin-bottom: 14px;
}
.thing-text h3 {
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.04;
  margin: 0 0 16px;
}
.thing-text p {
  margin: 0;
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 460px;
}
@media (max-width: 760px) {
  .thing-row {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 44px 0;
  }
  .thing-row.reverse .thing-media {
    order: 0;
  }
}

/* =========================================================================
   EXHIBITOR ADVISORY — attendee-list disclaimer
   ========================================================================= */
#advisory {
  padding: 0 0 clamp(56px, 8vw, 96px);
}
/* A quiet, dismissible note — reads as an aside, not a warning banner. */
.advisory-note {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(14, 17, 22, 0.035);
  border: 1px solid rgba(14, 17, 22, 0.09);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.advisory-note.is-dismissed {
  opacity: 0;
  transform: translateY(-6px);
}
.advisory-note-icon {
  display: flex;
  padding-top: 2px;
  color: rgba(14, 17, 22, 0.4);
}
.advisory-note p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}
.advisory-note strong {
  color: var(--ink);
  font-weight: 600;
}
.advisory-note a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(14, 17, 22, 0.25);
}
.advisory-note a:hover { border-bottom-color: var(--ink); }
.advisory-note-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(14, 17, 22, 0.4);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.advisory-note-close:hover {
  background: rgba(14, 17, 22, 0.08);
  color: var(--ink);
}
@media (max-width: 620px) {
  .advisory-note {
    grid-template-columns: auto 1fr;
    padding: 16px;
  }
  .advisory-note-close {
    position: absolute;
    top: 8px;
    right: 8px;
  }
  .advisory-note p { padding-right: 26px; }
}

/* =========================================================================
   GET INVOLVED — CES-style cards
   ========================================================================= */
#take-part {
  padding: clamp(72px, 10vw, 120px) 0;
}
.take-part-head {
  max-width: 640px;
  margin: 0 0 44px;
}
.take-part-head h2 {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.02;
  margin: 0;
}
.take-part-head p {
  margin: 18px 0 0;
  font-size: clamp(16px, 2.1vw, 19px);
  color: var(--muted);
  line-height: 1.55;
}
.take-part-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.part-card {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(25, 35, 90, 0.08);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.part-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px rgba(25, 35, 90, 0.18);
}
.part-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e9edf6;
}
.part-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.part-card:hover .part-media img {
  transform: scale(1.05);
}
.part-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 28px;
}
.part-body h3 {
  margin: 0;
  font-size: 26px;
}
.part-body p {
  margin: 10px 0 18px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}
.part-body .part-lead {
  margin: 12px 0 6px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.part-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: auto;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}
/* The sponsor card carries two links stacked at the foot of the body. The row
   owns the `margin-top: auto` in that case, so both stay pinned to the bottom
   and line up with the single links on the cards either side. */
.part-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: auto;
}
.part-links .part-link { margin-top: 0; }
.part-link-quiet {
  font-size: 15px;
  color: var(--muted);
}
.part-link-quiet:hover { color: var(--blue); }
.part-arrow {
  transition: transform 0.25s ease;
}
.part-card:hover .part-link > .part-arrow,
.part-link:hover > .part-arrow {
  transform: translateX(5px);
}
@media (max-width: 880px) {
  .take-part-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* =========================================================================
   FAQ — accordion
   ========================================================================= */
#faq {
  padding: clamp(64px, 9vw, 112px) 0;
  border-top: 1px solid var(--line);
}
.faq-head {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
}
.faq-head h2 {
  margin: 0;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.02;
}
.faq-head p {
  margin: 18px 0 0;
  font-size: clamp(16px, 2.1vw, 18px);
  line-height: 1.55;
  color: var(--muted);
}
.faq-list {
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 4px;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.faq-q:hover {
  color: var(--blue);
}
.faq-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}
.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  color: var(--blue);
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.open .faq-a {
  grid-template-rows: 1fr;
}
.faq-a-inner {
  overflow: hidden;
}
.faq-a-inner p {
  margin: 0;
  padding: 0 56px 26px 4px;
  font-size: clamp(15.5px, 2vw, 17px);
  line-height: 1.65;
  color: var(--muted);
}
.faq-head p a,
.faq-a-inner a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(86, 118, 251, 0.35);
  transition: border-color 0.2s ease;
}
.faq-head p a:hover,
.faq-a-inner a:hover {
  border-bottom-color: var(--blue);
}
@media (max-width: 600px) {
  .faq-a-inner p { padding-right: 8px; }
}

/* =========================================================================
   HOME DISCLAIMER NOTICE
   ========================================================================= */
#home-notice {
  padding: 0 0 clamp(64px, 9vw, 100px);
}
#home-notice .callout {
  max-width: 860px;
  margin: 0 auto;
}

/* =========================================================================
   GENERIC PAGE HERO (subpages)
   ========================================================================= */
.page-hero {
  position: relative;
  padding: 168px 0 84px;
  overflow: hidden;
  text-align: center;
  background: #fff;
}
.page-hero .blob-stage {
  opacity: 0.55;
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
}
.page-hero .page-meta {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.7);
  padding: 8px 16px;
  border-radius: 50rem;
  margin-bottom: 20px;
}
.page-hero h1 {
  font-size: clamp(40px, 7vw, 80px);
  line-height: 1.02;
  margin: 0;
}
.page-hero p.page-lead {
  margin: 20px auto 0;
  max-width: 620px;
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.55;
  color: var(--muted);
}

/* Page hero with a photo beside the big text (CES-style) */
.page-hero.has-media {
  text-align: left;
}
.page-hero.has-media .page-hero-inner {
  max-width: var(--maxw);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.page-hero.has-media p.page-lead {
  margin-left: 0;
  margin-right: 0;
}
.page-hero-media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  box-shadow: 0 30px 70px rgba(25, 35, 90, 0.18);
  background: #e9edf6;
}
.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 820px) {
  .page-hero.has-media .page-hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .page-hero-media {
    aspect-ratio: 16 / 9;
  }
}

/* generic content section */
.page-section {
  padding: 72px 0;
}
.page-section.tight {
  padding: 48px 0;
}
.page-section h2 {
  font-size: clamp(30px, 4.5vw, 46px);
  margin: 0;
  line-height: 1.05;
}
.page-section .section-intro {
  max-width: 640px;
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
}
.section-center {
  text-align: center;
}
.section-center .section-intro {
  margin-left: auto;
  margin-right: auto;
}

/* card primitive */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(25, 35, 90, 0.06);
}

/* info grid */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 36px;
}
.info-card {
  padding: 28px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 40px rgba(25, 35, 90, 0.06);
}
.info-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
}
.info-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 15.5px;
}
.info-card .info-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(86, 118, 251, 0.1);
  color: var(--blue);
  margin-bottom: 16px;
  font-size: 22px;
}

/* =========================================================================
   AGENDA
   ========================================================================= */

/* Live Pheedloop sessions embed (agenda.html). Fixed-height scroll box —
   the iframe is cross-origin, so it can't tell us how tall it wants to be. */
.pheedloop-iframe {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  height: 600px;
  width: 100%;
  border-radius: 18px;
  background: rgba(14, 17, 22, 0.03);
}
.pheedloop-iframe iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
@media (max-width: 700px) {
  /* Sessions stack on narrow screens, so give the list more room before
     it starts scrolling inside the box. */
  .pheedloop-iframe { height: 760px; border-radius: 14px; }
}

.day-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: 50rem;
  background: rgba(14, 17, 22, 0.05);
  margin: 0 auto 44px;
}
.day-tab {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--muted);
  padding: 12px 24px;
  border-radius: 50rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.day-tab.active {
  background: var(--ink);
  color: #fff;
}
.day-panel {
  display: none;
}
.day-panel.active {
  display: block;
}
.agenda-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 860px;
  margin: 0 auto;
}
.agenda-item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding: 24px 26px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 34px rgba(25, 35, 90, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.agenda-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(25, 35, 90, 0.12);
}
.agenda-time {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--blue);
}
.agenda-time span {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
.agenda-body h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
}
.agenda-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.agenda-tag {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--purple);
  background: rgba(198, 84, 255, 0.1);
  padding: 4px 10px;
  border-radius: 50rem;
}
@media (max-width: 600px) {
  .agenda-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* =========================================================================
   SEARCH BAR (directory / sponsors / manual)
   ========================================================================= */
.search-bar {
  position: relative;
  max-width: 520px;
  margin: 0 auto 44px;
}
.search-bar input {
  width: 100%;
  height: 56px;
  padding: 0 20px 0 52px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50rem;
  box-shadow: 0 10px 34px rgba(25, 35, 90, 0.07);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-bar input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(86, 118, 251, 0.14);
}
.search-bar .search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search-empty {
  display: none;
  text-align: center;
  color: var(--muted);
  font-size: 16px;
  padding: 40px 0;
}

/* =========================================================================
   DIRECTORY / SPONSOR LOGO GRID
   ========================================================================= */
.tier-group {
  margin-bottom: 56px;
}
.tier-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
}
.tier-head h2 {
  font-size: 22px;
  margin: 0;
}
.tier-badge {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.tier-badge.ruby { background: #e0115f; }
.tier-badge.platinum { background: #9aa7b5; }
.tier-badge.gold { background: #e6b422; }
.tier-badge.silver { background: #b8c0c8; }
.tier-badge.bronze { background: #cd7f32; }
.tier-badge.partner { background: var(--blue); }
.tier-badge.support { background: var(--purple); }
.tier-line {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}
/* Sponsors read as a single centred column running down the page, tier by
   tier, rather than a wide grid. */
body[data-page="sponsors"] .tier-group {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
body[data-page="sponsors"] .tier-head {
  justify-content: center;
}
body[data-page="sponsors"] .tier-line { display: none; }
body[data-page="sponsors"] .logo-grid {
  grid-template-columns: 1fr;
  gap: 14px;
  justify-items: stretch;
}
body[data-page="sponsors"] .logo-card {
  flex-direction: row;
  justify-content: flex-start;
  gap: 22px;
  padding: 20px 26px;
  text-align: left;
  min-height: 0;
}
body[data-page="sponsors"] .logo-card .logo-frame {
  height: 48px;
  width: 120px;
  flex: 0 0 auto;
  justify-content: center;
}
body[data-page="sponsors"] .logo-card img {
  max-height: 48px;
  max-width: 120px;
}
body[data-page="sponsors"] .logo-card .logo-loc { margin-top: 2px; }
body[data-page="sponsors"] .logo-card.logo-textonly {
  min-height: 0;
  justify-content: center;
}
body[data-page="sponsors"] .logo-card.logo-textonly .logo-name {
  font-size: 18px;
}
@media (max-width: 560px) {
  body[data-page="sponsors"] .logo-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 22px 18px;
  }
  body[data-page="sponsors"] .logo-card .logo-frame { width: auto; }
}
.logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px 20px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(25, 35, 90, 0.05);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.logo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(25, 35, 90, 0.13);
}
.logo-card .logo-frame {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-card img {
  max-height: 64px;
  max-width: 140px;
  object-fit: contain;
}
/* The local sponsor marks are light-on-transparent and vanish against the
   white cards — tint them solid black. Only those carry `.logo-tint`
   (script.js sets it): a Pheedloop logo drawn on an opaque background would
   turn into a solid black rectangle under `brightness(0)`, so remote logos
   keep their own colour and are given a hairline frame instead. */
body[data-page="sponsors"] .logo-card img {
  transition: opacity 0.2s ease;
}
body[data-page="sponsors"] .logo-card img.logo-tint {
  filter: grayscale(1) brightness(0);
  opacity: 0.82;
}
body[data-page="sponsors"] .logo-card:hover img.logo-tint {
  opacity: 1;
}
.logo-card .logo-name {
  font-weight: 600;
  font-size: 15px;
}
.logo-card .logo-loc {
  font-size: 12.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: -8px;
}
a.logo-card {
  text-decoration: none;
  color: inherit;
}
.directory-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 40px 0;
}
.directory-count {
  margin: 0 0 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.directory-count strong {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
}
.logo-card.logo-textonly {
  min-height: 132px;
}
.logo-card.logo-textonly .logo-name {
  font-family: var(--font-display);
  font-size: 19px;
}

/* =========================================================================
   PRICING (exhibit)
   ========================================================================= */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.price-card {
  position: relative;
  padding: 34px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 16px 50px rgba(25, 35, 90, 0.08);
  overflow: hidden;
}
.price-card.featured {
  border-color: rgba(86, 118, 251, 0.4);
  box-shadow: 0 24px 60px rgba(86, 118, 251, 0.18);
}
.price-card .price-glow {
  position: absolute;
  inset: 0 0 auto 0;
  height: 120px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(86, 118, 251, 0.16), transparent 70%);
  pointer-events: none;
}
.price-tier {
  position: relative;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 12px;
}
.price-card h3 {
  position: relative;
  margin: 0;
  font-size: 24px;
}
.price-amount {
  position: relative;
  margin: 14px 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 42px;
}
.price-amount span {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
}
.price-list {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.price-list li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(14, 17, 22, 0.78);
}
.price-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--blue);
}
.price-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 760px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* CICC membership prompt under the price cards */
.price-join {
  margin: 30px auto 0;
  max-width: 560px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.price-join a {
  color: rgb(var(--page-tint));
  font-weight: 600;
}

/* =========================================================================
   FLOOR PLAN
   The page is the plan and nothing else — an embedded PDF plus a link to
   open it properly. No 3D model, no per-booth panels.
   ========================================================================= */
.floor-plan-frame {
  margin: 0;
  padding: 7px;
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.55));
  box-shadow:
    inset 0 0 0 1px rgba(11, 13, 18, 0.07),
    0 26px 60px rgba(25, 35, 90, 0.16);
}
.floor-plan-frame iframe {
  display: block;
  width: 100%;
  /* Roughly the plan's own proportions, so the embed doesn't letterbox. */
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 20px;
  background: #f4f5f7;
}
.floor-plan-actions {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}
@media (max-width: 760px) {
  .floor-plan-frame { padding: 5px; border-radius: 20px; }
  .floor-plan-frame iframe { aspect-ratio: 3 / 4; border-radius: 16px; }
  .floor-plan-actions .btn { width: 100%; }
}

/* "what's included" list */
.includes-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 40px;
}
.includes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.includes-list li {
  position: relative;
  padding-left: 32px;
  font-size: 16px;
  line-height: 1.5;
}
.includes-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.includes-media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(25, 35, 90, 0.16);
}
@media (max-width: 800px) {
  .includes-grid { grid-template-columns: 1fr; }
}

/* deadlines / timeline */
.timeline {
  display: grid;
  gap: 0;
  margin-top: 36px;
  max-width: 720px;
}
.timeline-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.timeline-item:last-child {
  border-bottom: 1px solid var(--line);
}
.timeline-date {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--blue);
  font-size: 15px;
}
.timeline-body {
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(14, 17, 22, 0.8);
}
.timeline-body strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 2px;
}

/* =========================================================================
   FORMS
   ========================================================================= */
.form-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(25, 35, 90, 0.1);
}
.form-row {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}
.form-row.two {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-row.two > div {
  display: grid;
  gap: 8px;
}
.form-row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.form-row label .req {
  color: #e0115f;
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-row textarea {
  min-height: 120px;
  resize: vertical;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(86, 118, 251, 0.14);
}
.form-hint {
  font-size: 13px;
  color: var(--muted);
}
.form-fieldset {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 26px;
}
.form-fieldset legend {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  padding: 0 10px;
}
.form-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
.form-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.form-error {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(224, 17, 95, 0.07);
  border: 1px solid rgba(224, 17, 95, 0.25);
  font-size: 14px;
  line-height: 1.5;
  color: #a10d45;
}
.form-error a {
  color: inherit;
  font-weight: 600;
}
/* Flag invalid fields only once the visitor has actually touched them —
   :user-invalid never fires on a pristine form the way :invalid does. */
.form-row input:user-invalid,
.form-row select:user-invalid,
.form-row textarea:user-invalid {
  border-color: rgba(224, 17, 95, 0.55);
}
.form-row input:user-invalid:focus {
  box-shadow: 0 0 0 4px rgba(224, 17, 95, 0.12);
}
@media (max-width: 560px) {
  .form-card { padding: 26px; }
  .form-row.two { grid-template-columns: 1fr; }
}

/* ---- Post-submit confirmation panel ---- */
.form-success {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 52px);
  border-radius: 24px;
  text-align: center;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(86, 118, 251, 0.09), transparent 62%),
    #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(25, 35, 90, 0.1);
  outline: none;
}
.form-success-icon {
  display: inline-grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: rgba(86, 118, 251, 0.1);
  color: var(--blue);
}
.form-success h2 {
  margin: 0;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.1;
}
.form-success > p {
  margin: 16px auto 0;
  max-width: 460px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
}
.form-success-fallback {
  margin-top: 22px !important;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14.5px !important;
}
.form-success-fallback a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(86, 118, 251, 0.35);
}
.copy-btn {
  margin-left: 8px;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  background: rgba(14, 17, 22, 0.05);
  border: 1px solid var(--line);
  border-radius: 50rem;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.copy-btn:hover {
  background: rgba(14, 17, 22, 0.1);
}
.form-success-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* ---- Grouped form sections (replaces boxed fieldsets) ---- */
.form-block + .form-block {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.form-block-title {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================================================================
   HOTEL
   ========================================================================= */
.stay-lead {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.stay-lead-text h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
}
.stay-lead-text p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}
.rate-card {
  padding: 32px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(25, 35, 90, 0.09);
}
.rate-card-tag {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}
.rate-card-amount {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 6vw, 60px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.rate-card-amount span {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}
.rate-card-rows {
  margin: 0;
  display: grid;
}
.rate-card-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.rate-card-rows dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 0 0 auto;
}
.rate-card-rows dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  text-align: right;
}
.rate-code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(86, 118, 251, 0.1);
  color: var(--blue);
}
.rate-card-btn {
  width: 100%;
  margin-top: 26px;
}

/* Numbered steps (hotel booking, exhibit application) */
.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin-top: 36px;
}
.step {
  padding-top: 24px;
  border-top: 2px solid var(--ink);
}
.step-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--blue);
  margin-bottom: 12px;
}
.step h3 {
  margin: 0 0 10px;
  font-size: 21px;
}
.step p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}
.step-detail {
  margin-top: 14px !important;
  font-weight: 600;
  color: var(--ink) !important;
}
.step-detail a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

/* Three-up fact columns */
.fact-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 4vw, 48px);
  margin-top: 36px;
}
.fact-col h3 {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
}
.fact-col p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
}
.fact-col a { color: var(--blue); text-decoration: none; }
@media (max-width: 860px) {
  .stay-lead { grid-template-columns: 1fr; }
}

/* Manual contents list */
.manual-contents {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 0 clamp(28px, 5vw, 64px);
}
.manual-contents li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16.5px;
  color: var(--ink);
}
.manual-contents-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--blue);
  flex: 0 0 auto;
}

/* =========================================================================
   NOTIFY PAGE
   ========================================================================= */
/* The two blobs match the countdown band people arrive from: blue
   bottom-left, pinkish purple top-right. */
.notify-hero {
  position: relative;
  overflow: hidden;
  padding: 164px 24px 64px;
  text-align: center;
  background: #fff;
}
.notify-hero .blob-stage { opacity: 0.72; }
body[data-page="notify"] .blob-stage {
  background:
    radial-gradient(54% 78% at 8% 104%, rgba(86, 118, 251, 0.34), transparent 62%),
    radial-gradient(48% 68% at 94% -8%, rgba(198, 84, 255, 0.26), transparent 60%),
    #fff;
}
.notify-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}
.notify-hero h1 {
  margin: 0;
  font-size: clamp(38px, 6.4vw, 76px);
  line-height: 1.02;
}
.notify-hero .page-lead {
  margin: 22px auto 0;
  max-width: 600px;
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.6;
  color: var(--muted);
}
/* Show details as quiet pills under the lead, so the page carries the facts
   without a sidebar to carry them in. */
.notify-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
}
.notify-facts li {
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 0 0 1px rgba(11, 13, 18, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(14, 17, 22, 0.72);
  white-space: nowrap;
}

/* One centered column: the form is the page. No card around it, so the
   fields sit straight on the page and nothing competes with the submit
   button. Everything else stays quiet and short. */
.notify-section {
  position: relative;
  z-index: 3;
  padding: clamp(48px, 6vw, 72px) 0 clamp(64px, 9vw, 110px);
}
.notify-shell {
  max-width: 560px;
  margin: 0 auto;
}
.notify-shell .form-card,
.notify-shell .form-success {
  max-width: none;
}
/* Strip the card chrome: no panel, no border, no shadow. */
.notify-shell .form-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.notify-submit {
  width: 100%;
  gap: 10px;
}
.notify-submit svg {
  transition: transform 0.2s ease;
}
.notify-submit:hover svg {
  transform: translateX(3px);
}
.notify-note {
  text-align: center;
}

/* Honeypot: parked off-screen, never display:none so lazy bots still see it. */
.nf-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* What the list gets. No panel either: a hairline rule and a quiet label,
   so the whole page reads as one column rather than stacked boxes. */
.notify-perks {
  margin: 34px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
}
.notify-perks-title {
  margin: 0 0 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(14, 17, 22, 0.5);
}
.notify-perks ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 15px;
}
.notify-perks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}
.notify-perk-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
}
.notify-perks strong {
  display: block;
  font-size: 15px;
  margin-bottom: 2px;
}
.notify-perks li div {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
/* Once the signup lands, the perks panel has done its job. Browsers without
   :has() just leave it in place, which is harmless. */
.notify-shell:has(.form-success:not([hidden])) .notify-perks {
  display: none;
}
@media (max-width: 700px) {
  .notify-hero { padding: 140px 20px 48px; }
  .notify-facts { gap: 8px; margin-top: 24px; }
  .notify-facts li { font-size: 12.5px; padding: 7px 13px; }
}

/* callout / note bar */
.callout {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 16px;
  background: rgba(86, 118, 251, 0.06);
  border: 1px solid rgba(86, 118, 251, 0.18);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(14, 17, 22, 0.82);
}
.callout.warn {
  background: rgba(255, 210, 63, 0.12);
  border-color: rgba(230, 180, 34, 0.35);
}
.callout strong {
  color: var(--ink);
}
.callout-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  color: var(--blue);
}
.callout.warn .callout-icon {
  color: #c79400;
}

/* Inline list/feature icons (replaces emoji) */
.list-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(86, 118, 251, 0.1);
  color: var(--blue);
}

/* =========================================================================
   SPONSORSHIP OPPORTUNITIES (sponsorship.html)
   The sponsorship sheet, laid out as a page: six levels as cards, the shared
   benefits as a grid, the one-off packages as a table, and the source PDF
   underneath it all.
   ========================================================================= */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 24px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(25, 35, 90, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tier-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 54px rgba(25, 35, 90, 0.12);
}
/* A hairline of the level's own colour along the top edge, so the six cards
   are told apart at a glance without colouring the whole card in. */
.tier-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  right: 26px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--tier-color, var(--line));
}
.tier-rank {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.tier-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tier-color, var(--line));
  flex: 0 0 auto;
}
.tier-diamond { --tier-color: #57c7dd; }
.tier-ruby { --tier-color: #e0115f; }
.tier-platinum { --tier-color: #9aa7b5; }
.tier-gold { --tier-color: #e6b422; }
.tier-silver { --tier-color: #b8c0c8; }
.tier-bronze { --tier-color: #cd7f32; }

.tier-price {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.tier-specs {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}
.tier-specs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  font-size: 14.5px;
}
.tier-specs li span { color: var(--muted); }
.tier-specs li b {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .tier-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .tier-grid { grid-template-columns: 1fr; gap: 14px; }
  .tier-card { padding: 24px 22px 20px; }
}

/* ---- What every package covers ---- */
/* ---- What a sponsorship covers ----
   A ticked list, deliberately not cards: this section now runs directly above
   the six level cards, and two card grids back to back read as one repeated
   block. A flat two-column list with hairline rules reads as the preamble it
   is, and it stays legible at eleven items where cards get bulky. */
.covers-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 48px;
}
.covers-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
/* The first item in each column starts the run, so neither gets a stray rule
   above it and both columns line up at the top. */
.covers-list li:nth-child(1),
.covers-list li:nth-child(2) {
  border-top: none;
  padding-top: 0;
}
.covers-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(var(--page-tint), 0.12);
  color: rgb(var(--page-tint));
}
.covers-list h3 {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.3;
}
.covers-list p {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
@media (max-width: 760px) {
  .covers-list {
    grid-template-columns: 1fr;
    margin-top: 30px;
  }
  .covers-list li {
    padding: 16px 0;
    border-top: 1px solid var(--line);
  }
  /* Single column now, so only the very first item leads the run. */
  .covers-list li:nth-child(2) {
    border-top: 1px solid var(--line);
    padding-top: 16px;
  }
}

/* ---- The one-off packages ----
   The table scrolls inside its own box on narrow screens so the page body
   never picks up a horizontal scrollbar. */
.sponsor-table-wrap {
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  background: #fff;
  box-shadow: 0 10px 30px rgba(25, 35, 90, 0.05);
  -webkit-overflow-scrolling: touch;
}
.sponsor-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}
.sponsor-table th,
.sponsor-table td {
  padding: 18px 22px;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.5;
}
.sponsor-table thead th {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.sponsor-table tbody tr + tr { border-top: 1px solid var(--line); }
.sponsor-table tbody th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--ink);
  width: 24%;
}
.sponsor-table td { color: var(--muted); }
.sponsor-table .st-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
  white-space: nowrap;
}
.st-tag {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 50rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--muted);
  background: rgba(14, 17, 22, 0.05);
}
.st-tag.st-exclusive {
  color: #8a2f00;
  background: rgba(230, 180, 34, 0.18);
}

/* ---- Custom sponsorship ---- */
.custom-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    radial-gradient(72% 130% at 6% 0%, rgba(var(--page-tint), 0.1), transparent 62%),
    radial-gradient(60% 120% at 96% 100%, rgba(198, 84, 255, 0.08), transparent 60%),
    #fff;
  box-shadow: 0 18px 50px rgba(25, 35, 90, 0.07);
}
.custom-panel-body {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 60px) clamp(22px, 4vw, 56px);
  text-align: center;
}
.custom-panel-body h2 {
  margin: 12px 0 0;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.06;
}
.custom-panel-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
@media (max-width: 600px) {
  .sponsor-table th,
  .sponsor-table td { padding: 16px 18px; }
  .custom-panel-actions { width: 100%; }
  .custom-panel-actions .btn { width: 100%; }
}

/* =========================================================================
   PDF VIEWER (exhibitor manual)
   ========================================================================= */
.pdf-frame {
  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 560px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(25, 35, 90, 0.12);
  background: #f4f5f7;
}
.pdf-frame embed,
.pdf-frame iframe,
.pdf-frame object {
  width: 100%;
  height: 100%;
  border: none;
}
.pdf-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

/* split layout (hotel / venue / manual intro) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.split.reverse .split-media {
  order: 2;
}
.split-media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(25, 35, 90, 0.14);
}
.split-body h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 16px;
}
.split-body p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 14px;
}
.detail-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 14px;
}
.detail-list li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  font-size: 15.5px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.detail-list li strong {
  color: var(--muted);
  font-weight: 600;
}
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split.reverse .split-media { order: 0; }
}

/* CTA band */
.cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 96px 24px;
  background: #fff;
}
.cta-band .blob-stage { opacity: 0.5; }
.cta-band-inner {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin: 0 auto;
}
.cta-band h2 {
  font-size: clamp(32px, 5vw, 56px);
  margin: 0;
  line-height: 1.02;
}
.cta-band p {
  margin: 18px auto 30px;
  font-size: 18px;
  color: var(--muted);
  line-height: 1.55;
}
.cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
/* ---- Explore: map ---- */
.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(25, 35, 90, 0.08);
  aspect-ratio: 16 / 8;
  background: #e9edf6;
}
.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.map-meta h3 {
  margin: 0 0 6px;
  font-size: 22px;
}
.map-meta p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

/* =========================================================================
   DISCOVER — scroll story (recap video bg + popping photos)
   ========================================================================= */
#discover-story {
  position: relative;
  height: 440vh;
  background: #000;
}
.ds-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.ds-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ds-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ds-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.7));
}
.ds-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.ds-beat {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
  color: #fff;
  padding: 90px 24px 24px;
}
.ds-beat:not([data-beat="0"]) {
  opacity: 0;
}
.ds-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
  margin: 0;
}
.ds-headline {
  font-family: var(--font-display);
  font-size: clamp(44px, 9vw, 120px);
  line-height: 1;
  margin: 0;
}
.ds-text {
  font-family: var(--font-display);
  font-size: clamp(30px, 5.5vw, 68px);
  line-height: 1.05;
  margin: 0;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.ds-photos {
  display: flex;
  gap: clamp(12px, 2vw, 24px);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1000px;
}
.ds-photos img {
  width: clamp(120px, 22vw, 280px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
}

/* DISCOVER finale */
#discover-finale {
  position: relative;
  min-height: 92vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  padding: 120px 24px;
  text-align: center;
}
.finale-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.finale-line {
  font-family: var(--font-display);
  font-size: clamp(48px, 11vw, 160px);
  line-height: 0.98;
  margin: 0;
  letter-spacing: -0.02em;
}
.finale-sub {
  margin: 0;
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 500;
  color: var(--muted);
}
.finale-btn {
  margin-top: 14px;
}

/* Alternate blob palette (re-enable multi-color blobs on an inner page) */
.blob-stage.blob-alt {
  background: #fff;
}
.blob-stage.blob-alt .hero-blob {
  display: block;
}
.blob-alt .hero-blob-1 {
  background-image: radial-gradient(50% 50% at 50% 50%, #6366f1, #6366f1fc, #6366f1f5, #6366f1eb, #6366f1d9, #6366f1c4, #6366f1ab, #6366f18f, #6366f170, #6366f154, #6366f13b, #6366f126, #6366f114, #6366f10a, #6366f103, #6366f100);
}
.blob-alt .hero-blob-2 {
  background-image: radial-gradient(50% 50% at 50% 50%, #2dd4bf, #2dd4bffc, #2dd4bff5, #2dd4bfeb, #2dd4bfd9, #2dd4bfc4, #2dd4bfab, #2dd4bf8f, #2dd4bf70, #2dd4bf54, #2dd4bf3b, #2dd4bf26, #2dd4bf14, #2dd4bf0a, #2dd4bf03, #2dd4bf00);
}
.blob-alt .hero-blob-3 {
  background-image: radial-gradient(50% 50% at 50% 50%, #f472b6, #f472b6fc, #f472b6f5, #f472b6eb, #f472b6d9, #f472b6c4, #f472b6ab, #f472b68f, #f472b670, #f472b654, #f472b63b, #f472b626, #f472b614, #f472b60a, #f472b603, #f472b600);
}

/* ---- Discover: videos + gallery ---- */
.video-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 28px;
}
.video-feature {
  margin: 0;
}
.video-feature video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(25, 35, 90, 0.16);
  background: #000;
}
.video-feature figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}
.video-caption {
  margin: 18px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}
@media (max-width: 760px) {
  .video-row { grid-template-columns: 1fr; }
}
.gallery-grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 14px;
}
.gallery-item {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #e9edf6;
}
.gallery-item.wide { grid-column: span 2; }
.gallery-item.tall { grid-row: span 2; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-item:hover img {
  transform: scale(1.05);
}
@media (max-width: 860px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; }
  .gallery-item.wide { grid-column: span 2; }
  .gallery-item.tall { grid-row: span 1; }
}

/* =========================================================================
   DISCOVER — gallery between the scroll story and the finale
   ========================================================================= */
#discover-gallery {
  position: relative;
  z-index: 2;
  padding: clamp(72px, 10vw, 128px) 0;
  background: #fff;
}
.ds-gallery-head {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}
.ds-gallery-head h2 {
  margin: 0;
  font-size: clamp(32px, 5.4vw, 62px);
  line-height: 1.02;
}
.ds-gallery-head p {
  margin: 20px auto 0;
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.6;
  color: var(--muted);
}
.ds-feature {
  margin: 0;
}
.ds-feature video {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  display: block;
  border-radius: 24px;
  background: #000;
  box-shadow: 0 34px 80px rgba(25, 35, 90, 0.2);
}
.ds-feature figcaption {
  margin-top: 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}
.ds-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 40px;
  margin: 44px 0 8px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ds-strip span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(14px, 1.8vw, 17px);
  letter-spacing: 0.02em;
  color: var(--ink);
}
.ds-mosaic .gallery-item {
  cursor: zoom-in;
}

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(8, 10, 14, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  object-fit: contain;
  cursor: zoom-out;
}
.lightbox-close,
.lightbox-nav {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}
.lightbox-close {
  position: absolute;
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 28px);
}
@media (max-width: 640px) {
  .lightbox { padding: 12px; gap: 6px; }
  .lightbox-nav { width: 38px; height: 38px; }
}

/* ---- Sponsor thank-you strip (inner pages) ---- */
.sponsor-thanks {
  padding: clamp(64px, 9vw, 110px) 0;
  text-align: center;
  background: #fff;
  border-top: 1px solid var(--line);
}
.sponsor-thanks-title {
  margin: 0;
  font-size: clamp(28px, 4.4vw, 46px);
}
.sponsor-thanks-sub {
  margin: 14px auto 0;
  max-width: 520px;
  color: var(--muted);
  font-size: clamp(15px, 2vw, 18px);
}
.sponsor-grid {
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.sponsor-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sponsor-cell:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(25, 35, 90, 0.12);
  border-color: transparent;
}
.sponsor-cell img {
  max-height: 40px;
  height: auto;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* Local marks render light; tint to black so they're all visible */
  filter: grayscale(1) brightness(0);
  opacity: 0.78;
  transition: opacity 0.2s ease;
}
.sponsor-cell:hover img {
  opacity: 1;
}
.sponsor-thanks-cta {
  margin-top: 40px;
}
@media (max-width: 860px) {
  .sponsor-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .sponsor-grid { grid-template-columns: repeat(2, 1fr); }
}

#site-footer {
  background: var(--ink);
  color: #fff;
  padding: 80px 24px 40px;
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 60px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-logo {
  display: inline-block;
  height: 30px;
  width: 30px;
}
.footer-blurb {
  margin: 22px 0 0;
  max-width: 340px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}
.footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  margin-top: 28px;
  padding: 0 28px;
  border-radius: 50rem;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.footer-cta:hover {
  transform: translateY(-2px);
  background: #eef0f4;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-col {
  display: flex;
  flex-direction: column;
}
.footer-col h3 {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.footer-col a {
  padding: 7px 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-col a:hover {
  color: #fff;
}
/* Full lock-up wordmark closing the footer */
.footer-wordmark {
  display: block;
  padding: clamp(44px, 7vw, 92px) 0 clamp(24px, 3.5vw, 44px);
  text-decoration: none;
}
.footer-wordmark img {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-wordmark:hover img {
  transform: scale(1.015);
}


.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}
.footer-bottom p {
  margin: 0;
}
.footer-legal {
  display: flex;
  gap: 24px;
}
.footer-legal a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-legal a:hover {
  color: #fff;
}
@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 560px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 14px; align-items: flex-start; }
}

/* =========================================================================
   PHONE PASS
   Everything below tightens the layout on small screens: type scales down a
   step, heavy section padding relaxes, and anything that was laid out for a
   desktop grid collapses to a single readable column.
   ========================================================================= */
@media (max-width: 600px) {
  /* Section rhythm — the desktop clamps bottom out too tall on a phone */
  .page-section { padding: 52px 0; }
  .page-section.tight { padding: 36px 0; }
  .section-shell { padding: 0 18px; }

  /* Page heroes */
  .page-hero { padding: 128px 0 52px; }
  .page-hero h1 { font-size: clamp(32px, 9.2vw, 42px); }
  .page-hero p.page-lead { font-size: 16px; line-height: 1.55; }
  .page-hero .page-meta { font-size: 11px; letter-spacing: 0.1em; }

  /* Home hero */
  #hero h1 { font-size: clamp(34px, 10.5vw, 46px); line-height: 1.04; }
  #hero .hero-subtext { font-size: 15.5px; margin-top: 18px; }
  #hero-sponsor-logos { padding: 20px 0; }
  #hero-sponsor-logos .logo-track img { height: 30px; margin-right: 42px; }

  /* Scroll-story captions */
  .ace-story-heading { font-size: clamp(32px, 10vw, 44px); }
  .ace-story-heading.long { font-size: clamp(28px, 8.6vw, 38px); }
  .ace-story-sub { font-size: 15.5px; }
  .ace-story-eyebrow { font-size: 12px; letter-spacing: 0.16em; }

  /* Why attend */
  #why-attend { padding: 64px 0; }
  .things-head { margin-bottom: 34px; }
  .things-head h2 { font-size: clamp(30px, 9.5vw, 42px); }
  .things-head p { font-size: 16px; }
  .things-subhead { font-size: 11px; letter-spacing: 0.13em; }
  .thing-text h3 { font-size: clamp(24px, 7.5vw, 30px); }
  .thing-text p { font-size: 16px; }
  .thing-num { font-size: 34px; margin-bottom: 8px; }

  /* Get involved / FAQ / take part */
  #take-part { padding: 60px 0; }
  .take-part-head { margin-bottom: 30px; }
  .take-part-head h2 { font-size: clamp(28px, 9vw, 38px); }
  #faq { padding: 60px 0; }
  .faq-head { margin-bottom: 30px; }
  .faq-head h2 { font-size: clamp(28px, 9vw, 38px); }
  .faq-q { padding: 20px 2px; font-size: 16.5px; gap: 16px; }
  .faq-a-inner p { font-size: 15.5px; padding-bottom: 22px; }

  /* Cards, forms, tables */
  .part-body { padding: 20px 20px 24px; }
  .form-card { padding: 22px; border-radius: 18px; }
  .form-success { padding: 28px 22px; }
  .rate-card { padding: 24px; }
  .detail-list li { grid-template-columns: 1fr; gap: 4px; }
  .agenda-item { padding: 20px; }

  /* Section headings inside content pages */
  .page-section h2 { font-size: clamp(26px, 8.4vw, 34px); }
  .page-section .section-intro { font-size: 16px; }
  .cta-band { padding: 64px 20px; }
  .cta-band h2 { font-size: clamp(28px, 9vw, 38px); }
  .cta-band p { font-size: 16px; }

  /* Buttons stack full-width so nothing gets clipped */
  .cta-actions,
  .form-actions,
  .form-success-actions { width: 100%; }
  .cta-actions .btn,
  .form-actions .btn,
  .form-actions button,
  .form-success-actions .btn { width: 100%; }
  .btn { height: 54px; font-size: 16px; }

  /* Footer */
  #site-footer { padding: 56px 18px 32px; }
  .footer-wordmark { padding: 34px 0 24px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-blurb { font-size: 15px; }

  /* Discover gallery */
  #discover-gallery { padding: 60px 0; }
  .ds-gallery-head h2 { font-size: clamp(28px, 9vw, 38px); }
  .ds-gallery-head p { font-size: 16px; }
  .ds-strip { gap: 8px 20px; margin: 30px 0 4px; padding: 16px 0; }
  .ds-feature video { border-radius: 16px; }

  /* Notify hero */
  .notify-hero h1 { font-size: clamp(32px, 9.6vw, 44px); }
}

/* Very small phones */
@media (max-width: 380px) {
  .section-shell { padding: 0 14px; }
  .cbd b { font-size: 48px; }
  .footer-cols { grid-template-columns: 1fr; }
}