/* =====================================================================
   Public marketing website — app layer (like booking.css / portal.css).
   Uses only the existing tokens (variables.css), components and keyframes
   (animations.css). Adds: site header/nav/footer, section layouts, and the
   HTML/CSS product-preview illustrations.

   Motion rule (WCAG 2.2.2, animations.css policy): every sequence here is
   finite and ends within 5 s — no looping decoration. The global
   prefers-reduced-motion override in animations.css jumps every animation
   to its final state.
   ===================================================================== */

.rp-site {
  --rp-site-display: clamp(2rem, 1.35rem + 2.7vw, 3.25rem);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--rp-surface);
}
/* Every container on the public website — header, hero, sections, footer — shares one width, so
   the logo, the hero columns and the sections below all line up on the same two edges. */
.rp-site .rp-container { max-width: var(--rp-container-site); }

.rp-site main { flex: 1 0 auto; }
.rp-site main:focus { outline: none; }

/* ---------- Header & navigation ---------- */
/* The header follows the reader. It sits on Bootstrap's sticky-top layer, below the off-canvas
   menu and its backdrop, and it only grows a shadow once the page has moved, so the top of the
   page still reads flat. The shadow transition is switched off by the reduced-motion rule in
   animations.css. Anchor targets already clear it: style.css sets scroll-padding-top. */
.rp-site-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--rp-surface);
  border-bottom: 1px solid var(--rp-border);
  transition: box-shadow var(--rp-dur) var(--rp-ease-out);
}
.rp-site-header.is-stuck { box-shadow: var(--rp-shadow-sm); }
.rp-site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--rp-space-4); min-height: var(--rp-header-h); }
.rp-site-header .rp-brand { padding: 0; }

.rp-site-nav { --bs-offcanvas-width: min(22rem, 100vw); }
.rp-site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rp-space-1); }
.rp-site-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--rp-target-touch);
  padding: 0 var(--rp-space-3);
  border-radius: var(--rp-radius);
  color: var(--rp-text);
  font-weight: var(--rp-fw-medium);
  text-decoration: none;
  transition: background-color var(--rp-dur-fast) var(--rp-ease-out), color var(--rp-dur-fast) var(--rp-ease-out);
}
.rp-site-nav__link:hover { background: var(--rp-surface-hover); color: var(--rp-text); }
/* Current page: colour + background + a bar (never colour alone) */
.rp-site-nav__link[aria-current="page"] { color: var(--rp-brand-900); background: var(--rp-primary-subtle); box-shadow: inset 3px 0 0 var(--rp-primary); }
.rp-site-nav__actions { display: flex; flex-direction: column; gap: var(--rp-space-3); margin-top: var(--rp-space-5); }

/* The full navigation row needs 1200 px: in German and Spanish it did not fit at 992–1199 px (links
   wrapped to three lines and "Get Started" was pushed off screen), so the menu stays off-canvas below
   that (UI-002). Links and buttons never wrap inside the row. */
@media (min-width: 1200px) {
  .rp-site-nav .offcanvas-body { align-items: center; gap: var(--rp-space-5); }
  .rp-site-nav__list { flex-direction: row; }
  .rp-site-nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--rp-primary); }
  .rp-site-nav__actions { flex-direction: row; margin-top: 0; }
  .rp-site-nav__link,
  .rp-site-nav__actions .btn { white-space: nowrap; }
}
/* 1200–1399 px: the row is tight in Spanish and German, so the switcher keeps its globe and drops the
   language name, which stays in the button's accessible name (as in the narrow portal top bar), and
   the links sit a little closer together. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .rp-site-header__inner { gap: var(--rp-space-3); }
  .rp-site-nav .offcanvas-body { gap: var(--rp-space-3); }
  .rp-site-nav__link { padding-inline: var(--rp-space-2); }
  .rp-site-nav__actions { gap: var(--rp-space-2); }
  .rp-site-nav__actions .rp-langswitch__current { display: none; }
  .rp-site-nav__actions .rp-langswitch__toggle { padding-inline: var(--rp-space-2); }
}

/* ---------- Sections ---------- */
.rp-site-section { padding-block: var(--rp-space-8); }
.rp-site-section--muted { background: var(--rp-bg-booking); border-block: 1px solid var(--rp-border); }
.rp-site-section__head { max-width: 46rem; margin-bottom: var(--rp-space-6); }
.rp-site-section__head--center { margin-inline: auto; text-align: center; }
.rp-site-section__head h2 { font-size: var(--rp-fs-3xl); letter-spacing: var(--rp-tracking-tight); margin-bottom: var(--rp-space-3); }
.rp-site-section__head p { color: var(--rp-text-muted); font-size: var(--rp-fs-md); margin: 0; }
.rp-site-section__head p.rp-eyebrow { color: var(--rp-primary); font-size: var(--rp-fs-sm); margin-bottom: var(--rp-space-2); }
.rp-site-section__more { margin-top: var(--rp-space-6); }

/* Sub-page heading band */
.rp-site-pagehead { padding-block: var(--rp-space-8) var(--rp-space-7); background: var(--rp-bg-booking); border-bottom: 1px solid var(--rp-border); }
.rp-site-pagehead h1 { font-size: var(--rp-site-display); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--rp-space-3); max-width: 40rem; }
.rp-site-pagehead .rp-lead { max-width: 42rem; margin: 0; }

/* ---------- Hero ---------- */
.rp-hero { padding-block: var(--rp-space-8); overflow: hidden; }
.rp-hero__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--rp-space-7); align-items: center; }
.rp-hero h1 { font-size: var(--rp-site-display); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--rp-space-4); }
.rp-hero .rp-lead { font-size: var(--rp-fs-md); max-width: 34rem; }
.rp-hero__actions { margin-top: var(--rp-space-6); }
.rp-hero__points { list-style: none; padding: 0; margin: var(--rp-space-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--rp-space-2) var(--rp-space-5); color: var(--rp-text-muted); font-size: var(--rp-fs-sm); }
.rp-hero__points li { display: inline-flex; align-items: center; gap: var(--rp-space-2); }
.rp-hero__points .bi { color: var(--rp-success); }

/* ---------- Product preview (decorative illustration, role="img") ---------- */
@keyframes rp-site-select {
  from { background: var(--rp-surface); color: var(--rp-text); border-color: var(--rp-border-strong); }
  to { background: var(--rp-primary); color: var(--rp-on-primary); border-color: var(--rp-primary); }
}
@keyframes rp-site-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes rp-site-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.rp-preview { position: relative; padding: var(--rp-space-6) var(--rp-space-5) var(--rp-space-7); }
.rp-preview__window {
  background: var(--rp-surface);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-xl);
  box-shadow: var(--rp-shadow-lg);
  overflow: hidden;
  animation: rp-scale-in var(--rp-dur-slow) var(--rp-ease-out) both;
}
.rp-preview__bar { display: flex; align-items: center; gap: var(--rp-space-2); padding: var(--rp-space-3) var(--rp-space-4); border-bottom: 1px solid var(--rp-border); background: var(--rp-surface-muted); }
.rp-preview__dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--rp-border-strong); }
.rp-preview__url { margin-left: var(--rp-space-2); font-size: var(--rp-fs-xs); color: var(--rp-text-muted); background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-pill); padding: 0.125rem var(--rp-space-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rp-preview__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--rp-space-5); padding: var(--rp-space-5); }
.rp-preview__event { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--rp-space-3); }
.rp-preview__logo { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--rp-radius); background: var(--rp-primary-subtle); color: var(--rp-brand-900); font-weight: var(--rp-fw-bold); font-size: var(--rp-fs-sm); }
.rp-preview__event strong { display: block; font-size: var(--rp-fs-base); }
.rp-preview__event span { font-size: var(--rp-fs-sm); color: var(--rp-text-muted); }
.rp-preview__label { font-size: var(--rp-fs-xs); font-weight: var(--rp-fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rp-text-muted); margin: 0 0 var(--rp-space-2); }

