/* Add-ons: align price lines */
body.home #addons .card.small{display:flex;flex-direction:column}
body.home #addons .card.small .price-line{margin-top:auto}
/* v7.6.1 ROI label alignment fix v2 (force override) */
body.home #roi .form label{
  display:flex;
  flex-direction:column;
  gap:6px;
}

body.home #roi .form .lbl{
  line-height:1.2;
  min-height:0; /* mobile/default */
}

/* desktop: force equal label height so inputs align */
@media (min-width: 861px){
 body.home #roi .form .lbl{ min-height: 2.2em; }}


body.home #roi .form{
  margin:12px 0 6px;
}
/* === v7.6.2 TYPO + LAYOUT ALIGN (ROI vs Scenarios) === */

/* 1) Maak typografie gelijk: dezelfde basis, labels iets groter */
body.home #roi, body.home #scenarios{
  font-size: 16px;
  line-height: 1.45;
}

body.home #roi h2,body.home  #scenarios h2{
  font-size: 28px;
  line-height: 1.15;
}

/* ROI labels + input tekst: omhoog zodat het matcht met rechts */
body.home #roi .form .lbl{
  font-size: 14px !important;
  line-height: 1.2;
}

body.home #roi input{
  font-size: 16px;
  min-height: 44px;
  padding: 10px 12px;
}

/* 2) Haal overtollige lucht onderin ROI weg */
body.home #roi{
  padding-bottom: 18px;
}

body.home #roi .note,
body.home #roi .formula,
body.home #roi .calc-note{
  margin-top: 12px !important;
}

/* 3) Zorg dat beide panelen 'evenredig' vullen (stretch + flex kolom) */
body.home #roi,body.home  #scenarios{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Als je een container hebt die de knoppen onderin draagt (vaak .cta, .actions, .buttons) */
body.home #scenarios .cta,
body.home #scenarios .actions,
body.home #scenarios .buttons{
  margin-top: auto;
}

body.home #roi .results,
body.home #roi .result,
body.home #roi .outputs{
  margin-top: auto;
}
/* === v7.6.3 ROI + Scenarios: typography parity (targets BOTH cards inside #roi) === */

body.home #roi .grid-2 > .card{
  font-size: 16px !important;
  line-height: 1.45;
}

body.home #roi .grid-2 > .card h3{
  font-size: var(--fs-h3) !important;
  line-height: var(--lh-h3);
}

body.home #roi .grid-2 > .card .muted{
  font-size: 16px !important;
}

body.home #roi .grid-2 > .card .tab{
  font-size: 15px !important;
}

/* ROI labels blijven iets kleiner (is goed), maar nu consistent */
body.home #roi .form .lbl{
  font-size: 14px !important;
  line-height: 1.2;
}

/* Neem net wat lucht weg onderin ROI */
body.home #roi .roi-out{ margin-top: 14px !important; }
body.home #roi .note{ margin-top: 12px !important; }
/* ROI: scenarios is aparte sectie, dus ROI moet full-width */
body.home #roi .grid-2{
  grid-template-columns: 1fr;
}
/* Scenarios — 3 conversion cards (no tabs, no click friction) */
body.home #scenarios .scenario-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2.2vw, 18px);
  margin-top: 14px;
}

@media (min-width: 921px) and (max-width: 1180px){
body.home   #scenarios .scenario-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }}

@media (max-width: 920px){
body.home   #scenarios .scenario-grid{
    grid-template-columns: 1fr;
  }}

body.home #scenarios .scenario-card{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

body.home #scenarios .scenario-head{
  display:flex;
  flex-direction:column;
  gap: 4px;
}

body.home #scenarios .scenario-head h3{
  margin:0;
  font-size:16px;
  letter-spacing:-0.01em;
}

body.home #scenarios .scenario-sub{
  font-size:12px;
  color: var(--muted);
}

body.home #scenarios .scenario-lead{
  margin:0;
  color: var(--muted);
  font-size:14px;
  line-height:1.55;
}

body.home #scenarios .scenario-steps{
  margin: 10px 0 0;
  padding: 0;
  list-style:none;
  display:grid;
  gap: 8px;
  counter-reset: sc;
}

body.home #scenarios .scenario-steps li{
  counter-increment: sc;
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: var(--muted);
  font-size:13px;
  line-height:1.45;
}

body.home #scenarios .scenario-steps li::before{
  content: counter(sc);
  width:20px;
  height:20px;
  border-radius:999px;
  flex:0 0 20px;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:11px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  margin-top:1px;
}

body.home #scenarios .scenario-cta{
  margin-top:auto;
}
/* X2 — Proof visuals (UI2, perf-safe, no CLS) */
/* X4.12 — Proof: 2-column rhythm wrapper (home only) */
@media (min-width: 861px){
  body.home.ui2 #proof .proof-grid{
    display:grid;
    grid-template-columns: 1fr 0.92fr;
    gap: clamp(14px, 2.6vw, 22px);
    align-items:start;
  }
  body.home.ui2 #proof .proof-left{ min-width:0; }
  body.home.ui2 #proof .proof-side{ margin-top: 0; }
}

/* X4.12 — Proof grid placement: keep side pane top-right, tiles full-width below */
@media (min-width: 861px){
  body.home.ui2 #proof .proof-left{ display: contents; }

  body.home.ui2 #proof .proof-wall{
    grid-column: 1;
    grid-row: 1;
  }

  body.home.ui2 #proof .proof-side{
    grid-column: 2;
    grid-row: 1;
  }

  body.home.ui2 #proof .case-tiles{
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body.home.ui2 #proof .visual-tiles{
    grid-column: 1 / -1;
    grid-row: 3;
  }
}


body.home.ui2 #proof .proof-side{
  margin-top: clamp(12px, 2.2vw, 18px);
}

body.home.ui2 #proof .proof-actions{
  margin-top: 8px;
  margin-bottom: 0;
}

