/* =============================================================
   SM Diensten Panelen
   Een rij panelen: een staat open, de rest staat als smalle rug
   ernaast. Maten uitgelezen uit het Framer-voorbeeld (rug 92px,
   tussenruimte 8px, hoek 22px, open paneel groeit in .95s met
   cubic-bezier(.65,0,.25,1), beeldvak hoek 18px, vinkje 18px).
   Kleuren zijn die van johnschreve.nl: bijna-zwart, lime, groen.

   Zonder JavaScript staat alles open onder elkaar. Pas als het
   script draait (klasse sm-dp-klaar) klappen de panelen dicht en
   kiest het script liggend (is-h) of staand (is-v, is-ph).
   ============================================================= */

.sm-dp {
  /* licht is de standaard */
  --dp-bg: #f4f6f5;
  --dp-ink: #0d1512;
  --dp-tekst: rgba(13, 21, 18, .75);
  --dp-stil: rgba(13, 21, 18, .62);
  --dp-lime: #d2f65a;
  --dp-groen: #10b981;
  --dp-mark-bg: var(--dp-lime);
  --dp-mark-ink: inherit;
  /* de zes paneelkleuren */
  --dp-t-mist: #e1e7e3;
  --dp-t-contrast: #0a0909;
  --dp-t-contrast-ink: #ffffff;
  --dp-t-vlak: #ffffff;
  --dp-t-vlak-ink: #0d1512;
  --dp-t-lime: color-mix(in srgb, var(--dp-lime) 72%, #f4f6f5);
  --dp-t-den: #123626;
  --dp-mono: ui-monospace, "SF Mono", "Fira Code", "JetBrains Mono", Menlo, monospace;
  --sm-badge-accent: #0f8f74;

  box-sizing: border-box;
  background: var(--dp-bg);
  color: var(--dp-ink);
  padding: var(--sm-sectie-ruimte) var(--sm-sectie-zij);
  overflow-x: clip;
  transition: background .4s ease, color .4s ease;
  font-family: "Google Sans", "Product Sans", Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sm-dp *, .sm-dp *::before, .sm-dp *::after { box-sizing: inherit; }

.sm-dp--donker {
  --dp-bg: #0a0909;
  --dp-ink: #ffffff;
  --dp-tekst: rgba(255, 255, 255, .72);
  --dp-stil: rgba(255, 255, 255, .58);
  --dp-mark-bg: transparent;
  --dp-mark-ink: var(--dp-lime);
  --dp-t-mist: #1c1f1e;
  --dp-t-contrast: #f4f6f5;
  --dp-t-contrast-ink: #0d1512;
  --dp-t-vlak: #151414;
  --dp-t-vlak-ink: #ffffff;
  --dp-t-lime: var(--dp-lime);
  --dp-t-den: #17422f;
  --sm-badge-accent: #3DC78F;
}

/* breder dan de leeskolom: de rij panelen heeft de ruimte nodig */
.sm-dp-in { max-width: var(--dp-breed, 1320px); margin: 0 auto; }

/* ---------- kop: links de kop, rechts de regel ---------- */
.sm-dp-top {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: end; gap: 40px;
  margin-bottom: clamp(36px, 4vw, 60px);
}
.sm-dp-links { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.sm-dp .sm-dp-links .sm-badge { margin: 0; }
.sm-dp .sm-dp-kop {
  font-family: var(--sm-kop-font, inherit);
  font-size: var(--sm-kop, clamp(40px, 6vw, 68px));
  line-height: var(--sm-kop-regel, .95);
  letter-spacing: var(--sm-kop-sp, .005em);
  text-wrap: balance;
  font-weight: 600; color: var(--dp-ink); margin: 0;
}
.sm-dp .sm-dp-sub {
  justify-self: end; max-width: 400px; margin: 0;
  color: var(--dp-tekst); font-size: 17px; line-height: 1.5; text-wrap: pretty;
}
@media (max-width: 1099px) {
  .sm-dp-top { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .sm-dp .sm-dp-sub { justify-self: start; max-width: 560px; }
}

/* de markeerstift onder een woord in de kop. Op een donkere band wordt
   het woord zelf lime, want wit op lime is niet te lezen.
   Als achtergrond op het woord zelf, niet als los vlak erachter: een
   los vlak valt weg zodra het woord over twee regels loopt. */
.sm-dp-mark {
  color: var(--dp-mark-ink);
  padding: 0 .07em; margin: 0 -.03em; border-radius: .12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: linear-gradient(var(--dp-mark-bg), var(--dp-mark-bg));
  background-repeat: no-repeat; background-position: left 56%; background-size: 0% 84%;
  transition: background-size .9s cubic-bezier(.7, 0, .2, 1) .35s;
}
.sm-dp:not(.sm-dp-klaar) .sm-dp-mark,
.sm-dp.is-zicht .sm-dp-mark { background-size: 100% 84%; }

/* ---------- de rij panelen ---------- */
.sm-dp-acc {
  position: relative; --cw: 92px; --ease: cubic-bezier(.65, 0, .25, 1);
  display: flex; flex-direction: column; gap: 6px;
}
.sm-dp-p {
  --pbg: var(--dp-t-mist);
  --pfg: var(--dp-ink);
  --line: color-mix(in srgb, var(--pfg) 14%, transparent);
  --mut: color-mix(in srgb, var(--pfg) 66%, transparent);
  --stg: color-mix(in srgb, var(--pfg) 6%, transparent);
  --chip: var(--dp-lime);
  --chip-ink: #0d1512;
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 22px; background: var(--pbg); color: var(--pfg);
}
.sm-dp-t-contrast { --pbg: var(--dp-t-contrast); --pfg: var(--dp-t-contrast-ink); }
.sm-dp-t-vlak { --pbg: var(--dp-t-vlak); --pfg: var(--dp-t-vlak-ink); }
.sm-dp-t-lime { --pbg: var(--dp-t-lime); --pfg: #0d1512; --stg: rgba(255, 255, 255, .5); --chip: #0d1512; --chip-ink: var(--dp-lime); --gloed: rgba(255, 255, 255, .7); }
.sm-dp-t-den { --pbg: var(--dp-t-den); --pfg: #ffffff; }
.sm-dp-t-rand { --pbg: var(--dp-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dp-ink) 16%, transparent); }

/* ---------- de rug: nummer, naam, plusje ----------
   Zware selectors met opzet: het thema kleurt knoppen zelf in, en wint
   anders van een kale klasse. */
.sm-dp .sm-dp-p .sm-dp-sp {
  all: unset; box-sizing: border-box; cursor: pointer;
  position: relative; display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px;
  width: 100%; min-height: 76px; padding: 0 16px 0 18px;
  color: inherit; -webkit-tap-highlight-color: transparent;
}
/* zonder nummer: de naam links, het plusje rechts */
.sm-dp .sm-dp-p .sm-dp-sp:not(:has(.sm-dp-num)) { grid-template-columns: minmax(0, 1fr) auto; }
.sm-dp .sm-dp-p .sm-dp-sp:hover,
.sm-dp .sm-dp-p .sm-dp-sp:focus { background: none; color: inherit; box-shadow: none; }
.sm-dp .sm-dp-p .sm-dp-sp:focus-visible { outline: 2px solid var(--pfg); outline-offset: -5px; border-radius: 22px; }

.sm-dp-num {
  display: inline-grid; place-items: center; min-width: 42px; height: 28px; padding: 0 9px;
  border-radius: 999px; font-family: var(--dp-mono); font-size: 11.5px; letter-spacing: .08em;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background .45s, color .45s, box-shadow .45s;
}
.sm-dp-p.is-open .sm-dp-num { background: var(--chip); color: var(--chip-ink); box-shadow: none; }

.sm-dp-vt {
  font-family: var(--sm-kop-font, inherit); font-weight: 600;
  font-size: 30px; line-height: 1; letter-spacing: .01em; text-wrap: balance;
}
.sm-dp-plus {
  position: relative; display: block; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: rotate .6s cubic-bezier(.34, 1.56, .64, 1), background .35s, color .35s, box-shadow .35s;
}
.sm-dp-plus i {
  position: absolute; left: 50%; top: 50%; width: 13px; height: 1.6px; border-radius: 2px;
  background: currentColor; translate: -50% -50%;
}
.sm-dp-plus i + i { rotate: 90deg; transition: scale .45s; }
.sm-dp-p.is-open .sm-dp-plus { background: var(--chip); color: var(--chip-ink); box-shadow: none; }
.sm-dp-klaar .sm-dp-p.is-open .sm-dp-plus i + i { scale: 0 1; }
/* alleen met een muis: op een telefoon blijft zweven hangen na een tik */
@media (hover: hover) and (pointer: fine) {
  .sm-dp-klaar .sm-dp-p:not(.is-open) .sm-dp-sp:hover .sm-dp-plus {
    rotate: 90deg; background: var(--pfg); color: var(--pbg); box-shadow: none;
  }
}
/* zonder script valt er niets te openen: dan geen plusje */
.sm-dp:not(.sm-dp-klaar) .sm-dp-plus { display: none; }

/* ---------- de inhoud van een paneel ---------- */
.sm-dp-pin {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px;
  padding: 4px 18px 22px;
}
.sm-dp-stage {
  position: relative; overflow: hidden; border-radius: 18px; background: var(--stg);
  min-height: 340px; display: grid; place-items: center;
}
.sm-dp-stage--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* maatvak: het beeld erin vult het vak en schikt zich naar hoogte en breedte */
.sm-dp-stage:not(.sm-dp-stage--foto) { container-type: size; }
/* een zachte gloed en een stippenraster achter het schermpje */
.sm-dp-stage:not(.sm-dp-stage--foto)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(62% 44% at 50% 46%, var(--gloed, color-mix(in srgb, var(--dp-lime) 22%, transparent)), transparent 72%);
}
.sm-dp-stage:not(.sm-dp-stage--foto)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(color-mix(in srgb, var(--pfg) 20%, transparent) 1px, transparent 1.5px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(75% 62% at 50% 50%, #000, transparent 88%);
  mask-image: radial-gradient(75% 62% at 50% 50%, #000, transparent 88%);
}
.sm-dp-stage > .sm-dp-sc { z-index: 1; }

.sm-dp-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
/* een paneel zonder beeld: de tekst krijgt de hele breedte */
.sm-dp-pin > .sm-dp-tx:only-child { grid-column: 1 / -1; }
.sm-dp .sm-dp-naam {
  margin: 0; font-family: var(--dp-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mut);
}
.sm-dp .sm-dp-tt {
  margin: 0; font-family: var(--sm-kop-font, inherit); font-weight: 600;
  font-size: clamp(34px, 3.1vw, 46px); line-height: .98; letter-spacing: .005em;
  color: var(--pfg); text-wrap: balance;
}
.sm-dp .sm-dp-body {
  margin: 0; max-width: 40ch; font-size: 16px; line-height: 1.5; text-wrap: pretty;
  color: color-mix(in srgb, var(--pfg) 84%, transparent);
}

/* de lijst "Je krijgt" */
.sm-dp-inc { width: 100%; }
.sm-dp .sm-dp-il {
  margin: 0 0 10px; font-family: var(--dp-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mut);
}
.sm-dp .sm-dp-inc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sm-dp .sm-dp-inc li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-items: start;
  margin: 0; padding: 0; font-size: 15px; line-height: 1.3; color: var(--pfg);
}
.sm-dp .sm-dp-inc li::before { content: none; }
.sm-dp-inc li b { display: block; font-weight: 600; text-wrap: pretty; }
.sm-dp-inc li small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.35; color: var(--mut); text-wrap: pretty; }

/* het vinkje: een rondje dat opspringt en een haakje dat zichzelf tekent */
.sm-dp-vink { display: block; width: 20px; height: 20px; margin-top: -1px; overflow: visible; }
.sm-dp-vink circle { fill: var(--chip); transform-box: fill-box; transform-origin: center; }
.sm-dp-vink path {
  fill: none; stroke: var(--chip-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 17; stroke-dashoffset: 0;
}
.sm-dp-klaar .sm-dp-p:not(.is-open) .sm-dp-vink circle { scale: .3; opacity: 0; }
.sm-dp-klaar .sm-dp-p:not(.is-open) .sm-dp-vink path { stroke-dashoffset: 17; }
.sm-dp-klaar .sm-dp-p.is-open .sm-dp-vink circle {
  transition: scale .5s cubic-bezier(.34, 1.56, .64, 1), opacity .25s;
  transition-delay: calc(.5s + var(--i, 0) * .13s);
}
.sm-dp-klaar .sm-dp-p.is-open .sm-dp-vink path {
  transition: stroke-dashoffset .45s cubic-bezier(.6, 0, .3, 1);
  transition-delay: calc(.68s + var(--i, 0) * .13s);
}

/* onderin: uitkomst, prijs, knop */
.sm-dp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; width: 100%; margin-top: auto; padding-top: 8px; }
.sm-dp-stat {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px;
  background: var(--chip); color: var(--chip-ink); font-size: 12.5px; font-weight: 500; line-height: 1.2;
}
.sm-dp-stat i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--dp-groen); }
.sm-dp-pr { display: flex; flex-direction: column; gap: 3px; font-size: 14px; font-weight: 600; }
.sm-dp-pr small { font-family: var(--dp-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }

.sm-dp .sm-dp-foot a.sm-dp-knop {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 46px; padding: 5px 5px 5px 18px; border-radius: 999px;
  background: var(--pfg); color: var(--pbg);
  font-size: 14.5px; font-weight: 600; line-height: 1.15; text-decoration: none;
  transition: translate .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
.sm-dp-knop i {
  flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--dp-lime); color: #0d1512;
  transition: translate .45s cubic-bezier(.34, 1.56, .64, 1);
}
.sm-dp-knop i svg { display: block; width: 16px; height: 16px; }
.sm-dp .sm-dp-foot a.sm-dp-knop:hover,
.sm-dp .sm-dp-foot a.sm-dp-knop:focus-visible {
  translate: 0 -2px; color: var(--pbg); text-decoration: none;
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--pfg) 70%, transparent);
}
.sm-dp-knop:hover i, .sm-dp-knop:focus-visible i { translate: 4px 0; }
.sm-dp .sm-dp-foot a.sm-dp-knop:focus-visible { outline: 2px solid var(--pfg); outline-offset: 3px; }

/* ---------- gedrag zodra het script draait ---------- */
.sm-dp-klaar .sm-dp-pin { transition: opacity .25s, translate .25s; }
.sm-dp-klaar .sm-dp-p:not(.is-open) .sm-dp-pin { opacity: 0; translate: 0 14px; }
.sm-dp-klaar .sm-dp-p.is-open .sm-dp-pin {
  opacity: 1; translate: 0;
  transition: opacity .6s .32s, translate .8s cubic-bezier(.2, .8, .2, 1) .32s;
}

/* staand (smaller dan de liggende rij): een uitklaplijst. De eerste
   staat open, de rest opent via het plusje. Het script geeft elk paneel
   zijn eigen hoogte. */
.sm-dp-klaar.is-v .sm-dp-pc { height: 0; overflow: hidden; transition: height .8s var(--ease); }
.sm-dp-klaar.is-v .sm-dp-p.is-open .sm-dp-pc { height: var(--oh, auto); }
.sm-dp.is-v .sm-dp-naam { display: none; }
@media (hover: hover) and (pointer: fine) {
  .sm-dp-klaar.is-v .sm-dp-p:not(.is-open):hover { background: color-mix(in srgb, var(--pbg) 92%, var(--pfg)); }
}

/* liggend: de rij met een open paneel */
.sm-dp-klaar.is-h .sm-dp-acc { flex-direction: row; gap: 8px; height: var(--ah, 580px); }
.sm-dp-klaar.is-h .sm-dp-p { flex: 0 0 var(--cw); transition: flex-grow .95s var(--ease), background .5s; }
.sm-dp-klaar.is-h .sm-dp-p.is-open { flex-grow: 1; }
.sm-dp.sm-dp-klaar.is-h .sm-dp-p .sm-dp-sp {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--cw); min-height: 0;
  display: flex; flex-direction: column; align-items: center; padding: 24px 0;
}
.sm-dp.sm-dp-klaar.is-h .sm-dp-p:not(.is-open) .sm-dp-sp { right: 0; width: auto; }
.sm-dp-klaar.is-h .sm-dp-vt {
  margin-top: auto; margin-bottom: 22px; writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap;
  transition: opacity .4s, translate .6s cubic-bezier(.2, .8, .2, 1);
}
.sm-dp-klaar.is-h .sm-dp-p.is-open .sm-dp-vt { opacity: 0; translate: 0 20px; }
@media (hover: hover) and (pointer: fine) {
  .sm-dp-klaar.is-h .sm-dp-p:not(.is-open):hover { background: color-mix(in srgb, var(--pbg) 90%, var(--pfg)); }
}
.sm-dp-klaar.is-h .sm-dp-pc { position: absolute; top: 0; bottom: 0; left: var(--cw); width: var(--ow, 700px); }
.sm-dp-klaar.is-h .sm-dp-pin {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(22px, 2.4vw, 36px);
  height: 100%; padding: 24px 32px 28px 0;
}
.sm-dp-klaar.is-h .sm-dp-stage { min-height: 0; }
.sm-dp-klaar.is-h .sm-dp-tx { padding-top: 6px; }

