/* SM Rapportkaart: getallen als een rapport, een donkere kaart met tabjes, voor en na, het waarom.
   Band lime (standaard) of donker. Kop en badge volgen de gedeelde maten uit sm-base. */
.sm-rp {
  --rp-band: #d2f65a;
  --rp-op-band: #0d1512;
  --rp-op-band-stil: rgba(13, 21, 18, .74);
  --rp-kaart: #0b0f0e;
  --rp-ink: #ffffff;
  --rp-stil: rgba(255, 255, 255, .7);
  --rp-zacht: rgba(255, 255, 255, .5);
  --rp-lijn: rgba(255, 255, 255, .09);
  --rp-accent: #d2f65a;
  --rp-mono: ui-monospace, "SF Mono", "Fira Code", "JetBrains Mono", Menlo, monospace;
  background: var(--rp-band); color: var(--rp-op-band);
  padding: 96px 32px 0; overflow-x: clip;
}
.sm-rp--donker { --rp-band: #0f1a15; --rp-op-band: #ffffff; --rp-op-band-stil: rgba(255, 255, 255, .72); --rp-kaart: #0a0e0d; }
.sm-rp-in { max-width: 1180px; margin: 0 auto; }

/* ---------- kop ---------- */
.sm-rp-kopblok { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin: 0 0 44px; }
.sm-rp--lime .sm-badge { --sm-badge-accent: var(--rp-accent); background: #0d1512; color: #f1f2ec; border-color: transparent; }
.sm-rp--donker { --sm-badge-accent: var(--rp-accent); }
.sm-rp .sm-rp-kop {
  font-family: var(--sm-kop-font); font-size: var(--sm-kop); line-height: var(--sm-kop-regel); letter-spacing: var(--sm-kop-sp);
  font-weight: 600; color: var(--rp-op-band); margin: 0; text-wrap: balance;
}
.sm-rp--lime .sm-rp-licht { text-decoration: underline; text-decoration-thickness: .09em; text-underline-offset: .12em; }
.sm-rp--donker .sm-rp-licht { color: var(--rp-accent); }
.sm-rp-intro { color: var(--rp-op-band-stil); font-size: calc(var(--sm-tekst, 16px) * 1.02); line-height: 1.7; margin: 0; max-width: 460px; justify-self: end; }

/* ---------- de kaart ---------- */
.sm-rp-kaart { background: var(--rp-kaart); color: var(--rp-ink); border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(13, 21, 18, .55); }
.sm-rp--donker .sm-rp-kaart { border: 1px solid var(--rp-lijn); box-shadow: none; }
.sm-rp-balk { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--rp-lijn); }
.sm-rp-label, .sm-rp-rechts { font-family: var(--rp-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rp-ink); white-space: nowrap; }
.sm-rp-label i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff5c8a; margin-right: 10px; vertical-align: 1px; }
.sm-rp-rechts { justify-self: end; color: var(--rp-stil); }
.sm-rp-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.sm-rp-tab {
  font-family: var(--rp-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--rp-stil); cursor: pointer; transition: background .25s ease, color .25s ease;
}
.sm-rp-tab:hover { color: var(--rp-ink); }
.sm-rp-tab.is-actief { background: var(--rp-accent); color: #10210f; }
.sm-rp-tab:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: 2px; }
.sm-rp-paneel[hidden] { display: none; }

