/* =========================================================================
   Product-hero's (14 okt 2026): ProductHero.razor met een bewegend tafereel
   op /crm-app (TafereelCrm), /horeca/ai-telefonist (TafereelTelefonist) en
   /horeca/online-reserveren (TafereelReserveren).

   De basis (achtergrond, raster, de knopbaan op de telefoon) komt uit
   landing.css: de hero is een .rg-hero. Dit bestand voegt de taferelen toe
   en zet de twee kolommen vanaf 1024 px (landing.css doet dat pas vanaf
   1200 px). De tijdlijn spelen js/productHero.js en js/reserverenDemo.js: ze
   zetten alleen klassen (is-zicht, is-af, is-belt, is-gast, is-ai, is-denkt)
   en data-ph-speelt op het tafereel.

   Regels die overal gelden:
   - Alleen transform en opacity bewegen (geen layout-animaties).
   - De server-HTML staat in de beginstand. Zonder JavaScript, bij minder
     beweging, bij een fout (data-ph-speelt="fout") en via het vangnet (na
     3 s, als er geen script speelt) toont deze CSS de eindstand.
   - Alleen bestaande --rg-*-tokens, plus de twee merkkleuren hieronder.
   ========================================================================= */

/* De merkkleuren van de twee AI-koppelingen, voor hun merkteken
   (wwwroot/images/merken/, Simple Icons 13.21.0, CC0): Claude #D97757 (de
   merkkleur in Simple Icons) en ChatGPT/OpenAI zwart op een lichte
   ondergrond (de merkregels van OpenAI). Alleen hier een hexwaarde.
   Ook op .rg-kc: de homepage-hero gebruikt beide voor de badges van zijn
   station "CRM + AI" en de Claude-kleur aan het begin van het spoor van dat
   station (hero-knooppunt.css, 15 okt 2026). En op .rg-crmai: de sectie
   "Claude en ChatGPT" op /crm-app (crm-landing.css, 15 okt 2026). */
.landing-root .rg-ph,
.landing-root .rg-kc,
.landing-root .rg-crmai {
  --rg-merk-claude: #D97757;
  --rg-merk-chatgpt: #000000;
}

.landing-root .rg-ph {
  /* De deal schuift één kolom op: zijn eigen breedte plus de binnenmarge
     van de kolom (2 x 0.5rem) en de kolomafstand (0.5rem). */
  --rg-ph-deal-stap: calc(100% + 1.5rem);
}

/* Twee kolommen vanaf 1024 px (spec). landing.css zet .rg-hero__grid tot
   1200 px op één kolom (bedoeld voor de homepage-hero); deze regel is
   specifieker en wint daarvan. */
@media (min-width: 1024px) {
  .landing-root .rg-ph .rg-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
  /* landing.css centreert tekst en knoppen tot 1200 px (podium eronder);
     naast het tafereel staan ze links, zoals op het bureaublad. */
  .landing-root .rg-ph .rg-hero__copy { text-align: start; }
  .landing-root .rg-ph .rg-hero__actions { justify-content: flex-start; }
  /* De tekstkolom staat bovenaan, niet verticaal gecentreerd naast het
     tafereel: de reserveringswidget wisselt per paneel tot ~430 px van
     hoogte, en een gecentreerde kolom schoof dan bij elke stap mee (en
     scroll anchoring verschoof daarna de hele pagina). Widgetsprong, 15 okt
     2026; js-tests/widgetSprongInBrowser.test.mjs meet het na. */
  .landing-root .rg-ph .rg-hero__grid { align-items: start; }
}

/* Een iets kleinere kop dan de gewone .rg-display: hij staat in een halve kolom. */
.landing-root .rg-ph .rg-display { font-size: clamp(2.25rem, 3.6vw, 3.125rem); }

.landing-root .rg-ph__podium {
  min-width: 0;
  display: grid;
  justify-items: center;
}

/* --- Het tafereel: altijd licht, zoals de echte app -------------------- */

.landing-root .rg-ph__tafereel {
  position: relative;
  width: 100%;
  max-width: 30rem;
  padding: 1rem;
  background: var(--rg-canvas);
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius-lg);
  box-shadow: var(--rg-shadow-lg);
  color: var(--rg-ink);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: left;
  overflow: hidden;
}
.landing-root .rg-ph__tafereel--reserveren { max-width: 46rem; display: grid; gap: 0.75rem; }

.landing-root .rg-ph__kaart {
  background: var(--rg-surface);
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius);
  padding: 0.75rem;
}
.landing-root .rg-ph__klein { display: block; font-size: 0.72rem; color: var(--rg-text-soft); }
.landing-root .rg-ph__mono { font-family: var(--rg-mono); font-variant-numeric: tabular-nums; }
.landing-root .rg-ph__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5625rem;
  border-radius: 999px;
  background: var(--rg-settled-wash);
  color: var(--rg-settled);
  font-size: 0.6875rem;
  font-weight: 600;
}

/* De merktekens: het SVG-bestand als masker, ingekleurd met de merkkleur.
   De vorm blijft precies die van het bestand. */