.rp-preview__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; text-align: center; font-size: var(--rp-fs-xs); }
.rp-preview__dow { color: var(--rp-text-muted); font-weight: var(--rp-fw-semibold); padding-bottom: 0.125rem; }
.rp-preview__day { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--rp-radius-sm); border: 1px solid transparent; font-weight: var(--rp-fw-medium); color: var(--rp-text); }
.rp-preview__day.is-off { color: var(--rp-text-muted); text-decoration: line-through; }
.rp-preview__day.is-available { border-color: var(--rp-border); background: var(--rp-surface); }
.rp-preview__day.is-selected { border-color: var(--rp-primary); animation: rp-site-select var(--rp-dur) var(--rp-ease-out) 0.7s both; }

.rp-preview__slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rp-space-2); }
.rp-preview__slot { display: flex; flex-direction: column; align-items: center; padding: var(--rp-space-2); border: 1px solid var(--rp-border-strong); border-radius: var(--rp-radius); font-size: var(--rp-fs-sm); font-weight: var(--rp-fw-semibold); background: var(--rp-surface); white-space: nowrap; }
.rp-preview__slot small { font-size: var(--rp-fs-xs); font-weight: var(--rp-fw-medium); }
.rp-preview__slot.is-full { background: var(--rp-surface-muted); color: var(--rp-text-muted); border-style: dashed; }
.rp-preview__slot.is-selected { animation: rp-site-select var(--rp-dur) var(--rp-ease-out) 1.3s both; }
.rp-preview__persons { display: flex; align-items: center; justify-content: space-between; margin-top: var(--rp-space-3); padding: var(--rp-space-2) var(--rp-space-3); border: 1px solid var(--rp-border); border-radius: var(--rp-radius); font-size: var(--rp-fs-sm); }
.rp-preview__persons strong { font-weight: var(--rp-fw-semibold); }
.rp-preview__cta { margin-top: var(--rp-space-3); display: flex; align-items: center; justify-content: center; gap: var(--rp-space-2); min-height: 2.25rem; border-radius: var(--rp-radius); background: var(--rp-primary); color: var(--rp-on-primary); font-size: var(--rp-fs-sm); font-weight: var(--rp-fw-semibold); }

/* Floating cards */
.rp-preview__float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--rp-space-3);
  max-width: 17rem;
  padding: var(--rp-space-3) var(--rp-space-4);
  background: var(--rp-surface);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-lg);
  box-shadow: var(--rp-shadow-md);
  font-size: var(--rp-fs-sm);
}
.rp-preview__float p { margin: 0; }
.rp-preview__float-title { font-weight: var(--rp-fw-semibold); }
.rp-preview__float-meta { color: var(--rp-text-muted); font-size: var(--rp-fs-xs); }
.rp-preview__float--confirm {
  top: 0;
  right: 0;
  animation: rp-slide-in-right var(--rp-dur-slow) var(--rp-ease-out) 1.9s both, rp-site-float 1.8s var(--rp-ease-in-out) 3s 1;
}
.rp-preview__check { flex-shrink: 0; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--rp-success-subtle); color: var(--rp-success); }
.rp-preview__check svg { width: 1.5rem; height: 1.5rem; }
.rp-preview .rp-check-svg circle { animation-delay: 2.1s; }
.rp-preview .rp-check-svg path { animation-delay: 2.5s; }

/* ---------- Feature cards ---------- */
.rp-site-features { list-style: none; margin: 0; padding: 0; }
.rp-site-feature { height: 100%; }
.rp-site-feature h3 { font-size: var(--rp-fs-md); margin: var(--rp-space-4) 0 var(--rp-space-2); }
.rp-site-feature p { color: var(--rp-text-muted); margin: 0; }
.rp-site-icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--rp-radius); background: var(--rp-primary-subtle); color: var(--rp-primary); font-size: var(--rp-icon-lg); }
.rp-site-icon--accent { background: var(--rp-success-subtle); color: var(--rp-accent); }

/* ---------- Numbered steps (how it works) ---------- */
.rp-site-steps { list-style: none; margin: 0; padding: 0; counter-reset: rp-step; }
.rp-site-steps > li { counter-increment: rp-step; position: relative; }
.rp-site-steps > li::before {
  content: counter(rp-step);
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--rp-primary);
  color: var(--rp-on-primary);
  font-weight: var(--rp-fw-bold);
  margin-bottom: var(--rp-space-4);
}
.rp-site-steps h3 { font-size: var(--rp-fs-md); margin-bottom: var(--rp-space-2); }
.rp-site-steps p { color: var(--rp-text-muted); margin: 0; }

/* ---------- Vertical workflow (vendor onboarding) ---------- */
.rp-site-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rp-site-flow > li { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--rp-space-4); padding-bottom: var(--rp-space-5); }
.rp-site-flow > li:last-child { padding-bottom: 0; }
.rp-site-flow > li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.375rem - 1px); top: 3rem; bottom: 0.25rem; width: 2px; background: var(--rp-border); }
.rp-site-flow h3 { font-size: var(--rp-fs-base); margin: 0.6rem 0 var(--rp-space-1); }
.rp-site-flow p { color: var(--rp-text-muted); margin: 0; }

/* ---------- Horizontal step chips (guest booking flow) ---------- */
.rp-site-chipflow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--rp-space-2) var(--rp-space-2); align-items: center; }
.rp-site-chipflow > li { display: inline-flex; align-items: center; gap: var(--rp-space-2); }
.rp-site-chipflow__chip { display: inline-flex; align-items: center; gap: var(--rp-space-2); padding: var(--rp-space-2) var(--rp-space-3); border: 1px solid var(--rp-border-strong); border-radius: var(--rp-radius-pill); background: var(--rp-surface); font-weight: var(--rp-fw-semibold); font-size: var(--rp-fs-sm); }
.rp-site-chipflow__chip .bi { color: var(--rp-primary); }
.rp-site-chipflow__chip--optional { border-style: dashed; }
.rp-site-chipflow > li:not(:last-child)::after { content: "\f285"; font-family: "bootstrap-icons"; color: var(--rp-text-muted); font-size: var(--rp-fs-xs); }

/* ---------- Two-column split (text + visual) ---------- */
.rp-site-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--rp-space-7); align-items: center; }
.rp-site-checks { list-style: none; margin: var(--rp-space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--rp-space-3); }
.rp-site-checks li { display: flex; gap: var(--rp-space-3); }
.rp-site-checks .bi { color: var(--rp-success); font-size: 1.15rem; flex-shrink: 0; }

/* ---------- FAQ (Bootstrap accordion themed with tokens) ---------- */
.rp-site-faq {
  --bs-accordion-border-color: var(--rp-border);
  --bs-accordion-border-radius: var(--rp-radius-lg);
  --bs-accordion-inner-border-radius: calc(var(--rp-radius-lg) - 1px);
  --bs-accordion-btn-padding-y: var(--rp-space-4);
  --bs-accordion-btn-padding-x: var(--rp-space-5);
  --bs-accordion-body-padding-x: var(--rp-space-5);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: var(--rp-primary-subtle);
  --bs-accordion-active-color: var(--rp-brand-900);
  --bs-accordion-btn-color: var(--rp-text);
  --bs-accordion-color: var(--rp-text);
  max-width: 50rem;
}
.rp-site-faq--center { margin-inline: auto; }
.rp-site-faq .accordion-button { font-weight: var(--rp-fw-semibold); min-height: var(--rp-target-touch); }
.rp-site-faq .accordion-button:focus-visible { outline: var(--rp-focus-width) solid var(--rp-focus); outline-offset: calc(-1 * var(--rp-focus-width) - 2px); z-index: 3; }
.rp-site-faq .accordion-body p:last-child { margin-bottom: 0; }
.rp-site-faq-group + .rp-site-faq-group { margin-top: var(--rp-space-7); }
.rp-site-faq-group h2 { font-size: var(--rp-fs-xl); margin-bottom: var(--rp-space-4); }

/* ---------- CTA band ---------- */
.rp-site-cta { background: var(--rp-primary); color: var(--rp-on-primary); padding-block: var(--rp-space-8); }
.rp-site-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rp-space-5); }
.rp-site-cta h2 { color: var(--rp-on-primary); font-size: var(--rp-fs-3xl); margin-bottom: var(--rp-space-2); }
.rp-site-cta p { margin: 0; color: var(--rp-brand-50); max-width: 36rem; }
.rp-site-cta .btn-outline-light { --bs-btn-color: var(--rp-on-primary); --bs-btn-border-color: var(--rp-on-primary); --bs-btn-hover-bg: var(--rp-brand-800); --bs-btn-hover-color: var(--rp-on-primary); --bs-btn-hover-border-color: var(--rp-on-primary); --bs-btn-active-bg: var(--rp-brand-900); --bs-btn-active-color: var(--rp-on-primary); }
.rp-site-cta :focus-visible { outline-color: var(--rp-on-primary); }

