/* Landing /start/, gescoped onder #rc-landing. Tokens: de variabelen van #rcchrome uit assets/css/fable-tokens.css (v2);
   de reservewaarde is de v2-waarde. --lp-blauw-d bestaat niet in v2 (--teal-dark is #14243D) en draagt de 05-waarde #0F1B30 (B06).
   Zonder v2-token met dezelfde rol (B47): de invoerrand #858074 (--line-strong #C9C3B8 haalt 1,9:1, eis 3:1) en het wit #fff van meter,
   invoerveld en knoptekst (v2 kent geen wit-token; --bg is #F8F6F1).
   Basisletter en koppen (1-10, ronde f): de landing erft niets van body of chrome. body heeft in v2 geen letter (16px/normal),
   en fable-chrome.css r. 235 zet #rcchrome h1,h2,h3 op Source Serif 4 600 in --teal met letter-spacing -.005em. Daarom staan
   hieronder op #rc-landing de basisletter (19px/1.7, Atkinson 400, --lp-ink) en op elke h2/h3 familie, gewicht, kleur en spatiëring. */
#rc-landing{font-family:var(--sans,"Atkinson Hyperlegible",system-ui,sans-serif); font-size:19px; line-height:1.7; font-weight:400; --lp-ink:var(--ink,#141821); --lp-muted:var(--muted,#4A4F58); --lp-blauw:var(--teal,#1A2E4D); --lp-blauw-d:#0F1B30; --lp-koper:var(--copper,#B87333); --lp-koper-d:var(--copper-txt,#8E561F); --lp-line:var(--line,#D8D4CE); --lp-deep:var(--bg-alt,#F0EBE0); --lp-sterk:var(--t-sterk,#5C6B47); --lp-redelijk:var(--t-redelijk,#1A2E4D); --lp-wisselend:var(--t-wisselend,#B87333); --lp-beperkt:var(--t-beperkt,#8C8F95); --lp-sterk-txt:var(--t-sterk-txt,#46522F); --lp-beperkt-txt:var(--t-beperkt-txt,#4A4F58); --lp-wisselend-txt:var(--t-wisselend-txt,#8E561F); --lp-fast:120ms; --lp-state:240ms; --lp-ease:cubic-bezier(.4,0,.2,1); --lp-rij:76px; display:block; color:var(--lp-ink);}
#rc-landing *,#rc-landing *::before,#rc-landing *::after{box-sizing:border-box}
#rc-landing .lp-wrap{max-width:1200px; margin:0 auto; padding:0 clamp(16px,4vw,48px)}
#rc-landing :focus-visible{outline:3px solid var(--lp-blauw); outline-offset:3px; border-radius:4px}
#rc-landing .lp-meter-sec{padding:clamp(8px,2vw,24px) 0 clamp(40px,6vw,72px); scroll-margin-top:24px}
#rc-landing .lp-meter-sec .lp-wrap{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px clamp(40px,6vw,96px); align-items:center}
#rc-landing .lp-kies{margin:36px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0; max-width:30rem; border-top:1px solid var(--lp-line)}
#rc-landing .lp-kies a{display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:52px; padding:12px 2px; border-bottom:1px solid var(--lp-line); color:var(--lp-blauw); font-weight:700; text-decoration:none; transition:color var(--lp-fast) var(--lp-ease)}
#rc-landing .lp-kies a::after{content:""; width:9px; height:9px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); flex:none; margin-right:6px}
#rc-landing .lp-kies a:hover{color:var(--lp-koper-d)}
#rc-landing .lp-kies-kop{font-size:15px; color:var(--lp-muted); margin:0 0 10px}
#rc-landing .lp-kies-kop + .lp-kies{margin-top:0}
#rc-landing .lp-meter{background:#fff; border:1px solid var(--lp-line); border-radius:14px; padding:clamp(20px,3vw,36px); box-shadow:0 1px 0 rgba(15,27,48,.04), 0 18px 40px -24px rgba(15,27,48,.28)}
#rc-landing .lp-meter h2{font-family:var(--sans); font-weight:700; font-size:20px; line-height:1.3; letter-spacing:normal; margin:0; color:var(--lp-blauw-d)}
#rc-landing .lp-meter .lp-uitleg{margin:6px 0 0; font-size:15.5px; color:var(--lp-muted); max-width:52ch}
#rc-landing fieldset{border:0; margin:22px 0 0; padding:0; min-width:0}
#rc-landing legend{font-size:14px; font-weight:700; margin:0 0 8px; padding:0}
#rc-landing .lp-seg{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:4px; background:var(--lp-deep); border-radius:10px}
#rc-landing .lp-seg input{position:absolute; opacity:0; width:1px; height:1px}
#rc-landing .lp-seg label{display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px; padding:8px 10px; border-radius:7px; font-size:14.5px; font-weight:700; line-height:1.25; color:var(--lp-blauw); cursor:pointer; transition:background-color var(--lp-fast) var(--lp-ease), color var(--lp-fast) var(--lp-ease)}
#rc-landing .lp-seg label:hover{background:rgba(26,46,77,.07)}
#rc-landing .lp-seg input:checked + label{background:var(--lp-blauw); color:#fff}
#rc-landing .lp-seg input:focus-visible + label{outline:3px solid var(--lp-koper); outline-offset:2px}
#rc-landing .lp-ladderwrap{position:relative; margin:26px 0 0}
#rc-landing .lp-ladder{margin:0; padding:0; list-style:none}
#rc-landing .lp-ladder li{display:grid; grid-template-columns:18px minmax(0,1fr); gap:0 16px; align-content:center; height:var(--lp-rij); border-bottom:1px solid var(--lp-line)}
#rc-landing .lp-ladder .dot,#rc-landing .lp-ladder b{transition:opacity var(--lp-state) var(--lp-ease)}
#rc-landing .lp-ladder li:first-child{border-top:1px solid var(--lp-line)}
#rc-landing .lp-ladder .dot{grid-row:span 2; align-self:center; width:14px; height:14px; border-radius:50%; background:var(--c)}
#rc-landing .lp-ladder b{font-size:clamp(22px,2.2vw,28px); line-height:1.1; letter-spacing:-.01em; color:var(--t)}
#rc-landing .lp-ladder span.m{font-size:14.5px; color:var(--lp-muted); line-height:1.4}
#rc-landing .lp-ladder .buiten{display:none; font-size:13.5px; font-weight:700; color:var(--lp-muted)}
#rc-landing .lp-plafond{position:absolute; left:-8px; right:-8px; top:-2px; height:4px; border-radius:2px; background:var(--lp-blauw); transform:translateY(0); transition:transform var(--lp-state) var(--lp-ease)}
#rc-landing .lp-plafond::after{content:"plafond"; position:absolute; right:8px; top:-26px; font-size:13px; font-weight:700; color:var(--lp-blauw); background:#fff; padding:2px 6px}
#rc-landing .lp-meter:has(#lp-bron-obs:checked) .lp-plafond{transform:translateY(calc(var(--lp-rij) * 2))}
#rc-landing .lp-meter:has(#lp-bron-obs:checked) .lp-ladder li:nth-child(-n+2) .dot, #rc-landing .lp-meter:has(#lp-bron-obs:checked) .lp-ladder li:nth-child(-n+2) b{opacity:.3}
#rc-landing .lp-meter:has(#lp-bron-obs:checked) .lp-ladder li:nth-child(-n+2) .buiten{display:block}
#rc-landing .lp-meter:has(#lp-bron-obs:checked) .lp-ladder li:nth-child(-n+2) span.m{display:none}
#rc-landing .lp-meter:has(#lp-bron-rl:checked) .lp-plafond{background:repeating-linear-gradient(90deg,var(--lp-blauw) 0 10px,transparent 10px 16px)}
#rc-landing .lp-meter:has(#lp-bron-rl:checked) .lp-plafond::after{content:"plafond per aanbeveling"}
#rc-landing .lp-lees p{display:none; margin:0}
#rc-landing .lp-meter:has(#lp-bron-rct:checked) .lp-lees .r-rct, #rc-landing .lp-meter:has(#lp-bron-obs:checked) .lp-lees .r-obs, #rc-landing .lp-meter:has(#lp-bron-rl:checked) .lp-lees .r-rl{display:block}
#rc-landing .lp-lees{margin:20px 0 0; padding:14px 16px; background:var(--lp-deep); border-radius:8px; font-size:15.5px; line-height:1.5; min-height:4.6em}
#rc-landing .lp-lees strong{color:var(--lp-blauw-d)}
#rc-landing .lp-wiss{display:grid; grid-template-columns:18px minmax(0,1fr); gap:0 16px; margin:20px 0 0; font-size:14.5px; color:var(--lp-muted); line-height:1.45}
#rc-landing .lp-wiss .dot{width:14px; height:14px; margin-top:3px; border-radius:50%; box-shadow:inset 0 0 0 2.5px var(--lp-wisselend)}
#rc-landing .lp-wiss b{color:var(--lp-wisselend-txt)}
#rc-landing .lp-meter .lp-meer{display:inline-block; margin-top:16px; font-size:15px; font-weight:700; color:var(--lp-blauw); text-underline-offset:4px}
.rc-kalibratie{--rc-golf:var(--teal,#1A2E4D); --rc-lijn:var(--copper,#B87333); --rc-duur:9s; --rc-hoogte:clamp(64px,8vw,104px); position:relative; max-width:1200px; margin:0 auto; padding:0 clamp(16px,4vw,48px)}
.rc-kalibratie .rc-band{position:relative; height:var(--rc-hoogte); overflow:hidden; pointer-events:none; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.rc-kalibratie .laag{position:absolute; top:0; left:0; height:100%}
.rc-kalibratie .laag-a{width:116.667%; opacity:.28}
.rc-kalibratie .laag-b{width:122.222%; opacity:.14}
.rc-kalibratie .laag svg{display:block; width:100%; height:100%}
.rc-kalibratie path{fill:none; stroke:var(--rc-golf); stroke-width:1.25; vector-effect:non-scaling-stroke}
.rc-kalibratie .ijklijn{position:absolute; left:0; right:0; top:50%; height:1px; background:var(--rc-lijn); opacity:.7}
.rc-kalibratie .punt,.rc-kalibratie .ring{position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%}
.rc-kalibratie .punt{background:var(--rc-lijn)}
.rc-kalibratie .ring{box-shadow:inset 0 0 0 1.25px var(--rc-lijn); opacity:0}
.rc-kalibratie .rc-pauze{position:absolute; right:clamp(16px,4vw,48px); top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:4px 10px; border-radius:999px; background:var(--bg,#F8F6F1); border:1px solid var(--line,#D8D4CE); font:inherit; font-size:13px; color:var(--muted,#4A4F58); cursor:pointer; transition:border-color 120ms cubic-bezier(.4,0,.2,1)}
.rc-kalibratie .rc-pauze:hover{border-color:var(--teal,#1A2E4D)}
.rc-kalibratie .rc-pauze .rc-ico{width:10px; height:10px; box-shadow:inset 3px 0 0 currentColor, inset -3px 0 0 currentColor}
.rc-kalibratie[data-pauze="true"] .rc-ico{box-shadow:none; width:0; height:0; border-left:9px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent}
@keyframes rcSchuifA{to{transform:translate3d(-14.2857%,0,0)}}
@keyframes rcSchuifB{to{transform:translate3d(-18.1818%,0,0)}}
@keyframes rcRing{0%{transform:scale(.8); opacity:.8} 80%,100%{transform:scale(3.4); opacity:0}}
#rc-landing .lp-sec{padding:clamp(64px,9vw,112px) 0}
#rc-landing .lp-sec h2{font-family:var(--sans); font-weight:700; font-size:clamp(28px,3vw,38px); line-height:1.15; letter-spacing:-.02em; margin:0; max-width:20ch; text-wrap:balance; color:var(--lp-blauw-d)}
#rc-landing .lp-sec .lp-intro{color:var(--lp-muted); max-width:58ch; margin:16px 0 0}
#rc-landing .lp-fasen{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px clamp(40px,6vw,96px); align-items:start}
#rc-landing .lp-fasen ol{list-style:none; margin:0; padding:0; counter-reset:fase}
#rc-landing .lp-fasen li{counter-increment:fase; display:grid; grid-template-columns:40px minmax(0,1fr); gap:4px 16px; padding:24px 0; border-top:1px solid var(--lp-line)}
#rc-landing .lp-fasen li:last-child{border-bottom:1px solid var(--lp-line)}
#rc-landing .lp-fasen li::before{content:counter(fase); grid-row:span 2; font-weight:700; font-size:22px; line-height:1.2; color:var(--lp-koper-d)}
#rc-landing .lp-fasen h3{margin:0; font-family:var(--sans); font-weight:700; font-size:19px; line-height:1.35; letter-spacing:normal; color:var(--lp-ink)}
#rc-landing .lp-fasen p{margin:0; color:var(--lp-muted); max-width:52ch}
#rc-landing .lp-fasen a{color:var(--lp-blauw); font-weight:700; text-underline-offset:4px}
#rc-landing .lp-brief{background:var(--lp-deep)}
#rc-landing .lp-brief .lp-wrap{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:32px clamp(40px,6vw,96px); align-items:end}
/* Brevo-blok van het theme (fable_newsletter_form: .nl-blok > .nl-melding? + form.nl-form + .nl-fine). De basis staat in
   fable-chrome.css r. 166-196 (15-09, B3), sitebreed geladen. Ronde 4 (B49): de melding volgt de chrome (r. 177-179, !important:
   wit vlak / blauwe rand bij ok, #FDF1EA / koperrand bij fout); hier geen .nl-melding-regels meer. Wat hieronder staat wint
   op specificiteit van de chrome; de chrome geeft daarnaast .nl-blok de kolom met gap 10px en de uitgeschakelde knop opacity .5. */
#rc-landing .lp-brief .nl-blok{min-width:0}
#rc-landing .lp-brief .nl-form{display:flex; gap:10px}
#rc-landing .lp-brief .nl-form input[type="email"]{flex:1; min-width:0; font:inherit; font-size:16px; min-height:48px; padding:12px 16px; border:1px solid #858074; border-radius:8px; background:#fff; color:var(--lp-ink)}
#rc-landing .lp-brief .nl-form button{font:inherit; font-weight:700; font-size:16px; min-height:48px; padding:12px 22px; border:0; border-radius:8px; background:var(--lp-blauw); color:#fff; cursor:pointer; transition:background-color var(--lp-fast) var(--lp-ease), transform 90ms var(--lp-ease)}
#rc-landing .lp-brief .nl-form button:hover{background:var(--lp-blauw-d)}
#rc-landing .lp-brief .nl-form button:active{transform:scale(.98)}
#rc-landing .lp-brief .nl-form button[disabled]{background:var(--lp-muted); cursor:not-allowed; transform:none}
#rc-landing .lp-brief .nl-fine{display:block; margin-top:10px; color:var(--lp-muted); font-size:14px; line-height:1.5}
#rc-landing .lp-brief .nl-fine a{color:var(--lp-blauw); text-underline-offset:3px}
@media (max-width:900px){
  #rc-landing .lp-meter-sec .lp-wrap{grid-template-columns:1fr}
  #rc-landing .lp-fasen{grid-template-columns:1fr}
  #rc-landing .lp-brief .lp-wrap{grid-template-columns:1fr}
}
@media (max-width:520px){
  #rc-landing .lp-seg{grid-template-columns:1fr}
  #rc-landing{--lp-rij:96px}
}
@media (prefers-reduced-motion:no-preference){
  .rc-kalibratie .laag-a{animation:rcSchuifA var(--rc-duur) linear infinite}
  .rc-kalibratie .laag-b{animation:rcSchuifB calc(var(--rc-duur) * 1.5) linear infinite}
  .rc-kalibratie .ring{animation:rcRing calc(var(--rc-duur) / 3) cubic-bezier(0,0,.2,1) infinite}
  .rc-kalibratie[data-pauze="true"] .laag,.rc-kalibratie[data-pauze="true"] .ring, .rc-kalibratie[data-zicht="uit"] .laag,.rc-kalibratie[data-zicht="uit"] .ring{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .rc-kalibratie .rc-pauze{display:none}
  #rc-landing .lp-plafond,#rc-landing .lp-ladder .dot,#rc-landing .lp-ladder b,#rc-landing .lp-seg label{transition:none}
}
@media (max-width:420px){
  #rc-landing .lp-brief .nl-form{flex-direction:column}
}