/* telefoon */
.sm-dp.is-ph .sm-dp-p .sm-dp-sp { min-height: 68px; column-gap: 12px; padding: 0 12px 0 14px; }
.sm-dp.is-ph .sm-dp-vt { font-size: 25px; }
.sm-dp.is-ph .sm-dp-num { min-width: 36px; height: 24px; font-size: 10.5px; padding: 0 7px; }
.sm-dp.is-ph .sm-dp-plus { width: 36px; height: 36px; }
.sm-dp.is-ph .sm-dp-pin { grid-template-columns: 1fr; gap: 18px; padding: 2px 12px 18px; }
.sm-dp.is-ph .sm-dp-stage { min-height: 330px; }
/* advertentie naar pagina heeft twee foto's: dat vak is op de telefoon iets hoger */
.sm-dp.is-ph .sm-dp-stage:has(.sm-dp-sc--land) { min-height: 384px; }
/* het tekstenbeeld toont twee stukjes website onder elkaar: dat vak is staand en op de telefoon hoger */
.sm-dp-klaar:not(.is-h) .sm-dp-stage:has(.sm-dp-sc--tekst) { min-height: 560px; }
.sm-dp.is-ph .sm-dp-stage:has(.sm-dp-sc--tekst) { min-height: 580px; }
.sm-dp.is-ph .sm-dp-body { font-size: 15.5px; }
.sm-dp.is-ph .sm-dp-foot a.sm-dp-knop { width: 100%; justify-content: space-between; }
@media (max-width: 760px) {
  /* ook zonder script op een telefoon onder elkaar */
  .sm-dp:not(.sm-dp-klaar) .sm-dp-pin { grid-template-columns: 1fr; gap: 18px; }
  .sm-dp:not(.sm-dp-klaar) .sm-dp-stage { min-height: 330px; }
}