.landing-root .rg-ph__merk {
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
}
.landing-root .rg-ph__merk::before {
  content: "";
  width: 1.0625rem;
  height: 1.0625rem;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.landing-root .rg-ph__merk--claude {
  color: var(--rg-merk-claude);
  background: color-mix(in srgb, var(--rg-merk-claude) 12%, var(--rg-surface));
}
.landing-root .rg-ph__merk--claude::before {
  -webkit-mask-image: url("../images/merken/claude.svg");
  mask-image: url("../images/merken/claude.svg");
}
.landing-root .rg-ph__merk--chatgpt { color: var(--rg-merk-chatgpt); background: var(--rg-sunken); }
.landing-root .rg-ph__merk--chatgpt::before {
  -webkit-mask-image: url("../images/merken/openai.svg");
  mask-image: url("../images/merken/openai.svg");
}

/* --- CRM ---------------------------------------------------------------- */

.landing-root .rg-ph__mail { display: flex; gap: 0.625rem; align-items: center; }
.landing-root .rg-ph__ico {
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.5625rem;
  display: grid;
  place-items: center;
  background: var(--rg-primary-wash);
}
.landing-root .rg-ph__ico svg { width: 1.0625rem; height: 1.0625rem; fill: none; stroke: var(--rg-primary); stroke-width: 1.8; stroke-linejoin: round; }
.landing-root .rg-ph__mail-tekst { min-width: 0; }
.landing-root .rg-ph__mail-tekst b { display: block; font-size: 0.78rem; }
.landing-root .rg-ph__mail-tekst span { display: block; color: var(--rg-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing-root .rg-ph__bron {
  margin-left: auto;
  flex: none;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--rg-line);
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--rg-text-soft);
}

.landing-root .rg-ph__ai-regel {
  display: flex;
  gap: 0.5625rem;
  align-items: center;
  margin-top: 0.625rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.75rem;
  background: var(--rg-surface);
  border: 1px dashed var(--rg-merk-claude);
  font-size: 0.75rem;
  color: var(--rg-text-soft);
}
.landing-root .rg-ph__ai-regel b { color: var(--rg-ink); }
.landing-root .rg-ph__puntjes { display: inline-flex; gap: 3px; margin-left: 0.375rem; vertical-align: middle; }
.landing-root .rg-ph__puntjes i { width: 4px; height: 4px; border-radius: 50%; background: var(--rg-merk-claude); opacity: 0.35; }
/* Losse eigenschappen in plaats van de verkorte "animation": die zou de
   vertraging per puntje hieronder weer op 0 zetten. */
.landing-root .rg-ph__tafereel[data-ph-speelt="1"] .rg-ph__ai-regel.is-denkt .rg-ph__puntjes i {
  animation-name: rgPhPunt;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.landing-root .rg-ph__puntjes i:nth-child(2) { animation-delay: 0.15s; }
.landing-root .rg-ph__puntjes i:nth-child(3) { animation-delay: 0.3s; }
@keyframes rgPhPunt { 0%, 100% { opacity: 0.35; transform: none; } 50% { opacity: 1; transform: translateY(-2px); } }

/* Het bord: drie kolommen in één rij; de deal ligt als extra laag over de
   kolom Offerte en schuift naar Gewonnen. */
.landing-root .rg-ph__bord {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.landing-root .rg-ph__kolom {
  grid-row: 1;
  /* minmax(0, ...): de kaartjes (nowrap-tekst) mogen de kolom niet oprekken. */
  grid-template-columns: minmax(0, 1fr);
  min-height: 10.5rem;
  padding: 0.5rem;
  display: grid;
  align-content: start;
  gap: 0.375rem;
  background: var(--rg-surface);
  border: 1px solid var(--rg-line);
  border-radius: 0.75rem;
}
.landing-root .rg-ph__kolom--lead { grid-column: 1; }
.landing-root .rg-ph__kolom--offerte { grid-column: 2; }
.landing-root .rg-ph__kolom--gewonnen { grid-column: 3; }
.landing-root .rg-ph__kolom > header {
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--rg-text-soft);
}
.landing-root .rg-ph__kolom > header .rg-ph__mono { color: var(--rg-ink); }
.landing-root .rg-ph__deeltje {
  padding: 0.375rem 0.4375rem;
  border: 1px solid var(--rg-line);
  border-radius: 0.5625rem;
  background: var(--rg-canvas);
  font-size: 0.6875rem;
}
.landing-root .rg-ph__deeltje b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ruimte boven het onderste kaartje: daar ligt (of landt) de deal. */
.landing-root .rg-ph__deeltje--onder { margin-top: 4.25rem; }
.landing-root .rg-ph__deal {
  grid-row: 1;
  grid-column: 2;
  align-self: start;
  z-index: 2;
  margin: 1.9rem 0.5rem 0;
  padding: 0.375rem 0.4375rem;
  border: 1.5px solid var(--rg-primary);
  border-radius: 0.5625rem;
  background: var(--rg-surface);
  box-shadow: var(--rg-shadow);
  font-size: 0.6875rem;
  transition: transform 900ms var(--rg-ease);
}
.landing-root .rg-ph__deal b { display: block; font-weight: 600; }
.landing-root .rg-ph__deal-gewonnen {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--rg-settled);
  opacity: 0;
  transition: opacity 300ms ease 600ms;
}
.landing-root .rg-ph__deal.is-zicht { transform: translateX(var(--rg-ph-deal-stap)); }
.landing-root .rg-ph__deal.is-zicht .rg-ph__deal-gewonnen { opacity: 1; }

.landing-root .rg-ph__onder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  margin-top: 0.625rem;
}
.landing-root .rg-ph__taken { display: grid; gap: 0.5rem; }
.landing-root .rg-ph__taak { display: flex; gap: 0.5625rem; align-items: center; }
.landing-root .rg-ph__taak b { font-size: 0.78rem; }
.landing-root .rg-ph__vak {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: 0.3125rem;
  border: 1.5px solid var(--rg-line-strong);
}
/* Het vinkje is een gevulde laag die invaagt: geen kleurovergang. */
.landing-root .rg-ph__vak-vol {
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  background: var(--rg-settled);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 300ms ease;
}
.landing-root .rg-ph__vak-vol svg { width: 0.625rem; height: 0.625rem; fill: none; stroke: var(--rg-surface); stroke-width: 3; }
.landing-root .rg-ph__taak.is-af .rg-ph__vak-vol { opacity: 1; }

