/* ============================================================
   THE ARCADE SOCIAL — DESIGN SYSTEM
   Editorial, near-monochrome boutique style (à la premium
   photo-booth sites): white pages, black type, one pale warm-gray
   band, taped-print photo framing, black pill buttons, and a
   handwritten script for section accents. The only color is a
   muted LED pink — the arcade's quiet signature.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Palette */
  --paper: #FFFFFF;          /* page background */
  --band: #E8E6E2;           /* pale warm-gray hero / CTA band */
  --band-soft: #F5F4F2;      /* whisper-gray panels */
  --ink: #141414;            /* near-black text */
  --ink-soft: #595959;       /* secondary text */
  --line: #E3E0DB;           /* hairline rules & photo frames */
  /* Logo palette — the rainbow underline's own colors */
  --brand-yellow: #FFC400;
  --brand-orange: #FF7A00;
  --brand-red: #F5265C;
  --brand-blue: #2F6FD0;
  --pink: var(--brand-red);   /* accent alias, kept for existing rules */
  --pink-soft: #FDE8EE;       /* soft tint of the logo red */
  --oak: var(--brand-yellow);
  --error: #A34A3C;

  /* Type */
  --font-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-sans: "Almarai", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script: "Sacramento", cursive;

  /* Rhythm */
  --radius: 0px;             /* flat, editorial corners */
  --shadow-photo: 0 16px 34px rgba(20, 20, 20, 0.10);
  --section-pad: clamp(4rem, 9vw, 7.5rem);
  --container: 72rem;       /* reading width for content sections */
  --container-wide: 110rem; /* header + hero run nearly edge to edge */
  --overlap: 5rem;           /* hero photo overlap into the intro */
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: rgba(255, 196, 0, 0.35); }

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 0.7em;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 3.9vw, 3.75rem); }
h2 { font-size: clamp(1.6rem, 2.9vw, 2.35rem); }
h3 { font-size: 1.18rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink-soft); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* Decorative rules run to the screen edges; clip so they can never
   widen the page (overflow-x: clip keeps sticky positioning intact). */
main, .section, .ticker { overflow-x: clip; }

/* ---------- Layout helpers ---------- */
.container {
  width: min(var(--container), 92%);
  margin-inline: auto;
}
.container.narrow { max-width: 46rem; }
.center { text-align: center; }

.section { padding-block: var(--section-pad); }

/* Script accent — the "Our Booths" treatment */
.eyebrow {
  font-family: var(--font-script);
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 0.85rem;   /* breathing room above the serif heading */
}

.lead {
  font-size: 1.06rem;
  color: var(--ink-soft);
}

.fine-print {
  font-size: 0.83rem;
  color: var(--ink-soft);
}

/* Quiet arcade DNA: tiny pixel triplet under section headings,
   in gallery-neutral tones with one pink pixel. */
.section h2::after {
  content: "";
  display: block;
  width: 6px; height: 6px;
  margin-top: 1.1rem;
  background: var(--brand-yellow);
  box-shadow: 12px 0 0 var(--brand-red), 24px 0 0 var(--brand-blue);
}
.center h2::after {
  margin-inline: auto;
  transform: translateX(-12px);
}
.corporate h2::after {
  background: var(--brand-yellow);
  box-shadow: 12px 0 0 var(--brand-red), 24px 0 0 var(--brand-blue);
}

/* ---------- Buttons: black pills, uppercase, letterspaced ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  padding: 1rem 2rem;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { background: #333; color: var(--paper); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* Inverted pill for dark sections */
.btn-gold {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn-gold:hover { background: var(--pink-soft); color: var(--ink); }

.btn-lg { padding: 1.1rem 2.5rem; font-size: 0.76rem; }

.text-link { font-weight: 700; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper); /* always white */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
}

.site-header .container { width: min(var(--container-wide), 94%); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}

.wordmark {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { color: var(--ink); }
/* Logo image wordmark (header): multiply blends its white background
   into whatever the header is showing — gray band or scrolled white */
.wordmark-logo { display: inline-flex; align-items: center; }
.wordmark-logo img {
  height: 54px;
  width: auto;
  mix-blend-mode: multiply;
}
.wordmark.wordmark-logo::after { content: none; } /* no pixel cursor next to the logo */
/* Soft marquee-cursor block after the wordmark — a barely-there arcade wink */
.wordmark::after {
  content: "";
  display: inline-block;
  width: 0.36em; height: 0.36em;
  margin-left: 0.34em;
  background: var(--pink);
  vertical-align: baseline;
  animation: cursor-pulse 4s ease-in-out infinite;
}
@keyframes cursor-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 0.3; }
}