/* ---------- de rail onder de panelen ---------- */
.sm-dp-rail { display: flex; align-items: center; gap: 22px; margin-top: 22px; }
.sm-dp:not(.sm-dp-klaar) .sm-dp-rail { display: none; }
.sm-dp-seg { display: flex; gap: 6px; flex: 0 0 auto; }
.sm-dp-seg i {
  display: block; width: 28px; height: 4px; border-radius: 4px;
  background: color-mix(in srgb, var(--dp-ink) 14%, transparent);
  transition: background .4s, width .6s cubic-bezier(.2, .8, .2, 1);
}
.sm-dp-seg i.is-past { background: color-mix(in srgb, var(--dp-ink) 42%, transparent); }
.sm-dp-seg i.is-on { width: 56px; background: var(--dp-ink); }
.sm-dp .sm-dp-nu {
  display: flex; align-items: center; gap: 12px; margin: 0; min-width: 0;
  font-family: var(--dp-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dp-ink);
}
.sm-dp-nu b { flex: 0 0 auto; font-weight: 500; padding: 4px 9px; border-radius: 999px; background: var(--dp-lime); color: #0d1512; }
.sm-dp-nu span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sm-dp .sm-dp-hint {
  display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto;
  font-family: var(--dp-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dp-stil);
}
.sm-dp-hint i { width: 7px; height: 7px; border-radius: 50%; background: var(--dp-groen); animation: sm-dp-knipper 1.4s ease-in-out infinite; }
/* staand open je zelf wat je wil: de teller zegt daar niets, dus weg */
.sm-dp.is-v .sm-dp-rail { display: none; }
@keyframes sm-dp-knipper { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* =============================================================
   De bewegende beelden.

   Elk beeld vult het hele beeldvak en vertelt een gebeurtenis in
   drie tellen: begin, verandering, uitkomst. De uitkomst is een
   pil die opspringt en blijft staan.

   Wat hier in de gewone regels staat is de EINDSTAND. Het script
   zet de klasse is-regie op het beeld en speelt het af: onderdelen
   zonder de klasse "aan" zijn dan nog niet in beeld. Zonder script
   en bij "minder beweging" zie je dus meteen de uitkomst.

   Regels voor de beweging: verplaatsen met een veer (schiet iets
   door), een ding tegelijk, lime alleen op de hoofdrolspeler en
   de uitkomst.
   ============================================================= */
.sm-dp-sc {
  --sk: #ffffff; --si: #0d1512; --sz: rgba(13, 21, 18, .13); --szz: rgba(13, 21, 18, .07);
  --ss: 0 18px 40px -22px rgba(0, 0, 0, .5), 0 0 0 1px rgba(13, 21, 18, .07);
  --held: 0 0 0 1.5px var(--si), 0 14px 28px -14px rgba(0, 0, 0, .55);
  --veer: cubic-bezier(.34, 1.56, .64, 1);
  --veer-zacht: cubic-bezier(.34, 1.3, .64, 1);
  --glij: cubic-bezier(.5, 0, .15, 1);
  position: absolute; inset: 14px; z-index: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
  color: var(--si); font-size: 12px; line-height: 1.2; text-align: left;
}
.sm-dp-sc i, .sm-dp-sc em, .sm-dp-sc b, .sm-dp-sc u, .sm-dp-sc small, .sm-dp-sc strong {
  font-style: normal; text-decoration: none;
}
.sm-dp-sc p, .sm-dp-sc ol, .sm-dp-sc li { margin: 0; padding: 0; }
.sm-dp-sc small { font-family: var(--dp-mono); font-size: 9.5px; letter-spacing: .03em; color: rgba(13, 21, 18, .62); }

/* bouwstenen */
.sm-dp-sc .sc-h { display: block; flex: 0 0 auto; height: 10px; width: 78%; border-radius: 5px; background: var(--si); }
.sm-dp-sc .sc-h.kort { width: 52%; }
.sm-dp-sc .sc-l { display: block; flex: 0 0 auto; height: 6px; width: 88%; border-radius: 4px; background: var(--sz); }
.sm-dp-sc .sc-l.kort { width: 60%; }
.sm-dp-sc .sc-av { display: block; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, var(--dp-groen), var(--dp-lime)); }
.sm-dp-sc .sc-foto {
  display: block; flex: 0 0 auto; width: 100%; height: 76px; border-radius: 9px;
  background: linear-gradient(135deg, #0d1512, #123626 52%, color-mix(in srgb, var(--dp-lime) 62%, #123626));
}
/* een echte foto in het vak: hij vult het vak. Zonder foto blijft het gekleurde vlak staan */
.sm-dp-sc .heeft-foto { position: relative; overflow: hidden; background: var(--szz); }
.sm-dp-sc .heeft-foto img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; border-radius: 0;
}
.sm-dp-sc .sc-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 30px; padding: 0 14px;
  border-radius: 999px; background: var(--dp-lime); color: #0d1512;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(13, 21, 18, .28);
  transition: scale .4s var(--veer);
}
.sm-dp-sc .sc-btn.donker { height: 26px; padding: 0 11px; background: var(--si); color: #ffffff; font-size: 10.5px; box-shadow: none; }
.sm-dp-sc .sc-btn.breed { width: 100%; height: 36px; justify-content: center; font-size: 12.5px; }
.sm-dp-sc .sc-btn.druk { scale: .92; transition-duration: .12s; }
.sm-dp-sc .sc-nav { display: flex; align-items: center; gap: 6px; width: 100%; }
.sm-dp-sc .sc-nav .sc-av { width: 14px; height: 14px; margin-right: auto; }
.sm-dp-sc .sc-nav span { display: block; width: 22px; height: 5px; border-radius: 3px; background: var(--sz); }

/* de uitkomst: een pil die opspringt */
.sm-dp-sc .sc-pil {
  position: absolute; right: -6px; bottom: -6px; z-index: 6;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 9px; border-radius: 999px;
  background: var(--sk); color: var(--si); font-size: 11.5px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55), 0 0 0 1px var(--szz);
}
.sm-dp-sc .sc-pil i { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--si); box-shadow: inset 0 0 0 5px var(--dp-lime); }
.sm-dp-sc.is-regie .sc-pil { transition: opacity .3s, scale .55s var(--veer), translate .55s var(--veer); }
.sm-dp-sc.is-regie .sc-pil:not(.aan) { opacity: 0; scale: .6; translate: 0 10px; }

