/* Podcast monetisatie · editorial page layer (pm-). Loads after private-editorial-*, editorial-tables and hosting-editorial.
   Design: Milo (Opus 5.5 hoofdsessie), 2-11-2026. Tokens only; Ember stays reserved for the primary action. */

/* ── Hero ─────────────────────────────────────────────────────────── */
.pm-hero .sc-editorial__hero-copy { max-width: 62rem; }
.pm-incl { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.75rem; margin: 1.75rem auto 0; padding: 0; list-style: none; max-width: 52rem; }
.pm-incl li { position: relative; padding-left: 1.25rem; font-size: .875rem; line-height: 1.6; color: var(--sc-fg-muted); text-align: left; }
.pm-incl li::before { content: ""; position: absolute; left: .1rem; top: .42em; width: .55rem; height: .3rem; border-left: 2px solid var(--sc-palette-petrol-600); border-bottom: 2px solid var(--sc-palette-petrol-600); transform: rotate(-45deg); }

/* Ambient motion: an episode waveform whose slots fill, then hand over to the house promo. Decorative only. */
.pm-motion { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pm-motion__side { position: absolute; top: 34%; width: min(26vw, 25rem); height: auto; opacity: .62; display: none; }
.pm-motion__side--left { left: 0; }
.pm-motion__side--right { right: 0; transform: scaleX(-1); }
.pm-wave rect { fill: var(--sc-palette-iris-300); opacity: .45; }
.pm-slot__frame { fill: none; stroke: var(--sc-bg-brand); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .7; }
.pm-slot__fill, .pm-slot__house { transform-box: fill-box; transform-origin: left center; }
.pm-slot__fill { fill: var(--sc-bg-brand); animation: pm-fill 12s cubic-bezier(.65,0,.35,1) infinite; animation-delay: -4s; }
.pm-slot__house { fill: var(--sc-palette-petrol-500); opacity: 0; animation: pm-house 12s ease-in-out infinite; animation-delay: -4s; }
.pm-motion__side--right .pm-slot__fill, .pm-motion__side--right .pm-slot__house { animation-delay: -10s; }

.pm-motion-strip { position: relative; z-index: 1; width: min(100%, 22.5rem); margin: 2.25rem auto 0; }
.pm-motion-strip svg { display: block; width: 100%; height: auto; }
.pm-strip__track { fill: var(--sc-bg-subtle); stroke: var(--sc-border); }
.pm-strip__marker { stroke: var(--sc-fg-heading); stroke-width: 1.5; stroke-linecap: round; }
.pm-strip__slot { fill: var(--sc-bg-brand); transform-box: fill-box; transform-origin: left center; animation: pm-strip 8s cubic-bezier(.65,0,.35,1) infinite; animation-delay: -2.6s; }
.pm-strip__slot--mid { animation-delay: -1.8s; }
.pm-strip__slot--post { animation-delay: -2.2s; }

.pm-hero[data-motion-paused] :is(.pm-slot__fill, .pm-slot__house, .pm-strip__slot) { animation-play-state: paused; }

@keyframes pm-fill { 0%, 6% { transform: scaleX(0); } 20%, 84% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes pm-house { 0%, 46% { opacity: 0; } 54%, 84% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes pm-strip { 0%, 4% { transform: scaleX(0); } 16%, 80% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }

@media (min-width: 72rem) { .pm-motion__side { display: block; } }
@media (prefers-reduced-motion: reduce) {
  .pm-slot__fill, .pm-strip__slot { animation: none; transform: none; }
  .pm-slot__house { animation: none; opacity: 0; }
}

/* ── Ink band: where a deal gets stuck ───────────────────────────── */
.pm-problem .sc-editorial__grid { gap: 2.5rem 1.75rem; }
.pm-problem article h3 { font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.2; letter-spacing: -.03em; text-wrap: balance; }
.pm-problem__line { margin-top: 1rem !important; font-size: 1rem; line-height: 1.7; color: var(--sc-fg-on-inverse-muted); max-width: 46ch; }
.pm-problem__line b { display: block; margin-bottom: .25rem; font: 500 .6875rem/1.6 var(--sc-font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--sc-palette-iris-300); }
.pm-problem__line--answer { color: var(--sc-fg-on-inverse); }
.pm-problem__line--answer b { color: var(--sc-palette-petrol-300); }

.pm-art { position: relative; display: grid; align-content: center; gap: .625rem; min-height: 13rem; margin-bottom: 2rem; padding: 2rem 1.75rem 2.75rem; border-radius: var(--sc-editorial-feature-radius); background: var(--sc-palette-iris-900); overflow: hidden; }
.pm-art__label { position: absolute; left: 1.75rem; bottom: 1.1rem; font: 500 .6875rem/1.4 var(--sc-font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--sc-palette-iris-300); }
.pm-ep { display: flex; gap: 4px; height: 1.75rem; }
.pm-ep--thin { height: .875rem; }
.pm-ep span { flex: 1; border-radius: .5rem; background: color-mix(in srgb, var(--sc-palette-paper) 14%, transparent); }
.pm-ep .is-slot { flex: 0 0 18%; background: var(--sc-palette-iris-300); }
.pm-ep .is-house { flex: 0 0 18%; background: var(--sc-palette-petrol-300); }
.pm-ep .is-ended { flex: 0 0 18%; background: transparent; border: 1.5px dashed var(--sc-palette-iris-300); opacity: .7; }

/* ── Building blocks: a ruled index, not a card grid ─────────────── */
.pm-blocks { display: grid; grid-template-columns: 1fr; gap: 0 2.5rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; list-style: none; counter-reset: pm-block; }
.pm-blocks > li { display: flex; flex-direction: column; gap: .625rem; padding: 1.75rem 0 2rem; border-top: 1px solid var(--sc-border); counter-increment: pm-block; min-width: 0; }
.pm-blocks > li::before { content: counter(pm-block, decimal-leading-zero); font: 500 .75rem/1 var(--sc-font-mono); letter-spacing: .1em; color: var(--sc-bg-brand); }
.pm-blocks h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -.03em; }
.pm-blocks p { color: var(--sc-fg-muted); font-size: .9375rem; line-height: 1.7; max-width: 44ch; }
.pm-blocks .ph-scope { margin-top: auto; padding-top: .5rem; }
@media (min-width: 48rem) { .pm-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .pm-blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Schema figures (timeline + waterfall) ───────────────────────── */
.pm-diagram { margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--sc-border); border-radius: var(--sc-editorial-feature-radius); background: var(--sc-bg-canvas); }
.pm-diagram__label { font: 500 .6875rem/1.6 var(--sc-font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--sc-fg-muted); }
.pm-diagram__title { margin-top: .5rem !important; font: 600 1.25rem/1.3 var(--sc-font-display); letter-spacing: -.02em; color: var(--sc-fg-heading); max-width: 36ch; }
.pm-diagram figcaption { margin-top: 1.5rem; color: var(--sc-fg-muted); font: 400 .75rem/1.7 var(--sc-font-body); }

/* Timeline: one episode with its slots. Vertical list below 64rem, proportional track from 64rem. */
.pm-timeline { display: grid; gap: .75rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.pm-timeline li { display: grid; grid-template-columns: 2.75rem 1fr; align-items: center; gap: .25rem 1rem; min-width: 0; }
.pm-seg__bar { grid-row: span 2; height: 2.75rem; border-radius: .75rem; background: var(--sc-bg-brand); }
.pm-seg__name { font: 600 1rem/1.3 var(--sc-font-display); letter-spacing: -.01em; color: var(--sc-fg-heading); }
.pm-seg__note { font: 500 .6875rem/1.5 var(--sc-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-fg-muted); }
.pm-seg--audio .pm-seg__bar { background: repeating-linear-gradient(90deg, var(--sc-palette-iris-100) 0 3px, transparent 3px 7px), var(--sc-palette-iris-50); }
.pm-seg--audio .pm-seg__name { font: 400 .9375rem/1.5 var(--sc-font-body); color: var(--sc-fg-muted); }
.pm-seg--mid .pm-seg__bar { position: relative; background: var(--sc-palette-petrol-600); }
.pm-seg--repeat { display: none !important; }
.pm-seg__name, .pm-seg__note { overflow-wrap: normal; }
@media (min-width: 64rem) {
  .pm-seg--mid .pm-seg__bar::before { content: ""; position: absolute; left: 50%; top: -.5rem; bottom: -.5rem; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--sc-fg-heading); }
  .pm-timeline { grid-template-columns: .9fr 3.2fr .75fr 2.2fr .75fr 1.6fr .9fr; gap: 0 6px; align-items: start; }
  .pm-timeline li { grid-template-columns: 1fr; gap: .875rem; align-content: start; }
  .pm-seg__bar { grid-row: auto; height: 4rem; border-radius: .875rem; }
  .pm-seg--repeat { display: grid !important; }
  .pm-seg__name, .pm-seg__note { padding-inline: .125rem; }
  .pm-seg--audio .pm-seg__bar { border-radius: .375rem; }
  .pm-seg__name { font-size: .9375rem; }
}

/* Waterfall: tags as a staircase; the slot falls to the next tag, house keeps it filled. */
.pm-falls { display: grid; gap: 1.375rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.pm-fall { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; min-height: 3.5rem; padding: .875rem 1.25rem; border-radius: 1rem; background: var(--sc-bg-subtle); color: var(--sc-fg-heading); }
.pm-fall__tag { font: 600 .8125rem/1.4 var(--sc-font-mono); letter-spacing: .06em; }
.pm-fall__note { font-size: .875rem; line-height: 1.5; }
.pm-fall--premium { background: var(--sc-bg-brand); color: var(--sc-fg-on-brand); }
.pm-fall--standard { background: var(--sc-palette-iris-100); color: var(--sc-palette-iris-700); }
.pm-fall--house { background: var(--sc-palette-petrol-600); color: var(--sc-fg-on-brand); }
/* Bonus is een los slot zonder fallback: buiten de trap, gestippeld, zonder verbindingslijn. */
.pm-fall--bonus { margin-top: 1.25rem; margin-left: 0; background: transparent; border: 1.5px dashed var(--sc-border); color: var(--sc-fg-muted); }
.pm-fall--premium::after, .pm-fall--standard::after { content: ""; position: absolute; right: 1.5rem; bottom: -1.375rem; width: 2px; height: 1.375rem; background: var(--sc-border); }
.pm-fall__drop { position: absolute; right: 2.25rem; bottom: -1.3rem; font: 500 .6875rem/1.3 var(--sc-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-fg-muted); white-space: nowrap; }
.pm-fall--premium .pm-fall__drop { color: var(--sc-fg-muted); }
@media (min-width: 48rem) {
  .pm-fall--standard { margin-left: 8%; }
  .pm-fall--house { margin-left: 16%; }
}
@media (max-width: 29.99rem) { .pm-fall__drop { position: static; flex-basis: 100%; order: 3; color: inherit; opacity: .8; } .pm-fall--premium::after, .pm-fall--standard::after { right: 50%; } }

/* ── Case ─────────────────────────────────────────────────────────── */
.pm-case { display: grid; grid-template-columns: 1fr; gap: 3rem 4rem; align-items: center; }
.pm-case > * { min-width: 0; }
.pm-stats { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pm-stats li { display: grid; grid-template-columns: minmax(6.5rem, auto) 1fr; align-items: baseline; gap: 1.25rem; padding: 1.25rem 0; border-top: 1px solid var(--sc-border); }
.pm-stats li:last-child { border-bottom: 1px solid var(--sc-border); }
.pm-stats__big { font: 600 clamp(3rem, 6vw, 4.5rem)/1 var(--sc-font-display); letter-spacing: -.05em; color: var(--sc-bg-brand); }
.pm-stats__lbl { color: var(--sc-fg-muted); font-size: 1rem; line-height: 1.5; }
@media (min-width: 64rem) { .pm-case { grid-template-columns: 1.05fr .95fr; } }

/* ── Plans table: Scale is where campaigns start ─────────────────── */
.pm-plans tr.is-featured > * { background: var(--sc-web-table-accent-bg); }
.pm-plans tr.is-featured th { color: var(--sc-web-table-accent-fg); }

/* ── Implementatie-verfijningen (bouwer, geen wijziging van vorm, kleur of hiërarchie) ───────────── */
/* Hero: de pauzeknop staat bij de beweging die hij bedient, onder de strip (<72rem) of onder de rechterzijde (≥72rem). */
.pm-hero .sc-editorial__motion-toggle:not([hidden]) { position: relative; z-index: 3; display: flex; width: fit-content; margin: 1rem auto 0; right: auto; bottom: auto; }
@media (min-width: 72rem) {
  .pm-hero .sc-editorial__motion-toggle:not([hidden]) { position: absolute; margin: 0; top: calc(34% + min(26vw, 25rem) / 2 + .75rem); right: clamp(.5rem, 2vw, 2.5rem); }
}
.pm-hero .ph-hero__note a { color: var(--sc-fg-link); font-weight: 600; text-underline-offset: .25em; }
.pm-hero .ph-hero__note a:hover { color: var(--sc-fg-link-hover); }

/* Waterval-figuur naast de tekst begint op dezelfde regel als de tekst; C3 loopt over de volle breedte eronder. */
.ph-split > .pm-diagram { margin-top: 0; }
.pm-wide { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* FAQ en prijstabel: zelfde gedrag als de analytics-zuster. */
.pm-faq .ph-details + .ph-details { border-top: 0; }
.pm-plans { min-width: 36rem; }
.pm-plans thead th:first-child { width: 9.5rem; }
.pm-plans thead th:nth-child(2) { width: 22%; }
.pm-plans td { color: var(--sc-fg-muted); }
@media (max-width: 47.99rem) {
  .pm-plans { min-width: 0; }
  .pm-plans thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pm-plans tbody tr { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; padding: 1rem 0; }
  .pm-plans tbody tr > * { padding: 0; border: 0 !important; }
  .pm-plans tbody tr:not(:last-child) { border-bottom: 1px solid var(--sc-web-table-rule); }
  .pm-plans tbody td:last-child { grid-column: 1 / -1; }
  .pm-plans tbody td:nth-child(2) { font: 500 .75rem/1.9 var(--sc-font-mono); text-transform: uppercase; letter-spacing: .06em; }
  .pm-plans tr.is-featured { padding-inline: 1rem; background: var(--sc-web-table-accent-bg); }
  .pm-plans tr.is-featured > * { background: transparent; }
}

/* Hero-note: de link blijft op één regel waar de breedte het toelaat; vinkjes onder elkaar op smalle schermen. */
.pm-hero .ph-hero__note { max-width: 44rem; }
@media (max-width: 39.99rem) {
  .pm-incl { flex-direction: column; align-items: flex-start; width: fit-content; max-width: 100%; margin-inline: auto; }
}

/* Waterval op smalle schermen: het afvallabel staat in de rij en erft de contrastkleur van die rij (de basisregel is specifieker dan de mobiele). */
@media (max-width: 29.99rem) {
  .pm-fall .pm-fall__drop, .pm-fall--premium .pm-fall__drop { color: inherit; opacity: .9; white-space: normal; }
}

/* Case-cijfers: gedeelde eerste kolom, zodat de labels onder elkaar beginnen. */
@supports (grid-template-columns: subgrid) {
  .pm-stats { grid-template-columns: auto minmax(0, 1fr); }
  .pm-stats li { grid-column: 1 / -1; grid-template-columns: subgrid; }
}

/* Beide schema-lijsten mogen niet breder worden dan hun figuur (320px). */
.pm-falls, .pm-timeline { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .pm-timeline { grid-template-columns: .9fr 3.2fr .75fr 2.2fr .75fr 1.6fr .9fr; } }

/* Plannamen breken nooit midden in het woord (editorial-tables staat overflow-wrap:anywhere toe). */
.pm-plans tbody th { overflow-wrap: normal; word-break: normal; }

/* Frame-bar: het label blijft op één regel (afgekapt met ellipsis op 320px). */
.pm-hero .ph-hero__frame-bar span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Case-cijfers mobiel: per rij een eigen kolompaar, het cijfer staat dicht bij zijn label. */
@media (max-width: 47.99rem) {
  .pm-stats { grid-template-columns: 1fr; }
  .pm-stats li { grid-column: auto; grid-template-columns: auto 1fr; }
}