/* ---------- Contact / info cards ---------- */
.rp-site-info h2 { font-size: var(--rp-fs-lg); margin: var(--rp-space-4) 0 var(--rp-space-2); }
.rp-site-info p { color: var(--rp-text-muted); }
.rp-site-info p:last-child { margin-bottom: 0; }

/* ---------- Login selection (reuses the .rp-auth split screen) ---------- */
.rp-login-choices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rp-space-3); }
.rp-login-choice { display: flex; align-items: center; gap: var(--rp-space-4); padding: var(--rp-space-4) var(--rp-space-5); color: var(--rp-text); text-decoration: none; }
.rp-login-choice:hover { color: var(--rp-text); border-color: var(--rp-primary); }
.rp-login-choice__text { display: flex; flex-direction: column; min-width: 0; }
.rp-login-choice__text strong { font-size: var(--rp-fs-md); }
.rp-login-choice__text span { color: var(--rp-text-muted); font-size: var(--rp-fs-sm); }
.rp-login-choice__go { margin-left: auto; color: var(--rp-primary); font-size: var(--rp-icon); }
.rp-login-note { margin-top: var(--rp-space-5); padding: var(--rp-space-4); border-radius: var(--rp-radius-lg); background: var(--rp-surface-muted); border: 1px solid var(--rp-border); font-size: var(--rp-fs-sm); color: var(--rp-text-muted); display: flex; gap: var(--rp-space-3); }
.rp-login-note .bi { color: var(--rp-info); font-size: 1.1rem; }
.rp-login-back { display: inline-flex; align-items: center; gap: var(--rp-space-2); min-height: var(--rp-target-touch); font-weight: var(--rp-fw-semibold); margin-bottom: var(--rp-space-4); }