/* de muis: bestaat alleen in het filmpje */
.sm-dp-sc .sc-muis { display: none; }
.sm-dp-sc.is-regie .sc-muis {
  display: block; position: absolute; z-index: 7; left: var(--mx, 82%); top: var(--my, 90%);
  width: 20px; height: 20px; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35));
  transition: left .8s var(--glij), top .8s var(--glij), opacity .25s, scale .16s;
}
.sm-dp-sc.is-regie .sc-muis.aan { opacity: 1; }
.sm-dp-sc.is-regie .sc-muis.klik { scale: .78; }

/* ---------- 1. website: lezen, klikken, aanvraag ---------- */
.sm-dp-sc--web .sc-win {
  flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
  border-radius: 14px; background: var(--sk); box-shadow: var(--ss); overflow: hidden;
}
.sm-dp-sc--web .sc-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--szz); }
.sm-dp-sc--web .sc-bar i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--sz); }
.sm-dp-sc--web .sc-bar i:first-child { background: #f0724f; }
.sm-dp-sc--web .sc-bar span {
  flex: 1; min-width: 0; margin-left: 8px; height: 17px; padding: 0 9px; border-radius: 999px; background: var(--szz);
  font-family: var(--dp-mono); font-size: 9.5px; line-height: 17px; color: rgba(13, 21, 18, .62); overflow: hidden; white-space: nowrap;
}
.sm-dp-sc--web .sc-vp { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.sm-dp-sc--web .sc-page {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 14px 14px 18px;
  translate: 0 var(--y, 0px); transition: translate 1.3s cubic-bezier(.65, 0, .35, 1);
}
.sm-dp-sc--web .sc-nav { margin-bottom: 4px; }
/* de hero van de site: foto met kop, regel, knop en geruststelling erop */
.sm-dp-sc--web .sc-held {
  position: relative; flex: 0 0 auto; width: 100%; aspect-ratio: 1.12 / 1; max-height: 250px;
  border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #0d1512, #123626);
}
.sm-dp-sc--web .sc-held::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13, 21, 18, 0) 34%, rgba(13, 21, 18, .82) 100%);
}
.sm-dp-sc--web .sc-held-tekst {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: #ffffff;
}
.sm-dp-sc--web .sc-held-kop {
  display: block; font-size: 13px; font-size: clamp(12px, 4.8cqw, 15.5px); font-weight: 800;
  line-height: 1.15; letter-spacing: -.01em; text-wrap: balance;
}
.sm-dp-sc--web .sc-held-sub { font-size: 9.5px; line-height: 1.3; opacity: .9; text-wrap: balance; }
.sm-dp-sc--web .sc-held .sc-btn { height: 26px; padding: 0 11px; font-size: 10px; }
.sm-dp-sc--web .sc-held .sc-held-gerust {
  margin: 0; font-family: inherit; font-size: 8.5px; letter-spacing: 0; line-height: 1.3;
  color: rgba(255, 255, 255, .85); text-wrap: balance;
}
.sm-dp-sc--web .sc-ster-rij { display: flex; align-items: center; gap: 2px; font-size: 9.5px; font-weight: 600; color: var(--si); }
.sm-dp-sc--web .sc-ster-rij svg { display: block; width: 11px; height: 11px; fill: var(--dp-groen); }
.sm-dp-sc--web .sc-ster-rij span { margin-left: 5px; }
/* de pagina is langer dan het venster: je ziet de bezoeker lezen */
.sm-dp-sc--web .sc-page small { margin-top: 6px; }
.sm-dp-sc--web .sc-cards { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; width: 100%; }
.sm-dp-sc--web .sc-cards.twee { grid-template-columns: repeat(2, 1fr); }
.sm-dp-sc--web .sc-cards i { display: block; height: 60px; border-radius: 8px; background: var(--szz); }
/* "Dit zeggen klanten": sterren en een letter, de tekst blijft een grijze regel */
.sm-dp-sc--web .sc-cards .sc-rev {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  height: auto; min-height: 60px; padding: 9px 9px 9px 34px; background: var(--szz);
}
.sm-dp-sc--web .sc-rev .sc-sterren { display: flex; gap: 2px; }
.sm-dp-sc--web .sc-rev .sc-sterren svg { display: block; width: 10px; height: 10px; fill: var(--dp-groen); }
.sm-dp-sc--web .sc-rev .sc-l { width: 100%; height: 5px; }
.sm-dp-sc--web .sc-rev .sc-l.kort { width: 64%; }
.sm-dp-sc--web .sc-rev b {
  position: absolute; left: 8px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 19px; height: 19px;
  border-radius: 50%; background: var(--si); color: #ffffff; font-size: 9.5px; font-weight: 700;
}
.sm-dp-sc--web .sc-doel { box-shadow: var(--held); }