/* alles naast elkaar */
.sm-rp-alles { display: grid; grid-template-columns: repeat(var(--rp-n, 4), minmax(0, 1fr)); }
.sm-rp-kol { padding: 30px 26px 26px; display: flex; flex-direction: column; min-width: 0; }
.sm-rp-kol + .sm-rp-kol { border-left: 1px solid var(--rp-lijn); }
.sm-rp-kopje { font-family: var(--rp-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rp-stil); margin: 0 0 22px; line-height: 1.5; }
.sm-rp-kopje b { color: var(--rp-accent); margin-right: 10px; font-weight: 700; }
.sm-rp-voor { font-family: var(--rp-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--rp-zacht); margin: 0 0 6px; }
.sm-rp-voor span { text-transform: uppercase; letter-spacing: .12em; margin-right: 4px; }
.sm-rp-na { margin: 0 0 8px; }
.sm-rp-tel { font-family: "Google Sans", Inter, sans-serif; font-weight: 600; letter-spacing: -.04em; }
.sm-rp-na .sm-rp-tel { font-size: clamp(42px, 4.4vw, 62px); line-height: 1; color: var(--rp-ink); }
.sm-rp-regel { color: var(--rp-stil); font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.sm-rp-pil { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; font-family: var(--rp-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(210, 246, 90, .12); color: var(--rp-accent); margin: 0 0 20px; }
.sm-rp-pijl { width: 20px; height: 20px; border-radius: 50%; background: var(--rp-accent); position: relative; flex: 0 0 auto; }
.sm-rp-pijl::after { content: ""; position: absolute; left: 50%; top: 50%; border: 4.5px solid transparent; border-bottom: 6px solid #10210f; transform: translate(-50%, -75%); }
.sm-rp-pijl--neer::after { border-bottom: 4.5px solid transparent; border-top: 6px solid #10210f; transform: translate(-50%, -25%); }
.sm-rp-bron { font-family: var(--rp-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rp-zacht); margin: auto 0 0; padding-top: 14px; }
.sm-rp-vb { font-style: normal; font-family: var(--rp-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-left: 8px; padding: 1px 6px; border-radius: 6px; background: #ff5c8a; color: #fff; vertical-align: middle; }

/* de staafjes: alleen de twee getallen, geen verloop */
.sm-rp-staaf { display: flex; align-items: flex-end; gap: 14px; height: 92px; padding-bottom: 22px; border-bottom: 1px solid var(--rp-lijn); margin: 4px 0 0; }
.sm-rp-staaf--groot { height: 170px; gap: 22px; margin: 0 0 26px; }
.sm-rp-balkje { position: relative; flex: 1 1 0; height: var(--h); min-height: 3px; border-radius: 8px 8px 3px 3px; transform-origin: bottom; }
.sm-rp-balkje--voor { background: rgba(255, 255, 255, .16); }
.sm-rp-balkje--na { background: var(--rp-accent); box-shadow: 0 0 24px rgba(210, 246, 90, .25); }
.sm-rp-balkje i { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; font-style: normal; font-family: var(--rp-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rp-zacht); }
.sm-rp.speel .sm-rp-balkje { animation: sm-rp-groei 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.sm-rp.speel .sm-rp-balkje--na { animation-delay: .18s; }
@keyframes sm-rp-groei { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* een onderwerp groot */
.sm-rp-los { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.sm-rp-vergelijk { padding: 34px 32px 30px; display: flex; flex-direction: column; }
.sm-rp-uitleg { padding: 34px 32px 30px; border-left: 1px solid var(--rp-lijn); display: flex; flex-direction: column; }
.sm-rp-paar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: start; margin: 0 0 22px; }
.sm-rp-woord { display: inline-block; font-family: var(--rp-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); color: var(--rp-stil); margin: 0 0 14px; }
.sm-rp-woord--na { background: var(--rp-accent); border-color: transparent; color: #10210f; }
.sm-rp-groot { margin: 0 0 10px; }
.sm-rp-groot .sm-rp-tel { font-size: clamp(48px, 6vw, 92px); line-height: .95; color: var(--rp-accent); }
.sm-rp-groot--voor .sm-rp-tel { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .7); }
.sm-rp-naar { width: 36px; height: 2px; margin-top: 80px; background: rgba(255, 255, 255, .3); position: relative; }
.sm-rp-naar::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 8px solid rgba(255, 255, 255, .3); border-right: 0; }
.sm-rp-waarom-kop { font-family: var(--rp-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rp-accent); margin: 0 0 10px; }
.sm-rp-waarom { color: var(--rp-ink); font-size: 17px; line-height: 1.6; margin: 0 0 18px; }

/* ---------- de lopende balk ---------- */
.sm-rp-strook { margin: 28px -32px 0; padding: 18px 0; border-top: 1px solid rgba(13, 21, 18, .14); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sm-rp--donker .sm-rp-strook { border-top-color: var(--rp-lijn); }
.sm-rp-loop { display: flex; width: max-content; animation: sm-rp-loop 48s linear infinite; }
.sm-rp-strook:hover .sm-rp-loop { animation-play-state: paused; }
.sm-rp-reeks { display: flex; flex: 0 0 auto; }
.sm-rp-bericht { font-family: var(--rp-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rp-op-band); white-space: nowrap; padding: 0 28px; }
.sm-rp-bericht i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff5c8a; margin-right: 12px; vertical-align: 1px; }
@keyframes sm-rp-loop { to { transform: translateX(-50%); } }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .sm-rp { padding: 80px 24px 0; }
  .sm-rp-kopblok { grid-template-columns: 1fr; align-items: start; }
  .sm-rp-intro { justify-self: start; }
  .sm-rp-alles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-rp-kol:nth-child(3) { border-left: 0; }
  .sm-rp-kol:nth-child(n+3) { border-top: 1px solid var(--rp-lijn); }
  .sm-rp-balk { grid-template-columns: 1fr; justify-items: start; }
  .sm-rp-rechts { display: none; }
  .sm-rp-tabs { justify-content: flex-start; }
  .sm-rp-strook { margin-left: -24px; margin-right: -24px; }
}

/* ---------- telefoon ---------- */
@media (max-width: 767px) {
  .sm-rp { padding: 64px 16px 0; }
  .sm-rp-kopblok { margin-bottom: 30px; gap: 16px; }
  .sm-rp-kaart { border-radius: 22px; }
  .sm-rp-balk { padding: 14px 14px; gap: 12px; }
  .sm-rp-tabs { gap: 2px; padding: 3px; }
  .sm-rp-tab { padding: 7px 10px; font-size: 11px; letter-spacing: .06em; }
  .sm-rp-alles { grid-template-columns: 1fr; }
  .sm-rp-kol { padding: 24px 18px 22px; }
  .sm-rp-kol + .sm-rp-kol { border-left: 0; border-top: 1px solid var(--rp-lijn); }
  .sm-rp-los { grid-template-columns: 1fr; }
  .sm-rp-vergelijk, .sm-rp-uitleg { padding: 24px 18px; }
  .sm-rp-uitleg { border-left: 0; border-top: 1px solid var(--rp-lijn); }
  .sm-rp-paar { grid-template-columns: 1fr; gap: 6px; }
  .sm-rp-naar { display: none; }
  .sm-rp-groot .sm-rp-tel { font-size: 56px; }
  .sm-rp-staaf--groot { height: 130px; }
  .sm-rp-strook { margin-left: -16px; margin-right: -16px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.sm-rustig):not(.sm-beweeg) .sm-rp-loop { animation: none; }
  html:not(.sm-rustig):not(.sm-beweeg) .sm-rp.speel .sm-rp-balkje { animation: none; }
}