/* Prijzen voor organisaties (NL) · paginacompositie
   Basis: Springcast Design System, website editorial (register website-new-or-redesign, rev a321806).
   Laadvolgorde: pricing.css, private-editorial-tokens.css, private-editorial-website.css, dit bestand.
   De pagina blijft .pricing-landing voor de pricing-builder en pricing.js; .pc overschrijft alleen
   wat de editorial compositie anders vraagt. */

.pc {
  --pc-cycle: 11s;
  display: block;
  line-height: 1.6;
  color: var(--sc-fg-heading);
}
.pc ul, .pc ol { list-style: none; margin: 0; padding: 0; }
.pc svg { display: inline-block; }
.pc .pc-scene svg { display: block; }
.pc :is(h1, h2, h3) { font-weight: 600; text-wrap: balance; }
.pc .sc-editorial__band--dark :is(h1, h2, h3) { color: var(--sc-fg-on-inverse); }
.pc .sc-editorial__heading { font-size: var(--sc-editorial-heading); line-height: 1.04; letter-spacing: var(--sc-editorial-tracking); }
.pc :is(a, button, summary):focus-visible { outline: 3px solid var(--sc-focus-ring); outline-offset: 5px; border-radius: 4px; }
.pc .sc-editorial__band--dark :is(a, button, summary):focus-visible { outline-color: var(--sc-focus-ring-inverse); }
.pc [id] { scroll-margin-top: 96px; }

/* Mono-nummers, gedeeld door lijsten */
.pc-nr { font: 500 .75rem/2 var(--sc-font-mono); letter-spacing: .12em; color: var(--sc-fg-link); }
.pc-nr--large { font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1; letter-spacing: -.04em; font-family: var(--sc-font-display); font-weight: 600; color: var(--sc-fg-link); }