body.home.ui2 #proof .proof-actions .btn.primary{
  width: 100%;
  min-height: 56px;
  border-radius: 14px;
  background: var(--ui-accent);
  border-color: transparent;
  color: #061018;
  box-shadow: none;

  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* X4.14 — Spot A: WhatsApp confirmation ticker (CSS-only, CLS=0, no JS) */
body.home.ui2 #proof .wa-ticker{
  --waH: 78px;
  margin-top: 10px;
  height: var(--waH);          /* fixed height => CLS=0 */
  overflow: hidden;
  position: relative;
}

body.home.ui2 #proof .wa-track{
  display: flex;
  flex-direction: column;
  will-change: transform;
}

body.home.ui2 #proof .wa-note{
  height: var(--waH);
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 10px 12px;
  padding-right: 56px;         /* ruimte voor 'now' */
  border-radius: 26px;

  background: rgba(247,248,251,.96);
  border: 1px solid rgba(10,12,16,.14);
  box-shadow: 0 16px 40px rgba(16,24,40,.14);

  color: #0a0c10;
  position: relative;
}

body.home.ui2 #proof .wa-app{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #25D366;         /* herkenning zonder logo */
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
}

body.home.ui2 #proof .wa-body{
  min-width: 0;
  display: grid;
  gap: 2px;
}

body.home.ui2 #proof .wa-title{
  font-weight: 900;
  font-size: 16px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

body.home.ui2 #proof .wa-text{
  font-weight: 800;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(10,12,16,.88);
}

body.home.ui2 #proof .wa-time{
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(10,12,16,.55);
  text-transform: lowercase;
}

/* Motion: only if user allows motion */
@media (prefers-reduced-motion: no-preference){
  body.home.ui2 #proof .wa-track{
    animation: waTicker 24s infinite;
  }
}

/* Hold + quick slide per item (6 items + clone) */
@keyframes waTicker{
  0%      { transform: translateY(0); }
  13.33%  { transform: translateY(0); }
  16.66%  { transform: translateY(calc(-1 * var(--waH))); }

  30%     { transform: translateY(calc(-1 * var(--waH))); }
  33.33%  { transform: translateY(calc(-2 * var(--waH))); }

  46.66%  { transform: translateY(calc(-2 * var(--waH))); }
  50%     { transform: translateY(calc(-3 * var(--waH))); }

  63.33%  { transform: translateY(calc(-3 * var(--waH))); }
  66.66%  { transform: translateY(calc(-4 * var(--waH))); }

  80%     { transform: translateY(calc(-4 * var(--waH))); }
  83.33%  { transform: translateY(calc(-5 * var(--waH))); }

  96.66%  { transform: translateY(calc(-5 * var(--waH))); }
  100%    { transform: translateY(calc(-6 * var(--waH))); } /* clone */
}
body.home.ui2 #proof .wa-ticker + .proof-actions{ margin-top: 10px; }


/* Reduced motion: keep first note only (no animation) */
@media (prefers-reduced-motion: reduce){
  body.home.ui2 #proof .wa-track{ animation: none !important; transform: none !important; }
}

/* Mobile tightening */
@media (max-width: 560px){
  body.home.ui2 #proof .wa-ticker{ --waH: 76px; }
  body.home.ui2 #proof .wa-note{
    padding: 10px 12px;
    padding-right: 58px;
    border-radius: 24px;
  }
  body.home.ui2 #proof .wa-app{
    width: 44px;
    height: 44px;
    border-radius: 16px;
  }
  body.home.ui2 #proof .wa-title{ font-size: 17px; }
}


@media (prefers-reduced-motion: no-preference){
  body.home.ui2 #proof :is(.proof-box.card, .case-tile.card, .visual-tile.card, .proof-side.card):hover{
    transform: none;
  }
}

body.home.ui2 #proof .visual-tiles{
  margin-top: clamp(12px, 2.2vw, 18px);
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2.2vw, 18px);
}

body.home.ui2 #proof .visual-tile{
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
}

body.home.ui2 #proof .visual-tile img{
  display:block;
  width:100%;
  height:auto;
}

body.home.ui2 #proof .visual-meta{
  padding: 14px;
}

/* X4.15 — Proof visual rows (accordion) — less “tiles”, zero collateral */
body.home.ui2 #proof .visual-tiles.is-rows{
  display:flex;                 /* kill the grid tiles */
  flex-direction:column;
  gap:0;                        /* tight list */
  padding:0;
  background: transparent;      /* no card surface */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

body.home.ui2 #proof .visual-tiles.is-rows .visual-row{
  border-top: 1px solid var(--line);
}
body.home.ui2 #proof .visual-tiles.is-rows .visual-row:first-child{
  border-top: 0;
}

body.home.ui2 #proof .visual-tiles.is-rows .visual-row > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px;
  user-select:none;
}
body.home.ui2 #proof .visual-tiles.is-rows .visual-row > summary::-webkit-details-marker{ display:none; }
body.home.ui2 #proof .visual-tiles.is-rows .visual-row > summary::marker{ content:""; }

body.home.ui2 #proof .visual-tiles.is-rows .visual-row > summary:hover{
  background: rgba(0,0,0,.18);
}

body.home.ui2 #proof .visual-tiles.is-rows .visual-row > summary:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--ui-accent) 65%, transparent);
  outline-offset: -2px;
  border-radius: 14px;
}

body.home.ui2 #proof .visual-tiles.is-rows .visual-row__main{ min-width:0; }
body.home.ui2 #proof .visual-tiles.is-rows .visual-row__title{
  font-weight: 900;
  letter-spacing: -0.01em;
}
body.home.ui2 #proof .visual-tiles.is-rows .visual-row__desc{
  margin: 4px 0 0;
  max-width: 68ch;
}

body.home.ui2 #proof .visual-tiles.is-rows .visual-row__meta{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap: 0;
  flex-shrink:0;
}