.landing-root .rg-ph__doel { display: grid; justify-items: center; gap: 0.25rem; }
.landing-root .rg-ph__ring { position: relative; width: 4rem; height: 4rem; }
.landing-root .rg-ph__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.landing-root .rg-ph__ring circle { fill: none; stroke-width: 6; }
.landing-root .rg-ph__ring-baan { stroke: var(--rg-line); }
.landing-root .rg-ph__ring-boog { stroke: var(--rg-primary); stroke-linecap: round; }
/* Twee bogen (72% en 86%) die in elkaar overvloeien: alleen opacity. */
.landing-root .rg-ph__ring-boog--eind { stroke: var(--rg-settled); opacity: 0; transition: opacity 900ms var(--rg-ease); }
.landing-root .rg-ph__ring.is-zicht .rg-ph__ring-boog--eind { opacity: 1; }
.landing-root .rg-ph__ring .rg-ph__teller { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700; }

.landing-root .rg-ph__gpt { display: grid; gap: 0.375rem; margin-top: 0.625rem; }
.landing-root .rg-ph__gpt-vraag {
  justify-self: end;
  max-width: 92%;
  display: flex;
  gap: 0.5625rem;
  align-items: center;
  padding: 0.375rem 0.625rem 0.375rem 0.375rem;
  border-radius: 0.875rem;
  background: var(--rg-surface);
  border: 1px solid var(--rg-line);
  font-size: 0.75rem;
}
.landing-root .rg-ph__gpt-antwoord {
  justify-self: start;
  max-width: 92%;
  padding: 0.5rem 0.6875rem;
  border-radius: 0.875rem 0.875rem 0.875rem 0.25rem;
  background: var(--rg-ink);
  color: var(--rg-surface);
  font-size: 0.75rem;
}

/* De melding schuift rechts onder het bord in, in de gewone stroom: zo
   valt hij nooit over de mail of de regel van Claude. */
.landing-root .rg-ph__melding {
  width: fit-content;
  margin: 0.5rem 0 0 auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.4375rem 0.6875rem;
  border-radius: 0.75rem;
  background: var(--rg-ink);
  color: var(--rg-surface);
  font-size: 0.75rem;
  font-weight: 600;
}
.landing-root .rg-ph__stip { width: 7px; height: 7px; border-radius: 50%; background: var(--rg-settled); }

/* --- AI-telefonist ------------------------------------------------------ */

/* De branche-regel direct onder de hero: een rustige alinea, dus veel minder ruimte dan een volle sectie. */
.landing-root .rg-section.rg-ph__branche { padding-block: clamp(1.5rem, 3vw, 2.5rem) 0; }
.landing-root .rg-ph__branche .rg-lead { margin: 0; font-size: 1.0625rem; }
.landing-root .rg-ph__branche a { color: var(--rg-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }

/* Het label "Voorbeeld: een tafel boeken" bovenaan het tafereel: klein, rustig, mag afbreken op een smalle telefoon. */
.landing-root .rg-ph__voorbeeld {
  display: block;
  margin: 0 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rg-text-ghost);
  overflow-wrap: anywhere;
}
.landing-root .rg-ph__oproep { display: flex; gap: 0.75rem; align-items: center; }
.landing-root .rg-ph__oproep b { display: block; font-size: 0.8125rem; }
.landing-root .rg-ph__hoorn {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--rg-settled);
  display: grid;
  place-items: center;
}
.landing-root .rg-ph__hoorn svg { width: 1.125rem; height: 1.125rem; fill: var(--rg-surface); }
.landing-root .rg-ph__hoorn::before,
.landing-root .rg-ph__hoorn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--rg-settled);
  opacity: 0;
}
.landing-root .rg-ph__tafereel[data-ph-speelt="1"] .rg-ph__hoorn.is-belt::before { animation: rgPhRing 1.4s var(--rg-ease) infinite; }
.landing-root .rg-ph__tafereel[data-ph-speelt="1"] .rg-ph__hoorn.is-belt::after { animation: rgPhRing 1.4s var(--rg-ease) 0.45s infinite; }
@keyframes rgPhRing { from { transform: scale(1); opacity: 0.6; } to { transform: scale(1.9); opacity: 0; } }

/* De geluidsgolf: balkjes van vaste hoogte die met scaleY ademen. */
.landing-root .rg-ph__golf { display: flex; gap: 3px; align-items: center; height: 2.125rem; margin: 0.75rem 0 0.25rem; padding: 0 0.25rem; }
.landing-root .rg-ph__golf i { flex: 1; height: 1.75rem; border-radius: 3px; background: var(--rg-line-strong); transform: scaleY(0.22); }
.landing-root .rg-ph__golf.is-gast i { background: var(--rg-text-soft); }
.landing-root .rg-ph__golf.is-ai i { background: var(--rg-primary); }
.landing-root .rg-ph__tafereel[data-ph-speelt="1"] .rg-ph__golf:is(.is-gast, .is-ai) i {
  animation-name: rgPhGolf;
  animation-duration: 0.9s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.landing-root .rg-ph__golf i:nth-child(3n) { animation-delay: -0.2s; }
.landing-root .rg-ph__golf i:nth-child(3n+1) { animation-delay: -0.5s; }
.landing-root .rg-ph__golf i:nth-child(4n) { animation-delay: -0.7s; }
@keyframes rgPhGolf { 0%, 100% { transform: scaleY(0.22); } 50% { transform: scaleY(1); } }

.landing-root .rg-ph__wie { display: flex; justify-content: space-between; font-size: 0.6875rem; color: var(--rg-text-ghost); }
.landing-root .rg-ph__gesprek { display: grid; gap: 0.4375rem; margin-top: 0.625rem; }
.landing-root .rg-ph__zin { max-width: 84%; padding: 0.5rem 0.6875rem; border-radius: 0.875rem; font-size: 0.78rem; }
.landing-root .rg-ph__zin--gast { justify-self: start; background: var(--rg-surface); border: 1px solid var(--rg-line); border-bottom-left-radius: 0.25rem; }
.landing-root .rg-ph__zin--ai { justify-self: end; background: var(--rg-primary); color: var(--rg-surface); border-bottom-right-radius: 0.25rem; }
.landing-root .rg-ph__uitkomst {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.625rem;
  align-items: center;
  border-color: var(--rg-settled);
}
.landing-root .rg-ph__uitkomst b { display: block; font-size: 0.8125rem; }
.landing-root .rg-ph__vink { width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--rg-settled); display: grid; place-items: center; }
.landing-root .rg-ph__vink svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: var(--rg-surface); stroke-width: 3; }
.landing-root .rg-ph__sms { margin-top: 0.5rem; display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; }

