/* Riftjaw: inhoudspagina's (features, doelgroepen, gidsen, vergelijkingen, bedrijf).
   Alleen tokens uit brand.css. Prefix rjc- voor secties, rjv- voor productvisuals. */

/* ---------- hero: gecentreerd ---------- */
.rj-basichero { padding: var(--rj-sp-9) 0; }
.rj-basichero__copy { max-width: 46rem; margin-inline: auto; text-align: center; align-items: center; display: flex; flex-direction: column; }
.rj-basichero .rj-row { justify-content: center; }
.rj-basic .rj-persona { text-decoration: none; }
.rjc-hnote { color: var(--rj-steel-dim); font-size: var(--rj-fs-sm); }

/* ---------- kruimelpad ---------- */
.rjc-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--rj-fs-sm); color: var(--rj-text-soft); }
.rjc-crumbs a { color: inherit; text-decoration: none; }
.rjc-crumbs a:hover { color: var(--rj-red); }
.rjc-crumbs span[aria-current] { color: var(--rj-ink); font-weight: var(--rj-fw-semi); }
.rjc-crumbs__sep { opacity: .5; }
.rjc-crumbs--dark { color: var(--rj-steel-dim); justify-content: center; }
.rjc-crumbs--dark span[aria-current] { color: #fff; }
.rjc-crumbs--dark a:hover { color: var(--rj-red-bright); }
.rjc-shero .rjc-crumbs--dark { justify-content: flex-start; }

/* ---------- hero: split met visual ---------- */
.rjc-shero { padding: var(--rj-sp-8) 0 var(--rj-sp-9); }
.rjc-shero__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--rj-sp-8); align-items: center; }
.rjc-shero__copy .rj-h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
.rjc-hpoints { display: grid; gap: 8px; margin: 0; padding: 0; }
.rjc-hpoints li { display: flex; gap: 10px; align-items: center; color: var(--rj-steel); }
.rjc-hpoints .rjc-ic { width: 18px; height: 18px; color: var(--rj-red-bright); flex: none; }

/* ---------- hero: foto uit de beeldbank ----------
   Alleen als de werkvloer een foto voor het onderwerp heeft. Bij de split-hero
   staat de foto als vlak rechtsboven achter de productvisual, bij de
   gecentreerde hero als brede strook onder de tekst. */
.rjc-beeld { position: relative; overflow: hidden; border-radius: var(--rj-r-xl); background: var(--rj-obsidian-3); box-shadow: var(--rj-shadow-dark); }
.rjc-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rjc-shero__visual--beeld { position: relative; padding-top: var(--rj-sp-8); }
.rjc-shero__visual--beeld > .rjc-beeld { position: absolute; z-index: 0; top: 0; right: calc(-1 * var(--rj-sp-4)); width: 78%; height: calc(100% - var(--rj-sp-7)); }
.rjc-shero__visual--beeld > .rjv { position: relative; z-index: 1; max-width: 90%; }
.rjc-beeld--breed { max-width: 60rem; margin: var(--rj-sp-8) auto 0; aspect-ratio: 21 / 9; }

/* ---------- hero: artikel ---------- */
.rjc-ahero { padding: var(--rj-sp-8) 0 var(--rj-sp-7); border-bottom: 1px solid var(--rj-line); }
.rjc-ahero__copy { max-width: 52rem; margin-top: var(--rj-sp-5); }
.rjc-ahero__copy .rj-h1 { font-size: clamp(2rem, 3.8vw, 3rem); }
.rjc-ahero__meta { font-size: var(--rj-fs-sm); color: var(--rj-text-soft); }