body.home.ui2 #proof .visual-tiles.is-rows .visual-row__chev{
  width: 18px;
  height: 18px;
  opacity: .72;
  transition: transform .18s ease;
}
@media (prefers-reduced-motion: reduce){
  body.home.ui2 #proof .visual-tiles.is-rows .visual-row__chev{ transition:none; }
}

body.home.ui2 #proof .visual-tiles.is-rows .visual-row[open] > summary{
  background: rgba(0,0,0,.22);
}
body.home.ui2 #proof .visual-tiles.is-rows .visual-row[open] .visual-row__chev{
  transform: rotate(180deg);
}

body.home.ui2 #proof .visual-tiles.is-rows .visual-row__panel{
  margin: 0;
  padding: 0 14px 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
body.home.ui2 #proof .visual-tiles.is-rows .visual-row__panel img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 14px;
  border:0;
  background: transparent;
}
body.home.ui2 #proof .visual-tiles.is-rows .visual-row__panel .visual-meta{
  padding: 12px 0 0;           /* reuse existing .visual-meta spacing */
}

@media (min-width: 861px){
  body.home.ui2 #proof .visual-tiles.is-rows .visual-row > summary{ padding: 16px; }
body.home.ui2 #proof .visual-tiles.is-rows .visual-row__panel{
  margin: 0 16px 16px;
  padding: 16px;
  }
}

/* X4.14 — Spot B: Relay next-step tile (fills 4th visual slot) */
body.home.ui2 #proof .visual-tile.relay-tile .relay-art{
  aspect-ratio: 1200 / 750;   /* same as preview images => no CLS */
  width: 100%;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 16px;
  background:
    radial-gradient(900px 520px at 25% 25%, rgba(110,231,255,.22), transparent 55%),
    radial-gradient(760px 440px at 80% 70%, rgba(183,255,110,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-bottom: 1px solid rgba(10,12,16,.08);
}

body.home.ui2 #proof .visual-tile.relay-tile .relay-badge{
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #061018;
  background: var(--ui-accent);
}

body.home.ui2 #proof .visual-tile.relay-tile .relay-sub{
  font-size: 13px;
  font-weight: 800;
  color: rgba(10,12,16,.68);
}


/* Proof wall + X1 mini-cases (UI2) */
body.home.ui2 #proof .proof-wall{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2.2vw, 18px);
}
/* X4.12 layout fix: proof-left moet niet 3-up zijn */
@media (min-width: 861px){
  body.home.ui2 #proof .proof-left .proof-wall{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px){
  body.home.ui2 #proof .proof-wall{ grid-template-columns: 1fr; }}

body.home.ui2 #proof .proof-logos{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

body.home.ui2 #proof .proof-logo{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  color: var(--muted);
}

body.home.ui2 #proof .proof-metrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.home.ui2 #proof .proof-num{
  font-variant-numeric: tabular-nums;
}

body.home.ui2 #proof .proof-quotes{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 10px;
}

body.home.ui2 #proof .proof-quotes li{
  padding-left: 14px;
  position: relative;
}

body.home.ui2 #proof .proof-quotes li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--line);
}

/* X1 — Mini-case tiles */
body.home.ui2 #proof .case-tiles{
  margin-top: clamp(12px, 2.2vw, 18px);
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.2vw, 18px);
}
@media (min-width: 861px){
  body.home.ui2 #proof .case-tiles{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body.home.ui2 #proof .visual-tiles{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px){
  body.home.ui2 #proof .case-tiles,
  body.home.ui2 #proof .visual-tiles{
    grid-template-columns: 1fr;
  }
}

body.home.ui2 #proof .case-tile{
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  min-height: 180px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

body.home.ui2 #proof .case-tile .case-meta{
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  padding-top: 10px;
}

body.home.ui2 #proof .case-tile:hover{
  transform: none;
}
/* =========================================================
   Step 4 (ROI POP): split input/output + impact panel
   Scope: ROI only (#roi)
   ========================================================= */

body.home #roi .roi-grid{
  align-items: start;
  gap: 18px;
  grid-template-columns: 1.15fr 0.85fr;
}

body.home #roi .roi-input{
  box-shadow: none;
}

body.home #roi .roi-impact{
  background: linear-gradient(180deg, #0b0d12 0%, #0a0c10 100%);
  color: rgba(238,241,255,0.98);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: none;
  padding: 18px;
  
}

body.home #roi .roi-impact .muted,
body.home #roi .roi-impact .kpi-label,
body.home #roi .roi-sub{
  color: rgba(238,241,255,0.70);
}

body.home #roi .roi-kicker{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(238,241,255,0.70);
  margin-bottom: 8px;
}

body.home #roi .roi-big{
  font-weight: 950;
  font-size: 48px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 2px 0 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.home #roi .roi-kpis{
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

body.home #roi .roi-impact .kpi{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

body.home #roi .roi-impact .kpi-value{
  color: rgba(238,241,255,0.98);
}

body.home #roi .roi-actions{
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

body.home #roi .roi-actions .btn{
  width: 100%;
  justify-content: center;
}

/* Mobile: keep it stacked and readable */
@media (max-width: 860px){
body.home   #roi .roi-grid{ grid-template-columns: 1fr; }
body.home  #roi .roi-big{ font-size: 42px; }}
/* =========================================================
   Step 4.1 (ROI polish): CTA punch + KPI calm
   ========================================================= */

body.home #roi .roi-impact{
  border-radius: 18px;
  color: rgba(255,255,255,.82);
}
body.home #roi .roi-impact :is(p, small, .muted, .note, .fineprint){
  color: rgba(255,255,255,.78);
}
body.home #roi .roi-impact ::selection{
  background: rgba(106,226,255,.28);
  color: #fff;
}


body.home #roi .roi-impact .kpi{
  padding: 16px 16px;
  min-height: 56px;
  border-radius: 14px;
}

body.home #roi .roi-impact .kpi-label{
  font-size: 13px;
}