/* ---------- Footer ---------- */
.rp-site-footer { background: var(--rp-bg-booking); border-top: 1px solid var(--rp-border); font-size: var(--rp-fs-sm); color: var(--rp-text-muted); }
.rp-site-footer__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: var(--rp-space-6); padding-block: var(--rp-space-7) var(--rp-space-6); }
.rp-site-footer .rp-brand { padding: 0; margin-bottom: var(--rp-space-3); }
.rp-site-footer h2 { font-size: var(--rp-fs-sm); font-weight: var(--rp-fw-semibold); color: var(--rp-text); margin-bottom: var(--rp-space-3); }
.rp-site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rp-space-1); }
.rp-site-footer a { color: var(--rp-text-muted); display: inline-flex; align-items: center; min-height: var(--rp-target-min); }
.rp-site-footer a:hover { color: var(--rp-text); }
.rp-site-footer__bottom { border-top: 1px solid var(--rp-border); padding-block: var(--rp-space-4); display: flex; flex-wrap: wrap; gap: var(--rp-space-2) var(--rp-space-4); justify-content: space-between; align-items: center; }
.rp-site-footer__bottom p { margin: 0; }
/* Parent company: present but clearly secondary to the LET’S BOOK 4U brand. */
.rp-site-footer__powered { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.rp-site-footer__powered span { font-size: var(--rp-fs-xs); color: var(--rp-text-muted); }
.rp-site-footer__powered strong { font-size: var(--rp-fs-sm); font-weight: var(--rp-fw-semibold); color: var(--rp-text); }
.rp-site-footer__tagline { margin: 0 0 var(--rp-space-3); }

/* ---------- Scroll reveal (progressive enhancement, see pages/website.js) ---------- */
.rp-js-reveal [data-reveal].is-pending { opacity: 0; }
@media print {
  .rp-js-reveal [data-reveal].is-pending { opacity: 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .rp-hero__grid { gap: var(--rp-space-6); grid-template-columns: minmax(0, 1fr); }
  .rp-hero__text { max-width: 44rem; }
  .rp-preview { padding-inline: var(--rp-space-3); }
}

@media (max-width: 991.98px) {
  .rp-hero__grid,
  .rp-site-split { grid-template-columns: minmax(0, 1fr); }
  .rp-preview { max-width: 36rem; margin-inline: auto; width: 100%; }
  .rp-site-footer__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rp-site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
  .rp-site-section,
  .rp-hero,
  .rp-site-cta { padding-block: var(--rp-space-7); }
  .rp-site-pagehead { padding-block: var(--rp-space-7) var(--rp-space-6); }
  .rp-hero__actions .btn { width: 100%; }
  .rp-site-cta__inner .rp-cluster { width: 100%; }
  .rp-site-cta__inner .btn { flex: 1 1 auto; }
  .rp-site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .rp-preview { padding: var(--rp-space-7) 0 var(--rp-space-8); }
  .rp-preview__body { grid-template-columns: 1fr; padding: var(--rp-space-4); }
  .rp-preview__slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rp-preview__float { max-width: 15rem; }
}

@media (max-width: 400px) {
  .rp-preview__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-site-footer__inner { grid-template-columns: 1fr; }
}

/* =====================================================================
   Homepage (B2B) — one connected product scene in the hero, then the
   vendor story: problem → workflow → booking link → dashboard → venue →
   lifecycle → customer → features → audience → trust → FAQ → CTA.
   Only existing tokens are used. Background rhythm: white / tinted /
   one dark product panel / brand CTA. No gradients.
   ===================================================================== */
.rp-site-section {
  --rp-section-bg: var(--rp-surface);
  padding-block: clamp(3.5rem, 2rem + 4vw, 6rem);
}
.rp-site-section--muted { --rp-section-bg: var(--rp-bg-booking); }
.rp-site-section__head { max-width: 48rem; margin-bottom: var(--rp-space-7); }
.rp-site-section__head h2 { font-size: clamp(1.875rem, 1.35rem + 1.8vw, 2.75rem); line-height: 1.15; }
.rp-site-section__head p { font-size: var(--rp-fs-md); }

/* Dark product panel (dashboard section) */
.rp-site-section--dark {
  --rp-section-bg: var(--rp-slate-900);
  background: var(--rp-slate-900);
  color: var(--rp-slate-0);
}
.rp-site-section--dark .rp-site-section__head h2 { color: var(--rp-slate-0); }
.rp-site-section--dark .rp-site-section__head p,
.rp-site-section--dark .rp-sample-note { color: var(--rp-slate-300); }
/* The product illustration keeps the application palette on its own light surfaces. */
.rp-site-section--dark .rp-bigdash { color: var(--rp-text); }
.rp-site-section--dark .rp-eyebrow { color: var(--rp-brand-200); }
.rp-site-section--dark .rp-inline-checks li { color: var(--rp-slate-0); }
.rp-site-section--dark .rp-inline-checks .bi { color: var(--rp-green-200); }
.rp-site-section--dark :focus-visible { outline-color: var(--rp-slate-0); }

/* ---------- Product animations: armed by pages/website.js ----------
   .rp-anim       animations applied (paused until .is-running)
   no .rp-anim    (no JS / reduced motion) → final state, static          */
.rp-anim:not(.is-running) *,
.rp-anim:not(.is-running) *::before,
.rp-anim:not(.is-running) *::after { animation-play-state: paused !important; }

@keyframes rp-flow-press { 0%, 100% { transform: none; } 50% { transform: scale(0.94); } }
@keyframes rp-flow-out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes rp-flow-text { from { color: var(--rp-text-muted); } to { color: var(--rp-text); } }
@keyframes rp-flow-dot { from { background: var(--rp-border-strong); } to { background: var(--rp-primary); } }
@keyframes rp-flow-mark { from { border-color: var(--rp-border); background: var(--rp-surface); } to { border-color: var(--rp-primary); background: var(--rp-primary-subtle); } }

/* ---------- Shared product-UI pieces (used in every illustration) ---------- */
.rp-ui-head { display: flex; align-items: center; gap: var(--rp-space-3); }
.rp-ui-avatar { flex-shrink: 0; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--rp-radius); background: var(--rp-primary-subtle); color: var(--rp-brand-900); font-weight: var(--rp-fw-bold); font-size: var(--rp-fs-xs); }
.rp-ui-thumb { flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--rp-radius); object-fit: cover; }
.rp-ui-head strong { display: block; line-height: 1.2; }
.rp-ui-muted { color: var(--rp-text-muted); font-size: var(--rp-fs-xs); }
.rp-ui-row { display: flex; align-items: center; justify-content: space-between; gap: var(--rp-space-3); padding-top: var(--rp-space-2); border-top: 1px solid var(--rp-border); }
.rp-ui-row > span:first-child { color: var(--rp-text-muted); }
.rp-ui-label { margin: 0; font-size: var(--rp-fs-xs); font-weight: var(--rp-fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rp-text-muted); }
.rp-ui-chips { display: flex; flex-wrap: wrap; gap: var(--rp-space-1); }
.rp-ui-chip { padding: 0.125rem 0.5rem; border: 1px solid var(--rp-border-strong); border-radius: var(--rp-radius-sm); background: var(--rp-surface); font-weight: var(--rp-fw-semibold); font-variant-numeric: tabular-nums; font-size: var(--rp-fs-xs); }
.rp-ui-chip.is-on { border-color: var(--rp-primary); background: var(--rp-primary-subtle); color: var(--rp-brand-900); }
.rp-ui-url { display: flex; align-items: center; gap: var(--rp-space-2); min-width: 0; padding: var(--rp-space-2) var(--rp-space-3); border: 1px solid var(--rp-control-border); border-radius: var(--rp-radius); background: var(--rp-surface-muted); font-family: var(--rp-font-mono); font-size: var(--rp-fs-xs); }
.rp-ui-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-ui-url .bi { color: var(--rp-primary); flex-shrink: 0; }
.rp-ui-swap { display: grid; }
.rp-ui-swap > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: var(--rp-space-2); min-height: 2.125rem; padding: 0 var(--rp-space-3); border-radius: var(--rp-radius); font-weight: var(--rp-fw-semibold); font-size: var(--rp-fs-sm); }
.rp-ui-idle { background: var(--rp-primary); color: var(--rp-on-primary); opacity: 0; visibility: hidden; } /* final state: replaced by .rp-ui-done */
.rp-ui-done { background: var(--rp-success-subtle); color: var(--rp-success-emphasis); border: 1px solid var(--rp-success-border); }
.rp-ui-tags { display: flex; flex-wrap: wrap; gap: var(--rp-space-1); }
.rp-ui-tag { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.125rem 0.4rem; white-space: nowrap; border-radius: var(--rp-radius-pill); background: var(--rp-primary-subtle); color: var(--rp-brand-900); font-size: var(--rp-fs-xs); font-weight: var(--rp-fw-semibold); }
.rp-ui-field { display: flex; align-items: center; justify-content: space-between; gap: var(--rp-space-3); padding: var(--rp-space-2) var(--rp-space-3); border: 1px solid var(--rp-border); border-radius: var(--rp-radius); background: var(--rp-surface); font-size: var(--rp-fs-sm); }
.rp-ui-field > span:first-child { color: var(--rp-text-muted); }
.rp-ui-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rp-space-1); }
.rp-ui-rows li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: var(--rp-space-2); padding: var(--rp-space-2); border: 1px solid var(--rp-border); border-radius: var(--rp-radius); font-size: var(--rp-fs-sm); background: var(--rp-surface); }
.rp-ui-rows li > span:first-child { font-weight: var(--rp-fw-semibold); font-variant-numeric: tabular-nums; }
.rp-ui-rows li > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-ui-rows li.is-new { border-color: var(--rp-primary); background: var(--rp-primary-subtle); box-shadow: inset 3px 0 0 var(--rp-primary); }
.rp-ui-rows .rp-status { font-size: var(--rp-fs-xs); padding: 0.125rem 0.5rem; }
.rp-ui-seg { display: flex; border: 1px solid var(--rp-border-strong); border-radius: var(--rp-radius); overflow: hidden; font-size: var(--rp-fs-xs); }
.rp-ui-seg span { flex: 1; text-align: center; padding: 0.3rem 0.5rem; }
.rp-ui-seg .is-on { background: var(--rp-primary); color: var(--rp-on-primary); font-weight: var(--rp-fw-semibold); }
.rp-ui-days { display: flex; gap: 0.25rem; }
.rp-ui-days span { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--rp-border-strong); color: var(--rp-text-muted); font-size: var(--rp-fs-xs); }
.rp-ui-days .is-on { border-color: var(--rp-primary); background: var(--rp-primary-subtle); color: var(--rp-brand-900); font-weight: var(--rp-fw-bold); }
.rp-ui-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--rp-space-2); font-size: var(--rp-fs-sm); }
.rp-ui-switch { position: relative; flex-shrink: 0; width: 2rem; height: 1.125rem; border-radius: var(--rp-radius-pill); background: var(--rp-primary); }
.rp-ui-switch::after { content: ""; position: absolute; top: 0.1875rem; right: 0.1875rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--rp-surface); }
.rp-ui-meter { height: 0.5rem; border-radius: var(--rp-radius-pill); background: var(--rp-slate-100); overflow: hidden; }
.rp-ui-meter span { display: block; width: 80%; height: 100%; border-radius: inherit; background: var(--rp-primary); }
.rp-ui-meter--full span { width: 100%; background: var(--rp-slate-700); }
.rp-ui-meter--q span { width: 30%; }
.rp-ui-meter--h span { width: 15%; }
.rp-ui-bar { display: flex; align-items: center; gap: var(--rp-space-2); padding: var(--rp-space-2) var(--rp-space-3); border-bottom: 1px solid var(--rp-border); background: var(--rp-surface-muted); }
.rp-ui-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--rp-border-strong); }
.rp-ui-bar__title { margin: 0 0 0 var(--rp-space-2); font-size: var(--rp-fs-xs); color: var(--rp-text-muted); background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-pill); padding: 0.125rem var(--rp-space-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-step-badge { display: inline-flex; align-items: center; gap: var(--rp-space-2); margin: 0; font-size: var(--rp-fs-xs); font-weight: var(--rp-fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rp-text-muted); }
.rp-step-badge b { display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--rp-primary); color: var(--rp-on-primary); letter-spacing: 0; }

/* ---------- Hero ---------- */
/* The backdrop is one supplied artwork: the blue shapes and the venue photograph are part of the
   image, so nothing is drawn here. Its left half is almost white, which is where the text sits.
   Below the tablet breakpoint the columns stack over that half, so the artwork is dropped there
   (see responsive.css) rather than risking text over the photograph. */
.rp-hero {
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(3rem, 2rem + 3vw, 5rem);
  /* Plain JPEG on purpose. image-set() would pick the smaller WebP, but when a host serves .webp
     with the wrong type (or not at all) the picked image simply fails — CSS does not fall back to
     the other candidate. The demo gets hosted on unknown servers, so 41 KB buys certainty. */
  background-image: url("/assets/images/home-bg.jpg");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: cover;
}
.rp-hero__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(1.5rem, 0.5rem + 2.5vw, 3rem); align-items: center; }
.rp-hero h1 { font-size: clamp(2.125rem, 1.4rem + 3vw, 3.5rem); line-height: 1.08; letter-spacing: -0.025em; margin-bottom: var(--rp-space-4); }
.rp-hero .rp-lead { font-size: var(--rp-fs-md); max-width: 34rem; }
.rp-hero__actions { margin-top: var(--rp-space-6); gap: var(--rp-space-3); }
.rp-hero__actions .btn { display: inline-flex; align-items: center; gap: var(--rp-space-2); }
.rp-hero__actions .btn .bi { font-size: 1.1em; }
.rp-hero__login { margin: var(--rp-space-4) 0 0; color: var(--rp-text-muted); }
.rp-hero__login a { font-weight: var(--rp-fw-semibold); }
.rp-hero__points { list-style: none; padding: 0; margin: var(--rp-space-7) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--rp-space-4) var(--rp-space-3); color: var(--rp-text-muted); font-size: var(--rp-fs-xs); line-height: 1.45; }
.rp-hero__points li { display: flex; align-items: center; gap: var(--rp-space-3); }
.rp-hero__point-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--rp-radius);
  background: var(--rp-primary-subtle);
  color: var(--rp-brand-700);
  font-size: var(--rp-fs-base);
}