/* ---------- algemeen ---------- */
.rjc-ic { width: 20px; height: 20px; flex: none; }
.rjc-sec .rj-sec__head { margin-bottom: var(--rj-sp-7); }
.rjc-prose { max-width: 70ch; color: var(--rj-text); font-size: var(--rj-fs-lg); line-height: 1.7; }
.rjc-prose > * + * { margin-top: var(--rj-sp-4); }
.rjc-prose .rj-h2 { margin-bottom: var(--rj-sp-2); }
.rjc-prose a, .rjc-split__p a, .rjc-card p a, .rj-accordion__a a, .rjc-pain a { color: var(--rj-red); text-decoration: underline; text-underline-offset: 3px; }
.rjc-prose code { font-family: var(--rj-font-mono); font-size: .9em; background: var(--rj-bg-mute); padding: 1px 6px; border-radius: 6px; }
.rjc-bullets { padding: 0; margin: var(--rj-sp-4) 0 0; display: grid; gap: 10px; }
.rjc-bullets li { position: relative; padding-left: 22px; }
.rjc-bullets li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 2px; background: var(--rj-red); transform: rotate(45deg); }
.rjc-ticks { padding: 0; margin: 0; display: grid; gap: 12px; }
.rjc-ticks li { display: flex; gap: 12px; align-items: flex-start; }
.rjc-ticks .rjc-ic { width: 20px; height: 20px; color: var(--rj-red); margin-top: 3px; }
.rj-sec--dark .rjc-ticks li { color: var(--rj-steel); }
.rjc-more { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--rj-fw-semi); color: var(--rj-red); text-decoration: none; font-size: var(--rj-fs-sm); }
.rjc-more .rjc-ic { width: 16px; height: 16px; transition: transform var(--rj-t); }
a:hover > .rjc-more .rjc-ic, .rjc-more:hover .rjc-ic { transform: translateX(3px); }

/* ---------- text ---------- */
.rjc-text__body { display: grid; gap: var(--rj-sp-8); }
.rjc-text__body--aside { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.rjc-aside { background: var(--rj-white); border: 1px solid var(--rj-line); border-radius: var(--rj-r-lg); padding: var(--rj-sp-5); position: sticky; top: calc(var(--rj-header-h) + 24px); display: grid; gap: var(--rj-sp-4); box-shadow: var(--rj-shadow-sm); }
.rj-sec--soft .rjc-aside { background: var(--rj-white); }

/* ---------- split ---------- */
.rjc-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rj-sp-8); align-items: center; }
.rjc-split__grid.is-reverse .rjc-split__copy { order: 2; }
.rjc-split__p { font-size: var(--rj-fs-lg); color: var(--rj-text); line-height: 1.7; }
.rj-sec--dark .rjc-split__p { color: var(--rj-steel-dim); }

/* ---------- cards ---------- */
.rjc-card { display: flex; flex-direction: column; gap: var(--rj-sp-3); text-decoration: none; height: 100%; }
.rjc-card .rjc-more { margin-top: auto; padding-top: var(--rj-sp-2); }
.rjc-card__ic { width: 44px; height: 44px; border-radius: var(--rj-r-md); display: grid; place-items: center; background: var(--rj-red-soft); color: var(--rj-red); }
.rjc-card__ic .rjc-ic, .rjc-card__ic .rj-ic { width: 22px; height: 22px; }
.rj-sec--dark .rjc-card { background: var(--rj-obsidian-2); border-color: var(--rj-line-dark); }
.rj-sec--dark .rjc-card .rj-h3 { color: #fff; }
.rj-sec--dark .rjc-card .rj-muted { color: var(--rj-steel-dim); }
.rj-sec--dark .rjc-card__ic { background: rgba(255, 46, 46, .12); color: var(--rj-red-bright); }

/* ---------- steps ---------- */
.rjc-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--rj-sp-5); counter-reset: none; }
.rjc-step { display: flex; gap: var(--rj-sp-4); background: var(--rj-white); border: 1px solid var(--rj-line); border-radius: var(--rj-r-lg); padding: var(--rj-sp-5); position: relative; }
.rjc-step__n { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--rj-grad-red); color: #fff; display: grid; place-items: center; font-weight: var(--rj-fw-bold); }
.rjc-step .rj-h3 { font-size: var(--rj-fs-lg); margin-bottom: 6px; }
.rj-sec--dark .rjc-step { background: var(--rj-obsidian-2); border-color: var(--rj-line-dark); }
.rj-sec--dark .rjc-step .rj-h3 { color: #fff; }

/* ---------- table ---------- */
.rjc-table__wrap { overflow-x: auto; border: 1px solid var(--rj-line); border-radius: var(--rj-r-lg); background: var(--rj-white); box-shadow: var(--rj-shadow-sm); }
.rjc-table { width: 100%; border-collapse: collapse; font-size: var(--rj-fs-md); }
.rjc-table th, .rjc-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--rj-line-soft); vertical-align: top; }
.rjc-table thead th { background: var(--rj-bg-soft); font-size: var(--rj-fs-sm); color: var(--rj-ink); font-weight: var(--rj-fw-bold); position: sticky; top: 0; }
.rjc-table tbody th { font-weight: var(--rj-fw-semi); color: var(--rj-ink); width: 30%; }
.rjc-table td { color: var(--rj-text); }
.rjc-table .is-us { background: rgba(224, 18, 27, .035); }
.rjc-table thead .is-us { color: var(--rj-red); }
.rjc-table tbody tr:last-child th, .rjc-table tbody tr:last-child td { border-bottom: 0; }
.rjc-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.rjc-mark .rjc-ic { width: 16px; height: 16px; }
.rjc-mark--yes { background: var(--rj-success-soft); color: var(--rj-success-ink); }
.rjc-mark--no { background: var(--rj-bg-mute); color: var(--rj-text-soft); }
.rjc-mark--part { background: var(--rj-warning-soft); color: var(--rj-warning-ink); }
.rjc-table__note { margin-top: var(--rj-sp-4); font-size: var(--rj-fs-sm); color: var(--rj-text-soft); max-width: 80ch; }