/* ---------- 2. landingspagina: advertentie, passende pagina, de ene knop ---------- */
.sm-dp-sc--land { gap: 12px; }
.sm-dp-sc--land .sc-ad {
  flex: 0 0 auto; align-self: flex-start; width: 80%; padding: 10px; border-radius: 14px;
  background: var(--sk); box-shadow: var(--ss); display: flex; flex-direction: column; gap: 8px; rotate: -2deg;
}
.sm-dp-sc--land .sc-kop { display: flex; align-items: center; gap: 7px; }
.sm-dp-sc--land .sc-kop .sc-av { width: 20px; height: 20px; }
.sm-dp-sc--land .sc-kop span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sm-dp-sc--land .sc-kop b { font-size: 10.5px; font-weight: 700; }
.sm-dp-sc--land .sc-ad .sc-foto { height: auto; aspect-ratio: 2.5 / 1; }
.sm-dp-sc--land .sc-voet { display: flex; align-items: center; gap: 8px; }
/* de belofte: in de advertentie en precies zo op de pagina */
.sm-dp-sc--land .sc-kopje { display: block; flex: 0 0 auto; font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--si); text-wrap: balance; }
.sm-dp-sc--land .sc-titel {
  display: block; flex: 0 0 auto; font-size: 13.5px; font-size: clamp(12.5px, 4.8cqw, 15.5px);
  font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--si); text-wrap: balance;
}
.sm-dp-sc--land .sc-voet .sc-h { flex: 1 1 0; width: auto; height: 8px; }
.sm-dp-sc--land .sc-pag {
  position: relative; flex: 1 1 0; min-height: 0; align-self: flex-end; width: 90%; padding: 12px;
  border-radius: 14px; background: var(--sk); box-shadow: var(--held);
  display: flex; flex-direction: column; gap: 9px; overflow: hidden;
}
.sm-dp-sc--land .sc-pag .sc-foto { flex: 0 1 auto; aspect-ratio: 1.83 / 1; height: auto; min-height: 64px; }
.sm-dp-sc--land .sc-zelfde {
  position: absolute; left: 20px; top: 20px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 6px; border-radius: 999px; background: var(--sk); color: var(--si);
  font-size: 10.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .5);
}
.sm-dp-sc--land .sc-zelfde svg { display: block; width: 15px; height: 15px; padding: 2.5px; border-radius: 50%; background: var(--dp-lime); color: #0d1512; }
.sm-dp-sc--land .sc-pag .sc-btn { margin-top: auto; }
.sm-dp-sc--land .sc-punt { display: flex; align-items: center; gap: 8px; width: 100%; }
.sm-dp-sc--land .sc-punt i { display: block; flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--sz); }
.sm-dp-sc--land .sc-punt .sc-l { flex: 1 1 0; width: auto; }
.sm-dp-sc--land .sc-punt .sc-l.kort { flex: 0 1 58%; }
/* de pil boven de knop, niet eroverheen */
.sm-dp-sc--land .sc-pil { bottom: 56px; }
/* het spoor: de plek waar de pagina gaat landen (het script zet de maat) */
.sm-dp-sc--land .sc-spoor {
  position: absolute; right: 0; bottom: 0; width: 90%; height: 56%; border-radius: 14px; opacity: 0;
  border: 1.5px dashed color-mix(in srgb, var(--pfg) 36%, transparent); transition: opacity .3s;
}
.sm-dp-sc--land.is-regie.begin .sc-spoor { opacity: 1; }
.sm-dp-sc--land.is-regie .sc-pag { transition: translate .7s var(--veer-zacht), opacity .3s; }
.sm-dp-sc--land.is-regie.begin .sc-pag { translate: 0 44%; opacity: 0; }
.sm-dp-sc--land.is-regie .sc-zelfde { transition: scale .5s var(--veer), opacity .2s; }
.sm-dp-sc--land.is-regie .sc-zelfde:not(.aan) { scale: 0; opacity: 0; }

/* ---------- 3. zoekresultaten: zoeken, klimmen, bezoeker ---------- */
.sm-dp-sc--zoek { gap: 8px; }
.sm-dp-sc--zoek .sc-q {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--sk); box-shadow: var(--ss); font-size: 12.5px; font-weight: 500;
}
.sm-dp-sc--zoek .sc-q svg { flex: 0 0 auto; width: 15px; height: 15px; color: rgba(13, 21, 18, .5); }
.sm-dp-sc--zoek .sc-typ { display: block; min-width: 0; overflow: hidden; white-space: nowrap; }
.sm-dp-sc--zoek .sc-q i { display: block; flex: 0 0 auto; width: 2px; height: 15px; border-radius: 2px; background: var(--si); }
.sm-dp-sc--zoek .sc-q.puls { animation: sm-dp-puls .45s var(--veer); }
.sm-dp-sc--zoek.is-regie .sc-q i { animation: sm-dp-knipper 1s steps(1) infinite; }
.sm-dp-sc--zoek .sc-meta {
  flex: 0 0 auto; padding-left: 4px; font-family: var(--dp-mono); font-size: 9.5px; letter-spacing: .03em;
  color: color-mix(in srgb, var(--pfg) 64%, transparent);
}
.sm-dp-sc--zoek .sc-res { position: relative; flex: 1 1 0; min-height: 0; --n: 4; }
/* het AI-antwoord boven de resultaten: noemt jouw bedrijf, met jouw site als bron */
.sm-dp-sc--zoek .sc-ai {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--sk), var(--sk)) padding-box, linear-gradient(135deg, var(--dp-lime), var(--dp-groen)) border-box;
  box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .5);
  transition: opacity .45s, translate .5s var(--veer-zacht);
}
.sm-dp-sc--zoek .sc-ai-kop { display: flex; align-items: center; gap: 5px; font-size: 9.5px; letter-spacing: .02em; color: var(--si); }
.sm-dp-sc--zoek .sc-ai-kop svg { display: block; flex: 0 0 auto; width: 12px; height: 12px; fill: var(--dp-groen); }
.sm-dp-sc--zoek .sc-ai-kop b { font-weight: 700; }
.sm-dp-sc--zoek .sc-ai-tekst { font-size: 11px; line-height: 1.35; color: var(--si); text-wrap: pretty; }
.sm-dp-sc--zoek .sc-ai mark {
  padding: 0 3px; border-radius: 3px; background: var(--dp-lime); color: #0d1512; font-weight: 700;
  transition: background .4s;
}
.sm-dp-sc--zoek .sc-ai .sc-l { height: 5px; width: 100%; }
.sm-dp-sc--zoek .sc-ai .sc-l.kort { width: 62%; }
.sm-dp-sc--zoek .sc-bron {
  align-self: flex-start; display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--si) 6%, #ffffff); font-size: 9px; color: var(--si);
  transition: opacity .3s, scale .45s var(--veer);
}
.sm-dp-sc--zoek .sc-bron i { display: block; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--dp-groen), var(--dp-lime)); }
.sm-dp-sc--zoek.is-regie .sc-ai:not(.aan) { opacity: .3; translate: 0 6px; }
.sm-dp-sc--zoek.is-regie .sc-ai mark:not(.aan) { background: transparent; }
.sm-dp-sc--zoek.is-regie .sc-bron:not(.aan) { opacity: 0; scale: .8; }
.sm-dp-sc--zoek .sc-r {
  position: absolute; left: 0; right: 0;
  top: calc(var(--plek, 0) * 100% / var(--n)); height: calc(100% / var(--n) - 7px);
  display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .55);
  transition: top .62s var(--veer-zacht), scale .35s var(--veer), box-shadow .4s, opacity .35s, translate .45s cubic-bezier(.2, .8, .2, 1);
}
.sm-dp-sc--zoek .sc-r > i { display: block; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--sz); }
.sm-dp-sc--zoek .sc-r span { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.sm-dp-sc--zoek .sc-r small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sm-dp-sc--zoek .sc-r em { display: block; height: 6px; width: 72%; border-radius: 4px; background: var(--sz); }
.sm-dp-sc--zoek .sc-me { z-index: 2; background: var(--sk); box-shadow: var(--held); }
.sm-dp-sc--zoek .sc-me > i { background: linear-gradient(135deg, var(--dp-groen), var(--dp-lime)); }
.sm-dp-sc--zoek .sc-me strong { font-size: 13px; font-weight: 700; white-space: nowrap; }
/* het fotootje bij jouw pagina, zoals Google het toont */
.sm-dp-sc--zoek .sc-duim { display: block; flex: 0 0 auto; height: calc(100% - 16px); max-height: 46px; aspect-ratio: 1.2; border-radius: 8px; }
.sm-dp-sc--zoek .sc-rang {
  flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--dp-lime); color: #0d1512; transition: background .3s, color .3s, scale .4s var(--veer);
}
.sm-dp-sc--zoek .sc-rang svg { grid-area: 1 / 1; display: block; width: 14px; height: 14px; transition: opacity .25s, scale .4s var(--veer); }
.sm-dp-sc--zoek .sc-rang .ok { opacity: 0; scale: .4; }
.sm-dp-sc--zoek .sc-me.top .sc-rang { background: var(--si); color: var(--dp-lime); }
.sm-dp-sc--zoek .sc-me.top .sc-rang .op { opacity: 0; scale: .4; }
.sm-dp-sc--zoek .sc-me.top .sc-rang .ok { opacity: 1; scale: 1; }
.sm-dp-sc--zoek .sc-me.til { scale: 1.035; box-shadow: 0 0 0 1.5px var(--si), 0 22px 36px -14px rgba(0, 0, 0, .6); }
.sm-dp-sc--zoek .sc-me.til .sc-rang { scale: 1.16; }
.sm-dp-sc--zoek .sc-me.top {
  box-shadow: 0 0 0 1.5px var(--si), 0 0 0 6px color-mix(in srgb, var(--dp-lime) 72%, transparent), 0 12px 26px -14px rgba(0, 0, 0, .55);
}
/* voor het zoeken staan de rijen er gedimd al: het vak is nooit leeg */
.sm-dp-sc--zoek.is-regie .sc-r:not(.aan) { opacity: .3; }