/* Eyebrow with a rule on either side (home hero). */
.rp-eyebrow--rule { display: flex; align-items: center; gap: var(--rp-space-3); }
.rp-eyebrow--rule::before,
.rp-eyebrow--rule::after { content: ""; flex: none; width: 2.5rem; height: 2px; border-radius: 2px; background: var(--rp-primary); }

/* ---------- Hero product scene: one connected vendor workspace ---------- */
.rp-scene { margin: 0; }
.rp-scene__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) 2.5rem minmax(0, 0.82fr);
  grid-template-rows: auto 2.25rem auto;
  align-items: stretch;
}
.rp-scene__window { grid-column: 1; grid-row: 1 / span 3; border: 1px solid var(--rp-border); border-radius: var(--rp-radius-xl); background: var(--rp-surface); box-shadow: var(--rp-shadow-lg); overflow: hidden; }
.rp-scene__body { display: flex; flex-direction: column; gap: var(--rp-space-4); padding: var(--rp-space-5); }
.rp-scene__panel { display: flex; flex-direction: column; gap: var(--rp-space-2); min-width: 0; }
.rp-scene__panel--manage { padding-top: var(--rp-space-4); border-top: 1px solid var(--rp-border); }
.rp-scene__card {
  display: flex;
  flex-direction: column;
  gap: var(--rp-space-2);
  padding: var(--rp-space-4);
  background: var(--rp-surface);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-lg);
  box-shadow: var(--rp-shadow-lg);
  font-size: var(--rp-fs-sm);
}
.rp-scene__card--link { grid-column: 3; grid-row: 1; }
.rp-scene__card--book { grid-column: 3; grid-row: 3; }
.rp-scene__arrow { display: grid; place-items: center; justify-self: center; align-self: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--rp-primary-subtle); color: var(--rp-brand-900); font-size: var(--rp-fs-base); box-shadow: var(--rp-shadow-xs); }
.rp-scene__arrow--1 { grid-column: 2; grid-row: 1; }
.rp-scene__arrow--2 { grid-column: 3; grid-row: 2; }
.rp-scene__arrow--3 { grid-column: 2; grid-row: 3; }
.rp-scene__caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rp-space-3); margin-top: var(--rp-space-4); }
.rp-scene__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--rp-space-2); font-size: var(--rp-fs-sm); font-weight: var(--rp-fw-semibold); color: var(--rp-text); }
.rp-scene__legend li { display: inline-flex; align-items: center; gap: var(--rp-space-2); }
.rp-scene__legend li:not(:last-child)::after { content: "\f285"; font-family: "bootstrap-icons"; font-size: var(--rp-fs-xs); color: var(--rp-text-muted); }
.rp-scene__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--rp-primary); }

/* Hero story timeline (≈7.7 s, plays once; Pause/Play/Replay — WCAG 2.2.2).
   The new reservation row carries data-animate-last: it is visible at every width. */
.rp-anim .rp-scene__window { animation: rp-scale-in var(--rp-dur-slow) var(--rp-ease-out) 0.2s both; }
.rp-anim .rp-scene__panel--create .rp-ui-head,
.rp-anim .rp-scene__panel--create .rp-ui-row { animation: rp-fade-in var(--rp-dur) var(--rp-ease-out) 0.5s both; }
.rp-anim .rp-scene__panel--create .rp-ui-chip { animation: rp-pop 260ms var(--rp-ease-out) both; }
.rp-anim .rp-scene__panel--create .rp-ui-chip:nth-child(1) { animation-delay: 0.9s; }
.rp-anim .rp-scene__panel--create .rp-ui-chip:nth-child(2) { animation-delay: 1.1s; }
.rp-anim .rp-scene__panel--create .rp-ui-chip:nth-child(3) { animation-delay: 1.3s; }
.rp-anim .rp-scene__panel--create .rp-ui-chip:nth-child(4) { animation-delay: 1.5s; }
.rp-anim .rp-scene__arrow--1 { animation: rp-pop 260ms var(--rp-ease-out) 1.8s both; }
.rp-anim .rp-scene__card--link { animation: rp-fade-up var(--rp-dur-slow) var(--rp-ease-out) 2s both; }
.rp-anim .rp-scene__card--link .rp-ui-url,
.rp-anim .rp-scene__card--link .rp-ui-ok { animation: rp-fade-in var(--rp-dur) var(--rp-ease-out) 2.3s both; }
.rp-anim .rp-scene__card--link .rp-ui-swap { animation: rp-flow-press 300ms var(--rp-ease-in-out) 2.9s both; }
.rp-anim .rp-scene__card--link .rp-ui-idle { animation: rp-flow-out 1ms linear 3.2s both; }
.rp-anim .rp-scene__card--link .rp-ui-done { animation: rp-fade-in var(--rp-dur) var(--rp-ease-out) 3.2s both; }
.rp-anim .rp-scene__card--link .rp-ui-tag { animation: rp-pop 260ms var(--rp-ease-out) both; }
.rp-anim .rp-scene__card--link .rp-ui-tag:nth-child(1) { animation-delay: 3.5s; }
.rp-anim .rp-scene__card--link .rp-ui-tag:nth-child(2) { animation-delay: 3.7s; }
.rp-anim .rp-scene__card--link .rp-ui-tag:nth-child(3) { animation-delay: 3.9s; }
.rp-anim .rp-scene__arrow--2 { animation: rp-pop 260ms var(--rp-ease-out) 4.2s both; }
.rp-anim .rp-scene__card--book { animation: rp-fade-up var(--rp-dur-slow) var(--rp-ease-out) 4.4s both; }
.rp-anim .rp-scene__card--book .rp-ui-field { animation: rp-flow-mark var(--rp-dur) var(--rp-ease-out) both; }
.rp-anim .rp-scene__card--book .rp-ui-field:nth-of-type(1) { animation-delay: 4.9s; }
.rp-anim .rp-scene__card--book .rp-ui-field:nth-of-type(2) { animation-delay: 5.3s; }
.rp-anim .rp-scene__card--book .rp-ui-field:nth-of-type(3) { animation-delay: 5.7s; }
.rp-anim .rp-scene__card--book .rp-ui-field strong { animation: rp-fade-in var(--rp-dur) var(--rp-ease-out) both; }
.rp-anim .rp-scene__card--book .rp-ui-field:nth-of-type(1) strong { animation-delay: 4.9s; }
.rp-anim .rp-scene__card--book .rp-ui-field:nth-of-type(2) strong { animation-delay: 5.3s; }
.rp-anim .rp-scene__card--book .rp-ui-field:nth-of-type(3) strong { animation-delay: 5.7s; }
.rp-anim .rp-scene__card--book .rp-ui-swap { animation: rp-flow-press 300ms var(--rp-ease-in-out) 6.3s both; }
.rp-anim .rp-scene__card--book .rp-ui-idle { animation: rp-flow-out 1ms linear 6.6s both; }
.rp-anim .rp-scene__card--book .rp-ui-done { animation: rp-fade-in var(--rp-dur) var(--rp-ease-out) 6.6s both; }
.rp-anim .rp-scene__arrow--3 { animation: rp-pop 260ms var(--rp-ease-out) 7s both; }
.rp-anim .rp-scene__panel--manage .rp-ui-rows li.is-new { animation: rp-slide-in-right var(--rp-dur-slow) var(--rp-ease-out) 7.3s both; }
.rp-anim .rp-scene__legend li { animation: rp-flow-text var(--rp-dur) linear both; }
.rp-anim .rp-scene__legend .rp-scene__dot { animation: rp-flow-dot var(--rp-dur) linear both; }
.rp-anim .rp-scene__legend li:nth-child(1),
.rp-anim .rp-scene__legend li:nth-child(1) .rp-scene__dot { animation-delay: 0.3s; }
.rp-anim .rp-scene__legend li:nth-child(2),
.rp-anim .rp-scene__legend li:nth-child(2) .rp-scene__dot { animation-delay: 2s; }
.rp-anim .rp-scene__legend li:nth-child(3),
.rp-anim .rp-scene__legend li:nth-child(3) .rp-scene__dot { animation-delay: 4.4s; }
.rp-anim .rp-scene__legend li:nth-child(4),
.rp-anim .rp-scene__legend li:nth-child(4) .rp-scene__dot { animation-delay: 7.3s; }