body.home #roi .roi-impact .kpi-value{
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* ROI impact KPI alignment — mobile fix (NO DRIFT) */
@media (max-width: 420px){
body.home   #roi .roi-impact .kpi{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
body.home   #roi .roi-impact .kpi-value{
    white-space: normal;   /* override nowrap on small screens */
    align-self: flex-end;  /* value stays right */
    text-align: right;
  }}

body.home #roi .roi-actions .btn.primary{
  background: var(--ui-accent);
  border-color: transparent;
  color: #061018;
  box-shadow: none;
}

body.home #roi .roi-actions .btn.primary:hover{
  opacity: 0.96;
}

body.home #roi .roi-actions .btn.primary:focus-visible{
  outline: 2px solid rgba(255,255,255,0.55);
  outline-offset: 2px;
}
/* Proof wall — desktop tiles enforcement (NO-DRIFT) */
body.home #proof .proof-wall{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 920px){
 body.home  #proof .proof-wall{ grid-template-columns: 1fr; }}

/* Ensure "card" look wins even if proof-box had earlier overrides */
body.home #proof .proof-box.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:2px solid rgba(37,42,58,.85);
  box-shadow: var(--shadow);
}

/* Quotes: no bullets, clean */
body.home #proof .proof-quotes{
  list-style:none;
  margin:8px 0 0;
  padding:0;
  display:grid;
  gap:8px;
}
body.home #proof .proof-quotes li{
  border-left:2px solid rgba(255,255,255,.10);
  padding-left:10px;
}

/* =========================================================
   X4.5 — Skin Sprint v2 (SlimService home only)
   Goal: volwassen/clean (minder “dark box”) zonder layout changes
   Scope: ONLY body.home.ui2
   ========================================================= */

body.home.ui2{
  /* token-first: lift base + calm depth */
  --bg: #0d1018;
 --shadow: 0 12px 36px rgba(0,0,0,.22);

  /* shared contract tokens, overridden only for SlimService */
  --ui-surface: rgba(255,255,255,.065);
  --ui-surface-2: rgba(255,255,255,.088);
  --ui-border: rgba(255,255,255,.12);
}

/* Header: thinner divider + calmer glass (no layout impact) */
body.home.ui2 .header{
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(12,14,20,.56);
}

/* Cards: slightly brighter surface, calmer border/shadow */
body.home.ui2 .card{
  background: var(--ui-surface);
  border-color: var(--ui-border);
 box-shadow: var(--shadow);
}

/* X4.12 — Proof: dark cards inside light band (contrast + readability) */
body.home.ui2 #proof.band.theme-light :is(.proof-box.card, .case-tile.card, .visual-tile.card, .proof-side.card){
  background: linear-gradient(180deg, #0b0d12 0%, #0a0c10 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
  color: rgba(238,241,255,.98);

  /* fix: “muted/text” tokens binnen dark cards */
  --ui-text: rgba(238,241,255,.98);
  --ui-muted: rgba(238,241,255,.70);
  --ui-border: rgba(255,255,255,.12);
  --text: var(--ui-text);
  --muted: var(--ui-muted);
}

body.home.ui2 #proof.band.theme-light :is(.proof-box.card, .case-tile.card, .visual-tile.card, .proof-side.card) .muted{
  color: var(--ui-muted);
}


/* Micro surfaces: calmer, less “puffy” */
body.home.ui2 .steps li,
body.home.ui2 .bubble{
  border-width: 1px;
  border-color: var(--ui-border);
  background: rgba(255,255,255,.030);
}

/* =========================================================
   X4.8 — Section rhythm (Subtle) — SlimService home only
   Goal: minder "dark wall" via zachte section-surfaces (value only)
   No layout rebuild. No copy changes. Relay/Group safe (no body.home there).
   ========================================================= */

body.home.ui2 main > section.wrap:is(#roi, #proof, #pricing, #faq, #contact){
  background: var(--ui-bg);
  background-image: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0));
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px var(--ui-border);
}

/* Mobile: net iets kleinere radius (geen CLS) */
@media (max-width: 920px){
  body.home.ui2 main > section.wrap:is(#roi, #proof, #pricing, #faq, #contact){
    border-radius: 20px;
  }
}
/* =========================================================
   X4.9 — ROI full-bleed band (100vw) — SlimService home only
   Goal: ROI als 1 blok laten beleven (band strekt full viewport)
   Knob: --roi-band-a (Subtle/Medium/Strong)
   ========================================================= */

body.home.ui2 #roi{
  --roi-band-a: .018; /* Subtle .012 | Medium .018 | Strong .026 */
  position: relative;
  border-radius: 0;     /* band = section, geen "kaart" */
  box-shadow: none;     /* voorkomt dubbel frame (X4.8 inset) */
  background: transparent;
  background-image: none;
}

body.home.ui2 #roi::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;

  /* full-bleed without transform jitter */
  left: calc(50% - 50vw);
  width: 100vw;
  left: calc(50% - 50dvw);
  width: 100dvw;

  background: var(--ui-bg);
  background-image: linear-gradient(180deg, rgba(255,255,255,var(--roi-band-a)), rgba(255,255,255,0));
  box-shadow: inset 0 1px 0 var(--ui-border), inset 0 -1px 0 var(--ui-border);

  pointer-events:none;
  z-index:0;
}

/* ROI is theme-light -> gradient moet donker zijn voor zichtbaar contrast */
body.home.ui2 #roi.theme-light::before{
  background-image: linear-gradient(180deg, rgba(0,0,0,var(--roi-band-a)), rgba(0,0,0,0));
}

body.home.ui2 #roi > *{
  position: relative;
  z-index:1;
}
/* X4.12 — Proof full-bleed band (100vw) — SlimService home only */
body.home.ui2 #proof{
  --proof-band-a: .018;
  position: relative;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  background-image: none;
}