/* ---------- 4. teksten: zo zet een beginner het op zijn site, en zo doen wij het ---------- */
.sm-dp-sc--tekst { gap: 12px; }
/* de beginnerssite: alles gecentreerd, twee letters door elkaar, felblauw, een uitgerekte stockfoto */
.sm-dp-sc--tekst .sc-kaal {
  position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 7px 8px; background: #f2f2f2; border: 1px solid #cfcfcf; text-align: center;
  font-family: Arial, Helvetica, sans-serif; opacity: .8; filter: saturate(.7);
}
.sm-dp-sc--tekst .sc-kaal-foto { position: relative; width: 100%; height: 44px; overflow: hidden; background: #dddddd; }
.sm-dp-sc--tekst .sc-kaal-kop { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 700; color: #1e6fd9; }
.sm-dp-sc--tekst .sc-kaal-tekst {
  font-family: "Times New Roman", Times, serif; font-size: 9.5px; line-height: 1.25; color: #555555; text-align: justify;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.sm-dp-sc--tekst .sc-kaal-knop {
  padding: 3px 10px; border-radius: 0; background: #1e6fd9; color: #ffffff;
  font-family: Arial, Helvetica, sans-serif; font-size: 9px;
}
.sm-dp-sc--tekst .sc-reactie {
  position: absolute; right: -6px; bottom: -9px; z-index: 2; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, #f0724f 16%, #ffffff); color: #a8442a; font-family: inherit;
  font-size: 10px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .45);
}
/* onze sectie: echte foto, een kop, tekst regel voor regel met witregels, een knop die zegt wat je krijgt */
.sm-dp-sc--tekst .sc-site {
  flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; border-radius: 14px;
  background: var(--sk); box-shadow: var(--held); overflow: hidden;
}
/* de foto krijgt alle ruimte die de tekst overlaat: op elk scherm zo groot als het kan */
.sm-dp-sc--tekst .sc-site-foto { position: relative; flex: 1 1 0; min-height: 92px; background: var(--szz); }
.sm-dp-sc--tekst .sc-site-in {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; padding: 11px 13px 12px;
}
.sm-dp-sc--tekst .sc-ogen { font-family: var(--dp-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dp-groen); }
.sm-dp-sc--tekst .sc-site-kop {
  display: block; font-size: 14px; font-size: clamp(13px, 5cqw, 16px); font-weight: 800;
  line-height: 1.15; letter-spacing: -.01em; color: var(--si); text-wrap: balance;
}
.sm-dp-sc--tekst .sc-ons-tekst {
  display: flex; flex-direction: column; font-size: 10.5px; font-size: clamp(10px, 3.6cqw, 11px);
  line-height: 1.42; color: color-mix(in srgb, var(--si) 82%, transparent);
}
.sm-dp-sc--tekst .sc-rg { display: block; white-space: nowrap; }
.sm-dp-sc--tekst .sc-wit { display: block; height: .6em; }
.sm-dp-sc--tekst .sc-site .sc-btn {
  height: auto; min-height: 30px; gap: 8px; padding: 4px 4px 4px 13px; background: var(--si); color: #ffffff;
  font-size: 10.5px; box-shadow: none;
}
.sm-dp-sc--tekst .sc-site .sc-btn i {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--dp-lime); color: #0d1512;
}
.sm-dp-sc--tekst .sc-site .sc-btn svg { display: block; width: 12px; height: 12px; }
.sm-dp-sc--tekst .sc-gerust { font-family: inherit; font-size: 9px; letter-spacing: 0; color: color-mix(in srgb, var(--si) 60%, transparent); }
/* de uitkomst staat rechtsboven, over de beginnerssite: onze tekst en de knop blijven vrij */
.sm-dp-sc--tekst .sc-pil { bottom: auto; top: -6px; }
/* het filmpje: eerst de beginnerssite, die valt weg, dan de onze */
.sm-dp-sc--tekst.is-regie .sc-kaal { transition: opacity .6s, filter .6s, translate .5s var(--veer-zacht); }
.sm-dp-sc--tekst.is-regie .sc-kaal:not(.weg) { opacity: 1; filter: none; }
.sm-dp-sc--tekst.is-regie .sc-kaal:not(.aan) { opacity: 0; translate: 0 8px; }
.sm-dp-sc--tekst .sc-reactie { transition: scale .45s var(--veer), opacity .2s; }
.sm-dp-sc--tekst.is-regie .sc-kaal:not(.weg) .sc-reactie { scale: 0; opacity: 0; }
.sm-dp-sc--tekst.is-regie .sc-site { transition: opacity .5s, translate .6s var(--veer-zacht); }
.sm-dp-sc--tekst.is-regie .sc-site:not(.aan) { opacity: 0; translate: 0 14px; }
.sm-dp-sc--tekst.is-regie .sc-rg { transition: opacity .45s, translate .45s; }
.sm-dp-sc--tekst.is-regie .sc-rg:not(.aan) { opacity: 0; translate: 0 4px; }
.sm-dp-sc--tekst.is-regie .sc-site .sc-btn, .sm-dp-sc--tekst.is-regie .sc-gerust { transition: opacity .3s, scale .45s var(--veer); }
.sm-dp-sc--tekst.is-regie .sc-site .sc-btn:not(.aan), .sm-dp-sc--tekst.is-regie .sc-gerust:not(.aan) { opacity: 0; scale: .9; }