/* ---------- Value strip ---------- */
.rp-valuestrip { background: var(--rp-bg-booking); border-block: 1px solid var(--rp-border); }
.rp-valuestrip__list { list-style: none; margin: 0; padding: var(--rp-space-5) 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rp-space-3); }
.rp-valuestrip__list li { display: flex; align-items: center; gap: var(--rp-space-2); font-weight: var(--rp-fw-semibold); font-size: var(--rp-fs-sm); }
.rp-valuestrip .rp-site-icon { width: 2.25rem; height: 2.25rem; font-size: var(--rp-icon); }
.rp-valuestrip__list li:not(:last-child)::after { content: "\f285"; font-family: "bootstrap-icons"; color: var(--rp-text-muted); font-size: var(--rp-fs-xs); margin-left: var(--rp-space-2); }

/* ---------- Problem → solution ---------- */
.rp-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--rp-space-5); align-items: center; }
.rp-compare__card { padding: var(--rp-space-6); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-xl); background: var(--rp-surface); height: 100%; }
.rp-compare__card--before { background: var(--rp-surface-muted); }
.rp-compare__card--after { border-color: var(--rp-primary); box-shadow: var(--rp-shadow-md); }
.rp-compare__tag { display: inline-flex; align-items: center; gap: var(--rp-space-2); margin-bottom: var(--rp-space-3); padding: 0.125rem var(--rp-space-3); border-radius: var(--rp-radius-pill); font-size: var(--rp-fs-xs); font-weight: var(--rp-fw-bold); letter-spacing: 0.06em; text-transform: uppercase; }
.rp-compare__card--before .rp-compare__tag { background: var(--rp-neutral-subtle); color: var(--rp-neutral-emphasis); }
.rp-compare__card--after .rp-compare__tag { background: var(--rp-primary-subtle); color: var(--rp-brand-900); }
.rp-compare__card h3 { font-size: var(--rp-fs-lg); margin: 0 0 var(--rp-space-4); }
.rp-compare__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rp-space-2); }
.rp-compare__list li { display: flex; align-items: center; gap: var(--rp-space-3); padding: var(--rp-space-2) var(--rp-space-3); border: 1px solid var(--rp-border); border-radius: var(--rp-radius); background: var(--rp-surface); }
.rp-compare__card--before .rp-compare__list li { border-style: dashed; background: transparent; color: var(--rp-text-muted); }
.rp-compare__icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: var(--rp-radius); }
.rp-compare__card--before .rp-compare__icon { background: var(--rp-neutral-subtle); color: var(--rp-neutral-emphasis); }
.rp-compare__card--after .rp-compare__icon { background: var(--rp-primary-subtle); color: var(--rp-primary); }
.rp-compare__arrow { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--rp-primary); color: var(--rp-on-primary); font-size: var(--rp-fs-xl); box-shadow: var(--rp-shadow-md); }

/* ---------- Vendor journey (5 connected steps, active step follows scroll) ---------- */
.rp-journey { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--rp-space-5); }
.rp-journey::before { content: ""; position: absolute; top: 1.75rem; left: 2rem; right: calc((100% - 4 * var(--rp-space-5)) / 5 - 1.5rem); height: 2px; background: var(--rp-primary-subtle-border); }
.rp-journey__item { position: relative; display: flex; flex-direction: column; gap: var(--rp-space-2); min-width: 0; }
.rp-journey__num { align-self: flex-start; padding-right: var(--rp-space-3); background: var(--rp-section-bg); color: var(--rp-slate-400); font-size: clamp(2.25rem, 1.75rem + 1vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; transition: color var(--rp-dur) var(--rp-ease-out); }
.rp-journey__item h3 { font-size: var(--rp-fs-md); margin: var(--rp-space-3) 0 0; }
.rp-journey__item p { margin: 0; color: var(--rp-text-muted); font-size: var(--rp-fs-sm); }
.rp-journey__ui { margin-top: var(--rp-space-3); display: flex; flex-direction: column; gap: var(--rp-space-2); padding: var(--rp-space-3); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); background: var(--rp-surface); box-shadow: var(--rp-shadow-xs); font-size: var(--rp-fs-xs); transition: border-color var(--rp-dur) var(--rp-ease-out), box-shadow var(--rp-dur) var(--rp-ease-out); }
/* Without JS every step reads as active; with JS the step nearest the reading line is emphasised.
   Only in the stacked layout — in the 5-column row every step sits on the same line. */
.rp-journey__item.is-active .rp-journey__num,
html:not(.rp-js-journey) .rp-journey__num { color: var(--rp-primary); }
.rp-journey__item.is-active .rp-journey__ui { border-color: var(--rp-primary); box-shadow: var(--rp-shadow-md); }
@media (min-width: 1200px) {
  .rp-journey__num { color: var(--rp-primary); }
}

/* ---------- Booking link: one link, four channels, one reservation ---------- */
.rp-linkflow { display: flex; flex-direction: column; align-items: center; gap: var(--rp-space-4); }
.rp-linkcard { width: min(46rem, 100%); display: flex; flex-direction: column; gap: var(--rp-space-4); padding: clamp(var(--rp-space-4), 2vw, var(--rp-space-6)); background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-xl); box-shadow: var(--rp-shadow-lg); }
.rp-linkcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rp-space-3); }
.rp-linkcard__head strong { display: block; font-size: var(--rp-fs-lg); }
.rp-linkcard__head .rp-ui-muted { font-size: var(--rp-fs-sm); }
.rp-linkcard .rp-ui-url { font-size: clamp(var(--rp-fs-xs), 1.4vw, var(--rp-fs-base)); padding: var(--rp-space-3) var(--rp-space-4); }
.rp-linkcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rp-space-2); }
.rp-linkcard__btn { display: inline-flex; align-items: center; gap: var(--rp-space-2); min-height: 2.75rem; padding: 0 var(--rp-space-5); border: 1px solid var(--rp-border-strong); border-radius: var(--rp-radius); background: var(--rp-surface); font-weight: var(--rp-fw-semibold); }
.rp-linkcard__btn--primary { background: var(--rp-primary); border-color: var(--rp-primary); color: var(--rp-on-primary); }
.rp-linkcard__toast { display: inline-flex; align-items: center; gap: var(--rp-space-2); padding: var(--rp-space-1) var(--rp-space-3); border-radius: var(--rp-radius-pill); background: var(--rp-success-subtle); border: 1px solid var(--rp-success-border); color: var(--rp-success-emphasis); font-size: var(--rp-fs-sm); font-weight: var(--rp-fw-semibold); }
.rp-linkflow__arrow { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--rp-primary-subtle); color: var(--rp-brand-900); font-size: var(--rp-fs-lg); }
.rp-linkflow__channels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rp-space-3); width: 100%; }
.rp-linkflow__channels li { display: flex; flex-direction: column; align-items: center; gap: var(--rp-space-2); padding: var(--rp-space-4); text-align: center; border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); background: var(--rp-surface); }
.rp-linkflow__channels strong { font-size: var(--rp-fs-base); }
.rp-linkflow__channels span { color: var(--rp-text-muted); font-size: var(--rp-fs-sm); }
.rp-linkflow__result { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--rp-space-4); align-items: center; width: min(46rem, 100%); }
.rp-linkflow__panel { display: flex; flex-direction: column; gap: var(--rp-space-2); padding: var(--rp-space-4); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); background: var(--rp-surface); }
.rp-linkflow__panel--received { border-color: var(--rp-success-border); background: var(--rp-success-subtle); }
.rp-linkflow__panel--received strong { display: flex; align-items: center; gap: var(--rp-space-2); color: var(--rp-success-emphasis); }
.rp-linkflow__panel--received .rp-ui-muted { color: var(--rp-text); }
/* Demo timeline (≈3.4 s, runs once when scrolled into view) */
.rp-anim .rp-linkcard .rp-ui-url { animation: rp-fade-in var(--rp-dur-slow) var(--rp-ease-out) 0.2s both; }
.rp-anim .rp-linkcard__copy { animation: rp-flow-press 300ms var(--rp-ease-in-out) 0.8s both; }
.rp-anim .rp-linkcard__toast { animation: rp-pop 260ms var(--rp-ease-out) 1.1s both; }
.rp-anim .rp-linkflow__channels li { animation: rp-fade-up var(--rp-dur) var(--rp-ease-out) both; }
.rp-anim .rp-linkflow__channels li:nth-child(1) { animation-delay: 1.5s; }
.rp-anim .rp-linkflow__channels li:nth-child(2) { animation-delay: 1.65s; }
.rp-anim .rp-linkflow__channels li:nth-child(3) { animation-delay: 1.8s; }
.rp-anim .rp-linkflow__channels li:nth-child(4) { animation-delay: 1.95s; }
.rp-anim .rp-linkflow__panel--booking { animation: rp-fade-up var(--rp-dur-slow) var(--rp-ease-out) 2.4s both; }
.rp-anim .rp-linkflow__panel--received { animation: rp-scale-in var(--rp-dur-slow) var(--rp-ease-out) 3s both; }