/* ---------- pains ---------- */
.rjc-pains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rj-sp-5); }
.rjc-pain { border: 1px solid var(--rj-line); border-radius: var(--rj-r-lg); background: var(--rj-white); overflow: hidden; display: flex; flex-direction: column; }
.rjc-pain__q, .rjc-pain__a { display: flex; gap: 12px; padding: var(--rj-sp-4) var(--rj-sp-5); }
.rjc-pain__q { background: var(--rj-bg-soft); color: var(--rj-ink); font-weight: var(--rj-fw-semi); }
.rjc-pain__q .rjc-ic { color: var(--rj-ember-ink); margin-top: 2px; }
.rjc-pain__a { color: var(--rj-text); flex: 1; }
.rjc-pain__a .rjc-ic { color: var(--rj-success); margin-top: 2px; }

/* ---------- stats ---------- */
.rjc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--rj-sp-5); }
.rjc-stat { border-radius: var(--rj-r-lg); padding: var(--rj-sp-5); background: var(--rj-white); border: 1px solid var(--rj-line); display: grid; gap: 6px; }
.rjc-stat__n { font-size: var(--rj-fs-3xl); font-weight: var(--rj-fw-black); color: var(--rj-red); line-height: 1; }
.rjc-stat__l { color: var(--rj-text); font-size: var(--rj-fs-sm); }
.rj-sec--dark .rjc-stat { background: var(--rj-obsidian-2); border-color: var(--rj-line-dark); }
.rj-sec--dark .rjc-stat__n { color: var(--rj-red-bright); }
.rj-sec--dark .rjc-stat__l { color: var(--rj-steel-dim); }

/* ---------- faq ---------- */
.rjc-faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--rj-sp-8); align-items: start; }
.rjc-s-faq .rj-sec__head { margin-bottom: 0; position: sticky; top: calc(var(--rj-header-h) + 24px); }
.rjc-s-faq .rj-accordion__q { text-align: left; }

/* ---------- callout ---------- */
.rjc-callout__box { max-width: 50rem; margin-inline: auto; text-align: center; }
.rjc-s-callout .rj-lead { color: var(--rj-steel-dim); }

/* ---------- article ---------- */
.rjc-article__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--rj-sp-8); align-items: start; }
.rjc-toc { position: sticky; top: calc(var(--rj-header-h) + 24px); border-left: 2px solid var(--rj-line); padding-left: var(--rj-sp-4); }
.rjc-toc__t { font-size: var(--rj-fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--rj-text-soft); font-weight: var(--rj-fw-bold); margin-bottom: var(--rj-sp-3); }
.rjc-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rjc-toc a { color: var(--rj-text); text-decoration: none; font-size: var(--rj-fs-sm); line-height: 1.4; display: block; }
.rjc-toc a:hover { color: var(--rj-red); }
.rjc-article__body { max-width: 72ch; }
.rjc-part { scroll-margin-top: calc(var(--rj-header-h) + 24px); }
.rjc-part + .rjc-part { margin-top: var(--rj-sp-7); padding-top: var(--rj-sp-7); border-top: 1px solid var(--rj-line-soft); }
.rjc-part > * + * { margin-top: var(--rj-sp-4); }
.rjc-part .rj-h2 { font-size: var(--rj-fs-2xl); }
.rjc-note { display: flex; gap: 12px; background: var(--rj-ember-soft); border-radius: var(--rj-r-md); padding: var(--rj-sp-4) var(--rj-sp-5); font-size: var(--rj-fs-md); color: var(--rj-ink); }
.rjc-note .rjc-ic { color: var(--rj-ember-ink); margin-top: 3px; }