body.home.ui2 #proof::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;

  left: calc(50% - 50vw);
  width: 100vw;
  left: calc(50% - 50dvw);
  width: 100dvw;

  background: var(--ui-bg);
  background-image: linear-gradient(180deg, rgba(0,0,0,var(--proof-band-a)), rgba(0,0,0,0));
  box-shadow: inset 0 1px 0 var(--ui-border), inset 0 -1px 0 var(--ui-border);

  pointer-events:none;
  z-index:0;
}

body.home.ui2 #proof > *{
  position: relative;
  z-index:1;
}
/* X4.13 — Sprint top-contrast after Proof light band (home only) */
body.home.ui2 #sprint{
  position: relative;
}

body.home.ui2 #sprint::before{
  content:"";
  position:absolute;

  left: calc(50% - 50vw);
  width: 100vw;
  left: calc(50% - 50dvw);
  width: 100dvw;

  top: 0;
  height: 22px;
  background: linear-gradient(180deg, rgba(10,12,16,.08), rgba(10,12,16,0));
  pointer-events:none;
  z-index:0;
}

body.home.ui2 #sprint > *{
  position: relative;
  z-index:1;
}

/* =========================================================
   X4.10 — ROI header-left + impact-right (fills empty top-right)
   Desktop only. No HTML edits. No layout changes outside ROI.
   ========================================================= */
@media (min-width: 861px){
  body.home.ui2 #roi{
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    column-gap: 18px;
    row-gap: 18px;
    align-items: start;
  }

  body.home.ui2 #roi .section-head{
    grid-column: 1;
    grid-row: 1;
  }

  body.home.ui2 #roi .roi-grid{
    display: contents; /* flattens children into #roi grid */
  }

  body.home.ui2 #roi .roi-input{
    grid-column: 1;
    grid-row: 2;
    position: relative;
    z-index: 1;
  }

  body.home.ui2 #roi .roi-impact{
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    position: relative;
    z-index: 1;
    gap: 14px;
  }
}
  /* Stretch impact card to match left column height */
  body.home.ui2 #roi .roi-impact{
    height: 100%;
    display: flex;
    flex-direction: column;
  }

body.home.ui2 #roi .roi-actions .btn{
  margin-top: auto;
  width: 100%;
  border-radius: 14px;
  min-height: 60px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
}
/* X4.14 — Ticker tuning (A): quieter than CTA */
body.home.ui2 #proof .wa-ticker{
  margin-top: 8px;
}

body.home.ui2 #proof .wa-note{
  box-shadow: 0 12px 28px rgba(16,24,40,.12);
}

body.home.ui2 #proof .wa-title{
  font-size: 15px;
  font-weight: 800;
}

body.home.ui2 #proof .wa-text{
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 750;
  color: rgba(10,12,16,.82);
}

body.home.ui2 #proof .wa-time{
  font-size: 11px;
  top: 8px;
  right: 12px;
}

/* If you added this earlier, normalize it to match */
body.home.ui2 #proof .wa-ticker + .proof-actions{
  margin-top: 8px;
}

/* Ticker descender fix: voorkomt afsnijden van g/p/y */
body.home.ui2 #proof .wa-title{
  line-height: 1.15;
}

body.home.ui2 #proof .wa-text{
  line-height: 1.25;
  padding-bottom: 1px; /* 1px extra zodat descenders niet in clip vallen */
}
/* HERO — Phone frame + tabs — POLISH v2 (Soft Light, premium, motion-safe) */
body.home.ui2 .hero-card.hero-phone{
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
body.home.ui2 .hero-card.hero-phone::before{ display:none; }

/* Hide radios but keep accessible */
body.home.ui2 .hero-card.hero-phone .hero-tab{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Device */
body.home.ui2 .hero-card.hero-phone .phone{
  position: relative;
  width: 100%;
  max-width: 420px; /* smaller = less tablet vibe */
  margin-left: auto;
  border-radius: 44px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(18,20,26,1), rgba(10,12,16,1));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 64px rgba(0,0,0,.42);
}
/* Subtle edge highlight */
body.home.ui2 .hero-card.hero-phone .phone::before{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 44px;
  pointer-events:none;
  opacity:.28;
  background: linear-gradient(135deg, rgba(255,255,255,.20), transparent 46%);
}

/* Screen (Soft Light, premium) */
body.home.ui2 .hero-card.hero-phone .phone-screen{
  overflow: hidden;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(248,246,242,1), rgba(241,238,232,1));
  border: 1px solid rgba(10,12,16,.10);
  color: rgba(10,12,16,.92);
  display: flex;
  flex-direction: column;
  height: 100%;
  aspect-ratio: 9 / 19.5; /* more phone-like */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
/* FIX B: hero merge — center align + height-driven phone (desktop) */
@media (min-width: 921px){
  /* hero voelt als 1 compositie i.p.v. 2 losse blokken */
  body.home.ui2 .hero{ align-items: center; }

  /* hero-card niet meer "top-stuck" */
  body.home.ui2 .hero-card.hero-phone{
    align-self: center;
    justify-self: end;
  }

  /* hoogte bepaalt nu de phone → geen toren meer */
  body.home.ui2 .hero-card.hero-phone .phone{
    display: inline-block;  /* shrink-wrap */
    width: auto;
    height: clamp(560px, 66vh, 680px);
    max-width: 100%;
  }

  /* screen volgt de hoogte, breedte volgt ratio */
  body.home.ui2 .hero-card.hero-phone .phone-screen{
    height: 100%;
    width: auto;
    aspect-ratio: 10 / 19;
  }
}


/* Top area */
body.home.ui2 .hero-card.hero-phone .phone-top{
  padding: 10px 16px 10px;
  display: grid;
  gap: 10px;
}

/* Status bar */
body.home.ui2 .hero-card.hero-phone .statusbar{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  color: rgba(10,12,16,.62);
}
body.home.ui2 .hero-card.hero-phone .sb-left{ justify-self: start; }
body.home.ui2 .hero-card.hero-phone .sb-notch{
  width: 120px;
  height: 16px;
  border-radius: 999px;
  background: rgba(10,12,16,.72);
  border: 1px solid rgba(255,255,255,.10);
}
body.home.ui2 .hero-card.hero-phone .sb-right{
  justify-self: end;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  opacity: .85;
}
body.home.ui2 .hero-card.hero-phone .sb-signal,
body.home.ui2 .hero-card.hero-phone .sb-wifi{
  width: 10px; height: 10px;
  border-radius: 999px;
  border: none;
  background: rgba(10,12,16,.18);
}
body.home.ui2 .hero-card.hero-phone .sb-batt{
  width: 18px; height: 10px;
  border-radius: 999px;
  border: none;
  background: rgba(10,12,16,.18);
  position: relative;
}
body.home.ui2 .hero-card.hero-phone .sb-batt::after{ display:none; }


/* App bar */
body.home.ui2 .hero-card.hero-phone .appbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 6px 0 2px;
}
body.home.ui2 .hero-card.hero-phone .app-left{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  letter-spacing: .1px;
  color: rgba(10,12,16,.86);
}
body.home.ui2 .hero-card.hero-phone .wa-ico{
  width: 18px; height: 18px;
  opacity: .9;
}
body.home.ui2 .hero-card.hero-phone .app-right{
  font-size: 12px;
  font-weight: 900;
  color: rgba(10,12,16,.52);
}