/* --- Online reserveren -------------------------------------------------- */

.landing-root .rg-ph__widget { position: relative; min-width: 0; }
.landing-root .rg-ph__widget-uitleg { margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--rg-text-soft); }
.landing-root .rg-ph__widget-plek { position: relative; }
/* reserverenDemo.js zet de hoogte van de plek op de gemeten hoogte van de
   widget. Wisselt de widget van paneel, dan glijdt die hoogte mee
   (data-ph-hoogte="glijdt"), zodat de pagina eronder niet springt. Tijdens
   het glijden knipt overflow de inhoud af; daarbuiten niet, zodat de
   focusring van de widget niet wordt afgesneden. Minder beweging: het script
   zet dan direct, zonder glijden. */
.landing-root .rg-ph__widget-plek[data-ph-hoogte="glijdt"] {
  overflow: hidden;
  transition: height 320ms var(--rg-ease);
}
/* De plek van de widget houdt zijn hoogte vast tot de widget er is; het
   skelet (een gewoon kind van de host) verdwijnt vanzelf zodra de widget
   zijn shadow root aanmaakt. */
.landing-root .rg-ph__widget-host { display: block; min-height: 26rem; }
.landing-root .rg-ph__skelet {
  display: grid;
  gap: 0.625rem;
  padding: 1rem;
  min-height: 26rem;
  align-content: start;
  background: var(--rg-surface);
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius);
}
.landing-root .rg-ph__skelet span { height: 2.75rem; border-radius: 999px; background: var(--rg-sunken); }
.landing-root .rg-ph__tafereel[data-ph-widget="mislukt"] .rg-ph__widget { display: none; }

/* De demovinger: alleen transform en opacity; reserverenDemo.js zet de plek
   in --rg-ph-vinger-x/-y. */
.landing-root .rg-ph__vinger {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  width: 1.625rem;
  height: 1.625rem;
  margin: -0.8125rem 0 0 -0.8125rem;
  border-radius: 50%;
  background: var(--rg-primary-wash);
  border: 2px solid var(--rg-primary);
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--rg-ph-vinger-x, 0), var(--rg-ph-vinger-y, 0)) scale(1);
  transition: transform 650ms var(--rg-ease), opacity 300ms ease;
}
.landing-root .rg-ph__vinger.is-zicht { opacity: 0.85; }
.landing-root .rg-ph__vinger.is-tik { transform: translate(var(--rg-ph-vinger-x, 0), var(--rg-ph-vinger-y, 0)) scale(0.75); }

.landing-root .rg-ph__planning-kop { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.landing-root .rg-ph__planning-kop b { font-size: 0.78rem; }
.landing-root .rg-ph__tafels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.375rem; }
.landing-root .rg-ph__tafel {
  position: relative;
  min-height: 2.75rem;
  padding: 0.375rem;
  border: 1px dashed var(--rg-line-strong);
  border-radius: 0.5625rem;
  font-size: 0.65rem;
  color: var(--rg-text-ghost);
}
.landing-root .rg-ph__tafel b { display: block; color: var(--rg-ink); font-size: 0.6875rem; }
.landing-root .rg-ph__tafel--bezet { border-style: solid; border-color: var(--rg-line); background: var(--rg-canvas); color: var(--rg-text-soft); }
/* Tafel 7 gevuld: een laag over de lege tafel die invaagt. Lege tafel en laag
   delen één rastervak, zodat de tegel meegroeit met de langste van de twee
   ("De Vries · 4 · 19:30" past niet in de hoogte van een lege tafel). Daarom staat
   de lege stand in een eigen span (rg-ph__tafel-leeg) en niet als losse tekst. */
.landing-root .rg-ph__tafel:has(> .rg-ph__tafel-gevuld) { display: grid; }
.landing-root .rg-ph__tafel:has(> .rg-ph__tafel-gevuld) > * { grid-area: 1 / 1; }
.landing-root .rg-ph__tafel-gevuld {
  position: relative;
  margin: calc(-0.375rem - 1px);
  padding: 0.375rem;
  border: 1px solid var(--rg-settled);
  border-radius: inherit;
  background: var(--rg-settled-wash);
  color: var(--rg-settled);
}

/* Onder 1200 px staan widget en avondplanning onder elkaar. Dan de
   avondplanning bovenaan: de widget groeit en krimpt per paneel (342 tot
   769 px), en zo gebeurt dat alleen ónder wat de bezoeker bekijkt in plaats
   van dat de avondplanning op en neer springt. De volgorde in de DOM blijft
   (de avondplanning is decor, aria-hidden). */
@media (max-width: 1199.98px) {
  .landing-root .rg-ph__tafereel--reserveren .rg-ph__planning { order: -1; }
}

/* Vanaf 1200 px: de widget en de avondplanning naast elkaar, allebei
   bovenaan (align-items: start), zodat de avondplanning niet meebeweegt. */
