/* ============================================================
   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;
}
/* The previous price, struck through. Deliberately smaller and lighter so
   the eye lands on the current price, not the old one. Hidden entirely if
   pricing.loungeOriginalPrice is null (main.js empties the element). */
.price-was {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--ink-soft);
  opacity: 0.65;
  margin-left: 0.3rem;
  text-decoration-thickness: 1px;
}
.price-was:empty { display: none; }

/* 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;
}