/* Tabs — A1: text-only (minder clutter, meer premium) */
body.home.ui2 .hero-card.hero-phone .chat-tabs{
  display:flex;
  justify-content:center;
  gap: 12px;
  padding: 0 2px 6px;
  border: none;
  background: transparent;
  border-bottom: 1px solid rgba(10,12,16,.08);
}
body.home.ui2 .hero-card.hero-phone .chat-tab{
  cursor:pointer;
  user-select:none;
  padding: 6px 2px;
  border-radius: 0;
  border: none;
  background: transparent;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12px;
  color: rgba(10,12,16,.56);
  position: relative;
}
body.home.ui2 .hero-card.hero-phone .chat-tab::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-7px;
  height:2px;
  border-radius:999px;
  background: rgba(10,12,16,.82);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 140ms ease, transform 140ms ease;
}
body.home.ui2 .hero-card.hero-phone #heroChatA:checked ~ .phone .chat-tab[for="heroChatA"],
body.home.ui2 .hero-card.hero-phone #heroChatB:checked ~ .phone .chat-tab[for="heroChatB"],
body.home.ui2 .hero-card.hero-phone #heroChatC:checked ~ .phone .chat-tab[for="heroChatC"]{
  color: rgba(10,12,16,.92);
}
body.home.ui2 .hero-card.hero-phone #heroChatA:checked ~ .phone .chat-tab[for="heroChatA"]::after,
body.home.ui2 .hero-card.hero-phone #heroChatB:checked ~ .phone .chat-tab[for="heroChatB"]::after,
body.home.ui2 .hero-card.hero-phone #heroChatC:checked ~ .phone .chat-tab[for="heroChatC"]::after{
  opacity: 1;
  transform: translateY(0);
}


/* Flowline (hero comprehension in 5 sec) */
body.home.ui2 .hero-card.hero-phone .flowline{
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12px;
  color: rgba(10,12,16,.52);
  text-align: center;
  margin-top: -2px;
}
/* Remove flowline — tabs already explain scenarios, frees vertical space */
body.home.ui2 .hero-card.hero-phone .flowline{ display:none; }

/* Panels: fixed area + fade switch (no layout jump) */
body.home.ui2 .hero-card.hero-phone .chat-panels{
  position: relative;
  padding: 12px 22px 12px;
  flex: 1;
  min-height: 0;
  overflow: hidden; /* voorkomt “doorlekken” richting composer */
  --heroComposerSafe: 72px; /* reserveer ruimte voor footer (composer + indicator) */
}
body.home.ui2 .hero-card.hero-phone .chat-panel{
  position: absolute;
  inset: 0 0 var(--heroComposerSafe) 0;
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding-top: 0;
  padding-bottom: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease;
}
body.home.ui2 .hero-card.hero-phone #heroChatA:checked ~ .phone .panel-a,
body.home.ui2 .hero-card.hero-phone #heroChatB:checked ~ .phone .panel-b,
body.home.ui2 .hero-card.hero-phone #heroChatC:checked ~ .phone .panel-c{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Offerte panel: needs a bit more bottom-safe (longer bubbles) */
body.home.ui2 .hero-card.hero-phone #heroChatB:checked ~ .phone .chat-panel{
  inset: 0 0 92px 0;
}

body.home.ui2 .hero-card.hero-phone .chat-meta{
  font-size: 11px;
  font-weight: 900;
  color: rgba(10,12,16,.56);
  margin: 0 2px 2px;
}