.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav ul {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav ul a {
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-nav ul a:hover { border-bottom-color: var(--ink); color: var(--ink); }

.nav-cta { padding: 0.75rem 1.4rem; font-size: 0.66rem; }

/* Circular outline social icons, header-right */
.nav-social { display: flex; gap: 0.55rem; }
.nav-social a {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-social a:hover { background: var(--ink); color: var(--paper); }
.nav-social svg { width: 16px; height: 16px; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.6rem;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 24px; height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- Hero: pale studio band, machine right, title over the gray ----------
   The header carries the same gray at the top of the page, so header + band
   read as one surface — no negative-margin overlap tricks. */
.hero-band {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: clamp(24rem, 60vh, 46rem);
  background: #ECEAEB; /* matched to the machine photo's studio backdrop */
  text-align: center;
}
/* Small-screen CTA stack below the band — hidden on desktop, where the
   buttons live inside the band copy. */
.hero-cta { display: none; }

/* Title break element retired — the headline stays on one line at every size */
.mobile-br { display: none; }
.hero-copy h1 {
  white-space: nowrap;
  font-size: min(3.4vw, 3.4rem);
}
.hero-copy {
  max-width: 56rem; /* wide enough for the headline on one line at max size */
  margin-inline: auto;
}
.hero-sub {
  font-size: clamp(0.78rem, 0.85vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.4rem;
}
/* Hero buttons grow a touch with the screen */
.hero-actions .btn { font-size: clamp(0.72rem, 0.72vw, 0.88rem); }
.hero-copy .lead { max-width: 34rem; margin-inline: auto; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-block: 3rem 1.2rem;
}
.trust-line {
  font-size: 0.82rem;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
}
.trust-line::before {
  content: "";
  display: inline-block;
  width: 26px; height: 1px;
  background: var(--ink);
  vertical-align: middle;
  margin-right: 0.6rem;
}

/* The hero photo: the full machine sits in the right of the band — zoomed
   out, never cropped — and simply scales down with the viewport. Its studio
   gray blends into the band so it floats on clean negative space. */
.hero-photo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-img {
  position: absolute;
  /* anchor to the wide hero container, not the viewport edge, so the
     copy + machine stay a centered pair on wide screens */
  right: max(calc((100vw - min(var(--container-wide), 94vw)) / 2), 1.5rem);
  bottom: 0;
  height: min(93%, 42rem); /* marquee rides high in the band */
  width: auto;
  /* feather the crop's side edges into the band gray */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.hero-band .container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); /* copy centers over the empty gray left */
  width: min(var(--container-wide), 94%);
}

/* ---------- Rainbow rule flanking every centered script eyebrow ----------
   Two short segments in the logo's colors, sitting either side of the
   wording with equal gaps and fading out quickly. */
.center .eyebrow,
.eyebrow-ruled {
  position: relative;
  display: inline-block;
}
.center .eyebrow::before,
.center .eyebrow::after,
.eyebrow-ruled::before,
.eyebrow-ruled::after {
  content: "";
  position: absolute;
  top: 52%;
  width: clamp(4rem, 16vw, 13rem);
  height: 11px;
  transform: translateY(-50%);
  background: linear-gradient(180deg,
    var(--brand-yellow) 0 25%,
    var(--brand-orange) 25% 50%,
    var(--brand-red) 50% 75%,
    var(--brand-blue) 75% 100%);
  opacity: 0.9;
  pointer-events: none;
}
.center .eyebrow::before,
.eyebrow-ruled::before {
  right: 100%;
  margin-right: 1.1rem;
  -webkit-mask-image: linear-gradient(to left, #000 35%, transparent 100%);
  mask-image: linear-gradient(to left, #000 35%, transparent 100%);
}
.center .eyebrow::after,
.eyebrow-ruled::after {
  left: 100%;
  margin-left: 1.1rem;
  -webkit-mask-image: linear-gradient(to right, #000 35%, transparent 100%);
  mask-image: linear-gradient(to right, #000 35%, transparent 100%);
}

/* ---------- Legal pages (privacy, terms) ---------- */
.legal { padding-top: calc(var(--section-pad) * 0.7); }
.legal h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.35rem; }
.legal .legal-eyebrow { margin-bottom: 0.4rem; }
.legal-updated {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 2.2rem;
}
.legal h2 {
  font-size: 1.35rem;
  margin-top: 2.6rem;
  margin-bottom: 0.7rem;
}
.legal h2::after { display: none; }   /* no pixel dots on legal headings */
.legal p { color: var(--ink-soft); }
.legal .lead { color: var(--ink); margin-bottom: 0.5rem; }
.legal strong { color: var(--ink); }
.legal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.45rem;
  color: var(--ink-soft);
}
.legal-list li { position: relative; padding-left: 1.4rem; }
.legal-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  background: var(--brand-yellow);
}
.legal-list li:nth-child(4n+2)::before { background: var(--brand-orange); }
.legal-list li:nth-child(4n+3)::before { background: var(--brand-red); }
.legal-list li:nth-child(4n+4)::before { background: #6FA0EA; }
.legal-back {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-weight: 700;
}

/* ---------- Machine builder (IKEA-style configurator) ---------- */
.builder { background: var(--band-soft); border-top: 1px solid var(--line); }
.builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: 3rem;
  max-width: 64rem;
}
.builder-stage {
  background: #E9E8E7;
  border: 1px solid var(--line);
}
/* grid/flex children need min-width:0 or the nowrap swatch rows blow the
   column out past the viewport */
.builder-stage, .builder-options { min-width: 0; }
.builder-swatches { min-width: 0; max-width: 100%; }
.builder-stage { max-width: 27rem; margin-inline: auto; width: 100%; }
.builder-track {
  display: flex;
  aspect-ratio: 3 / 4;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.builder-track::-webkit-scrollbar { display: none; }
.builder-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: center;
  transition: opacity 0.35s ease;
}
.builder-track img.is-swapping { opacity: 0; }
.builder-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.bdot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--ink-soft);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.bdot.is-selected { background: var(--ink); border-color: var(--ink); }
.builder-hint {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-left: 0.6rem;
}
.builder-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.builder-group { margin-bottom: 1.6rem; }
/* the rows scroll sideways — fades plus arrow buttons at each edge */
.builder-scroller { position: relative; }
.builder-scroller::before,
.builder-scroller::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 3rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1;
}
.builder-scroller::before {
  left: -4px;
  background: linear-gradient(270deg, rgba(245, 244, 242, 0), var(--band-soft) 70%);
}
.builder-scroller::after {
  right: -4px;
  background: linear-gradient(90deg, rgba(245, 244, 242, 0), var(--band-soft) 70%);
}
.builder-scroller.can-prev::before,
.builder-scroller.can-next::after { opacity: 1; }

.scroll-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 30px; height: 30px;
  transform: translateY(-50%);
  display: none;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 2px 8px rgba(20, 20, 20, 0.12);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.scroll-btn:hover { border-color: var(--ink); transform: translateY(-50%) scale(1.06); }
.scroll-btn::before {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.scroll-btn.prev { left: -6px; }
.scroll-btn.next { right: -6px; }
.scroll-btn.prev::before { transform: rotate(135deg); margin-left: 3px; }
.scroll-btn.next::before { transform: rotate(-45deg); margin-right: 3px; }
.builder-scroller.can-prev .scroll-btn.prev,
.builder-scroller.can-next .scroll-btn.next { display: grid; }
.builder-swatches {
  display: flex;
  flex-wrap: nowrap;          /* one row — scroll sideways instead of stacking */
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px;               /* room for the selection ring */
  margin: -4px;
  -webkit-overflow-scrolling: touch;
}
.builder-swatches::-webkit-scrollbar { display: none; }
.builder-swatches .swatch { flex: none; white-space: nowrap; }
/* "& more" marker: informative, not selectable */
.swatch-more {
  pointer-events: none;
  border-style: dashed;
  color: var(--ink-soft);
  font-weight: 400;
  padding-left: 1rem;
}
.swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1rem 0.5rem 0.55rem;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.swatch:hover { transform: translateY(-1px); border-color: var(--ink-soft); }
.swatch.is-selected { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.swatch-chip {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(20, 20, 20, 0.15);
  display: inline-grid;
  place-items: center;
  font-size: 0.5rem;
  font-weight: 700;
  flex: none;
}
.chip-oak { background: linear-gradient(135deg, #E0C193, #C9A76E); }
.chip-walnut { background: linear-gradient(135deg, #6E4B32, #4A2F1E); }
.chip-white { background: #FFFFFF; }
.chip-blackwood { background: linear-gradient(135deg, #3A3330, #14100E); }
.chip-rainbow {
  background: linear-gradient(180deg,
    var(--brand-yellow) 0 25%, var(--brand-orange) 25% 50%,
    var(--brand-red) 50% 75%, var(--brand-blue) 75% 100%);
}
.chip-custom { background: #FDF9F2; color: var(--ink); font-family: var(--font-serif); }
.chip-led-pink { background: #FF7AC8; box-shadow: 0 0 8px rgba(255, 122, 200, 0.8); }
.chip-led-blue { background: #4FC3FF; box-shadow: 0 0 8px rgba(79, 195, 255, 0.8); }
.chip-led-purple { background: #A85CFF; box-shadow: 0 0 8px rgba(168, 92, 255, 0.8); }
.builder-options .fine-print { margin-bottom: 1.4rem; }

/* ---------- Game ticker: slow, seamless loop under the hero ---------- */
.ticker {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #EDEAE4;
  padding-block: 0.6rem;
}
/* Static callout pinned left; the tiles scroll behind it */
.ticker-callout {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: var(--ink);
  padding-left: max(calc((100vw - min(var(--container-wide), 94vw)) / 2), 1.25rem);
  padding-right: 1.6rem;
}
.ticker-callout::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0; bottom: 0;
  width: 3.5rem;
  background: linear-gradient(90deg, var(--ink), transparent);
}
.ticker-callout b {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.15;
}
.ticker-callout span {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 150s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-items {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  padding-right: 1.4rem;
  white-space: nowrap;
}
/* Each tile: game name above its banner art */
.ticker-tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  flex: none;
}
.ticker-tile b {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #B9B5AE;
}
.ticker-tile img {
  display: block;
  height: 46px;
  width: auto;
  border-radius: 2px;
}
/* pixel separator between titles — the arcade wink, in LED pink */
.ticker-items i {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--brand-yellow);
  flex: none;
}
@keyframes ticker-scroll {
  to { transform: translateX(-50%); }
}
/* If motion is reduced, the global override freezes the animation and the
   ticker simply reads as a static strip of titles. */

/* Desktop: the lounge copy lives in the white band left of the photos,
   centred within that column rather than in the page container. */
@media (min-width: 60.0625rem) {
  .lounge-headwrap,
  .lounge .container:not(.lounge-headwrap) {
    width: 46%;
    max-width: none;
    margin-inline: 0 auto;
    padding-inline: clamp(1.5rem, 4vw, 4rem) 1.5rem;
  }
  .lounge-head,
  .lounge-content { max-width: none; }
}

/* ---------- Grids & flat cards ---------- */
.card-grid {
  display: grid;
  gap: 1.4rem;
  margin-top: 3rem;
}
.card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid.addons { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.benefit-card, .event-card, .addon-card, .pricing-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 2rem 1.7rem;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.benefit-card:hover, .event-card:hover, .addon-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-blue); /* logo-blue edge on hover */
}

.benefit-card { text-align: center; }
.benefit-icon {
  width: 44px; height: 44px;
  margin: 0 auto 1.1rem;
  display: grid;
  place-items: center;
  color: var(--ink);
}
.benefit-icon svg { width: 32px; height: 32px; }

.benefit-card p, .event-card p, .addon-card p {
  color: var(--ink-soft);
  font-size: 0.93rem;
}

.event-card h3 {
  font-size: 0.9rem;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Add-on cards */
.addon-card { position: relative; }
.addon-card.is-coming-soon { opacity: 0.75; }
.badge {
  position: absolute;
  top: 1.05rem; right: 1.05rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--band-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}

/* ---------- Section rhythm ----------
   Sections alternate between white and a whisper-gray panel so the page
   reads as distinct chapters instead of one continuous sheet. */
.lounge, .additions, .footprint, .pricing, .faq {
  background: var(--paper);
}
.events, .how, .gallery, .testimonials {
  background: var(--band-soft);
}
.lounge, .events, .how, .gallery, .pricing, .testimonials {
  border-top: 1px solid var(--line);
}

/* --- Optional additions: each card gets a logo-colour top edge --- */
.addon-card { border-top: 3px solid var(--brand-yellow); }
.addon-card:nth-child(4n+2) { border-top-color: var(--brand-orange); }
.addon-card:nth-child(4n+3) { border-top-color: var(--brand-red); }
.addon-card:nth-child(4n+4) { border-top-color: var(--brand-blue); }

/* --- Intro tiles: a machine cut-out sitting on top of each card.
       Left mirrors the angled shot so the pair face inward. --- */
.benefit-machine {
  height: 215px;
  margin: -0.4rem auto 1.2rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.benefit-machine img {
  height: 100%;
  width: auto;
  object-fit: contain;
}
.machine-left img { transform: scaleX(-1); }   /* faces inward, toward the middle */
.machine-center img { height: 118%; }          /* full cabinet reads smaller — even it out */

/* --- Events: a photo per event type with its summary right below --- */
.events .event-card {
  background: transparent;
  border: none;
  padding: 0;
}
.events .event-card:hover { transform: translateY(-4px); }
.events .event-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 1.15rem;
  box-shadow: 0 10px 26px rgba(20, 20, 20, 0.09);
}
.events .event-card h3 { margin-bottom: 0.55rem; }
.events .event-card h3::after {
  content: "";
  display: block;
  width: 34px; height: 3px;
  margin-top: 0.6rem;
  background: linear-gradient(90deg,
    var(--brand-yellow), var(--brand-orange), var(--brand-red), var(--brand-blue));
}

/* --- How it works: the numbered circles stand on their own --- */
.how .step-number { background: var(--band-soft); }

/* --- FAQ + pricing keep the white sheet but gain a top rule (above) --- */

/* ---------- Split layouts ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: center;
}
.split.reverse .split-copy { order: 1; }
.split.reverse .split-media { order: 2; }
.split-media img {
  box-shadow: var(--shadow-photo);
}

/* The Arcade Lounge: rotating photos fill the right side of the section
   at near-full strength, feathered into white where the copy lives */
.lounge { position: relative; overflow: hidden; }
.lounge-bg {
  position: absolute;
  inset: 0 0 0 26%; /* photos bleed left, behind the copy */
  z-index: 0;
  /* short feather on the layer's left edge only */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30%);
}
.lounge-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 36% center; /* bias every photo's machines rightward */
  opacity: 0;
  transition: opacity 2.2s ease-in-out; /* slow crossfade for a seamless blend */
}
.lounge-bg img.is-active { opacity: 1; }
/* The white-backdrop photo frames its machines more centrally than the
   others — bias its crop so they sit further right, clear of the feather */
.lounge-bg img[src*="lounge-white"] { object-position: 18% center; }
.lounge-bg img[src*="lounge-vine"],
.lounge-bg img[src*="lounge-darkwood"] { object-position: 24% center; }
/* Ken Burns: each slide gets its own direction (in, out, drift left,
   drift right) so consecutive slides blend into each other instead of
   repeating the same move. Long linear motion + a slow crossfade keeps
   the handoff seamless. */
@keyframes kb-in    { from { transform: scale(1); }                     to { transform: scale(1.05); } }
@keyframes kb-out   { from { transform: scale(1.045); }                 to { transform: scale(1); } }
@keyframes kb-left  { from { transform: scale(1.015); }                 to { transform: scale(1.06) translateX(-1.2%); } }
@keyframes kb-right { from { transform: scale(1.055) translateX(1%); }  to { transform: scale(1.005); } }
.lounge-bg img.is-active { animation: kb-in 9s linear forwards; }
.lounge-bg img:nth-child(2).is-active { animation-name: kb-out; }
.lounge-bg img:nth-child(3).is-active { animation-name: kb-left; }
.lounge-bg img:nth-child(4).is-active { animation-name: kb-right; }
/* light wash only — the photos stay clearly visible */
.lounge-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.5) 22%,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(255, 255, 255, 0.03) 100%);
}
.lounge .container { position: relative; z-index: 1; }
.lounge-content { max-width: 40rem; }
.lounge-headwrap { position: relative; z-index: 1; }
/* Lounge column is left-aligned top to bottom */
.lounge-head {
  max-width: 40rem;
  margin-bottom: 1.6rem;
  text-align: left;
}
.lounge-content { text-align: left; }
/* no rainbow rule beside this section's script heading */
.lounge-head .eyebrow::before,
.lounge-head .eyebrow::after { content: none; }

/* Two columns on the web; one column on phones (see the mobile block).
   Items never wrap, so the block stays short and the machines sit high. */
.lounge-content .check-list {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.6rem;
  text-align: left;
  font-size: 0.85rem;
}
.lounge-content .check-list li { white-space: nowrap; }
.lounge-head .eyebrow { margin-bottom: 0.85rem; }
.lounge-head .lounge-title { margin-bottom: 0; }

.check-list {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0;
  display: grid;
  gap: 0.55rem;
}
.check-list li {
  padding-left: 1.7rem;
  position: relative;
  font-size: 0.95rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 7px; height: 7px;
  background: var(--brand-yellow);
}
.check-list li:nth-child(4n+2)::before { background: var(--brand-orange); }
.check-list li:nth-child(4n+3)::before { background: var(--brand-red); }
.check-list li:nth-child(4n+4)::before { background: var(--brand-blue); }
.check-list.light li::before { background: var(--brand-yellow); }
.check-list.light li:nth-child(4n+2)::before { background: var(--brand-orange); }
.check-list.light li:nth-child(4n+3)::before { background: var(--brand-red); }
.check-list.light li:nth-child(4n+4)::before { background: #6FA0EA; }

/* Two-column lists flow row-wise, so colour them in PAIRS — that makes
   each column read yellow / orange / red / blue from the top down. */
.lounge-content .check-list li:nth-child(8n+1)::before,
.lounge-content .check-list li:nth-child(8n+2)::before,
.check-list.two-col li:nth-child(8n+1)::before,
.check-list.two-col li:nth-child(8n+2)::before { background: var(--brand-yellow); }
.lounge-content .check-list li:nth-child(8n+3)::before,
.lounge-content .check-list li:nth-child(8n+4)::before,
.check-list.two-col li:nth-child(8n+3)::before,
.check-list.two-col li:nth-child(8n+4)::before { background: var(--brand-orange); }
.lounge-content .check-list li:nth-child(8n+5)::before,
.lounge-content .check-list li:nth-child(8n+6)::before,
.check-list.two-col li:nth-child(8n+5)::before,
.check-list.two-col li:nth-child(8n+6)::before { background: var(--brand-red); }
.lounge-content .check-list li:nth-child(8n+7)::before,
.lounge-content .check-list li:nth-child(8n+0)::before,
.check-list.two-col li:nth-child(8n+7)::before,
.check-list.two-col li:nth-child(8n+0)::before { background: #6FA0EA; }
.check-list.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.note-card {
  background: var(--band-soft);
  border-left: 2px solid var(--ink);
  padding: 1rem 1.3rem;
  margin: 1.5rem 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.note-card p { margin: 0; }

.price-line {
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 1.4rem 0;
}
.price {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ink);
  margin-left: 0.3rem;
}

/* Pricing call-outs read as a row of small badges, not stacked sentences */
.price-notes {
  list-style: none;
  padding: 0;
  margin: 0.1rem 0 1.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.price-notes li {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.42rem 0.75rem;
  white-space: nowrap;
}
.price-notes b { font-weight: 700; color: var(--ink); }
.price-fine { margin-top: 1.2rem; max-width: 28rem; }

/* "Free Play" chip — the one whisper of LED pink */
.chip-led {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-blue);
  background: rgba(47, 111, 208, 0.08);
  border: 1px solid rgba(47, 111, 208, 0.45);
  border-radius: 999px;
  padding: 0.32rem 0.75rem;
  margin-left: 0.6rem;
  vertical-align: middle;
}

/* ---------- How it works ---------- */
.steps {
  list-style: none;
  padding: 0;
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem;
}
.step {
  text-align: center;
  padding: 1rem 0.6rem;
}
.step-number {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--ink);
  border: 1px solid var(--ink);
  margin-bottom: 1.1rem;
}
.step h3 { font-size: 1.02rem; }
.step p { color: var(--ink-soft); font-size: 0.92rem; }

/* ---------- Footprint diagram ---------- */
.footprint-diagram {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-photo);
  padding: 1.6rem;
}
.footprint-diagram svg { width: 100%; height: auto; }
.footprint-diagram figcaption {
  font-size: 0.83rem;
  color: var(--ink-soft);
  margin-top: 0.8rem;
  text-align: center;
}
.d-wall { fill: #CFCBC4; }
.d-machine { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.d-machine-label { font-family: var(--font-sans); font-size: 13px; fill: var(--ink-soft); }
.d-player { fill: var(--band-soft); stroke: #9B968E; stroke-width: 1.5; stroke-dasharray: 5 5; }
.d-label { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0.04em; fill: var(--ink-soft); }
.d-measure { stroke: var(--ink); stroke-width: 1; fill: none; }

/* ---------- Corporate / trade show: the black band ---------- */
.corporate {
  background: #101010;
  color: #E8E8E8;
}
.corporate h2 { color: #FFFFFF; }
.corporate .eyebrow { color: #FFFFFF; }
.corporate p { color: #BDBDBD; }
.check-list.light li { color: #DFDFDF; }
.check-list.light li::before { border-color: var(--brand-yellow); }
.corporate .btn-gold { margin-top: 0.7rem; }
.corporate .split-media img {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

/* ---------- Gallery (masonry, white-matted prints) ---------- */
.masonry {
  margin-top: 3rem;
  columns: 3 16rem;
  column-gap: 1.4rem;
}
.masonry img {
  width: 100%;
  margin-bottom: 1.4rem;
  box-shadow: 0 10px 24px rgba(20, 20, 20, 0.07);
  break-inside: avoid;
  transition: transform 0.25s ease;
}
.masonry img:hover { transform: scale(1.01); }

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1.6rem;
  margin-top: 3rem;
  align-items: start;
}
.pricing-card.featured {
  border-top: 3px solid var(--ink);
  padding: 2.4rem 2.2rem;
}
.pricing-amount {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
}
.pricing-unit {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.pricing-side { display: grid; gap: 1.2rem; }
.pricing-side .pricing-card p { color: var(--ink-soft); font-size: 0.93rem; }
.pricing-side .pricing-amount { font-size: 1.35rem; margin-bottom: 0.2rem; }

/* ---------- Testimonials: spaced tiles ---------- */
.testimonials .card-grid { gap: 1.6rem; margin-top: 3.4rem; }
.quote-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  text-align: center;
  padding: 3rem 1.9rem 2.2rem;
  margin: 0;
}
/* a quiet rainbow bar across the top of each tile */
.quote-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--brand-yellow), var(--brand-orange), var(--brand-red), var(--brand-blue));
}
.quote-card blockquote {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.8;
  margin: 0 0 1.7rem;
  color: var(--ink);
}
.quote-card figcaption {
  display: grid;
  gap: 0.25rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.quote-card figcaption b {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.quote-card figcaption span {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* ---------- FAQ: flat hairline accordion ---------- */
.faq-list {
  max-width: 46rem;
  margin-top: 3rem;
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.2rem 3rem 1.2rem 0.2rem;
  font-weight: 700;
  font-size: 0.95rem;
  position: relative;
  transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 0.9rem; top: 50%;
  width: 0.5em; height: 0.5em;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item[open] summary { color: var(--ink-soft); }
.faq-answer {
  padding: 0 2.5rem 1.3rem 0.2rem;
  color: var(--ink-soft);
  font-size: 0.94rem;
}

/* ---------- Final CTA / form: the gray band returns ---------- */
.final-cta {
  background: var(--band);
}
.form-wrap {
  max-width: 46rem;
  margin-top: 3rem;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-photo);
  padding: clamp(1.6rem, 4vw, 2.8rem);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}
.form-field { margin-bottom: 1.2rem; }
.form-field label, .checks legend {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.form-field label span { color: var(--error); }

input, select, textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #C9C5BE;
  border-radius: 0;
  padding: 0.75rem 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.08);
}
input[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--error);
}
textarea { resize: vertical; }

.checks {
  border: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.checks label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}
.checks input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem;
  accent-color: var(--ink);
  padding: 0;
}

.field-error {
  color: var(--error);
  font-size: 0.8rem;
  margin: 0.35rem 0 0;
}
.field-error:empty { display: none; }

.form-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  margin-top: 0.6rem;
}
.form-status { margin-top: 1rem; font-size: 0.9rem; color: var(--ink-soft); }
.form-status.is-error { color: var(--error); }

.form-success {
  text-align: center;
  padding: 2.5rem 1rem;
}
.form-success h3 {
  font-family: var(--font-script);
  font-size: 2.6rem;
  text-transform: lowercase;
  color: var(--ink);
}

/* ---------- Footer ---------- */
.site-footer {
  background: #101010;
  color: #BDBDBD;
  padding-block: 3.8rem 1.8rem;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer .wordmark { color: #FFFFFF; font-size: 1.2rem; display: inline-block; margin-bottom: 0.4rem; }
/* Footer logo: dark version — screen blends its black background
   straight into the footer */
.site-footer .wordmark-logo { margin: 0 0 0.9rem; }
.site-footer .wordmark-logo img {
  mix-blend-mode: screen;
  height: 44px;
}
.footer-area { font-size: 0.82rem; opacity: 0.7; }
.site-footer h3 {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.site-footer a { color: #DDDDDD; text-decoration: none; }
.site-footer a:hover { color: var(--brand-yellow); text-decoration: underline; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.6rem;
  font-size: 0.8rem;
  opacity: 0.75;
}
.footer-legal { display: flex; gap: 1.4rem; }
.footer-bottom p { margin: 0; }

/* ---------- Scroll animations ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.is-visible {
  opacity: 1;
  transform: none;
}
.no-observer .fade-up { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade-up { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 60rem) {
  /* keep three-up grids from orphaning a lone tile on the second row */
  .card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .card-grid.addons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-copy { order: 0; }
  /* the brands & booths column centres, and its photo spans the page */
  .corporate .split-copy { text-align: center; }
  .corporate h2::after { margin-inline: auto; transform: translateX(-12px); }
  .corporate .check-list {
    display: inline-grid;
    text-align: left;
    justify-content: center;
  }
  .corporate .split-media {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
  }
  .corporate .split-media img { width: 100%; }
  .split-media { max-width: 34rem; margin-inline: auto; }
  .pricing-grid { grid-template-columns: 1fr; }
  .masonry { columns: 2 14rem; }

  /* Narrow widths: title and subtitle sit centered ABOVE the machine,
     which shows in full — no crop. Buttons move to their own stack
     below the band. */
  .hero-band {
    display: flex;
    flex-direction: column;
    min-height: 0;
    text-align: center;
    padding-top: clamp(0.5rem, 1.5vw, 1.25rem);
  }
  .hero-band .container { display: block; width: min(40rem, 92%); }
  .hero-copy {
    max-width: none;
    margin-inline: auto;
    text-align: center;
  }
  .hero-actions-band, .trust-line-band { display: none; }

  /* Events photos read as tidy cards, not full-bleed posters */
  .events .event-card img { aspect-ratio: 16 / 10; }

  /* Builder stacks: image, then centred options */
  .builder-grid { grid-template-columns: 1fr; max-width: 34rem; }
  .builder-options { text-align: center; }
  .builder-swatches { justify-content: safe center; }
  .builder-group { margin-bottom: 1.3rem; }
  .swatch { font-size: 0.74rem; padding: 0.42rem 0.8rem 0.42rem 0.48rem; gap: 0.45rem; }
  .swatch-more { padding-left: 0.85rem; }
  .swatch-chip { width: 22px; height: 22px; }

  /* Lounge on stacked layouts: a swipeable, auto-advancing photo
     carousel ABOVE the copy — no Ken Burns, no crossfade */
  .lounge { display: flex; flex-direction: column; padding-top: 0; }
  .lounge-headwrap { order: 1; padding-top: var(--section-pad); }
  /* once stacked, the whole lounge column centres */
  .lounge-head, .lounge-content { text-align: center; margin-inline: auto; }
  .lounge-content .check-list {
    display: inline-grid;
    text-align: left;
    justify-content: center;
  }
  .lounge-content .price-notes { justify-content: center; }
  .lounge-content .price-fine { margin-inline: auto; }
  .lounge-title::after { margin-inline: auto; transform: translateX(-12px); }
  .lounge-bg { order: 2; }
  .lounge .container:not(.lounge-headwrap) { order: 3; }
  .lounge-bg {
    position: relative;
    inset: auto;
    height: 60vw;
    max-height: 22rem;
    margin-bottom: 2rem;
    -webkit-mask-image: none;
    mask-image: none;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .lounge-bg::-webkit-scrollbar { display: none; }
  .lounge-bg img {
    position: static;
    flex: 0 0 100%;
    scroll-snap-align: center;
    opacity: 1;
    transition: none;
    animation: none !important;
    object-position: center;
  }
  .lounge-bg::after { display: none; }

  .lounge-head { display: block; margin-bottom: 0; text-align: center; }
  /* rules reach the screen edges on phones */
  .center .eyebrow::before, .center .eyebrow::after,
  .eyebrow-ruled::before, .eyebrow-ruled::after { width: 50vw; }
  /* breathing room between the dots and the photo carousel */
  .lounge-headwrap { padding-bottom: 2.2rem; }
  .lounge-title::after { margin-inline: auto; transform: translateX(-12px); }
  .hero-photo {
    position: static;
    order: 2;
    display: flex;
    justify-content: center;
    margin-top: clamp(1rem, 3vw, 2rem);
  }
  .hero-img {
    position: static;
    right: auto;
    bottom: auto;
    transform: none;
    height: auto;
    width: min(62vw, 28rem);
    opacity: 1;
  }
  .hero-cta {
    display: block;
    padding-block: 1.6rem 0.4rem;
    text-align: center;
  }
  .hero-cta .hero-actions {
    justify-content: center;
    margin-block: 0 1rem;
  }
}

/* Mobile nav + small screens */
@media (max-width: 48rem) {
  :root { --section-pad: 3.25rem; }

  /* Tighter mobile type scale */
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.45rem; }
  h3 { font-size: 1.08rem; }
  .eyebrow { font-size: 1.8rem; }
  .lead { font-size: 0.98rem; }
  body { line-height: 1.62; }
  .section h2::after { margin-top: 0.85rem; }

  /* Tighter mobile hero: machine slides further off the right edge,
     CTAs stack full-width below the band. The whole hero (band + buttons)
     fills the first phone screen — the next section starts below the fold. */
  .hero {
    display: flex;
    flex-direction: column;
    /* viewport minus sticky header (~5.6rem) and the games ticker (~62px) */
    min-height: calc(100vh - 5.6rem - 62px);
    min-height: calc(100svh - 5.6rem - 62px); /* stable on iOS Safari */
  }
  .hero-band {
    flex: 1;
    min-height: clamp(16rem, 72vw, 22rem);
    justify-content: space-between; /* copy up top, machine at the base */
  }
  .hero-band .container { padding-top: 1.5rem; }
  /* The whole hero carries the gray, so the machine can bleed down past
     the band and feather away behind the buttons. */
  .hero { background: #ECEAEB; }
  .hero-band { background: transparent; overflow: visible; }
  .hero-photo { margin-bottom: -1.6rem; }  /* photo eases in behind the CTAs */
  .hero-cta {
    width: 100%;
    max-width: none;
    padding: 3.1rem 4% 2.6rem;
    background: transparent;
    position: relative;
    z-index: 2;                            /* buttons sit over the photo */
  }

  /* Title stays on ONE line, scaling with the viewport;
     subtitle is pinned to a single line too */
  .hero-copy h1 {
    font-size: clamp(1rem, 6.2vw, 2.2rem);
    white-space: nowrap;
  }
  /* The machine fills ALL the space between the subtitle and the CTA
     stack — as large as the screen allows, never overflowing the fold */
  .hero-photo {
    flex: 1 1 0;
    align-self: stretch; /* full band width for the absolute image inside */
    min-height: 0;
    position: relative;
    margin-top: 0.9rem;
  }
  .hero-img {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: auto;
    margin-inline: auto;
    width: 100%;
    height: 93%;          /* slightly smaller machine, space beneath it */
    max-width: none;
    /* contain = the whole machine shows, control panel and all, scaled to
       the screen width with natural space beneath it */
    object-fit: contain;
    object-position: center top;
    /* soft edges; the bottom fade starts low so the control panel stays
       readable and only dissolves as it reaches the buttons */
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 4%, #000 76%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 4%, #000 76%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
.hero-sub {
    white-space: nowrap; /* always a single line */
    font-size: clamp(0.5rem, 2.5vw, 0.8rem);
    letter-spacing: 0.13em;
    margin-bottom: 0;
  }
  .hero-cta .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
  }
  .hero-cta .btn {
    width: min(100%, 20rem);
    text-align: center;
  }
  .hero-actions { margin-block: 1.4rem 1rem; gap: 0.7rem; }
  .btn { padding: 0.9rem 1.7rem; }
  .card-grid { gap: 1rem; margin-top: 2.2rem; }
  .benefit-card, .event-card, .addon-card { padding: 1.5rem 1.3rem; }
  .steps { gap: 0.6rem; margin-top: 2.2rem; }
  .step { padding: 0.8rem 0.4rem; }
  .form-wrap, .faq-list, .pricing-grid, .masonry { margin-top: 2.2rem; }
  .pricing-card.featured { padding: 1.8rem 1.4rem; }
  .faq-item summary { font-size: 0.9rem; padding-block: 1.05rem; }
  .faq-answer { padding-right: 1.5rem; }
  .footprint-diagram { padding: 1rem; }
  .quote-card { padding: 0.8rem 0.4rem; }

  /* Slimmer ticker on phones */
  .ticker { padding-block: 0.4rem; }
  .ticker-tile { gap: 0.3rem; }
  .ticker-tile img { height: 34px; }
  .ticker-tile b { font-size: 0.5rem; letter-spacing: 0.12em; }
  .ticker-callout b { font-size: 1.05rem; }
  .ticker-callout span { font-size: 0.52rem; }

  .card-grid.three, .card-grid.addons, .steps { grid-template-columns: 1fr; }
  /* stacked: there is no "inward", and a mirror would reverse the
     ARCADE / PRESS START lettering — show it the right way round */
  .machine-left img { transform: none; }
  .check-list.two-col { grid-template-columns: 1fr; }
  .lounge-content .check-list { grid-template-columns: 1fr; font-size: 0.95rem; }
  .lounge-content .check-list li { white-space: normal; }
  /* stacked lists read top to bottom, so the rainbow runs in order again */
  .lounge-content .check-list li::before,
  .check-list.light li::before { background: var(--brand-yellow); }
  .lounge-content .check-list li:nth-child(4n+2)::before,
  .check-list.light li:nth-child(4n+2)::before { background: var(--brand-orange); }
  .lounge-content .check-list li:nth-child(4n+3)::before,
  .check-list.light li:nth-child(4n+3)::before { background: var(--brand-red); }
  .lounge-content .check-list li:nth-child(4n+4)::before,
  .check-list.light li:nth-child(4n+4)::before { background: #6FA0EA; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .masonry { columns: 1; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Short phones (e.g. iPhone SE): smaller machine so title, machine,
   and buttons still share one screen */
@media (max-width: 48rem) and (max-height: 700px) {
  .hero-band .container { padding-top: 1.1rem; }
  .hero-copy h1 { font-size: min(1.5rem, 6.2vw); }
  /* object-fit: contain sizing handles the smaller machine automatically */
}


/* ---------- Full-screen menu (switches over well before phone width) ---------- */
@media (max-width: 64rem) {
  .nav-toggle { display: block; }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 90;              /* under the header bar, so the close button shows */
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    background: var(--paper);
    padding: 6rem 1.5rem 3rem;
    overflow-y: auto;
    height: 100vh;
    height: 100dvh;
  }
  .site-nav.is-open { display: flex; }
  /* keep the logo and close button above the overlay so the menu
     can always be dismissed */
  .site-header .wordmark,
  .nav-toggle { position: relative; z-index: 95; }
  /* the header's backdrop-filter would otherwise become the containing
     block for the fixed menu and trap it inside the bar */
  .site-header:has(.site-nav.is-open) {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.nav-open { overflow: hidden; }   /* the page behind stays put */

  .site-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: min(26rem, 100%);
  }
  .site-nav ul li { width: 100%; }
  .site-nav ul a {
    display: block;
    text-align: center;
    padding: 1.05rem 0.3rem;
    font-size: 1.15rem;
    border-bottom: 1px solid var(--line);
  }
  .site-nav ul li:first-child a { border-top: 1px solid var(--line); }
  .nav-cta {
    margin-top: 2rem;
    text-align: center;
    padding: 1.05rem 2.6rem;
    font-size: 0.74rem;
  }
  .nav-social { justify-content: center; margin-top: 2rem; }
}

/* Honeypot spam trap — visually and programmatically hidden, but still
   present in the DOM for bots to fall into. Not display:none, because
   some bots skip those. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}