@media (min-width: 1200px) {
  .landing-root .rg-ph__tafereel--reserveren { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  .landing-root .rg-ph__tafereel--reserveren .rg-ph__tafels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Widget niet geladen: geen lege rechterhelft, de avondplanning op volle breedte. */
  .landing-root .rg-ph__tafereel--reserveren[data-ph-widget="mislukt"] { grid-template-columns: minmax(0, 1fr); }
}

/* --- De stappen: onzichtbaar tot de tijdlijn ze toont ------------------- */

.landing-root .rg-ph__tafereel .rg-ph__stap {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 450ms var(--rg-ease), transform 550ms var(--rg-ease);
}
.landing-root .rg-ph__tafereel .rg-ph__stap.is-zicht { opacity: 1; transform: none; }

/* De tellers: tijdens het spelen schrijft het script in de loop-tekst; de
   eindtekst van de server staat erachter en komt alleen in de eindstand
   zonder script (dezelfde plek in het raster, dus geen verspringing). */
.landing-root .rg-ph__teller { display: inline-grid; }
.landing-root .rg-ph__teller > span { grid-area: 1 / 1; }
.landing-root .rg-ph__teller-eind { opacity: 0; }

/* Het vangnet: speelt er geen script (niet geladen, of een fout), dan na 3 s
   toch de eindstand. Alleen een tafereel dat speelt (data-ph-speelt="1")
   zet het uit, en een tafereel dat het script geclaimd heeft en dat nog op
   beeld wacht (data-ph-speelt="wacht"): zo springt een tafereel onder de
   vouw niet na 3 s alsnog naar de eindstand. Andersom ("verbergen zodra het script er is") kan niet: dan
   stond de eindstand eerst in beeld en verdween hij weer. Vaste easing, geen
   token: het vangnet moet ook werken als landing.css ontbreekt. */
.landing-root .rg-ph__tafereel .rg-ph__stap,
.landing-root .rg-ph__tafereel .rg-ph__deal-gewonnen,
.landing-root .rg-ph__tafereel .rg-ph__vak-vol,
.landing-root .rg-ph__tafereel .rg-ph__ring-boog--eind,
.landing-root .rg-ph__tafereel .rg-ph__teller-eind { animation: rgPhVangnetToon 450ms ease-out 3s forwards; }
.landing-root .rg-ph__tafereel .rg-ph__teller-loop { animation: rgPhVangnetVerberg 450ms ease-out 3s forwards; }
.landing-root .rg-ph__tafereel .rg-ph__deal { animation: rgPhVangnetDeal 900ms ease-out 3s forwards; }
.landing-root .rg-ph__tafereel[data-ph-speelt="1"] :is(.rg-ph__stap, .rg-ph__deal-gewonnen, .rg-ph__vak-vol, .rg-ph__ring-boog--eind, .rg-ph__teller-eind, .rg-ph__teller-loop, .rg-ph__deal),
.landing-root .rg-ph__tafereel[data-ph-speelt="wacht"] :is(.rg-ph__stap, .rg-ph__deal-gewonnen, .rg-ph__vak-vol, .rg-ph__ring-boog--eind, .rg-ph__teller-eind, .rg-ph__teller-loop, .rg-ph__deal) { animation: none; }
@keyframes rgPhVangnetToon { to { opacity: 1; transform: none; } }
@keyframes rgPhVangnetVerberg { to { opacity: 0; } }
@keyframes rgPhVangnetDeal { to { transform: translateX(var(--rg-ph-deal-stap)); } }

/* --- De eindstand zonder script, bij een fout en bij minder beweging ---- */

/* Eén lijst, vier plekken: de fout van het script (meteen, zonder de 3 s
   van het vangnet), minder beweging en geen JavaScript. */
.landing-root .rg-ph__tafereel[data-ph-speelt="fout"] :is(.rg-ph__stap, .rg-ph__deal-gewonnen, .rg-ph__vak-vol, .rg-ph__ring-boog--eind, .rg-ph__teller-eind) { opacity: 1; transform: none; animation: none; }
.landing-root .rg-ph__tafereel[data-ph-speelt="fout"] .rg-ph__teller-loop { opacity: 0; animation: none; }
.landing-root .rg-ph__tafereel[data-ph-speelt="fout"] .rg-ph__deal { transform: translateX(var(--rg-ph-deal-stap)); animation: none; }

@media (prefers-reduced-motion: reduce) {
  .landing-root .rg-ph__tafereel *,
  .landing-root .rg-ph__tafereel *::before,
  .landing-root .rg-ph__tafereel *::after { animation: none; transition: none; }
  .landing-root .rg-ph__tafereel :is(.rg-ph__stap, .rg-ph__deal-gewonnen, .rg-ph__vak-vol, .rg-ph__ring-boog--eind, .rg-ph__teller-eind) { opacity: 1; transform: none; }
  .landing-root .rg-ph__tafereel .rg-ph__teller-loop { opacity: 0; }
  .landing-root .rg-ph__tafereel .rg-ph__deal { transform: translateX(var(--rg-ph-deal-stap)); }
  .landing-root .rg-ph__vinger { display: none; }
}

@media (scripting: none) {
  .landing-root .rg-ph__tafereel :is(.rg-ph__stap, .rg-ph__deal-gewonnen, .rg-ph__vak-vol, .rg-ph__ring-boog--eind, .rg-ph__teller-eind) { opacity: 1; transform: none; animation: none; }
  .landing-root .rg-ph__tafereel .rg-ph__teller-loop { opacity: 0; animation: none; }
  .landing-root .rg-ph__tafereel .rg-ph__deal { transform: translateX(var(--rg-ph-deal-stap)); animation: none; }
  /* Zonder JavaScript is er geen widget: alleen de avondplanning. */
  .landing-root .rg-ph__tafereel .rg-ph__widget { display: none; }
}

/* --- Telefoon ----------------------------------------------------------- */

/* Onder 1024 px staat het tafereel onder de tekst (rg-hero__grid), op de
   volle breedte. Onder 480 px kleinere maten, zonder horizontaal scrollen.
   De knoppen houden de knopbaan van de support-knop vrij via landing.css
   (.rg-hero__actions, --rg-knopbaan); dit bestand raakt die maat niet. */
@media (max-width: 1023.98px) {
  .landing-root .rg-ph__tafereel { max-width: 34rem; }
}
@media (max-width: 479.98px) {
  .landing-root .rg-ph__tafereel { padding: 0.75rem; font-size: 0.75rem; }
  .landing-root .rg-ph__kolom { min-height: 8.5rem; padding: 0.375rem; }
  .landing-root .rg-ph__kolom > header { font-size: 0.625rem; flex-direction: column; }
  .landing-root .rg-ph__deeltje { font-size: 0.625rem; }
  .landing-root .rg-ph__deal { margin: 2.6rem 0.375rem 0; font-size: 0.625rem; }
  .landing-root .rg-ph { --rg-ph-deal-stap: calc(100% + 1.25rem); }
  .landing-root .rg-ph__deeltje--onder { margin-top: 4.25rem; }
  .landing-root .rg-ph__zin { max-width: 92%; font-size: 0.72rem; }
  .landing-root .rg-ph__melding { font-size: 0.6875rem; }
}

/* =========================================================================
   App-carrousel (15 okt 2026): AppCarrousel.razor op /crm-app (app Ragently
   CRM) en /horeca/online-reserveren (Ragently-app); op /horeca/ai-telefonist
   en /webshop-chatbot zonder beelden (alleen tekst en winkelknoppen).

   - Zonder JavaScript: een horizontale rij met scroll-snap (swipen,
     trackpad, shift-scroll, pijltjestoetsen als de rij focus heeft). Alleen
     de rij scrolt, nooit de pagina. De pijlen en stipjes (js/appCarrousel.js)
     zijn dan verborgen.
   - Coverflow als extraatje: met scroll-driven animations (@supports
     animation-timeline) is het schermpje in het midden groot en scherp en
     draaien de buren iets weg, kleiner en lichter. Alleen transform en
     opacity bewegen; bij minder beweging staat alles gewoon recht.
   - Achter de rij een zachte gloed in de productkleur (data-p, landing.css).
   ========================================================================= */
.landing-root .rg-appc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "tekst" "carrousel" "winkels";
  gap: 1.75rem;
  align-items: center;
}
.landing-root .rg-appc__tekst { grid-area: tekst; max-width: 38rem; }
.landing-root .rg-appc__tekst .rg-h2 { margin: 0.5rem 0 0.75rem; }
.landing-root .rg-appc__punten {
  margin: 1.25rem 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.6rem;
  color: var(--rg-text);
  list-style: disc;
}
.landing-root .rg-appc__punten li::marker { color: var(--rg-productkleur, var(--rg-primary)); }
.landing-root .rg-appc__winkels {
  grid-area: winkels;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
/* Korte labels ("App Store", "Google Play"): de knoppen houden hun eigen breedte, rekken niet
   uit en breken niet af. */
.landing-root .rg-appc__winkels .rg-btn { gap: 0.5rem; flex: 0 1 auto; white-space: nowrap; }
.landing-root .rg-appc__grid--beelden .rg-appc__winkels { justify-content: center; }

@media (min-width: 1024px) {
  .landing-root .rg-appc__grid--beelden {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas: "tekst carrousel" "tekst winkels";
    column-gap: 3rem;
    row-gap: 1rem;
  }
}

.landing-root .rg-appc__carrousel { grid-area: carrousel; position: relative; min-width: 0; }
/* De gloed: een vage vlek in de productkleur achter de schermpjes. */
.landing-root .rg-appc__carrousel::before {
  content: "";
  position: absolute;
  inset: 6% 14% 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rg-productkleur, var(--rg-primary)) 34%, transparent), transparent);
  filter: blur(28px);
  pointer-events: none;
}