/* Bubbles — premium: hairlines, less shadow, more air */
body.home.ui2 .hero-card.hero-phone .bubble{
  border-width: 1px;
  border-color: rgba(10,12,16,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  color: rgba(10,12,16,.92);
  box-shadow: 0 6px 16px rgba(16,24,40,.06);
  font-size: 13px;
  max-width: 84%;
}

body.home.ui2 .hero-card.hero-phone .bubble.ss{
  background: rgba(255,255,255,.88);
}
body.home.ui2 .hero-card.hero-phone .bubble.user{
  border-color: rgba(12,74,58,.14);
  background: rgba(34,197,167,.12); /* muted mint (less cute) */
}

/* prevent edge-kiss inside the screen */
body.home.ui2 .hero-card.hero-phone .bubble.ss{ margin-left: 6px; }
body.home.ui2 .hero-card.hero-phone .bubble.user{ margin-right: 6px; }


/* Footer: composer + home indicator (complete device) */
body.home.ui2 .hero-card.hero-phone .phone-footer{
  position: relative;
  z-index: 2;
  padding: 8px 14px 12px;
  display:grid;
  gap: 10px;
  border-top: 1px solid rgba(10,12,16,.08);
   background: rgba(248,246,242,.96);
}
body.home.ui2 .hero-card.hero-phone .composer{
  display:flex;
  align-items:center;
  gap: 10px;
}
body.home.ui2 .hero-card.hero-phone .composer-pill{
  flex: 1;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(10,12,16,.10);
   background: rgba(255,255,255,1);
  color: rgba(10,12,16,.46);
  font-size: 12px;
  font-weight: 850;
}
body.home.ui2 .hero-card.hero-phone .composer-send{
  width: 34px; height: 34px;
  border-radius: 999px;
  box-sizing: border-box;
  border: 1px solid rgba(34,197,167,.26);
  background: rgba(34,197,167,.18);
  box-shadow: 0 6px 16px rgba(16,24,40,.06);
}
body.home.ui2 .hero-card.hero-phone .home-indicator{
  height: 5px;
  width: 34%;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(10,12,16,.22);
  opacity: .55;
}

/* Typing dots (subtle) */
body.home.ui2 .hero-card.hero-phone .typing{
  display:inline-flex;
  gap: 4px;
  margin-left: 10px;
}
body.home.ui2 .hero-card.hero-phone .typing i{
  width: 4px; height: 4px;
  border-radius: 999px;
  background: rgba(10,12,16,.28);
  opacity: .65;
  animation: heroDot 1.1s infinite ease-in-out;
}
body.home.ui2 .hero-card.hero-phone .typing i:nth-child(2){ animation-delay: .12s; }
body.home.ui2 .hero-card.hero-phone .typing i:nth-child(3){ animation-delay: .24s; }
@keyframes heroDot{
  0%, 100%{ transform: translateY(0); opacity: .55; }
  50%{ transform: translateY(-2px); opacity: .9; }
}

/* Note under phone: one line (hero behavior) */
body.home.ui2 .hero-card.hero-phone .card-note{
  max-width: 420px;
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile: center device */
@media (max-width: 920px){
  body.home.ui2 .hero-card.hero-phone .phone,
  body.home.ui2 .hero-card.hero-phone .card-note{
    margin-inline: auto;
  }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  body.home.ui2 .hero-card.hero-phone .chat-panel{ transition: none; }
  body.home.ui2 .hero-card.hero-phone .typing i{ animation: none; }
}

/* FIX B: mobile centering + hard kill horizontal scroll + more air */
@media (max-width: 520px){
  body.home.ui2 #proof .visual-tiles.is-rows .visual-row__summary{
    gap: 12px;
  }

  /* align hero-copy column to phone width (maakt buttons/tekst/phone 1 geheel) */
  body.home.ui2 section.wrap.hero .hero-copy{
    max-width: 388px;
    margin-inline: auto;
  }

  /* voorkomt horizontale scroll op mobiel door device overflow */
  body.home.ui2 .wrap.hero{ overflow-x: hidden; }

  body.home.ui2 .hero-card.hero-phone .phone{
    box-sizing: border-box;
    width: 100%;
    max-width: 388px;
    margin-inline: auto;
    padding: 10px;
  }

  body.home.ui2 .hero-card.hero-phone .chat-panels{
    padding: 12px 24px;
    --heroComposerSafe: 78px;
  }

  body.home.ui2 .hero-card.hero-phone .bubble{ max-width: 80%; }
  body.home.ui2 .hero-card.hero-phone .bubble.user{ margin-right: 8px; }
  body.home.ui2 .hero-card.hero-phone .bubble.ss{ margin-left: 8px; }

  body.home.ui2 .hero-card.hero-phone .card-note{
    max-width: 388px;
    margin-inline: auto;
  }
}

/* =========================================================
   X5.0 — Pakketten: AF polish (premium, alignment, contrast)
   Goals:
   - CTA’s op gelijke hoogte (pinned bottom)
   - Header (naam + prijs) overal exact gelijk
   - “Meest gekozen” zonder layout shift
   - Minder “kaartjes”-gevoel via typografie/ritme
   - Details zonder chevrons/pijltjes
   ========================================================= */

body.home.ui2 #pakketten{
  position: relative;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* Full-bleed light band (subtiel off-white) */
body.home.ui2 #pakketten::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left: calc(50% - 50vw);
  width: 100vw;
  left: calc(50% - 50dvw);
  width: 100dvw;

  background: #f6f7fb;
  box-shadow: inset 0 1px 0 rgba(10,12,16,.08), inset 0 -1px 0 rgba(10,12,16,.08);
  pointer-events:none;
  z-index:0;
}

body.home.ui2 #pakketten > *{ position: relative; z-index: 1; }
/* PAKKETTEN — dark title bar (contrast + premium anker) */
body.home.ui2 #pakketten .section-head{
  position: relative;
  padding: 22px 0 18px;
  margin: 0 0 18px;
}

body.home.ui2 #pakketten .section-head::before{
  content:"";
  position:absolute;
  left: calc(50% - 50vw);
  width: 100vw;
  left: calc(50% - 50dvw);
  width: 100dvw;
  top: -22px;
  bottom: -10px;
  background: linear-gradient(180deg, rgba(10,12,16,.96), rgba(10,12,16,.88));
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.10);
  z-index: -1;
}

body.home.ui2 #pakketten .section-head h2{
  color: rgba(255,255,255,.96);
  font-size: clamp(34px, 4.2vw, 54px);
  letter-spacing: -0.04em;
  margin: 0 0 6px;
}

body.home.ui2 #pakketten .section-head p.small{
  color: rgba(255,255,255,.72);
  max-width: 72ch;
}

body.home.ui2 #pakketten .section-head p.small .muted{
  color: rgba(255,255,255,.60);
}
body.home.ui2 #pakketten .pricing{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 980px){
  body.home.ui2 #pakketten .pricing{ grid-template-columns: 1fr; }
  body.home.ui2 #pakketten .price.card.highlight{ order: -1; }
}

