/* =====================================================================
   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);
}
.rp-site main { flex: 1 0 auto; }
.rp-site main:focus { outline: none; }

/* ---------- Header & navigation ---------- */
.rp-site-header { background: var(--rp-surface); border-bottom: 1px solid var(--rp-border); }
.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); }

@media (min-width: 992px) {
  .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; }
}

/* ---------- 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 Venuza 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-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.25rem; padding: 0.125rem 0.5rem; 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 ---------- */
.rp-hero { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(3rem, 2rem + 3vw, 5rem); }
.rp-hero .rp-container { max-width: min(1340px, 100%); }
.rp-hero__grid { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(2rem, 1rem + 3vw, 4rem); 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__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-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); }

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