/* ---------- Large vendor dashboard (dark section) ---------- */
.rp-bigdash-figure { margin: 0; }
.rp-bigdash { overflow: hidden; border: 1px solid var(--rp-slate-700); border-radius: var(--rp-radius-xl); background: var(--rp-bg); box-shadow: var(--rp-shadow-lg); }
.rp-bigdash__body { display: grid; grid-template-columns: 14rem minmax(0, 1fr); }
.rp-bigdash__side { display: flex; flex-direction: column; gap: 2px; padding: var(--rp-space-4) var(--rp-space-3); background: var(--rp-surface); border-right: 1px solid var(--rp-border); font-size: var(--rp-fs-sm); }
.rp-bigdash__brand { display: flex; align-items: center; gap: var(--rp-space-2); margin: 0 0 var(--rp-space-3); padding-inline: var(--rp-space-2); font-weight: var(--rp-fw-semibold); }
.rp-bigdash__nav { display: flex; align-items: center; gap: var(--rp-space-2); padding: var(--rp-space-2) var(--rp-space-3); border-radius: var(--rp-radius); color: var(--rp-slate-700); }
.rp-bigdash__nav.is-active { background: var(--rp-primary-subtle); color: var(--rp-brand-900); font-weight: var(--rp-fw-semibold); box-shadow: inset 3px 0 0 var(--rp-primary); }
.rp-bigdash__count { margin-left: auto; padding: 0 0.4rem; border-radius: var(--rp-radius-pill); background: var(--rp-warning-subtle); border: 1px solid var(--rp-warning-border); color: var(--rp-warning-emphasis); font-size: var(--rp-fs-xs); font-weight: var(--rp-fw-bold); }
.rp-bigdash__main { display: flex; flex-direction: column; gap: var(--rp-space-4); min-width: 0; padding: var(--rp-space-5); }
.rp-bigdash__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rp-space-3); }
.rp-bigdash__top strong { display: block; font-size: var(--rp-fs-lg); }
.rp-bigdash__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rp-space-3); }
.rp-bigdash .rp-card { padding: var(--rp-space-4); }
.rp-bigdash .rp-card--flush { padding: 0; }
.rp-bigdash .rp-stat__value { font-size: var(--rp-fs-2xl); }
.rp-bigdash__grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--rp-space-4); align-items: start; }
.rp-bigdash .rp-card__header { padding: var(--rp-space-3) var(--rp-space-4); }
.rp-bigdash .rp-card__header strong { font-size: var(--rp-fs-base); }
.rp-bigdash .table { margin: 0; font-size: var(--rp-fs-sm); }
.rp-bigdash .table td,
.rp-bigdash .table th { white-space: nowrap; padding: var(--rp-space-2) var(--rp-space-3); }
.rp-bigdash__cap { display: flex; flex-direction: column; gap: var(--rp-space-3); font-size: var(--rp-fs-sm); }
.rp-bigdash__cap strong { font-size: var(--rp-fs-base); }
.rp-bigdash__slot { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: var(--rp-space-2); }
.rp-bigdash__slot > span:first-child { font-weight: var(--rp-fw-semibold); font-variant-numeric: tabular-nums; }
.rp-bigdash__slot > span:last-child { color: var(--rp-text-muted); font-size: var(--rp-fs-xs); white-space: nowrap; }
.rp-note { display: flex; gap: var(--rp-space-2); align-items: flex-start; max-width: 52rem; margin: var(--rp-space-5) auto 0; color: var(--rp-text-muted); font-size: var(--rp-fs-sm); }
.rp-note .bi { color: var(--rp-info); flex-shrink: 0; }
.rp-sample-note { display: flex; align-items: center; gap: var(--rp-space-2); margin-top: var(--rp-space-3); color: var(--rp-text-muted); font-size: var(--rp-fs-sm); }
.rp-inline-checks { list-style: none; margin: var(--rp-space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rp-space-4); }
.rp-inline-checks li { display: flex; gap: var(--rp-space-2); font-weight: var(--rp-fw-medium); }
.rp-inline-checks .bi { color: var(--rp-success); flex-shrink: 0; }

/* ---------- Venue configuration (no table map: NCC-12 is unresolved) ---------- */
.rp-venue { margin: 0; }
.rp-venue__panel { display: flex; flex-direction: column; gap: var(--rp-space-4); padding: var(--rp-space-5); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-xl); background: var(--rp-surface); box-shadow: var(--rp-shadow-lg); }
.rp-venue__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rp-space-4); }
.rp-venue__block { display: flex; flex-direction: column; gap: var(--rp-space-2); padding: var(--rp-space-4); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); background: var(--rp-bg-booking); }
.rp-venue__value { font-size: var(--rp-fs-xl); font-weight: var(--rp-fw-bold); line-height: 1.1; }
.rp-venue__cards { display: flex; flex-wrap: wrap; gap: var(--rp-space-2); }
.rp-venue__card { display: inline-flex; align-items: center; gap: var(--rp-space-2); padding: var(--rp-space-2) var(--rp-space-3); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-pill); background: var(--rp-surface); font-size: var(--rp-fs-sm); font-weight: var(--rp-fw-semibold); box-shadow: var(--rp-shadow-xs); }
.rp-venue__card .bi { color: var(--rp-primary); }
.rp-venue__live { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--rp-success); }
.rp-venue figcaption { margin-top: var(--rp-space-3); color: var(--rp-text-muted); font-size: var(--rp-fs-sm); text-align: center; }

/* ---------- Reservation lifecycle ---------- */
.rp-lifecycle { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--rp-space-3); }
.rp-lifecycle li { position: relative; display: flex; flex-direction: column; gap: var(--rp-space-2); padding: var(--rp-space-4); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); background: var(--rp-surface); }
.rp-lifecycle li:not(:last-child)::after { content: "\f285"; font-family: "bootstrap-icons"; position: absolute; top: 50%; right: calc(-1 * var(--rp-space-3) / 2 - 0.4rem); transform: translateY(-50%); color: var(--rp-text-muted); font-size: var(--rp-fs-sm); }
.rp-lifecycle__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--rp-radius); background: var(--rp-primary-subtle); color: var(--rp-primary); }
.rp-lifecycle strong { font-size: var(--rp-fs-sm); }
.rp-lifecycle span { color: var(--rp-text-muted); font-size: var(--rp-fs-xs); }
.rp-lifecycle .rp-status { align-self: flex-start; font-size: var(--rp-fs-xs); }
.rp-anim .rp-lifecycle li { animation: rp-fade-up var(--rp-dur) var(--rp-ease-out) both; }
.rp-anim .rp-lifecycle li:nth-child(1) { animation-delay: 0.1s; }
.rp-anim .rp-lifecycle li:nth-child(2) { animation-delay: 0.45s; }
.rp-anim .rp-lifecycle li:nth-child(3) { animation-delay: 0.8s; }
.rp-anim .rp-lifecycle li:nth-child(4) { animation-delay: 1.15s; }
.rp-anim .rp-lifecycle li:nth-child(5) { animation-delay: 1.5s; }
.rp-anim .rp-lifecycle li:nth-child(6) { animation-delay: 1.85s; }