/* ---------- links ---------- */
.rjc-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rj-sp-4); }
.rjc-link { display: flex; align-items: center; justify-content: space-between; gap: var(--rj-sp-4); padding: var(--rj-sp-4) var(--rj-sp-5); border: 1px solid var(--rj-line); border-radius: var(--rj-r-md); background: var(--rj-white); text-decoration: none; transition: border-color var(--rj-t), transform var(--rj-t); }
.rjc-link:hover { border-color: var(--rj-red); transform: translateY(-2px); }
.rjc-link span { display: grid; gap: 2px; }
.rjc-link b { color: var(--rj-ink); }
.rjc-link small { color: var(--rj-text-soft); font-size: var(--rj-fs-sm); }
.rjc-link .rjc-ic { color: var(--rj-red); }

/* ---------- changelog ---------- */
.rjc-log { list-style: none; padding: 0; margin: 0; max-width: 60rem; }
.rjc-log__item { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--rj-sp-6); padding: var(--rj-sp-6) 0; border-top: 1px solid var(--rj-line); }
.rjc-log__meta { display: grid; gap: 4px; align-content: start; }
.rjc-log__meta b { color: var(--rj-red); font-size: var(--rj-fs-lg); }
.rjc-log__meta span { color: var(--rj-text-soft); font-size: var(--rj-fs-sm); }

/* ---------- contact ---------- */
.rjc-contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--rj-sp-8); align-items: start; }
.rjc-contact__side .rj-sec__head { margin-bottom: 0; }
.rjc-contact__card { padding: var(--rj-sp-6); }
.rjc-form { display: grid; gap: var(--rj-sp-4); }
.rjc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rj-sp-4); }
.rjc-form .rj-input { width: 100%; }
.rjc-form .rj-btn { justify-self: start; }
.rjc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rjc-form__msg { padding: 12px 16px; border-radius: var(--rj-r-md); background: var(--rj-danger-soft); color: var(--rj-danger); font-size: var(--rj-fs-sm); }
.rjc-form__msg.is-good { background: var(--rj-success-soft); color: var(--rj-success-ink); }

