/* Venurix onepager (venurix.nl / venurix.com). Layout on top of the design system: tokens and vx-* classes only,
   mobile first (base = phone, min-width 768px / 1024px enhance). */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--appbar-height) + var(--space-4)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; }
h1, h2, h3, h4, p { margin: 0; }
/* Headings never end with a lone word on its own line; body text avoids short last lines. */
h1, h2, h3, h4, .site-title, .site-faq summary span, .site-flow li { text-wrap: balance; }
p, li { text-wrap: pretty; }
a { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.site-nowrap { white-space: nowrap; }

.site-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 100; }
.site-skip:focus { top: var(--space-2); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-2); min-height: var(--appbar-height);
  max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-4);
}
.site-header__logo { display: inline-flex; margin-right: auto; }
.site-header__logo img { height: 24px; width: auto; }
.site-lang { color: var(--ink-muted); font-weight: 500; font-size: 14px; text-decoration: none; padding: var(--space-2); }
.site-menu-toggle svg { width: 18px; height: 18px; }
.site-menu-toggle .site-icon-close, .site-menu-toggle[aria-expanded="true"] .site-icon-open { display: none; }
.site-menu-toggle[aria-expanded="true"] .site-icon-close { display: block; }

/* phones and tablets: the nav is a panel under the header, opened by the menu button */
.site-nav { display: none; }
.js .site-nav.is-open {
  display: grid; position: absolute; left: 0; right: 0; top: 100%;
  padding: var(--space-2) var(--space-4) var(--space-4); background: var(--bg); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.site-nav a {
  display: flex; align-items: center; min-height: var(--control-lg);
  color: var(--ink-muted); text-decoration: none; font-weight: 500; font-size: 16px;
}
.site-nav a + a { border-top: 1px solid var(--border); }
@media (hover: hover) { .site-nav a:hover, .site-lang:hover { color: var(--ink); } }
@media (prefers-reduced-motion: no-preference) {
  .js .site-nav.is-open { animation: site-drop 200ms ease; }
  @keyframes site-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}
@media (min-width: 768px) {
  .site-header__inner { padding: 0 var(--space-6); gap: var(--space-3); }
  .site-header__logo img { height: 28px; }
}
@media (min-width: 1024px) {
  .site-header__inner { padding: 0 var(--space-8); gap: var(--space-4); }
  .site-menu-toggle { display: none; }
  .site-nav, .js .site-nav.is-open {
    display: flex; position: static; gap: var(--space-6); margin-right: var(--space-2);
    padding: 0; background: none; border: 0; box-shadow: none; animation: none;
  }
  .site-nav a { min-height: 0; font-size: 14px; }
  .site-nav a + a { border-top: 0; }
}

/* ---------- Sections ---------- */
.site-section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.site-section + .site-section { border-top: 1px solid var(--border); }
.site-section--sunken { background: var(--surface-sunken); }
.site-section__head { display: grid; gap: var(--space-3); max-width: 760px; margin-bottom: var(--space-8); }
.site-section__head--center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.site-lead { color: var(--ink-muted); }
@media (min-width: 1024px) { .site-section { padding-top: var(--space-16); padding-bottom: var(--space-16); } }

/* heading-1 size on phones, display from 768px: one display per screen */
.site-title { font-size: 36px; line-height: 42px; font-weight: 600; letter-spacing: -0.015em; overflow-wrap: break-word; }
@media (min-width: 768px) { .site-title { font-size: 56px; line-height: 60px; letter-spacing: -0.02em; } }

/* ---------- Hero ---------- */
.site-hero { display: grid; gap: var(--space-8); }
.site-hero__text { display: grid; gap: var(--space-4); max-width: 880px; }
.site-hero__text .vx-actions { margin-top: var(--space-2); }
.site-hero__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.site-hero__demo { margin: 0; min-width: 0; }
/* the pinned resource column takes the card surface, not the page background */
.site-hero__demo .vx-booking__row > :first-child { background: var(--surface); }
.site-hero__hint { color: var(--ink-muted); font-size: 13px; line-height: 18px; margin: 0 0 var(--space-3); }
.site-demo-bar {
  display: grid; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border);
}
.site-demo-bar__text { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.site-demo-bar__text strong { font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; }
.site-demo-bar__text span { font-variant-numeric: tabular-nums; }
.site-hero__note { margin-top: var(--space-3); color: var(--ink-subtle); font-size: 13px; line-height: 18px; }
@media (min-width: 768px) {
  .site-hero__text .vx-actions { justify-content: flex-start; }
  .site-demo-bar { grid-template-columns: 1fr auto; align-items: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .site-hero__demo .vx-slot { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
}

/* ---------- Brand band: the four pieces of the mark, square meets round ---------- */
.site-band { display: grid; grid-template-columns: repeat(4, 1fr); height: 8px; }
.site-band i:nth-child(1) { background: var(--brand-red); }
.site-band i:nth-child(2) { background: var(--brand-green); }
.site-band i:nth-child(3) { background: var(--brand-blue); }
.site-band i:nth-child(4) { background: var(--brand-yellow); }

/* ---------- Markers: one brand piece per category (padel red, clubs green, hire blue, events/hospitality yellow) ---------- */
/* Colour and quarter are separate: --red/--green/--blue/--yellow pick the piece, --bl/--tr/--tl/--br the rounded
   corner. The module cards combine them so no two cards match and no colour or shape repeats next to or under
   itself at one, two or four columns. */
.site-marker { width: 24px; height: 24px; flex: none; background: var(--brand-red); border-radius: 0 0 0 var(--radius-full); }
.site-marker--green { background: var(--brand-green); }
.site-marker--blue { background: var(--brand-blue); }
.site-marker--yellow { background: var(--brand-yellow); }
.site-marker--bl { border-radius: 0 0 0 var(--radius-full); }
.site-marker--tr { border-radius: 0 var(--radius-full) 0 0; }
.site-marker--tl { border-radius: var(--radius-full) 0 0 0; }
.site-marker--br { border-radius: 0 0 var(--radius-full) 0; }

/* ---------- Activity tabs ---------- */
.site-activities .vx-tabs { margin-bottom: var(--space-6); }
.site-activities .vx-tab { gap: var(--space-2); }
.site-activities .vx-tab .site-marker { width: 12px; height: 12px; }
.site-panel { display: grid; gap: var(--space-6); }
.js .site-panel[hidden] { display: none; }
.site-panel__intro { display: grid; gap: var(--space-3); align-content: start; }
.site-panel__flow { display: grid; gap: var(--space-3); align-content: start; }
.site-panel__flow h4 { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.site-checks { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.site-checks li { display: grid; grid-template-columns: 18px 1fr; gap: var(--space-3); align-items: start; }
.site-checks svg { width: 18px; height: 18px; margin-top: 3px; color: var(--success-text); }
.site-flow { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; counter-reset: flow; }
.site-flow li {
  counter-increment: flow; display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); align-items: center;
  padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.site-flow li::before {
  content: counter(flow); display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full);
  background: var(--surface-raised); color: var(--ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) { .site-panel { grid-template-columns: 1fr 1fr; gap: var(--space-12); } }
@media (prefers-reduced-motion: no-preference) {
  .js .site-panel:not([hidden]) { animation: site-fade 200ms ease; }
  @keyframes site-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- Module cards ---------- */
.site-cards { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.site-cards .vx-card { display: grid; gap: var(--space-2); align-content: start; height: 100%; }
.site-cards .vx-card .site-marker { margin-bottom: var(--space-2); }
.site-cards .vx-card p { color: var(--ink-muted); }
@media (min-width: 768px) { .site-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 1024px) { .site-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site-cards .vx-card { transition: border-color 120ms ease, transform 120ms ease; }
  .site-cards .vx-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
}

/* ---------- Member app: steps next to the access pass ---------- */
.site-app { display: grid; gap: var(--space-8); align-items: center; }
.site-steps { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.site-steps li { counter-increment: step; display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); }
.site-steps li::before {
  content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-variant-numeric: tabular-nums;
}
.site-steps h3 { margin-top: 8px; margin-bottom: var(--space-1); }
.site-steps p { color: var(--ink-muted); }
.site-app .vx-pass__code { color: var(--on-brand); }
.site-app__pass { display: grid; gap: var(--space-3); justify-items: center; }
.site-app__pass > p { color: var(--ink-subtle); font-size: 13px; line-height: 18px; text-align: center; }
@media (min-width: 1024px) { .site-app { grid-template-columns: 3fr 2fr; gap: var(--space-16); } }

/* ---------- Feature points ---------- */
.site-points { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.site-points li { display: grid; gap: var(--space-2); align-content: start; padding-left: var(--space-4); border-left: 2px solid var(--border-strong); }
.site-points p { color: var(--ink-muted); }
@media (min-width: 768px) { .site-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } }
@media (min-width: 1024px) { .site-points--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Showcase: a product frame next to a feature list ---------- */
.site-showcase { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 1024px) {
  .site-showcase { grid-template-columns: 7fr 5fr; gap: var(--space-12); }
  .site-showcase--reverse > .site-frame { order: 2; }
  .site-showcase > .site-frame { position: sticky; top: calc(var(--appbar-height) + var(--space-6)); }
}

/* A window onto the product: surface-sunken well with a title bar, real components inside (no nested cards) */
.site-frame {
  min-width: 0; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.site-section--sunken .site-frame { background: var(--bg); }
.site-frame__bar {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border); background: var(--surface); font-size: 13px; line-height: 18px; color: var(--ink-muted);
}
.site-frame__bar img { width: 21px; height: 16px; }
.site-frame__bar .vx-badge { margin-left: auto; }
.site-frame__body { display: grid; gap: var(--space-4); padding: var(--space-4); }
.site-frame .vx-card { padding: var(--space-4); }
.site-frame .vx-stat__value { font-size: 22px; line-height: 28px; }
.site-frame .vx-stat__delta { margin: 0; }
@media (min-width: 768px) {
  .site-frame__body { padding: var(--space-5); }
  .site-frame .vx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.site-occupancy { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.site-occupancy__bars { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; align-items: end; height: 96px; }
.site-occupancy__bars i { display: block; height: var(--h); background: var(--accent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.site-occupancy__bars i:nth-child(n + 6):nth-child(-n + 8) { background: var(--brand-yellow); }
.site-occupancy__axis { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .js .site-reveal .site-occupancy__bars i { transform: scaleY(0); transform-origin: bottom; transition: transform 200ms ease; }
  .js .site-reveal.is-visible .site-occupancy__bars i { transform: none; }
  .js .site-reveal.is-visible .site-occupancy__bars i:nth-child(2n) { transition-delay: 60ms; }
}

/* agenda and audit rows: time, text with sub line, badge */
.site-agenda, .site-audit { display: grid; margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.site-agenda li, .site-audit li {
  display: grid; grid-template-columns: 48px 1fr auto; gap: var(--space-3); align-items: center;
  padding: var(--space-3) var(--space-4); font-weight: 500;
}
.site-agenda li + li, .site-audit li + li { border-top: 1px solid var(--border); }
.site-agenda .vx-num, .site-audit .vx-num { color: var(--ink-muted); font-size: 13px; }
.site-agenda small, .site-audit small { display: block; color: var(--ink-muted); font-size: 13px; line-height: 18px; font-weight: 400; }
.site-iban {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.site-iban .code { font-size: 15px; letter-spacing: 0.04em; }

/* ---------- Feature list with brand icon tiles (green, blue, yellow: never text or icons on red) ---------- */
.site-features { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.site-features li { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); align-items: start; }
.site-features h3 { margin-bottom: var(--space-1); }
.site-features p { color: var(--ink-muted); }
.site-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--on-brand); }
.site-icon svg { width: 20px; height: 20px; }
/* Optical centre: a quarter disc's largest inscribed circle sits ~r/(1+√2) from its square corner, about 3px off the
   box centre. Move the icon away from the rounded corner so it looks centred in the piece. */
.site-icon.site-marker--tl svg { transform: translate(3px, 3px); }
.site-icon.site-marker--tr svg { transform: translate(-3px, 3px); }
.site-icon.site-marker--bl svg { transform: translate(3px, -3px); }
.site-icon.site-marker--br svg { transform: translate(-3px, -3px); }
.site-icon--green { background: var(--brand-green); }
.site-icon--blue { background: var(--brand-blue); }
.site-icon--yellow { background: var(--brand-yellow); }
@media (min-width: 768px) { .site-features { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
@media (min-width: 1024px) { .site-showcase .site-features { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ---------- Why: bento cards with a small product visual on top ---------- */
.site-bento { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.site-bento .vx-card { display: grid; gap: var(--space-2); align-content: start; height: 100%; }
.site-bento .vx-card p { color: var(--ink-muted); }
.site-visual { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: 112px; margin: 0 0 var(--space-3); padding: var(--space-4); background: var(--surface-sunken); border-radius: var(--radius-md); list-style: none; }
.site-visual--merge .vx-badge { text-decoration: line-through; color: var(--ink-subtle); }
.site-visual__arrow { width: 20px; height: 20px; color: var(--ink-muted); }
.site-visual--merge img { width: 43px; height: 32px; }
.site-visual--hall { display: grid; gap: var(--space-2); }
.site-visual--hall .vx-slot { cursor: default; }
.site-visual__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.site-visual--locations { display: grid; gap: var(--space-2); }
.site-visual--locations li { display: grid; grid-template-columns: 16px 1fr; gap: 2px var(--space-3); align-items: center; font-weight: 500; font-size: 14px; line-height: 20px; }
.site-visual--locations .site-marker { width: 16px; height: 16px; grid-row: span 2; }
.site-visual--locations small { grid-column: 2; color: var(--ink-muted); font-weight: 400; font-size: 12px; line-height: 16px; }
.site-visual--brands { justify-content: center; }
.site-visual--brands .vx-btn { pointer-events: none; }
@media (min-width: 768px) { .site-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }

/* ---------- CTA band between sections ---------- */
.site-cta-band { background: var(--surface); border-top: 1px solid var(--border); }
.site-cta-band__inner { display: grid; gap: var(--space-4); padding-top: var(--space-8); padding-bottom: var(--space-8); }
.site-cta-band__inner .site-lead { margin-top: var(--space-1); }
@media (min-width: 768px) { .site-cta-band__inner { grid-template-columns: 1fr auto; align-items: center; gap: var(--space-8); } }

/* ---------- Switching: notes next to a timeline of phases ---------- */
.site-switch { display: grid; gap: var(--space-8); }
.site-switch__intro { display: grid; gap: var(--space-3); align-content: start; }
.site-switch__intro .site-section__head { margin-bottom: var(--space-3); }
.site-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: phase; }
.site-timeline li {
  counter-increment: phase; position: relative; display: grid; gap: var(--space-1);
  padding: 0 0 var(--space-8) calc(48px + var(--space-4));
}
.site-timeline li::before {
  content: counter(phase); position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--brand-blue); color: var(--on-brand);
  font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; z-index: 1;
}
.site-timeline li.site-timeline--green::before { background: var(--brand-green); }
.site-timeline li.site-timeline--yellow::before { background: var(--brand-yellow); }
.site-timeline li::after { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: var(--border-strong); }
.site-timeline li:last-child { padding-bottom: 0; }
.site-timeline li:last-child::after { display: none; }
.site-timeline h3 { margin-top: 12px; }
.site-timeline p { color: var(--ink-muted); }
@media (min-width: 1024px) { .site-switch { grid-template-columns: 2fr 3fr; gap: var(--space-16); } }

/* ---------- FAQ ---------- */
.site-faq-layout { display: grid; gap: var(--space-8); }
.site-faq-aside { display: grid; gap: var(--space-4); align-content: start; }
.site-faq-aside .site-section__head { margin-bottom: 0; }
.site-faq-aside__card { display: grid; gap: var(--space-2); justify-items: start; }
.site-faq-aside__card img { width: 43px; height: 32px; margin-bottom: var(--space-2); }
.site-faq-aside__card p { color: var(--ink-muted); margin-bottom: var(--space-2); }
.site-faq { display: grid; border-top: 1px solid var(--border); }
.site-faq details { border-bottom: 1px solid var(--border); }
.site-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 64px; padding: var(--space-4) 0; cursor: pointer; list-style: none;
  font-size: 17px; line-height: 24px; font-weight: 500;
}
.site-faq summary::-webkit-details-marker { display: none; }
.site-faq summary svg {
  width: 32px; height: 32px; padding: 7px; flex: none; border-radius: var(--radius-full);
  background: var(--surface-raised); color: var(--accent-text);
}
.site-faq details[open] summary svg { transform: rotate(45deg); background: var(--accent); color: var(--on-accent); }
.site-faq details p { padding: 0 var(--space-12) var(--space-5) 0; color: var(--ink-muted); }
@media (hover: hover) { .site-faq summary:hover { color: var(--accent-text); } }
@media (prefers-reduced-motion: no-preference) {
  .site-faq summary svg { transition: transform 120ms ease, background-color 120ms ease, color 120ms ease; }
  .site-faq details[open] p { animation: site-fade 200ms ease; }
}
@media (min-width: 1024px) {
  .site-faq-layout { grid-template-columns: 2fr 3fr; gap: var(--space-16); }
  .site-faq-aside { position: sticky; top: calc(var(--appbar-height) + var(--space-6)); }
}

/* ---------- Closing call to action ---------- */
.site-cta { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.site-cta__body { display: grid; gap: var(--space-8); padding: var(--space-6) var(--space-4); align-items: center; }
.site-cta__text { display: grid; gap: var(--space-4); }
.site-cta__title { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.site-cta__steps { display: grid; gap: var(--space-3); margin: var(--space-2) 0; padding: 0; list-style: none; counter-reset: cta; }
.site-cta__steps li {
  counter-increment: cta; display: grid; grid-template-columns: 32px 1fr; gap: 2px var(--space-3); color: var(--ink-muted);
}
.site-cta__steps li::before {
  content: counter(cta); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: var(--radius-full); border: 1px solid var(--border-strong); color: var(--ink); font-weight: 600; font-size: 14px;
}
.site-cta__steps strong { color: var(--ink); font-weight: 600; }
.site-cta .vx-actions { margin-top: var(--space-2); }
.site-cta__note { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.site-cta__mark { display: none; }
@media (min-width: 768px) {
  .site-cta__body { padding: var(--space-12); }
  .site-cta__title { font-size: 40px; line-height: 44px; letter-spacing: -0.015em; }
  .site-cta__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .site-cta .vx-actions { justify-content: flex-start; }
}
@media (min-width: 1024px) {
  .site-cta__body { grid-template-columns: 1fr auto; gap: var(--space-12); padding: var(--space-16); }
  .site-cta__mark { display: block; width: 240px; height: auto; }
}

/* ---------- Footer ---------- */
.site-footer { padding-bottom: env(safe-area-inset-bottom); }
.site-footer__inner { display: grid; gap: var(--space-8); padding-top: var(--space-12); color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.site-footer__brand { display: grid; gap: var(--space-3); max-width: 320px; }
.site-footer__brand img { height: 24px; width: auto; justify-self: start; }
.site-footer__col { display: grid; gap: var(--space-2); align-content: start; }
.site-footer__col h2 { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); margin-bottom: var(--space-1); }
.site-footer__col a { color: var(--ink-muted); text-decoration: none; }
@media (hover: hover) { .site-footer__col a:hover { color: var(--ink); text-decoration: underline; } }
.site-footer__legal { border-top: 1px solid var(--border); padding-top: var(--space-4); font-size: 13px; line-height: 18px; }
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .site-footer__legal { grid-column: 1 / -1; }
}

/* ---------- Reveal on scroll: only with JS and without reduced motion; content is visible otherwise ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .site-reveal { opacity: 0; transform: translateY(12px); transition: opacity 200ms ease, transform 200ms ease; }
  .js .site-reveal.is-visible { opacity: 1; transform: none; }
  .js .site-cards > li.site-reveal:nth-child(4n + 2) { transition-delay: 40ms; }
  .js .site-cards > li.site-reveal:nth-child(4n + 3) { transition-delay: 80ms; }
  .js .site-cards > li.site-reveal:nth-child(4n + 4) { transition-delay: 120ms; }
}

/* ---------- Text pages: privacy, terms, support and 404 (the pages the app links to) ---------- */
.site-doc { display: grid; gap: var(--space-8); max-width: 760px; padding-top: var(--space-6); padding-bottom: var(--space-12); }
.site-doc__head { display: grid; gap: var(--space-3); }
/* heading-2 size on phones (long Dutch words), heading-1 from 768px */
.site-doc__title { font-size: 28px; line-height: 34px; overflow-wrap: break-word; }
@media (min-width: 768px) { .site-doc__title { font-size: 40px; line-height: 44px; } }
.site-doc__meta { color: var(--ink-subtle); font-size: 14px; line-height: 20px; }
.site-doc__toc { display: grid; gap: var(--space-2); }
.site-doc__toc ol { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-6); }
.site-doc__toc a { color: var(--accent-text); }
.site-doc section { display: grid; gap: var(--space-3); scroll-margin-top: calc(var(--appbar-height) + var(--space-4)); }
.site-doc section > :is(ul, ol):not(.site-help) { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-6); }
.site-doc section > p, .site-doc section > :is(ul, ol):not(.site-help) > li { color: var(--ink-muted); }
.site-doc strong { color: var(--ink); font-weight: 600; }
.site-doc .code { overflow-wrap: anywhere; }
/* label/value list (what is processed, where to go): stacked on phones, two columns from 768px */
.site-doc__list { display: grid; margin: 0; border-top: 1px solid var(--border); }
.site-doc__list > div { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.site-doc__list dt { font-weight: 600; color: var(--ink); }
.site-doc__list dd { margin: 0; color: var(--ink-muted); }
@media (min-width: 768px) {
  .site-doc { padding-top: var(--space-12); padding-bottom: var(--space-16); }
  .site-doc__list > div { grid-template-columns: 220px 1fr; gap: var(--space-6); }
}
/* values the owner still has to fill in, visible on purpose */
.site-placeholder { padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--ink); font-family: var(--font-mono); font-size: 0.9em; }
/* where to go: the venue or Venurix */
.site-help { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.site-help .vx-card { display: grid; gap: var(--space-2); align-content: start; height: 100%; }
.site-help .vx-card p { color: var(--ink-muted); }
.site-help .vx-btn { justify-self: start; margin-top: var(--space-2); }
@media (min-width: 768px) { .site-help { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
.site-doc .site-faq details p { color: var(--ink-muted); }
.site-notfound { padding-top: var(--space-12); padding-bottom: var(--space-16); }

/* ---------- Footer: legal links and the cookie settings button ---------- */
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.site-footer__legal a, .site-footer__legal button { color: var(--ink-muted); font: inherit; text-decoration: none; }
.site-footer__legal button { padding: 0; background: none; border: 0; cursor: pointer; }
.site-footer__legal span { margin-right: auto; }
@media (hover: hover) { .site-footer__legal a:hover, .site-footer__legal button:hover { color: var(--ink); text-decoration: underline; } }

/* ---------- Cookie consent (only when Google Analytics is configured) ---------- */
/* Not a modal: the page stays usable. Refuse and accept are equally prominent (AP guidance). */
.site-consent {
  position: fixed; z-index: 150; left: var(--space-3); right: var(--space-3);
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  display: grid; gap: var(--space-3); padding: var(--space-4);
  background: var(--surface-raised); color: var(--ink); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.site-consent[hidden] { display: none; }
.site-consent__title { font-weight: 600; }
.site-consent p { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.site-consent .vx-actions { flex-direction: column; }
@media (min-width: 768px) {
  .site-consent { left: auto; right: var(--space-6); bottom: var(--space-6); width: 440px; padding: var(--space-5); }
  .site-consent .vx-actions { flex-direction: row; justify-content: flex-start; }
  .site-consent .vx-actions > .vx-btn { flex: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .site-consent:not([hidden]) { animation: vx-toast-in 200ms ease; }
}

/* ---------- Status notice in the hero: not live yet, launching partners wanted ---------- */
.site-notice {
  display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; max-width: 100%;
  padding: 6px var(--space-3) 6px 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-full);
  color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none;
}
.site-notice .vx-badge { flex: none; }
.site-notice { font-size: 13px; white-space: nowrap; }
.site-notice svg { display: none; width: 16px; height: 16px; flex: none; color: var(--ink-muted); }
@media (min-width: 768px) { .site-notice { font-size: 14px; } .site-notice svg { display: block; } }
@media (hover: hover) { .site-notice:hover { border-color: var(--accent); } }

/* ---------- Launching partners ---------- */
.site-partners { display: grid; gap: var(--space-8); }
.site-partners__intro { display: grid; gap: var(--space-4); align-content: start; }
.site-partners__intro .site-section__head { margin-bottom: 0; }
.site-partners__intro .vx-actions { justify-content: flex-start; }
.site-partners__cols { display: grid; gap: var(--space-3); }
.site-partners__cols .vx-card { display: grid; gap: var(--space-3); align-content: start; }
.site-partners__cols h3 { display: flex; align-items: center; gap: var(--space-3); }
.site-partners__cols .site-icon { width: 32px; height: 32px; }
.site-partners__cols .site-icon svg { width: 16px; height: 16px; }
@media (min-width: 768px) { .site-partners__cols { grid-template-columns: 1fr 1fr; gap: var(--space-4); } }
@media (min-width: 1024px) { .site-partners { grid-template-columns: 5fr 7fr; gap: var(--space-12); } }

/* ---------- Launching partner dialog ---------- */
.site-dialog .vx-dialog__header { align-items: center; }
.site-dialog__band { display: grid; grid-template-columns: repeat(4, 1fr); height: 6px; }
.site-dialog__band i:nth-child(1) { background: var(--brand-red); }
.site-dialog__band i:nth-child(2) { background: var(--brand-green); }
.site-dialog__band i:nth-child(3) { background: var(--brand-blue); }
.site-dialog__band i:nth-child(4) { background: var(--brand-yellow); }
.site-dialog .vx-dialog__body ul { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.site-dialog .vx-dialog__body li { display: grid; grid-template-columns: 18px 1fr; gap: var(--space-2); color: var(--ink); }
.site-dialog .vx-dialog__body li svg { width: 18px; height: 18px; margin-top: 2px; color: var(--success-text); }
.site-dialog__note { font-size: 13px; line-height: 18px; color: var(--ink-subtle); }
.site-dialog .vx-dialog__header .vx-btn--icon svg { width: 18px; height: 18px; }