.landing-root .rg-appc__rij {
  /* Eén maat voor elk schermpje; de zijmarge laat het eerste en het laatste
     schermpje ook in het midden staan. */
  --rg-appc-scherm: clamp(10.5rem, 48vw, 14.5rem);
  position: relative;
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 1.5rem calc(50% - var(--rg-appc-scherm) / 2) 2rem;
  border-radius: var(--rg-radius-lg);
  /* Zachte uitloop aan beide randen: de buren verdwijnen, ze worden niet afgeknipt. */
  -webkit-mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
  mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
}
.landing-root .rg-appc__rij::-webkit-scrollbar { display: none; }
.landing-root .rg-appc__rij:focus-visible { outline: 2px solid var(--rg-primary); outline-offset: 2px; }
.landing-root .rg-appc__slide {
  flex: 0 0 var(--rg-appc-scherm);
  margin: 0;
  scroll-snap-align: center;
}
/* Het telefoonkadertje: donkere rand, afgeronde hoeken, zachte schaduw. */
.landing-root .rg-appc__toestel {
  padding: 0.4rem;
  border-radius: 2rem;
  background: var(--rg-ink);
  box-shadow: var(--rg-shadow-lg);
}
.landing-root .rg-appc__toestel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 1043;
  border-radius: 1.65rem;
}

/* Pijlen en stipjes (js/appCarrousel.js). */
.landing-root .rg-appc__bediening {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.landing-root .rg-appc__pijl {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--rg-line-strong);
  background: var(--rg-surface);
  color: var(--rg-ink);
  cursor: pointer;
}
.landing-root .rg-appc__pijl:hover { border-color: var(--rg-productkleur, var(--rg-primary)); }
.landing-root .rg-appc__stippen { display: flex; }
/* Een raakvlak van 1.75rem, het zichtbare stipje is kleiner (::before). */
.landing-root .rg-appc__stip {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.landing-root .rg-appc__stip::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--rg-line-strong);
  transition: transform 200ms var(--rg-ease);
}
.landing-root .rg-appc__stip[aria-current="true"]::before {
  background: var(--rg-productkleur, var(--rg-primary));
  transform: scale(1.4);
}
.landing-root :is(.rg-appc__pijl, .rg-appc__stip):focus-visible { outline: 2px solid var(--rg-primary); outline-offset: 2px; }