/* ---------- 5. onderzoek: een verouderde hero onder de loep, drie fouten, dan de goede hero ---------- */
.sm-dp-sc--loep { gap: 10px; }
.sm-dp-sc--loep .sc-win {
  position: relative; flex: 1.3 1 0; min-height: 0; display: flex; flex-direction: column;
  border-radius: 14px; background: var(--sk); box-shadow: var(--ss); overflow: hidden;
}
.sm-dp-sc--loep .sc-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border-bottom: 1px solid var(--szz); }
.sm-dp-sc--loep .sc-bar i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--sz); }
.sm-dp-sc--loep .sc-bar i:first-child { background: #f0724f; }
.sm-dp-sc--loep .sc-bar span {
  flex: 1; min-width: 0; margin-left: 8px; height: 17px; padding: 0 9px; border-radius: 999px; background: var(--szz);
  font-family: var(--dp-mono); font-size: 9.5px; line-height: 17px; color: rgba(13, 21, 18, .62); overflow: hidden; white-space: nowrap;
}
.sm-dp-sc--loep .sc-hero { position: relative; flex: 1 1 0; min-height: 150px; overflow: hidden; container-type: inline-size; }
.sm-dp-sc--loep .sc-oud, .sm-dp-sc--loep .sc-na { position: absolute; inset: 0; background: #2a3230; }
/* elk een eigen laag: de nieuwe hero ligt helemaal over de oude, ook over de tekst en de bolletjes */
.sm-dp-sc--loep .sc-oud { z-index: 1; }
.sm-dp-sc--loep .sc-na { z-index: 2; }
/* oud: koel beeld, tekst in een los kader, serif, een klein linkje en slider-bolletjes, zoals sites van tien jaar terug */
.sm-dp-sc--loep .sc-oud img { filter: saturate(.75) brightness(.97); }
.sm-dp-sc--loep .sc-oud-tekst {
  position: absolute; left: 12%; right: 12%; top: 50%; translate: 0 -50%; z-index: 2; padding: 9px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  background: rgba(0, 0, 0, .46); color: #ffffff;
}
.sm-dp-sc--loep .sc-oud-kop { font-family: Georgia, "Times New Roman", serif; font-size: clamp(11px, 5cqw, 14px); font-weight: 400; line-height: 1.15; text-wrap: balance; }
.sm-dp-sc--loep .sc-oud-sub { font-family: Georgia, "Times New Roman", serif; font-size: clamp(8px, 3.4cqw, 9.5px); line-height: 1.25; opacity: .9; text-wrap: balance; }
.sm-dp-sc--loep .sc-oud-link { font-family: Arial, sans-serif; font-size: 8.5px; letter-spacing: 0; color: #7fb4ff; text-decoration: underline; }
.sm-dp-sc--loep .sc-pijl {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2; font-style: normal; font-family: Arial, sans-serif;
  font-size: 22px; line-height: 1; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.sm-dp-sc--loep .sc-pijl.l { left: 3%; }
.sm-dp-sc--loep .sc-pijl.r { right: 3%; }
.sm-dp-sc--loep .sc-bol { position: absolute; left: 0; right: 0; bottom: 7px; z-index: 2; display: flex; justify-content: center; gap: 5px; }
.sm-dp-sc--loep .sc-bol i { display: block; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.sm-dp-sc--loep .sc-bol i:first-child { background: #ffffff; }
/* nieuw: hun huis en de vakman, een donkere laag onder en links, wat ze krijgen en de knop */
.sm-dp-sc--loep .sc-na::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13, 21, 18, 0) 28%, rgba(13, 21, 18, .86) 100%),
              linear-gradient(90deg, rgba(13, 21, 18, .5) 0%, rgba(13, 21, 18, 0) 62%);
}
.sm-dp-sc--loep .sc-na-tekst {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 11px 12px 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px; color: #ffffff;
}
.sm-dp-sc--loep .sc-na-kop { display: block; max-width: 92%; font-size: clamp(12px, 5.4cqw, 15.5px); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.sm-dp-sc--loep .sc-na-sub { font-size: clamp(8.5px, 3.5cqw, 10px); line-height: 1.3; opacity: .92; text-wrap: balance; }
.sm-dp-sc--loep .sc-na .sc-btn { height: 25px; margin-top: 2px; padding: 0 11px; font-size: 10px; }
.sm-dp-sc--loep .sc-na-gerust { margin: 0; font-family: inherit; font-size: 8.5px; letter-spacing: 0; line-height: 1.3; color: rgba(255, 255, 255, .85); }
/* de rode stippen: waar het misgaat op de oude hero */
.sm-dp-sc--loep u {
  position: absolute; z-index: 4; display: block; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%;
  background: #f0724f; box-shadow: 0 0 0 5px rgba(240, 114, 79, .28);
}
.sm-dp-sc--loep u.h1 { left: 80%; top: 84%; }
.sm-dp-sc--loep u.h2 { left: 50%; top: 63%; }
.sm-dp-sc--loep u.h3 { left: 22%; top: 38%; }
/* de goede hero schuift over de oude heen; zonder script staat hij er meteen (de eindstand) */
.sm-dp-sc--loep .sc-na { transition: clip-path .9s var(--glij); }
.sm-dp-sc--loep.is-regie .sc-na:not(.aan) { clip-path: inset(0 100% 0 0); }
/* eindstand: de fouten zijn opgelost, dus geen stippen */
.sm-dp-sc--loep:not(.is-regie) u { display: none; }
.sm-dp-sc--loep.is-regie u { transition: scale .45s var(--veer); }
.sm-dp-sc--loep.is-regie u:not(.aan) { scale: 0; }
.sm-dp-sc--loep .sc-glas {
  position: absolute; z-index: 5; left: var(--gx, 62%); top: var(--gy, 85%); width: 46px; height: 46px; translate: -50% -50%;
  border-radius: 50%; background: rgba(255, 255, 255, .22);
  box-shadow: 0 0 0 2.5px var(--si), 0 12px 22px -10px rgba(0, 0, 0, .5);
  transition: left .8s var(--glij), top .8s var(--glij);
}
/* de steel van de loep; de lens zelf is doorzichtig, zodat je het gevonden punt erin ziet */
.sm-dp-sc--loep .sc-glas::after {
  content: ""; position: absolute; left: 84%; top: 84%; width: 17px; height: 5px; border-radius: 3px;
  background: var(--si); rotate: 45deg; transform-origin: left center;
}
.sm-dp-sc--loep .sc-bev { flex: 1 1 0; min-height: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sm-dp .sm-dp-sc--loep .sc-bev li {
  flex: 1 1 0; min-height: 0; max-height: 58px; list-style: none; display: flex; align-items: center; gap: 9px;
  margin: 0; padding: 0 12px; border-radius: 11px; background: var(--sk);
  font-size: 11.5px; font-weight: 700; color: var(--si); white-space: nowrap; box-shadow: 0 0 0 1px var(--szz);
}
.sm-dp-sc--loep .sc-bev li span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sm-dp-sc--loep .sc-bev li b { font-weight: 700; line-height: 1.2; }
.sm-dp-sc--loep .sc-bev li small {
  overflow: hidden; text-overflow: ellipsis; font-family: inherit; font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 1.2;
  color: color-mix(in srgb, var(--si) 66%, transparent);
}
.sm-dp .sm-dp-sc--loep .sc-bev li::before { content: none; }
.sm-dp-sc--loep .sc-bev li i { display: block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #f0724f; }
.sm-dp-sc--loep.is-regie .sc-bev li { transition: opacity .35s, translate .45s cubic-bezier(.2, .8, .2, 1); }
.sm-dp-sc--loep.is-regie .sc-bev li:not(.aan) { opacity: 0; translate: -12px 0; }
/* de melding rechtsboven, over de kop van de pagina: zo blijven de bevindingen op elk scherm leesbaar */
.sm-dp-sc--loep .sc-pil { bottom: auto; top: 4px; }

/* ---------- 6. social: scrollen, stoppen bij jou, doortikken ---------- */
.sm-dp-sc--soc { align-items: center; }
.sm-dp-sc--soc .sc-tel {
  position: relative; flex: 1 0 370px; width: min(100%, 284px); padding: 8px; border-radius: 30px; background: var(--si);
  box-shadow: 0 24px 46px -22px rgba(0, 0, 0, .65);
}
/* het spreekgaatje bovenin het scherm */
.sm-dp-sc--soc .sc-tel::before {
  content: ""; position: absolute; z-index: 2; left: 50%; top: 15px; width: 42px; height: 5px; margin-left: -21px;
  border-radius: 4px; background: rgba(13, 21, 18, .22);
}
.sm-dp-sc--soc .sc-scherm { height: 100%; overflow: hidden; border-radius: 22px; background: #eef1ef; }
.sm-dp-sc--soc .sc-feed {
  display: flex; flex-direction: column; gap: 8px; padding: 24px 8px 8px;
  translate: 0 var(--y, 0px); transition: translate .55s cubic-bezier(.3, .8, .3, 1);
}
.sm-dp-sc--soc .sc-post { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; padding: 8px; border-radius: 12px; background: var(--sk); transition: box-shadow .4s; }
.sm-dp-sc--soc .sc-post p { display: flex; align-items: center; gap: 7px; }
.sm-dp-sc--soc .sc-post .sc-av { width: 18px; height: 18px; background: var(--sz); }
.sm-dp-sc--soc .sc-post p > span { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.sm-dp-sc--soc .sc-post p > span.sc-l { flex: 0 1 56%; }
.sm-dp-sc--soc .sc-post b { font-size: 10.5px; font-weight: 700; }
.sm-dp-sc--soc .sc-post .sc-foto { height: 70px; background: var(--szz); }
/* de berichten van anderen: een gewone foto, gedempt, zodat jouw bericht opvalt */
.sm-dp-sc--soc .sc-post:not(.sc-jij) .sc-foto.heeft-foto { height: auto; aspect-ratio: 1.9 / 1; }
.sm-dp-sc--soc .sc-post:not(.sc-jij) .heeft-foto img { opacity: .8; }
.sm-dp-sc--soc .sc-jij .sc-av { background: linear-gradient(135deg, var(--dp-groen), var(--dp-lime)); }
.sm-dp-sc--soc .sc-jij .sc-foto {
  height: 124px; display: grid; place-items: center;
  background: linear-gradient(150deg, #0d1512, #123626 38%, var(--dp-groen) 74%, var(--dp-lime));
}
.sm-dp-sc--soc .sc-jij .sc-foto em { padding: 6px 11px; border-radius: 999px; background: #ffffff; font-size: 11px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6); }
/* met een foto staat het label linksboven, bij de planten: dan dekt het het product en de hand niet af */
.sm-dp-sc--soc .sc-jij .sc-foto.heeft-foto { place-items: start start; }
.sm-dp-sc--soc .sc-jij .sc-foto.heeft-foto em { position: relative; z-index: 1; margin: 8px; transform-origin: 0 0; }
.sm-dp-sc--soc .sc-jij.stop { box-shadow: 0 0 0 2px var(--si), 0 12px 24px -12px rgba(0, 0, 0, .5); }
.sm-dp-sc--soc .sc-acties .sc-l { flex: 1 1 0; width: auto; }
/* de advertentie zoals Meta hem toont: tekst boven de foto, linkbalk met kop en knop eronder */
.sm-dp-sc--soc .sc-post p.sc-tekst-ad { display: block; font-size: 9px; line-height: 1.35; color: var(--si); text-wrap: pretty; }
.sm-dp-sc--soc .sc-post p.sc-tekst-ad > span { display: inline; color: color-mix(in srgb, var(--si) 55%, transparent); }
.sm-dp-sc--soc .sc-post p.sc-linkbalk {
  display: flex; align-items: center; gap: 8px; margin: -7px -8px 0; padding: 7px 8px;
  background: color-mix(in srgb, var(--si) 6%, #ffffff);
}
.sm-dp-sc--soc .sc-linkbalk span { display: flex; flex-direction: column; gap: 1px; flex: 1 1 0; min-width: 0; }
.sm-dp-sc--soc .sc-linkbalk small { font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
.sm-dp-sc--soc .sc-post .sc-linkbalk b { font-size: 9.5px; font-weight: 700; line-height: 1.2; }
.sm-dp-sc--soc .sc-linkbalk .sc-btn { flex: 0 0 auto; height: 24px; padding: 0 10px; font-size: 9.5px; }
.sm-dp-sc--soc .sc-acties .sc-btn { height: 24px; padding: 0 10px; font-size: 10px; }
.sm-dp-sc--soc .sc-hart { display: block; flex: 0 0 auto; width: 20px; height: 20px; fill: #f0724f; }
.sm-dp-sc--soc .sc-vlieg { position: absolute; right: 22px; bottom: 44px; width: 12px; height: 12px; fill: #f0724f; opacity: 0; pointer-events: none; }
.sm-dp-sc--soc .sc-vlieg.v1 { --dx: -14px; }
.sm-dp-sc--soc .sc-vlieg.v2 { --dx: 8px; right: 34px; }
.sm-dp-sc--soc .sc-vlieg.v3 { --dx: -4px; right: 46px; }
/* zonder filmpje: jouw bericht staat bovenaan */
.sm-dp-sc--soc:not(.is-regie) .sc-post:not(.sc-jij):nth-child(-n+2) { display: none; }
.sm-dp-sc--soc.is-regie .sc-jij .sc-foto em { transition: scale .5s var(--veer), opacity .2s; }
.sm-dp-sc--soc.is-regie .sc-jij .sc-foto em:not(.aan) { scale: 0; opacity: 0; }
.sm-dp-sc--soc.is-regie .sc-hart { transition: fill .2s; }
.sm-dp-sc--soc.is-regie .sc-hart:not(.aan) { fill: rgba(13, 21, 18, .2); }
.sm-dp-sc--soc.is-regie .sc-hart.aan { animation: sm-dp-hartpop .6s var(--veer); }
.sm-dp-sc--soc.is-regie .sc-vlieg.aan { animation: sm-dp-vlieg 1.5s cubic-bezier(.2, .7, .3, 1) both; }
.sm-dp-sc--soc.is-regie .sc-vlieg.v2.aan { animation-delay: .18s; }
.sm-dp-sc--soc.is-regie .sc-vlieg.v3.aan { animation-delay: .34s; }

/* middelhoge beeldvakken (tablet): de drie punten weg, dan passen de twee foto's */
@container (max-height: 470px) {
  .sm-dp-sc--land .sc-punt { display: none; }
  /* de melding komt rechtsboven binnen, naast de advertentie: zo dekt hij de kop niet af */
  .sm-dp-sc--land .sc-ad { width: 60%; }
  .sm-dp-sc--land .sc-pil { bottom: auto; top: 4px; }
}
/* breed en laag (tablet liggend): smallere kaarten, anders worden de foto's dunne stroken */
@container (max-height: 470px) and (min-width: 400px) {
  .sm-dp-sc--land .sc-ad { width: 50%; }
  .sm-dp-sc--land .sc-pag { width: 70%; }
  .sm-dp-sc--land .sc-pag .sc-h.kort, .sm-dp-sc--land .sc-pag .sc-l { display: none; }
  /* de belofte staat nu als tekst in beide kaarten: iets lagere foto's, dan past de knop */
  .sm-dp-sc--land .sc-ad .sc-foto { aspect-ratio: 3 / 1; }
  .sm-dp-sc--land .sc-pag .sc-foto { min-height: 52px; }
}
/* lage beeldvakken (telefoon): minder onderdelen, zelfde verhaal */
@container (max-height: 400px) {
  .sm-dp-sc--land .sc-ad { width: 60%; padding: 8px; gap: 6px; }
  .sm-dp-sc--land .sc-pag .sc-h.kort, .sm-dp-sc--land .sc-pag .sc-l { display: none; }
  .sm-dp-sc--loep .sc-bar { height: 24px; }
  .sm-dp-sc--loep .sc-bev li { max-height: 36px; font-size: 11px; }
  .sm-dp-sc--loep .sc-bev li small { font-size: 9.5px; }
  .sm-dp-sc--zoek .sc-meta, .sm-dp-sc--zoek .sc-ai .sc-l { display: none; }
  .sm-dp-sc--zoek .sc-ai { gap: 5px; padding: 8px 11px; }
  .sm-dp-sc--web .sc-held { aspect-ratio: 1.3 / 1; }
  /* de melding rechtsboven, naast de naam: zo blijft de knop van de advertentie vrij */
  .sm-dp-sc--soc .sc-pil { bottom: auto; top: 4px; }
}

@keyframes sm-dp-puls { 0%, 100% { scale: 1; } 40% { scale: .962; } }
@keyframes sm-dp-golf { 0%, 100% { scale: 1 .35; } 50% { scale: 1 1; } }
@keyframes sm-dp-hartpop { 0% { scale: .4; } 60% { scale: 1.35; } 100% { scale: 1; } }
@keyframes sm-dp-vlieg {
  0% { opacity: 0; translate: 0 0; scale: .5; }
  18% { opacity: 1; }
  100% { opacity: 0; translate: var(--dx, 0px) -70px; scale: 1.15; }
}

/* buiten beeld staat alles stil: dat scheelt rekenwerk */
.sm-dp-klaar .sm-dp-p:not(.in-beeld) .sm-dp-sc *, .sm-dp-klaar:not(.is-beeld) .sm-dp-hint i { animation-play-state: paused; }

/* minder beweging: geen animaties, alles staat meteen op de eindstand */
@media (prefers-reduced-motion: reduce) {
  html:not(.sm-rustig):not(.sm-beweeg) .sm-dp *, html:not(.sm-rustig):not(.sm-beweeg) .sm-dp *::before, html:not(.sm-rustig):not(.sm-beweeg) .sm-dp *::after { animation: none !important; transition: none !important; }
  html:not(.sm-rustig):not(.sm-beweeg) .sm-dp-mark { background-size: 100% 84%; }
}