/* Tekstlinks: Iris, onderstreping bij hover; in Ink op Paper */
.pc .sc-editorial__link { color: var(--sc-fg-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.pc .sc-editorial__link:hover { color: var(--sc-fg-link-hover); }

/* ---------- 1 · Hero ---------- */
.pc-hero { padding-block: 4.5rem 10.5rem; }
.pc-crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .5rem; margin-bottom: 1.75rem; font: 500 .75rem/1.6 var(--sc-font-mono); letter-spacing: .06em; color: var(--sc-fg-muted); }
.pc-crumbs a { color: var(--sc-fg-muted); text-decoration: underline; text-decoration-color: transparent; }
.pc-crumbs a:hover { color: var(--sc-fg-link); text-decoration-color: currentColor; }
.pc-crumbs [aria-current] { color: var(--sc-fg-heading); }
.pc-hero h1 { max-width: 15ch; font-size: min(var(--sc-editorial-display), 11.6vw); letter-spacing: -.065em; line-height: 1.02; font-weight: 600; }
.pc-hero__accent { color: var(--sc-bg-brand); }
.pc-hero .sc-editorial__lead { max-width: 50ch; color: var(--sc-fg-muted); }
.pc-hero .sc-editorial__actions { margin-top: 2rem; }
.pc-hero .sc-editorial__lead { margin-top: 1.5rem !important; }
.pc-hero .sc-editorial__motion-toggle { z-index: 3; }
.pc .sc-editorial__motion-toggle { font: 500 .75rem/1.5 var(--sc-font-body); }
@media (min-width: 48rem) { .pc-hero .pc-scene { bottom: 2rem; } }
@media (max-width: 47.99rem) { .pc-hero { padding-block: 3rem 13.5rem; } .pc-crumbs { justify-content: flex-start; margin-bottom: 1.5rem; } .pc-hero .pc-scene { bottom: 4rem; } .pc-hero .sc-editorial__motion-toggle { bottom: .625rem; padding: .5rem .875rem; min-height: 2.75rem; } }

/* Motion: één workspace, twee publieken. Rechts stroomt een aflevering naar openbare platforms,
   links naar de besloten app, waarin medewerkers één voor één aansluiten zonder teller. */
.pc-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.pc-scene svg { position: absolute; left: 50%; top: 0; width: 100%; height: 100%; min-width: 64rem; max-width: 90rem; transform: translateX(-50%); }
.pc-scene__platforms circle { fill: var(--sc-palette-paper); stroke: var(--sc-palette-iris-500); stroke-width: 1.25; opacity: .7; }
.pc-scene path { fill: none; }
/* Twee composities van dezelfde scene: op smalle schermen staat de besloten app dichter bij de workspace; de pauzeknop staat daar in een eigen strook onder de scene. */
.pc-scene__in--m, .pc-scene__dash--m, .pc-phone--m, .pc-pulse--internal-m { display: none; }
@media (max-width: 47.99rem) {
  .pc-scene__in--d, .pc-scene__dash--d, .pc-phone--d, .pc-pulse--internal-d { display: none; }
  .pc-scene__in--m, .pc-scene__dash--m, .pc-phone--m, .pc-pulse--internal-m { display: block; }
}
@media (max-width: 22.49rem) { .pc-scene svg { transform: translateX(calc(-50% + 1rem)); } }
.pc-scene__out path { stroke: var(--sc-palette-iris-500); stroke-width: 1; opacity: .24; }
.pc-scene__out path:nth-child(n+5) { opacity: .32; stroke-width: 1.15; }
.pc-scene__out path:nth-child(n+8) { opacity: .4; stroke-width: 1.3; }
.pc-scene__in path { stroke: var(--sc-palette-petrol-500); stroke-linecap: round; stroke-width: 1.4; opacity: .45; }
.pc-scene__in path:nth-child(2), .pc-scene__in path:nth-child(3) { stroke-width: 1.7; opacity: .55; }
.pc-scene__dash path { stroke: var(--sc-palette-iris-600); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: .15 2.2; opacity: .5; animation: pc-dash 9s linear infinite; }
.pc-scene__dash path:nth-child(n+4) { stroke: var(--sc-palette-petrol-600); animation-direction: reverse; animation-duration: 11s; }
.pc-phone__body { fill: var(--sc-palette-paper); stroke: var(--sc-palette-petrol-600); stroke-width: 1.6; }
.pc-phone__screen { fill: var(--sc-palette-petrol-50); }
.pc-phone__notch, .pc-phone__home { fill: var(--sc-palette-petrol-100); }
.pc-lock rect { fill: var(--sc-palette-petrol-600); }
.pc-lock path { fill: none; stroke: var(--sc-palette-petrol-600); stroke-width: 2.4; stroke-linecap: round; }
/* Medewerkers sluiten één voor één aan en blijven: geen teller, geen verloop. Speelt eenmalig zodra de hero in beeld is. */
.pc-listeners circle { fill: var(--sc-palette-petrol-300); transform-box: fill-box; transform-origin: center; opacity: 0; animation: pc-join .5s var(--sc-ease-enter) 1 both; }
.pc-listeners circle:nth-child(1) { animation-delay: 1.2s; }
.pc-listeners circle:nth-child(2) { animation-delay: 1.55s; }
.pc-listeners circle:nth-child(3) { animation-delay: 1.9s; }
.pc-listeners circle:nth-child(4) { animation-delay: 2.25s; }
.pc-listeners circle:nth-child(5) { animation-delay: 2.6s; }
.pc-listeners circle:nth-child(6) { animation-delay: 2.95s; }
.pc-listeners circle:nth-child(7) { animation-delay: 3.3s; }
.pc-listeners circle:nth-child(8) { animation-delay: 3.65s; }
.pc-listeners circle:nth-child(9) { animation-delay: 4s; }
.pc-listeners circle:nth-child(10) { animation-delay: 4.35s; }
.pc-listeners circle:nth-child(11) { animation-delay: 4.7s; }
.pc-listeners circle:nth-child(12) { animation-delay: 5.05s; }
.pc-listeners circle:nth-child(13) { animation-delay: 5.4s; }
.pc-listeners circle:nth-child(14) { animation-delay: 5.75s; }
.pc-listeners circle:nth-child(15) { animation-delay: 6.1s; }
.pc-listeners circle:nth-child(16) { animation-delay: 6.45s; }
.pc-hub__halo { fill: var(--sc-palette-paper); }
.pc-hub__wave { fill: none; stroke: var(--sc-palette-iris-300); stroke-width: 1.25; transform-box: fill-box; transform-origin: center; opacity: 0; animation: pc-wave 6s cubic-bezier(.2, .6, .2, 1) infinite; }
.pc-hub__wave + .pc-hub__wave { animation-delay: -3s; }
.pc-hub__card { fill: var(--sc-palette-paper); stroke: var(--sc-palette-iris-600); stroke-width: 1.5; }
.pc-hub__flash { fill: none; stroke: var(--sc-palette-ember-500); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: pc-publish var(--pc-cycle) linear infinite; }
.pc-hub__bars rect { fill: var(--sc-palette-iris-600); transform-box: fill-box; transform-origin: center; animation: pc-level 1.6s ease-in-out infinite alternate; }
.pc-hub__bars rect:nth-child(2) { animation-duration: 1.1s; animation-delay: -.4s; }
.pc-hub__bars rect:nth-child(3) { animation-duration: 1.9s; animation-delay: -.9s; }
.pc-hub__bars rect:nth-child(4) { animation-duration: 1.3s; animation-delay: -.2s; }
.pc-hub__bars rect:nth-child(5) { animation-duration: 1.7s; animation-delay: -1.1s; }
.pc-hub__bars rect:nth-child(6) { animation-duration: 1.2s; animation-delay: -.6s; }
.pc-hub__bars rect:nth-child(7) { animation-duration: 1.5s; animation-delay: -.3s; }
.pc-pulse { stroke-width: 5; stroke-linecap: round; stroke-dasharray: .7 200; stroke-dashoffset: 1; opacity: 0; animation: pc-travel var(--pc-cycle) linear infinite; }
.pc-pulse--public { stroke: var(--sc-palette-iris-600); }
.pc-pulse--b { animation-delay: calc(var(--pc-cycle) * -.5); }
.pc-pulse--internal { stroke: var(--sc-palette-petrol-500); stroke-width: 6; animation-name: pc-travel-short; animation-delay: calc(var(--pc-cycle) * -.25); }

@keyframes pc-dash { to { stroke-dashoffset: -23.5; } }
@keyframes pc-wave { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes pc-level { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
@keyframes pc-travel {
  0% { stroke-dashoffset: 1; opacity: 0; }
  4% { opacity: 1; }
  40% { opacity: 1; }
  46%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes pc-travel-short {
  0% { stroke-dashoffset: 1; opacity: 0; }
  4% { opacity: 1; }
  30% { opacity: 1; }
  34%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes pc-publish {
  0%, 1% { opacity: 0; transform: scale(.94); }
  3%, 7% { opacity: 1; transform: scale(1); }
  12%, 100% { opacity: 0; transform: scale(.94); }
}
@keyframes pc-join {
  0% { opacity: 0; transform: scale(.4); }
  60% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

/* Pauze: door de bezoeker, buiten beeld of bij een verborgen tab */
.pc-hero[data-motion-paused] .pc-scene * { animation-play-state: paused !important; }

/* Statische compositie: zelfde verhaal, stilstaand beeld */
.pc-hero[data-motion-static] .pc-scene * { animation: none !important; }
.pc-hero[data-motion-static] .pc-hub__wave { opacity: 0; }
.pc-hero[data-motion-static] .pc-hub__flash { opacity: 1; transform: none; }
.pc-hero[data-motion-static] .pc-listeners circle { opacity: 1; transform: none; }
.pc-hero[data-motion-static] .pc-pulse { opacity: 1; }
.pc-hero[data-motion-static] .pc-pulse--a { stroke-dashoffset: -34; }
.pc-hero[data-motion-static] .pc-pulse--b { stroke-dashoffset: -72; }
.pc-hero[data-motion-static] .pc-pulse--internal { stroke-dashoffset: -58; }
@media (prefers-reduced-motion: reduce) {
  .pc-scene * { animation: none !important; }
  .pc-hub__wave { opacity: 0; }
  .pc-hub__flash { opacity: 1; transform: none; }
  .pc-listeners circle { opacity: 1; transform: none; }
  .pc-pulse { opacity: 1; }
  .pc-pulse--a { stroke-dashoffset: -34; }
  .pc-pulse--b { stroke-dashoffset: -72; }
  .pc-pulse--internal { stroke-dashoffset: -58; }
}

/* ---------- 2 · Aanbod (Bone) ---------- */
.pc-offer__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
.pc-offer__story .sc-editorial__heading { max-width: 12ch; }
.pc .pc-basics { margin-top: 2.75rem; border-bottom: 1px solid var(--sc-border); max-width: 38rem; }
.pc-basics li { display: grid; gap: .25rem; padding: 1.125rem 0; border-top: 1px solid var(--sc-border); }
.pc-basics strong { font: 600 1.0625rem/1.4 var(--sc-font-display); letter-spacing: -.015em; color: var(--sc-fg-heading); }
.pc-basics span { color: var(--sc-fg-muted); font-size: .9375rem; line-height: 1.6; }
.pc-quote { position: relative; border-radius: var(--sc-editorial-feature-radius); background: var(--sc-bg-canvas); border: 1px solid var(--sc-border); padding: clamp(1.75rem, 3.4vw, 3rem); display: grid; justify-items: start; align-content: start; }
.pc-quote .sc-editorial__eyebrow { margin-bottom: 1.25rem !important; }
.pc-quote__price { font: 600 clamp(2.75rem, 5vw, 4.5rem)/.96 var(--sc-font-display); letter-spacing: -.06em; color: var(--sc-fg-heading); }
.pc .pc-quote__copy { margin-top: 1.5rem; color: var(--sc-fg-muted); line-height: 1.7; max-width: 38ch; }
.pc-quote .sc-editorial__button { margin-top: 2rem; min-height: 3.5rem; padding-inline: 1.75rem; font-size: .9375rem; }
.pc .pc-quote__term { margin-top: 1.25rem; font: 500 .75rem/1.6 var(--sc-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-fg-muted); }
@media (min-width: 64rem) { .pc-offer__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 5rem; } .pc-quote { position: sticky; top: 6rem; } }

/* ---------- 3 · Bewijs (slanke strook) ---------- */
.pc-proof { border-bottom: 1px solid var(--sc-border); }
.pc-proof__inner { display: grid; gap: 1.5rem; padding-block: 2rem; align-items: center; }
.pc-proof__claim { font: 500 1rem/1.4 var(--sc-font-display); letter-spacing: -.01em; color: var(--sc-fg-heading); }
.pc-proof__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.5rem; }
.pc-proof__logos img { display: block; width: 6rem; height: 2.25rem; max-width: 100%; object-fit: contain; opacity: .85; }
@media (min-width: 64rem) { .pc-proof__inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 3rem; } .pc-proof__logos { justify-content: flex-end; } }

/* ---------- 4 · Waarom Company ---------- */
.pc-why__head, .pc-steps__head { display: grid; gap: 1.5rem; align-items: end; }
.pc-why__head .sc-editorial__heading, .pc-steps__head .sc-editorial__heading { max-width: 15ch; }
.pc-why__head .sc-editorial__lead, .pc-steps__head .sc-editorial__lead { margin-top: 0 !important; }
@media (min-width: 64rem) { .pc-why__head, .pc-steps__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 4rem; } .pc-why__head .sc-editorial__lead, .pc-steps__head .sc-editorial__lead { justify-self: end; max-width: 40ch; padding-bottom: .5rem; } }
.pc .pc-reasons { display: grid; grid-template-columns: 1fr; gap: 0 3rem; margin-top: 3.5rem; border-bottom: 1px solid var(--sc-border); }
.pc-reasons li { display: grid; gap: .75rem; align-content: start; padding: 1.75rem 0 2.25rem; border-top: 1px solid var(--sc-border); }
.pc-reasons h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.16; letter-spacing: -.03em; }
.pc-reasons p { color: var(--sc-fg-muted); line-height: 1.7; max-width: 38ch; }
@media (min-width: 48rem) { .pc .pc-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .pc .pc-reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 5 · Drie stappen naar een offerte (Bone) ---------- */
.pc .pc-steps__list { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 3.5rem; }
.pc-steps__list li { position: relative; display: grid; gap: 1rem; align-content: start; padding: 2rem 0 2.5rem; border-top: 1px solid var(--sc-border); }
.pc-steps__list h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.16; letter-spacing: -.03em; }
.pc-steps__list p { color: var(--sc-fg-muted); line-height: 1.7; max-width: 36ch; }
@media (min-width: 48rem) {
  .pc .pc-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 3rem; }
  .pc-steps__list li { border-top: 1px solid var(--sc-palette-iris-300); }
  .pc-steps__list li::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--sc-palette-iris-600); }
}

