/* Boost Center-landingspagina: Prijzen (S4). Waarden 1-op-1 uit het prototype. Klassen: .lp-pr* (sectie), .lp-rq* (aanvraagvenster). */

.lp-pr [hidden], .lp-rq[hidden], .lp-rq [hidden] { display: none !important; }
.lp-pr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.lp-pr { background: #f3f2f2; padding: clamp(64px, 8vw, 112px) clamp(20px, 4vw, 48px); }
.lp-pr__in { max-width: 1240px; margin: 0 auto; }
.lp-pr__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; }
.lp-pr__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #ec3013; }
.lp-pr__title { font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; letter-spacing: -.042em; line-height: 1.04; margin: 14px 0 0; max-width: 20ch; text-wrap: balance; }
.lp-pr__intro { font-size: 16px; line-height: 1.6; color: #605d5d; margin: 0; max-width: 46ch; text-wrap: pretty; }

/* Zichtbare focus voor alle bedienelementen van de sectie en het venster (het prototype liet de browserstandaard staan). */
.lp-pr button:focus-visible, .lp-rq button:focus-visible { outline: 2px solid #201e1d; outline-offset: 2px; }

/* ===== Balk: bedrijvenkiezer + betaalwissel ===== */
.lp-pr-bar { background: #fff; border-radius: 20px; box-shadow: 0 1px 2px rgba(32,30,29,.05), 0 12px 32px rgba(32,30,29,.07); margin-top: clamp(28px, 4vw, 44px); padding: 20px 24px; display: grid; grid-template-columns: 1fr; gap: 20px 36px; align-items: center; animation: lbRise .7s cubic-bezier(.2,.7,.3,1) 0ms both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
.lp-pr-bar__count { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-width: 0; }
.lp-pr-bar__label { font-size: 14px; font-weight: 700; color: #444141; }
.lp-pr-step { display: flex; align-items: center; gap: 4px; background: #f3f2f2; border-radius: 999px; padding: 4px; }
.lp-pr-step__btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font: inherit; cursor: pointer; border: 0; border-radius: 999px; }
.lp-pr-step__btn--min { background: #fff; color: #201e1d; box-shadow: 0 1px 2px rgba(32,30,29,.08); }
.lp-pr-step__btn--plus { background: #201e1d; color: #fff; }
.lp-pr-step__n { min-width: 48px; text-align: center; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-pr-tiers { flex: 1; min-width: 260px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.lp-pr-tier { display: flex; flex-direction: column; gap: 6px; padding: 0; font: inherit; text-align: left; cursor: pointer; background: transparent; border: 0; }
.lp-pr-tier__bar { display: block; height: 6px; background: #e2dfdf; border-radius: 999px; transition: background .25s ease; }
.lp-pr-tier__range { font-size: 11.5px; font-weight: 700; color: #9b9797; white-space: nowrap; transition: color .25s ease; }
.lp-pr-tier__disc { font-size: 11px; font-weight: 800; color: #9b9797; white-space: nowrap; transition: color .25s ease; }
.lp-pr-tier.is-past .lp-pr-tier__bar { background: #f3b4a6; }
.lp-pr-tier.is-on .lp-pr-tier__bar { background: #ec3013; }
.lp-pr-tier.is-on .lp-pr-tier__range { color: #201e1d; }
.lp-pr-tier.is-on .lp-pr-tier__disc { color: #ec3013; }
.lp-pr-bar__bill { display: flex; align-items: center; gap: 12px; justify-self: start; }
.lp-pr-bill { display: flex; background: #f3f2f2; border-radius: 999px; padding: 4px; }
.lp-pr-bill__btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; border: 0; border-radius: 999px; white-space: nowrap; background: transparent; color: #605d5d; box-shadow: none; transition: background .2s ease, color .2s ease; }
.lp-pr-bill__btn.is-on { background: #ffffff; color: #201e1d; box-shadow: 0 1px 3px rgba(32,30,29,.12); }
.lp-pr-bill__tag { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #12703f; background: #e6f2ea; padding: 3px 8px; border-radius: 999px; }
@media (min-width: 1100px) {
  .lp-pr-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .lp-pr-bar__bill { justify-self: end; }
}
/* Smalle schermen (onder 430px): in het prototype loopt de inhoud van de balk daar uit de kaart (de kolom 1fr groeit mee met de
   betaalwissel, de staffelbalkjes hebben een vaste minimumbreedte en het aantal-veld past niet naast het label). Hier past alles in de kaart:
   de teller zakt onder het label en de wissel zet "2 maanden gratis" onder "Jaarlijks". Vanaf 430px is alles 1-op-1 het prototype. */
@media (max-width: 429.98px) {
  .lp-pr-bar { grid-template-columns: minmax(0, 1fr); }
  .lp-pr-bar__bill { justify-self: stretch; }
  .lp-pr-bill { width: 100%; }
  .lp-pr-bill__btn { flex: 1 1 auto; min-width: 0; justify-content: center; padding: 0 10px; }
  .lp-pr-bill__btn[data-lp-pr-bill="jaar"] { flex-direction: column; justify-content: center; gap: 2px; height: 50px; }
  .lp-pr-tiers { flex: 1 1 260px; min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; }
}
@media (max-width: 359.98px) {
  .lp-pr-tier__range { font-size: 10.5px; }
  .lp-pr-tier__disc { font-size: 10px; }
}

/* ===== Productkaarten ===== */
.lp-pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)); gap: 20px; margin-top: 20px; align-items: stretch; }
.lp-pr-card { --lp-pr-d: 0ms; position: relative; display: flex; flex-direction: column; min-width: 0; background: #ffffff; border: 1.5px solid transparent; border-radius: 20px; padding: 24px; box-shadow: 0 1px 2px rgba(32,30,29,.05), 0 12px 32px rgba(32,30,29,.07); transition: translate .22s ease, box-shadow .22s ease; animation: lbRise .7s cubic-bezier(.2,.7,.3,1) var(--lp-pr-d) both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
/* De opwaartse beweging van de hover staat op "translate" in plaats van "transform": de lbRise-animatie houdt "transform" na afloop vast (fill: both) en zou de hover anders overschrijven. */
.lp-pr-card:hover { translate: 0 -5px; box-shadow: 0 4px 12px rgba(32,30,29,.08), 0 22px 48px rgba(32,30,29,.12); }
.lp-pr-card--ins { --lp-pr-d: 70ms; }
.lp-pr-card--scan { --lp-pr-d: 140ms; }
.lp-pr-card--all { --lp-pr-d: 210ms; background: #fff6f4; border-color: rgba(236,48,19,.45); }
.lp-pr-card__badge { position: absolute; top: -12px; left: 24px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: #ec3013; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.lp-pr-card__top { display: flex; align-items: center; gap: 12px; }
.lp-pr-card__icon { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: #f3f2f2; color: #201e1d; border-radius: 11px; }
.lp-pr-card--brand .lp-pr-card__icon { background: #e3f4ea; color: #12703f; }
.lp-pr-card--ins .lp-pr-card__icon, .lp-pr-card--scan .lp-pr-card__icon { background: #e3eefa; color: #2470c2; }
.lp-pr-card--all .lp-pr-card__icon { background: #ffe0d9; color: #ec3013; }
.lp-pr-card__heading { min-width: 0; }
.lp-pr-card__kicker { display: block; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: #12703f; }
.lp-pr-card--ins .lp-pr-card__kicker, .lp-pr-card--scan .lp-pr-card__kicker { color: #2470c2; }
.lp-pr-card--all .lp-pr-card__kicker { color: #ae1800; }
.lp-pr-card__name { display: block; margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: inherit; }
.lp-pr-card__lede { font-size: 13.5px; line-height: 1.55; color: #605d5d; margin: 12px 0 0; min-height: 42px; text-wrap: pretty; }
.lp-pr-card__price { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eceaea; }
.lp-pr-card--all .lp-pr-card__price { border-top-color: #fbe1db; }
.lp-pr-card__amountrow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lp-pr-card__amount { font-size: 40px; font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.lp-pr-card__strike { font-size: 15px; font-weight: 700; color: #9b9797; text-decoration: line-through; font-variant-numeric: tabular-nums; }
.lp-pr-card__unit { font-size: 12.5px; color: #605d5d; margin-top: 6px; }
.lp-pr-card__total { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 10px 12px; background: #f6f5f5; border-radius: 10px; min-height: 40px; }
.lp-pr-card--all .lp-pr-card__total { background: #ffffff; }
.lp-pr-card__totlabel { font-size: 12.5px; color: #444141; }
.lp-pr-card__totval { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-pr-card__features { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.lp-pr-card__features li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.45; color: #201e1d; }
.lp-pr-card__tick { color: #12703f; display: inline-flex; }
.lp-pr-card--all .lp-pr-card__tick { color: #ec3013; }
.lp-pr-check { flex: none; margin-top: 3px; }
.lp-pr-card__foot { margin-top: auto; padding-top: 22px; }
.lp-pr-card__cta { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; border-radius: 10px; background: #ffffff; color: #201e1d; border: 1.5px solid rgba(32,30,29,.22); transition: background .18s ease, color .18s ease, border-color .18s ease; }
.lp-pr-card--all .lp-pr-card__cta { background: #ec3013; color: #ffffff; border-color: #ec3013; }
.lp-pr-card__cta:hover { background: #201e1d; color: #ffffff; border-color: #201e1d; }

/* ===== Noten ===== */
.lp-pr-notes { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 28px; }
.lp-pr-notes__item { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: #444141; }
.lp-pr-notes__tick { color: #ec3013; display: inline-flex; }

/* ===== Aanvraagvenster ===== */
html.lp-lock { overflow: hidden; }
html.lp-lock body { padding-right: var(--lp-sbw, 0px); }
.lp-rq { position: fixed; inset: 0; z-index: 90; background: rgba(32,30,29,.5); display: flex; align-items: flex-start; justify-content: center; padding: clamp(16px, 5vh, 56px) 16px; overflow-y: auto; overscroll-behavior: contain; animation: lbFade .2s ease both; }
.lp-rq__dlg { width: 100%; max-width: 620px; background: #fff; border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.3); overflow: hidden; outline: none; animation: lbRise .35s cubic-bezier(.2,.7,.3,1) both; }
.lp-rq__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 26px 18px; border-bottom: 1px solid #f1eded; }
.lp-rq__headtxt { min-width: 0; }
.lp-rq__kicker { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ec3013; }
.lp-rq__name { font-size: 22px; font-weight: 800; letter-spacing: -.025em; line-height: inherit; margin: 6px 0 0; }
.lp-rq__close { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; font: inherit; cursor: pointer; background: #f3f2f2; color: #201e1d; border: 0; border-radius: 999px; }
.lp-rq__sum { padding: 20px 26px 0; }
.lp-rq__sumbox { background: #f6f5f5; border-radius: 14px; padding: 16px 18px; }
.lp-rq__lines { margin: 0; padding: 0; }
.lp-rq__line { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 14px; }
.lp-rq__line dt { margin: 0; color: #605d5d; }
.lp-rq__line dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.lp-rq__totalrow { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 8px; padding-top: 12px; border-top: 1px solid #e2dfdf; }
.lp-rq__totallabel { font-size: 14px; font-weight: 800; }
.lp-rq__total { font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lp-rq__form { padding: 20px 26px 26px; display: flex; flex-direction: column; gap: 14px; }
.lp-rq__cols { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .lp-rq__cols { grid-template-columns: 1fr 1fr; } }
.lp-rq__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lp-rq__label { font-size: 13px; font-weight: 700; }
.lp-rq__opt { font-weight: 500; color: #605d5d; }
.lp-rq__input { width: 100%; height: 44px; padding: 0 14px; font: inherit; font-size: 15px; color: #201e1d; background: #fff; border: 1.5px solid #e2dfdf; border-radius: 10px; outline: none; transition: border-color .16s ease, box-shadow .16s ease; }
.lp-rq__area { width: 100%; padding: 11px 14px; font: inherit; font-size: 15px; line-height: 1.5; color: #201e1d; background: #fff; border: 1.5px solid #e2dfdf; border-radius: 10px; outline: none; resize: vertical; }
.lp-rq__input.is-bad, .lp-rq__area.is-bad { border-color: #ec3013; }
.lp-rq__input:focus, .lp-rq__area:focus { border-color: #ec3013; box-shadow: 0 0 0 3px rgba(236,48,19,.14); }
.lp-rq__ferr { font-size: 12.5px; font-weight: 600; color: #ae1800; }
.lp-rq__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.lp-rq__ok { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; font: inherit; text-align: left; cursor: pointer; background: #ffffff; border: 1.5px solid #e2dfdf; border-radius: 12px; transition: background .18s ease, border-color .18s ease; }
.lp-rq__ok.is-bad { background: #fff6f4; border-color: #ec3013; }
.lp-rq__ok.is-on { background: #f2f9f4; border-color: #12703f; }
.lp-rq__box { width: 22px; height: 22px; flex: none; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1.5px solid #c9c5c5; border-radius: 6px; transition: background .16s ease, border-color .16s ease; }
.lp-rq__box svg { opacity: 0; }
.lp-rq__ok.is-on .lp-rq__box { background: #12703f; border-color: #12703f; }
.lp-rq__ok.is-on .lp-rq__box svg { opacity: 1; }
.lp-rq__oktxt { min-width: 0; }
.lp-rq__oktitle { display: block; font-size: 14px; font-weight: 800; color: #201e1d; }
.lp-rq__oktext { display: block; font-size: 13px; line-height: 1.5; color: #605d5d; margin-top: 3px; }
.lp-rq__err { font-size: 13px; font-weight: 600; color: #ae1800; background: #fff2ef; padding: 10px 12px; border-radius: 8px; }
.lp-rq__submit { display: flex; align-items: center; justify-content: center; gap: 9px; height: 48px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; background: #ec3013; color: #fff; border: 0; border-radius: 10px; transition: filter .18s ease, transform .18s ease; }
.lp-rq__submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.lp-rq__submit.is-busy { opacity: .72; cursor: progress; }
.lp-rq__submit.is-busy:hover { filter: none; transform: none; }
.lp-rq__fine { font-size: 12px; line-height: 1.5; color: #605d5d; margin: 0; text-align: center; }

/* Bedankt-weergave */
.lp-rq__sent { padding: 34px 26px 30px; text-align: center; outline: none; animation: lbRise .4s ease-out both; }
.lp-rq__sentbadge { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: #e3f4ea; color: #12703f; border-radius: 999px; animation: lbPop .5s cubic-bezier(.3,1.4,.4,1) both; }
.lp-rq__sentttl { font-size: 22px; font-weight: 800; letter-spacing: -.025em; margin-top: 16px; }
.lp-rq__senttxt { font-size: 15px; line-height: 1.6; color: #605d5d; margin: 8px auto 0; max-width: 42ch; overflow-wrap: anywhere; }
.lp-rq__sentclose { margin-top: 22px; height: 44px; padding: 0 22px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; background: #201e1d; color: #fff; border: 0; border-radius: 999px; }

/* ---------------------------------------------------------------- responsief */
/* Staffelknoppen: een <button> zet in Chrome align-items op flex-start, waardoor de balkjes boven "1 / 2-3 / 4-6 ..." 0 px breed werden (onzichtbaar). */
.lp-pr-tier { align-items: stretch; }
/* iOS Safari zoomt in bij het focussen van een veld met een lettergrootte onder 16 px. */
@media (max-width: 819.98px) { .lp-rq__input, .lp-rq__area { font-size: 16px; } }
/* Aanvraagvenster op een telefoon (ook liggend, 844 x 390): kop met sluitknop blijft bovenin staan terwijl het formulier scrolt (het venster is 950-1300 px hoog). overflow: clip i.p.v. hidden, anders werkt sticky niet. */
@media (max-width: 639.98px), (max-height: 520px) {
  .lp-rq__dlg { overflow: clip; }
  /* top = min de bovenopvulling van .lp-rq (zelfde clamp), zodat de kop tegen de bovenrand van het scherm staat; scroll-padding houdt een gefocust veld onder de kop vandaan. */
  .lp-rq { scroll-padding-top: 96px; }
  .lp-rq__head { position: sticky; top: calc(-1 * clamp(16px, 5vh, 56px)); z-index: 2; background: #fff; }
}
/* Tikdoelen >= 44 px bij een grove aanwijzer. */
@media (pointer: coarse) {
  .lp-rq__close { width: 44px; height: 44px; }
  .lp-pr-step__btn { width: 44px; height: 44px; }
  .lp-pr-tier { min-height: 44px; }
  .lp-pr-bill__btn { position: relative; }   /* Maandelijks/Jaarlijks: 38 px hoog, het aanraakvlak 44 */
  .lp-pr-bill__btn::after { content: ""; position: absolute; inset: -3px 0; }
}