/* ---------- productvisuals ---------- */
.rjv { width: 100%; }
.rjv-win { background: var(--rj-white); border-radius: var(--rj-r-lg); box-shadow: var(--rj-shadow-lg); border: 1px solid var(--rj-line); overflow: hidden; color: var(--rj-text); font-size: 13px; text-align: left; }
.rj-sec--dark .rjv-win { box-shadow: var(--rj-shadow-dark); border-color: var(--rj-line-dark); }
.rjv-win__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--rj-bg-soft); border-bottom: 1px solid var(--rj-line); }
.rjv-win__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--rj-line); }
.rjv-win__bar span:first-child { background: var(--rj-red); }
.rjv-win__bar b { margin-left: 8px; color: var(--rj-ink); font-size: 12px; }
.rjv-win__body { padding: 14px; display: grid; gap: 12px; }
.rjv-t { width: 100%; border-collapse: collapse; }
.rjv-t th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--rj-text-soft); padding: 6px 8px; border-bottom: 1px solid var(--rj-line); font-weight: 600; }
.rjv-t td { padding: 8px; border-bottom: 1px solid var(--rj-line-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.rjv-t td b { color: var(--rj-ink); }
.rjv-t tr:last-child td { border-bottom: 0; }
.rjv-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--rj-bg-mute); color: var(--rj-ink-2); white-space: nowrap; }
.rjv-pill--ok { background: var(--rj-success-soft); color: var(--rj-success-ink); }
.rjv-pill--warn { background: var(--rj-warning-soft); color: var(--rj-warning-ink); }
.rjv-pill--blue { background: #E0EAFF; color: #1D4ED8; }
.rjv-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rjv-search { flex: 1; border: 1px solid var(--rj-line); border-radius: 8px; padding: 7px 10px; color: var(--rj-text-soft); }
.rjv-count b { color: var(--rj-ink); }
.rjv-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--rj-text-soft); font-size: 12px; }
.rjv-btn { display: inline-block; background: var(--rj-red); color: #fff; font-weight: 600; font-size: 12px; padding: 7px 12px; border-radius: 8px; white-space: nowrap; }
.rjv-btn--ghost { background: var(--rj-white); color: var(--rj-ink); border: 1px solid var(--rj-line); }
.rjv-file, .rjv-list__row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--rj-line); border-radius: 10px; padding: 10px; }
.rjv-file > span:nth-child(2), .rjv-list__row > span:nth-child(2) { flex: 1; display: grid; min-width: 0; }
.rjv-file small, .rjv-list__row small { color: var(--rj-text-soft); font-size: 11px; }
.rjv-file b, .rjv-list__row b { color: var(--rj-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rjv-file__ic { flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--rj-success-soft); color: var(--rj-success-ink); display: grid; place-items: center; font-weight: 800; font-size: 10px; }
.rjv-list { display: grid; gap: 8px; }
.rjv-maps { display: grid; gap: 6px; }
.rjv-map { display: grid; grid-template-columns: 1fr 30px 1fr; align-items: center; gap: 6px; }
.rjv-map code { font-family: var(--rj-font-mono); font-size: 11px; background: var(--rj-bg-mute); padding: 4px 8px; border-radius: 6px; }
.rjv-map i { height: 2px; background: var(--rj-red); position: relative; }
.rjv-map i::after { content: ""; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left-color: var(--rj-red); border-right: 0; }
.rjv-map b { color: var(--rj-ink); border: 1px solid var(--rj-line); padding: 3px 8px; border-radius: 6px; }
.rjv-derive { display: grid; gap: 6px; }
.rjv-derive__in { border: 1px solid var(--rj-line); border-radius: 8px; padding: 8px 10px; display: grid; }
.rjv-derive__in small { font-size: 11px; color: var(--rj-text-soft); }
.rjv-derive__in b { color: var(--rj-ink); }
.rjv-derive__arrow { text-align: center; color: var(--rj-red); font-weight: 800; }
.rjv-prefix, .rjv-tags, .rjv-rec__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rjv-chk { border: 1px solid var(--rj-line); border-radius: 6px; padding: 4px 9px 4px 24px; position: relative; font-family: var(--rj-font-mono); font-size: 12px; }
.rjv-chk::before { content: ""; position: absolute; left: 7px; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-radius: 3px; border: 1.5px solid var(--rj-steel-dim); }
.rjv-chk.is-on { border-color: var(--rj-red); color: var(--rj-ink); }
.rjv-chk.is-on::before { background: var(--rj-red); border-color: var(--rj-red); }
.rjv-rules { display: grid; gap: 6px; }
.rjv-rule { display: flex; gap: 8px; align-items: center; border: 1px solid var(--rj-line); border-radius: 8px; padding: 7px 10px; }
.rjv-rule span { color: var(--rj-ink); font-weight: 600; }
.rjv-rule em { font-style: normal; color: var(--rj-text-soft); }
.rjv-rule b { margin-left: auto; background: var(--rj-red-soft); color: var(--rj-red-ink); padding: 2px 8px; border-radius: 6px; }
.rjv-segcount { display: flex; align-items: baseline; gap: 8px; }
.rjv-segcount b { font-size: 28px; color: var(--rj-red); }
.rjv-mail { border: 1px solid var(--rj-line); border-radius: 10px; overflow: hidden; }
.rjv-mail__row { display: flex; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--rj-line-soft); }
.rjv-mail__row small { width: 52px; color: var(--rj-text-soft); }
.rjv-mail__row b { color: var(--rj-ink); font-weight: 600; }
.rjv-mail__text { padding: 10px; line-height: 1.6; }
.rjv-progress { height: 8px; background: var(--rj-bg-mute); border-radius: 999px; overflow: hidden; }
.rjv-progress span { display: block; height: 100%; background: var(--rj-grad-red); }
.rjv-code { background: var(--rj-obsidian); color: #ffb4a8; font-family: var(--rj-font-mono); font-size: 11.5px; padding: 12px; border-radius: 8px; line-height: 1.6; }
.rjv-formprev { display: grid; gap: 8px; border: 1px dashed var(--rj-steel-dim); border-radius: 10px; padding: 14px; }
.rjv-formprev b { color: var(--rj-ink); font-size: 15px; }
.rjv-inp { border: 1px solid var(--rj-line); border-radius: 8px; padding: 8px 10px; color: var(--rj-text-soft); }
.rjv-formprev .rjv-btn { justify-self: start; }
.rjv-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rjv-kpis div { border: 1px solid var(--rj-line); border-radius: 8px; padding: 8px; display: grid; }
.rjv-kpis small { color: var(--rj-text-soft); font-size: 11px; }
.rjv-kpis b { font-size: 18px; color: var(--rj-ink); }
.rjv-bars { height: 120px; display: flex; align-items: flex-end; gap: 8px; padding-top: 6px; border-bottom: 1px solid var(--rj-line); }
.rjv-bars span { flex: 1; background: var(--rj-grad-red); border-radius: 5px 5px 0 0; opacity: .9; }
.rjv-rec { display: grid; gap: 12px; }
.rjv-rec__head { display: flex; align-items: center; gap: 10px; }
.rjv-rec__head > span:nth-child(2) { flex: 1; display: grid; }
.rjv-rec__head b { color: var(--rj-ink); font-size: 15px; }
.rjv-rec__head small { color: var(--rj-text-soft); }
.rjv-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--rj-grad-red); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.rjv-time { list-style: none; padding: 0 0 0 14px; margin: 0; display: grid; gap: 10px; border-left: 2px solid var(--rj-line); }
.rjv-time li { display: grid; position: relative; }
.rjv-time li::before { content: ""; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--rj-red); border: 2px solid #fff; }
.rjv-time b { color: var(--rj-ink); }
.rjv-time small { color: var(--rj-text-soft); }
.rjv-srv { display: grid; gap: 8px; }
.rjv-srv__row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--rj-line); border-radius: 10px; padding: 10px; }
.rjv-srv__row > span:nth-child(2) { flex: 1; display: grid; }
.rjv-srv__row b { color: var(--rj-ink); }
.rjv-srv__row small { color: var(--rj-text-soft); }
.rjv-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rj-success); box-shadow: 0 0 0 4px var(--rj-success-soft); }
.rjv-pipe { display: flex; align-items: center; gap: 6px; }
.rjv-pipe__step { flex: 1; border: 1px solid var(--rj-line); border-radius: 8px; padding: 8px; display: grid; text-align: center; }
.rjv-pipe__step small { color: var(--rj-text-soft); font-size: 11px; }
.rjv-pipe__step b { color: var(--rj-ink); font-size: 16px; }
.rjv-pipe i { width: 12px; height: 2px; background: var(--rj-red); flex: none; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .rjc-shero__grid, .rjc-split__grid, .rjc-faq__grid, .rjc-contact__grid, .rjc-text__body--aside { grid-template-columns: minmax(0, 1fr); gap: var(--rj-sp-6); }
  .rjc-split__grid.is-reverse .rjc-split__copy { order: 0; }
  .rjc-s-faq .rj-sec__head, .rjc-aside { position: static; }
  .rjc-article__grid { grid-template-columns: minmax(0, 1fr); gap: var(--rj-sp-5); }
  .rjc-toc { position: static; border-left: 0; padding: var(--rj-sp-4); background: var(--rj-bg-soft); border-radius: var(--rj-r-md); }
}
@media (max-width: 720px) {
  .rjc-shero { padding: var(--rj-sp-7) 0; }
  .rjc-shero__visual--beeld { padding-top: var(--rj-sp-7); }
  .rjc-shero__visual--beeld > .rjc-beeld { width: 84%; height: calc(100% - var(--rj-sp-6)); }
  .rjc-shero__visual--beeld > .rjv { max-width: 94%; }
  .rjc-beeld--breed { margin-top: var(--rj-sp-6); aspect-ratio: 16 / 9; }
  .rj-basichero { padding: var(--rj-sp-8) 0; }
  .rjc-pains, .rjc-links, .rjc-form__row { grid-template-columns: minmax(0, 1fr); }
  .rjc-log__item { grid-template-columns: minmax(0, 1fr); gap: var(--rj-sp-3); }
  .rjc-table thead { display: none; }
  .rjc-table, .rjc-table tbody, .rjc-table tr, .rjc-table th, .rjc-table td { display: block; width: 100%; }
  .rjc-table tr { border-bottom: 1px solid var(--rj-line); padding: 6px 0; }
  .rjc-table tbody th { width: 100%; border: 0; padding-bottom: 4px; }
  .rjc-table td { border: 0; padding: 6px 18px; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .rjc-table td::before { content: attr(data-label); font-weight: var(--rj-fw-semi); color: var(--rj-text-soft); text-align: left; }
  .rjc-table .is-us { background: transparent; }
  .rjv-kpis { grid-template-columns: repeat(2, 1fr); }
  .rjv-t td { max-width: 120px; }
  .rjc-contact__card { padding: var(--rj-sp-5); }
}