/* =========================================================================
 * Conceptlaag: alles met .tbd is een plek voor een feit dat Cargro Solutions
 * nog moet bevestigen (prijzen, verzekering, reviews, reactietijd, adres).
 * Zichtbaar gemarkeerd, zodat niets verzonnen als waar wordt gepresenteerd.
 * Roze in plaats van amber, zodat het niet wegvalt tegen de merkkleur.
 * Livegang = waarde invullen en de klasse tbd weghalen.
 * ====================================================================== */

:root { --tbd: #d6336c; }

.tbd {
  position: relative;
  outline: 1.5px dashed var(--tbd);
  outline-offset: 3px;
  border-radius: 8px;
  background-image: repeating-linear-gradient(135deg, rgba(214, 51, 108, 0.08) 0 6px, transparent 6px 12px);
}
.tbd::after {
  content: "te bevestigen";
  position: absolute; top: -11px; right: -8px; z-index: 5;
  padding: 1px 7px; border-radius: 999px;
  background: var(--tbd); color: #fff;
  font-size: 10px; line-height: 16px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  font-family: "Figtree", system-ui, sans-serif; -webkit-text-stroke: 0; text-transform: none;
  pointer-events: none;
}
.tbd.is-focus { animation: tbd-flash 1.6s ease 2; }
@keyframes tbd-flash { 0%, 100% { outline-color: var(--tbd); } 50% { outline-color: #1a2020; outline-width: 3px; } }

/* De conceptpil: telt de open punten en springt er één voor één naartoe. */
.concept-pill {
  position: fixed; left: 16px; bottom: 16px; z-index: 70;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 14px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(12, 18, 20, 0.88); color: #fff; font-size: 13px; font-weight: 500;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
}
.concept-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--tbd); box-shadow: 0 0 0 4px rgba(214, 51, 108, 0.25); }
.concept-next { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; }
.concept-num { display: none; }
/* Telefoon en tablet: geen pil over de inhoud en de actiebalk, maar een smal
   lipje tegen de rechterrand met alleen het aantal. Tik = volgend punt. */
@media (max-width: 1023px) {
  html .concept-pill {
    left: auto; right: 0; bottom: auto; top: 46%;
    flex-direction: column; justify-content: center; gap: 6px;
    width: 24px; min-height: 52px; padding: 8px 0;
    border-radius: 10px 0 0 10px; font-size: 12px; font-weight: 700;
    background: var(--tbd); box-shadow: -4px 6px 18px -6px rgba(0, 0, 0, 0.45);
  }
  .concept-pill .concept-text, .concept-pill .concept-next { display: none; }
  .concept-pill .concept-num { display: block; line-height: 1; }
  .concept-pill .concept-dot { width: 6px; height: 6px; background: #fff; box-shadow: none; }
}

/* ---------------------------------------------------- badges */

.plan-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.chip.popular { background: var(--ink); color: #fff; }

/* -------------------------------------------------------- belofte */

.promise { margin-top: 16px; display: grid; gap: 12px; }
@media (min-width: 768px) { .promise { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .promise { grid-template-columns: repeat(4, 1fr); } }
.promise-item { display: grid; gap: 6px; align-content: start; border-radius: var(--r-tile); background: var(--paper); border: 1px solid var(--line); padding: 20px; }
.promise-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.promise-item strong { font-weight: 600; letter-spacing: -0.01em; width: fit-content; }
.promise-item > span:last-child { font-size: var(--fs-small); color: var(--muted); }

/* --------------------------------------------------- het verschil */

.versus {
  margin-top: 16px; display: grid; gap: 24px; align-items: center;
  border-radius: var(--r-card); background: var(--ink); color: #fff; padding: 28px;
}
@media (min-width: 900px) { .versus { grid-template-columns: 0.8fr 1.2fr; padding: 40px; } }
.versus .chip { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); }
.versus-head h3 { margin-top: 16px; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.05; letter-spacing: -0.045em; font-weight: 600; }
.versus-head p { margin-top: 12px; color: rgba(255, 255, 255, 0.65); }
.versus-table { display: grid; }
.vrow { display: grid; grid-template-columns: 1fr 120px 124px; align-items: center; min-height: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.vrow:last-child { border-bottom: 0; }
.vrow span:not(:first-child) { text-align: center; }
.vhead { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); min-height: 36px; }
.vno { color: rgba(255, 255, 255, 0.4); font-size: var(--fs-small); }

/* De Cargro-kolom licht op: één doorlopende amber band achter de kolom,
   met elk vinkje als gevulde badge. */
.vrow > span:last-child { align-self: stretch; display: grid; place-items: center; background: rgba(240, 169, 46, 0.1); box-shadow: inset 1px 0 rgba(240, 169, 46, 0.22), inset -1px 0 rgba(240, 169, 46, 0.22); }
.vhead > span:last-child { border-radius: 16px 16px 0 0; box-shadow: inset 1px 0 rgba(240, 169, 46, 0.22), inset -1px 0 rgba(240, 169, 46, 0.22), inset 0 1px rgba(240, 169, 46, 0.22); }
.vrow:last-child > span:last-child { border-radius: 0 0 16px 16px; box-shadow: inset 1px 0 rgba(240, 169, 46, 0.22), inset -1px 0 rgba(240, 169, 46, 0.22), inset 0 -1px rgba(240, 169, 46, 0.22); }
.vhead > .vfocus:last-child { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--amber-glow); }
.vfocus img { width: 18px; height: 18px; border-radius: 999px; }
.vtick {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px;
  background: linear-gradient(140deg, #ffd27a, var(--accent-bright)); color: var(--ink);
  box-shadow: 0 0 0 4px rgba(240, 169, 46, 0.16), 0 6px 18px -4px rgba(240, 169, 46, 0.6);
}
.vtick svg { width: 16px; height: 16px; }
.vrow:not(.vhead) { transition: background-color 0.25s; }
.vrow:not(.vhead):hover { background: rgba(255, 255, 255, 0.04); }
.vrow:not(.vhead):hover .vtick { transform: scale(1.12); }
.vtick { transition: transform 0.3s var(--ease); }
.versus-table.wait .vtick { transform: scale(0); }
.versus-table.in .vrow:nth-child(2) .vtick { --d: 0; } .versus-table.in .vrow:nth-child(3) .vtick { --d: 1; }
.versus-table.in .vrow:nth-child(4) .vtick { --d: 2; } .versus-table.in .vrow:nth-child(5) .vtick { --d: 3; }
.versus-table.in .vrow:nth-child(6) .vtick { --d: 4; } .versus-table.in .vrow:nth-child(7) .vtick { --d: 5; }
.versus-table.in .vtick { animation: tick-pop 0.7s cubic-bezier(0.34, 1.8, 0.64, 1) both; animation-delay: calc(var(--d, 0) * 90ms + 150ms); }
@keyframes tick-pop { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
@media (max-width: 480px) {
  .vrow { grid-template-columns: 1fr 84px 64px; font-size: var(--fs-small); }
  .vhead { font-size: 10px; letter-spacing: 0.04em; }
  .vfocus img { display: none; }
  .vtick { width: 26px; height: 26px; } .vtick svg { width: 14px; height: 14px; }
}

/* ------------------------------------------------------- reviews */

.review-grid { margin-top: 48px; }
.review { display: flex; flex-direction: column; gap: 16px; border-radius: var(--r-card); background: var(--paper); padding: 28px; outline-offset: -1px; }
.review-stars { color: #f5b301; letter-spacing: 2px; font-size: 1.1rem; }
.review blockquote { font-size: var(--fs-h4); line-height: 1.4; letter-spacing: -0.02em; font-weight: 500; color: var(--text); }
.review figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.review-avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--surface); font-weight: 600; color: var(--muted); }
.review figcaption b { display: block; font-weight: 600; color: var(--text); }
.review figcaption small { display: block; font-size: 13px; color: var(--subtle); }

/* ----------------------------------------------------- overig */

.trust-marquee li .tbd { padding: 2px 6px; }
.address .tbd { padding: 0 4px; }