/* ---------- Customer steps (kept compact) ---------- */
.rp-custflow { list-style: none; margin: var(--rp-space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--rp-space-2); align-items: center; }
.rp-custflow li { display: inline-flex; align-items: center; gap: var(--rp-space-2); }
.rp-custflow__chip { display: inline-flex; align-items: center; gap: var(--rp-space-2); padding: var(--rp-space-2) var(--rp-space-3); border: 1px solid var(--rp-border-strong); border-radius: var(--rp-radius-pill); background: var(--rp-surface); font-weight: var(--rp-fw-semibold); font-size: var(--rp-fs-sm); }
.rp-custflow__chip .bi { color: var(--rp-primary); }
.rp-custflow__chip--optional { border-style: dashed; }
.rp-custflow li:not(:last-child)::after { content: "\f285"; font-family: "bootstrap-icons"; color: var(--rp-text-muted); font-size: var(--rp-fs-xs); }

/* ---------- Feature groups (BUILD / SHARE / MANAGE) ---------- */
.rp-groups { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rp-space-5); }
.rp-groups > li { display: flex; flex-direction: column; gap: var(--rp-space-3); padding: var(--rp-space-5); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-xl); background: var(--rp-surface); box-shadow: var(--rp-shadow-sm); }
.rp-groups h3 { font-size: var(--rp-fs-xl); margin: 0; }
.rp-groups > li > p { margin: 0; color: var(--rp-text-muted); }
.rp-groups__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rp-space-2); }
.rp-groups__list li { display: flex; align-items: flex-start; gap: var(--rp-space-2); font-size: var(--rp-fs-sm); }
.rp-groups__list .bi { color: var(--rp-success); flex-shrink: 0; }
.rp-groups__ui { margin-top: auto; display: flex; flex-direction: column; gap: var(--rp-space-2); padding: var(--rp-space-3); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); background: var(--rp-bg-booking); }
.rp-support { list-style: none; margin: var(--rp-space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rp-space-4); }
.rp-support li { display: flex; gap: var(--rp-space-3); padding: var(--rp-space-4); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); background: var(--rp-surface); }
.rp-support .bi { color: var(--rp-primary); font-size: var(--rp-icon); flex-shrink: 0; }
.rp-support strong { display: block; font-size: var(--rp-fs-sm); }
.rp-support span { color: var(--rp-text-muted); font-size: var(--rp-fs-sm); }

/* ---------- Audience ---------- */
.rp-audience { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rp-space-4); }
.rp-audience li { display: flex; flex-direction: column; gap: var(--rp-space-2); padding: var(--rp-space-5); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); background: var(--rp-surface); }
.rp-audience strong { font-size: var(--rp-fs-md); }
.rp-audience span { color: var(--rp-text-muted); }

/* ---------- Trust ---------- */
.rp-trust { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--rp-space-7); align-items: center; }
.rp-trust__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rp-space-4); }
.rp-trust__list li { padding: var(--rp-space-5); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); background: var(--rp-surface); }
.rp-trust__list h3 { font-size: var(--rp-fs-md); margin: var(--rp-space-3) 0 var(--rp-space-1); }
.rp-trust__list p { color: var(--rp-text-muted); margin: 0; }

/* ---------- CTA ---------- */
.rp-site-cta { padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
.rp-site-cta h2 { font-size: clamp(1.875rem, 1.35rem + 1.8vw, 2.75rem); }

/* ---------- Footer ---------- */
.rp-site-footer { background: var(--rp-surface); }

/* ---------- Homepage responsive ---------- */
@media (max-width: 1199.98px) {
  .rp-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .rp-hero__text { max-width: 44rem; }
  .rp-journey { grid-template-columns: minmax(0, 1fr); gap: var(--rp-space-6); }
  .rp-journey::before { display: none; }
  .rp-journey__item:not(:last-child)::after { content: ""; position: absolute; left: 1.5rem; top: 3.25rem; bottom: calc(-1 * var(--rp-space-6) + 0.5rem); width: 2px; background: var(--rp-primary-subtle-border); }
  .rp-journey__item { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr) minmax(0, 17rem); column-gap: var(--rp-space-4); row-gap: var(--rp-space-1); align-items: start; }
  .rp-journey__num { grid-row: 1 / span 2; padding: 0 0 var(--rp-space-2); }
  .rp-journey__item h3 { grid-column: 2; margin: 0; }
  .rp-journey__item p { grid-column: 2; }
  .rp-journey__ui { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
  .rp-bigdash__grid { grid-template-columns: minmax(0, 1fr); }
  .rp-inline-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-lifecycle { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rp-space-4); }
  .rp-lifecycle li:nth-child(3)::after { display: none; }
  .rp-groups { grid-template-columns: minmax(0, 1fr); }
  .rp-support { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .rp-valuestrip__list { justify-content: flex-start; }
  .rp-compare { grid-template-columns: minmax(0, 1fr); }
  .rp-compare__arrow { transform: rotate(90deg); margin-inline: auto; }
  .rp-trust { grid-template-columns: minmax(0, 1fr); }
  .rp-linkflow__channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-linkflow__result { grid-template-columns: minmax(0, 1fr); }
  .rp-linkflow__result .rp-linkflow__arrow { transform: rotate(90deg); margin-inline: auto; }
  .rp-bigdash__body { grid-template-columns: minmax(0, 1fr); }
  .rp-bigdash__side { display: none; }
  .rp-audience { grid-template-columns: minmax(0, 1fr); }
  .rp-venue__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  /* Hero scene becomes a readable vertical sequence: create → share → book → manage */
  .rp-scene__stage { display: flex; flex-direction: column; gap: var(--rp-space-3); }
  .rp-scene__window { display: contents; }
  .rp-scene__bar { display: none; }
  .rp-scene__body { display: contents; }
  .rp-scene__panel { order: 1; padding: var(--rp-space-4); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); background: var(--rp-surface); box-shadow: var(--rp-shadow-sm); }
  .rp-scene__panel--manage { order: 4; padding-top: var(--rp-space-4); border-top: none; }
  .rp-scene__card { position: static; width: auto; }
  .rp-scene__card--link { order: 2; }
  .rp-scene__card--book { order: 3; }
  .rp-scene__arrow { margin-inline: auto; }
  .rp-scene__arrow--1,
  .rp-scene__arrow--3 { transform: rotate(90deg); } /* the two horizontal connectors point down when stacked */
  .rp-scene__arrow--1 { order: 1; }
  .rp-scene__arrow--2 { order: 2; }
  .rp-scene__arrow--3 { order: 3; }
  .rp-valuestrip__list { flex-direction: column; align-items: flex-start; }
  .rp-valuestrip__list li:not(:last-child)::after { display: none; }
  .rp-journey__item { grid-template-columns: 3.75rem minmax(0, 1fr); }
  .rp-journey__ui { grid-column: 2; grid-row: auto; margin-top: var(--rp-space-2); }
  .rp-bigdash__main { padding: var(--rp-space-3); }
  .rp-bigdash__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-bigdash__col-event { display: none; }
  .rp-lifecycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-lifecycle li:nth-child(2)::after,
  .rp-lifecycle li:nth-child(4)::after { display: none; }
  .rp-trust__list { grid-template-columns: minmax(0, 1fr); }
  .rp-venue__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
  .rp-linkflow__channels,
  .rp-support,
  .rp-inline-checks { grid-template-columns: minmax(0, 1fr); }
  .rp-lifecycle { grid-template-columns: minmax(0, 1fr); }
  .rp-lifecycle li::after { display: none; }
  .rp-linkcard__btn { width: 100%; justify-content: center; }
  .rp-bigdash .table td,
  .rp-bigdash .table th { padding-inline: var(--rp-space-2); font-size: var(--rp-fs-xs); }
  .rp-bigdash__col-persons { display: none; }
}

@media (max-width: 400px) {
  .rp-bigdash .table td:last-child,
  .rp-bigdash .table td:last-child .rp-status { white-space: normal; }
}

/* Reduced motion: animations.css already collapses durations/delays; also skip the reveal fade. */
@media (prefers-reduced-motion: reduce) {
  .rp-js-reveal [data-reveal].is-pending { opacity: 1; }
}

/* Narrow screens: the language switcher sits beside the menu button, not inside the menu — a
   visitor should not have to open a menu to read the site in their own language. */
.rp-site-header__mobile {
  display: flex;
  align-items: center;
  gap: var(--rp-space-1);
}