/* ---------- 6 · Goed om te weten ---------- */
.pc-faq__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.pc-faq__intro .sc-editorial__heading { max-width: 12ch; }
.pc-faq__list { border-bottom: 1px solid var(--sc-border); }
.pc-faq__list details { border-top: 1px solid var(--sc-border); }
.pc-faq__list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 2.75rem; padding: 1.375rem 0; font: 600 clamp(1.125rem, 1.6vw, 1.3125rem)/1.35 var(--sc-font-display); letter-spacing: -.02em; color: var(--sc-fg-heading); }
.pc-faq__list summary::-webkit-details-marker { display: none; }
.pc-faq__list summary svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--sc-fg-link); transition: transform var(--sc-duration-normal) var(--sc-ease-standard); }
.pc-faq__list details[open] summary svg { transform: rotate(45deg); }
.pc-faq__list .faq__item { border-bottom: 0; }
.pc-faq__list .faq__a-inner { padding: 0 0 1.75rem; max-width: 62ch; font-size: 1rem; color: inherit; line-height: inherit; }
.pc-faq__list .faq__a-inner p { color: var(--sc-fg-muted); line-height: 1.75; }
@media (min-width: 64rem) { .pc-faq__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5rem; } }
@media (prefers-reduced-motion: reduce) { .pc-faq__list summary svg { transition: none; } }

/* ---------- 7 · Afsluiting (Ink) ---------- */
.pc-final__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: end; }
.pc-final .sc-editorial__heading { max-width: 12ch; }
.pc-final .sc-editorial__button { min-height: 3.5rem; padding-inline: 1.75rem; font-size: .9375rem; }
.pc-crosslink { color: var(--sc-fg-on-inverse-muted); font-size: .9375rem; line-height: 1.7; max-width: 34ch; text-align: start; }
.pc .pc-crosslink a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--sc-fg-on-inverse); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; transition: text-decoration-color var(--sc-duration-fast); }
.pc .pc-crosslink a:hover { color: var(--sc-fg-on-inverse); text-decoration-color: currentColor; }
.pc-crosslink svg { width: 1.125rem; height: 1.125rem; flex: none; }
@media (min-width: 64rem) { .pc-final__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 5rem; } .pc-crosslink { justify-self: end; } }