/* Coverflow: het schermpje draait mee met zijn plek in de rij (0% = komt
   rechts binnen, 50% = in het midden, 100% = verdwijnt links). */
@keyframes rgPhCarrouselDraai {
  0%   { opacity: 0.55; transform: perspective(900px) rotateY(-34deg) scale(0.8); }
  50%  { opacity: 1;    transform: perspective(900px) rotateY(0deg) scale(1); }
  100% { opacity: 0.55; transform: perspective(900px) rotateY(34deg) scale(0.8); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .landing-root .rg-appc__toestel {
      animation: rgPhCarrouselDraai linear both;
      animation-timeline: view(inline);
    }
  }
}

@media (scripting: none) {
  .landing-root .rg-appc__bediening { display: none; }
}

/* "Wat je krijgt" op /crm-app heeft sinds 15 okt 2026 tien tegels (het eigen
   dashboard erbij). Op een tablet sluit dat raster (5 × 2); op het
   bureaublad (3 kolommen) gaat de tiende tegel over de volle breedte, zodat
   er geen losse tegel onderaan blijft staan. */
@media (min-width: 1024px) {
  .landing-root #crm-krijg .rg-tile:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}

/* =========================================================================
   Vergrootweergave (15 okt 2026): "klik om in te zoomen" op de beelden van
   de app-carrousels (AppCarrousel.razor) en het dashboard op /crm-app
   (CrmDashboardVoorbeeld.razor). Het venster is BeeldZoomVenster.razor (een
   native <dialog>), het gedrag js/beeldZoom.js.

   - De link om het beeld: cursor zoom-in en een duidelijke focusring.
   - Het venster vult het hele scherm met een donkere, iets doorzichtige
     inktlaag; bovenaan de sluitknop, in het midden het beeld (past altijd in
     het scherm, hooguit 92vw × 92vh), onderaan vorige / teller / volgende.
   - De maat van het beeld volgt uit zijn verhouding (--rg-zoom-verhouding,
     gezet door het script). Zo verspringt er niets als de grote versie het
     kleine beeld vervangt.
   - In- en uitfaden: alleen opacity en transform; bij minder beweging meteen.
   - Terwijl het venster open is, scrolt de pagina niet mee: dat zet het
     script inline op <html> (hier staat elke regel onder .landing-root).
   - Op de telefoon mag knijpzoomen in het venster (touch-action: pinch-zoom);
     één vinger vegen bladert (js).
   ========================================================================= */
.landing-root .rg-zoom-link {
  display: block;
  color: inherit;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.landing-root .rg-zoom-link:focus-visible { outline: 3px solid var(--rg-primary); outline-offset: 4px; }
/* De ring volgt de hoeken van het telefoonkadertje. */
.landing-root .rg-appc__zoom { border-radius: 2rem; }

.landing-root .rg-zoom {
  /* De ruimte boven en onder het beeld voor de sluitknop en de bediening. */
  --rg-zoom-randen: 8rem;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem max(0.75rem, env(safe-area-inset-bottom));
  border: 0;
  background: color-mix(in srgb, var(--rg-ink) 85%, transparent);
  /* Een lichte waas over de pagina erachter: de tekst daar leidt dan niet af. */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--rg-surface);
  overscroll-behavior: contain;
  touch-action: pinch-zoom;
  opacity: 0;
  transition: opacity 200ms var(--rg-ease);
}
.landing-root .rg-zoom[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 0.5rem;
}
/* De inktlaag zit op het venster zelf (dat het hele scherm vult), niet op ::backdrop. */
.landing-root .rg-zoom::backdrop { background: transparent; }
.landing-root .rg-zoom.is-zichtbaar { opacity: 1; }

.landing-root .rg-zoom__beeld {
  /* De hoogte die het beeld mag hebben: hooguit 92vh, en altijd met ruimte voor de knoppen. */
  --rg-zoom-hoogte: min(92vh, calc(100vh - var(--rg-zoom-randen)));
  display: block;
  width: min(92vw, calc(var(--rg-zoom-hoogte) * var(--rg-zoom-verhouding, 0.46)));
  height: auto;
  aspect-ratio: var(--rg-zoom-verhouding, 0.46);
  object-fit: contain;
  border-radius: var(--rg-radius);
  background: var(--rg-ink-raised);
  box-shadow: var(--rg-shadow-lg);
  user-select: none;
  -webkit-user-drag: none;
  transform: scale(0.96);
  transition: transform 240ms var(--rg-ease);
}
/* Op de telefoon is 100vh soms hoger dan wat je ziet (de adresbalk); dvh is wat je echt ziet. */
@supports (height: 100dvh) {
  .landing-root .rg-zoom__beeld { --rg-zoom-hoogte: min(92vh, calc(100dvh - var(--rg-zoom-randen))); }
}
.landing-root .rg-zoom.is-zichtbaar .rg-zoom__beeld { transform: none; }

.landing-root .rg-zoom__sluit { justify-self: end; }
.landing-root .rg-zoom__bediening {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.landing-root .rg-zoom__bediening[hidden] { display: none; }
.landing-root .rg-zoom__knop {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 999px;
  border: 1px solid var(--rg-line-ink);
  /* Bijna dekkend: wat er achter de knop op de pagina staat, schemert niet door. */
  background: var(--rg-ink-raised);
  color: var(--rg-surface);
  font-size: 1.125rem;
  cursor: pointer;
}
.landing-root .rg-zoom__knop:hover { background: color-mix(in srgb, var(--rg-surface) 18%, var(--rg-ink-raised)); }
.landing-root .rg-zoom__knop:focus-visible { outline: 2px solid var(--rg-surface); outline-offset: 2px; }
.landing-root .rg-zoom__teller {
  min-inline-size: 4.5ch;
  margin: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
}

@media (prefers-reduced-motion: reduce) {
  .landing-root :is(.rg-zoom, .rg-zoom__beeld) { transition: none; }
}

/* --- "Bel me terug" onder de knoppen (19 okt 2026) ----------------------
   Staat in het slot Extra van ProductHero (DemoTerugbel.razor). Altijd
   linksuitgelijnd, ook onder 1024 px waar de rest van de tekstkolom
   gecentreerd is: het is een formulier. */
.landing-root .rg-ph__extra { margin-top: 1.75rem; }

.landing-root .rg-demo-terugbel {
  max-width: 30rem;
  padding: 1.25rem;
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius-lg);
  background: var(--rg-surface);
  box-shadow: var(--rg-shadow);
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Kop: groen telefoonicoon (de kleur van de telefonist) naast titel en uitleg. */
.landing-root .rg-demo-terugbel__kop {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.875rem;
  align-items: start;
}
.landing-root .rg-demo-terugbel__icoon {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--rg-settled-wash);
  color: var(--rg-settled);
  font-size: 1rem;
}
.landing-root .rg-demo-terugbel__titel {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--rg-ink);
}
.landing-root .rg-demo-terugbel__uitleg {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--rg-text-soft);
}