body.home.ui2 #pakketten .price.card{
  display:flex;
  flex-direction:column;

  background: #ffffff;
  color: rgba(10,12,16,.92);

  border: 2px solid rgba(10,12,16,.12);
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(10,12,16,.10);

  padding: 18px;
}

body.home.ui2 #pakketten .price.card .muted{ color: rgba(10,12,16,.62); }

body.home.ui2 #pakketten .price-head{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;

  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(10,12,16,.10);

  min-height: 56px; /* naam + prijs altijd op exact dezelfde hoogte */
}

body.home.ui2 #pakketten .price-head h3{
  font-weight: 850;
  letter-spacing: -0.02em;
}

body.home.ui2 #pakketten .amount{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.05;
}

body.home.ui2 #pakketten .amount span{
  font-size: 13px;
  font-weight: 650;
  opacity: .65;
}

/* CTA pinned: price-foot duwt naar onder zodat alle buttons gelijk eindigen */
body.home.ui2 #pakketten .price-foot{
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed rgba(10,12,16,.16);
}

body.home.ui2 #pakketten .btn.full{ width: 100%; }

/* “Meest gekozen” = accent bar + label (geen pill/layout shift) */
body.home.ui2 #pakketten .price.card.highlight{
  position: relative;
  border-color: rgba(10,12,16,.22);
  box-shadow: 0 24px 64px rgba(10,12,16,.14);
  transform: translateY(-4px);
}

body.home.ui2 #pakketten .price.card.highlight::after{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height: 6px;
  background: linear-gradient(90deg, rgba(10,12,16,.85), rgba(10,12,16,.55));
}

body.home.ui2 #pakketten .price.card.highlight::before{
  content: attr(data-badge);
  position:absolute;
  top: 14px;
  left: 18px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(10,12,16,.52);
}

/* Inklapbare delen: geen chevrons/pijltjes, alleen tekst */
body.home.ui2 #pakketten .price-more,
body.home.ui2 #pakketten .pricing-terms{
  margin-top: 12px;
}

body.home.ui2 #pakketten .price-more{
  padding-top: 10px;
  border-top: 1px solid rgba(10,12,16,.08);
}

body.home.ui2 #pakketten summary{
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  color: rgba(10,12,16,.78);
}

body.home.ui2 #pakketten summary::-webkit-details-marker{ display:none; }

/* Pricing terms: SaaS-standard (hairline rows, typografie i.p.v. blokken) */
body.home.ui2 #pakketten .pricing-terms{
  display: grid;
  gap: 0;
  max-width: 980px;
  margin: 18px auto 0;
  padding-top: 6px;
  border-top: 1px solid rgba(10,12,16,.10);
}

body.home.ui2 #pakketten .pricing-term{
  border: none;
  border-bottom: 1px solid rgba(10,12,16,.10);
  border-radius: 0;
  padding: 12px 0;
  background: transparent;
}

body.home.ui2 #pakketten .pricing-term summary{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  font-weight: 900;
  color: rgba(10,12,16,.82);
}

body.home.ui2 #pakketten .pricing-term summary::after{
  content:"";
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(10,12,16,.38);
  border-bottom: 2px solid rgba(10,12,16,.38);
  transform: rotate(45deg);
  margin-top: -2px;
  opacity: .55;
}

body.home.ui2 #pakketten .pricing-term[open] summary::after{
  transform: rotate(-135deg);
  margin-top: 2px;
}

body.home.ui2 #pakketten .pricing-term .note{
  padding-top: 8px;
}
/* =========================================================
   X5.1 — Add-ons: premium accordion (minder “kaartjes”, meer control)
   - 1 tegelijk open (JS in index.html)
   - Summary = naam + prijs chips (setup/maand)
   - Body = copy links, prijsbox rechts (desktop)
   ========================================================= */

body.home.ui2 #addons .addons-accordion{
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

/* OPTO_PATCH P0.1 START */
body.home.ui2 #addons details.addon{
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-surface);
  overflow: hidden;
}
/* OPTO_PATCH P0.1 END */

body.home.ui2 #addons details.addon[open]{
  background: var(--ui-surface-2);
  border-color: var(--ui-border);
}

body.home.ui2 #addons summary.addon-summary{
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  font-weight: 900;
}

body.home.ui2 #addons summary.addon-summary::-webkit-details-marker{ display:none; }

body.home.ui2 #addons .addon-title{
  letter-spacing: -0.01em;
}

body.home.ui2 #addons .addon-prices{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

@media (max-width: 520px){
  body.home.ui2 #addons summary.addon-summary{
    grid-template-columns: 1fr;
    align-items: start;
  }
  body.home.ui2 #addons .addon-prices{
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

body.home.ui2 #addons .addon-chip{
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-2);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

body.home.ui2 #addons .addon-chip strong{
  font-weight: 900;
  opacity: .85;
}

body.home.ui2 #addons .addon-body{
  padding: 0 16px 16px;
  display: grid;
  gap: 12px;
}

@media (min-width: 860px){
  body.home.ui2 #addons .addon-body{
    grid-template-columns: 1.35fr 0.65fr;
    align-items: start;
    gap: 14px;
  }
}

body.home.ui2 #addons .addon-copy p{ margin-top: 0; }
body.home.ui2 #addons .addon-copy .ticks{ margin: 0; }
body.home.ui2 #addons .addon-copy .ticks li{ margin: 6px 0; }

body.home.ui2 #addons .addon-pricebox{
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: var(--ui-surface);
  padding: 12px 12px;
  display: grid;
  gap: 8px;
}

body.home.ui2 #addons .addon-pricebox > div{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

body.home.ui2 #addons .addon-pricebox > div span{
  font-size: 13px;
  opacity: .78;
}

body.home.ui2 #addons .addon-pricebox > div strong{
  font-size: 14px;
  font-weight: 900;
}

body.home.ui2 #addons .addon-pricebox .tiny{
  margin-top: 2px;
  opacity: .78;
}