/* Veld en knop als één belbalk; de rand wordt groen zodra je erin typt. */
.landing-root .rg-demo-terugbel__belbalk {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem;
  border: 1px solid var(--rg-line-strong);
  border-radius: var(--rg-radius);
  background: var(--rg-surface);
}
.landing-root .rg-demo-terugbel__belbalk:focus-within {
  border-color: var(--rg-settled);
  box-shadow: 0 0 0 3px var(--rg-settled-wash);
}
/* Het label is er voor schermlezers; zichtbaar staat het voorbeeld in het veld. */
.landing-root .rg-demo-terugbel__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.landing-root .rg-demo-terugbel__veld {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.625rem 0.625rem;
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border: 0;
  background: transparent;
  color: var(--rg-text);
}
.landing-root .rg-demo-terugbel__veld::placeholder { color: var(--rg-text-ghost); }
.landing-root .rg-demo-terugbel__veld:focus { outline: none; }
.landing-root .rg-demo-terugbel__knop {
  flex: none;
  padding: 0.6875rem 1.125rem;
  border: 0;
  border-radius: calc(var(--rg-radius) - 4px);
  background: var(--rg-settled);
  color: var(--rg-surface);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 160ms var(--rg-ease);
}
.landing-root .rg-demo-terugbel__knop:hover:not(:disabled) {
  background: color-mix(in srgb, var(--rg-settled) 86%, var(--rg-ink));
}
.landing-root .rg-demo-terugbel__knop:focus-visible {
  outline: 2px solid var(--rg-settled);
  outline-offset: 2px;
}
.landing-root .rg-demo-terugbel__knop:disabled { opacity: 0.45; cursor: not-allowed; }

.landing-root .rg-demo-terugbel__toestemming {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--rg-text-soft);
  cursor: pointer;
}
.landing-root .rg-demo-terugbel__toestemming input {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  accent-color: var(--rg-settled);
}
/* Het Turnstile-vak is meestal onzichtbaar (interaction-only) en dan 0 px hoog; de
   negatieve marge heft de tussenruimte van het blok op, anders staat er onderaan een
   gat. Vraagt Cloudflare toch iets, dan staat het vak direct onder het vinkje. */
.landing-root .rg-demo-terugbel__turnstile { margin-top: -1rem; border-radius: 10px; overflow: hidden; }
.landing-root .rg-demo-terugbel__melding { margin: 0; font-size: 0.875rem; color: var(--destructive); }
.landing-root .rg-demo-terugbel__binnenkort { margin: 0; font-size: 0.875rem; color: var(--rg-text-soft); }
.landing-root .rg-demo-terugbel__gestart {
  margin: 0;
  padding: 0.75rem 0.875rem;
  border-radius: var(--rg-radius);
  background: var(--rg-settled-wash);
  color: var(--rg-ink);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Na "Bel me terug" gaat het icoon over: een korte trilling en een ring die uitdijt,
   drie keer, als een telefoon die belt. Alleen als antwoord op de klik, en alleen
   transform en opacity (ProductHeroTests.Alleen_transform_en_opacity_bewegen). */
.landing-root .rg-demo-terugbel__icoon::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--rg-settled);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .landing-root .rg-demo-terugbel.is-gestart .rg-demo-terugbel__icoon i {
    animation: rgPhBelTril 1.6s var(--rg-ease) 3;
  }
  .landing-root .rg-demo-terugbel.is-gestart .rg-demo-terugbel__icoon::after {
    animation: rgPhBelRing 1.6s var(--rg-ease) 3;
  }
}
@keyframes rgPhBelTril {
  0%, 40%, 100% { transform: rotate(0); }
  5%, 15%, 25% { transform: rotate(-14deg); }
  10%, 20%, 30% { transform: rotate(14deg); }
}
@keyframes rgPhBelRing {
  0% { opacity: 0.6; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.7); }
}

/* Smal scherm: de knop onder het veld, over de volle breedte. */
@media (max-width: 400px) {
  .landing-root .rg-demo-terugbel__belbalk { flex-wrap: wrap; }
  .landing-root .rg-demo-terugbel__knop { flex: 1 1 100%; }
}