/* Boost Center-landingspagina: Groeiscan (#groeiscan). Het nep-scherm in het browserkader staat in landing-gsdemo.css/-js. Waarden 1-op-1 uit het prototype; drempel 1060px = "s.w < 1060".
   Let op: elementen met animation-timeline: view() gebruiken de dichtstbijzijnde scrollcontainer als scroller. overflow: hidden maakt van
   een voorouder zo'n (nooit scrollende) container, waardoor de animatie niet meer loopt. Daarom staat hier overflow: clip (zelfde
   afknippen, geen scrollcontainer); de eerste regel is de terugval voor browsers die clip niet kennen (daar bestaat view() ook niet). */
.lp-gs { position: relative; background: #fff; color: #201e1d; overflow: hidden; overflow: clip; padding: clamp(64px, 8vw, 112px) clamp(20px, 4vw, 48px); }
.lp-gs__grid { position: relative; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
@media (max-width: 1059.98px) { .lp-gs__grid { grid-template-columns: 1fr; } }

/* Beide kolommen komen met een scroll-gestuurde rise binnen */
.lp-gs__copy, .lp-gs__shot { min-width: 0; animation: lbRise .8s cubic-bezier(.2, .7, .3, 1) both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
.lp-gs__shot { position: relative; }

.lp-gs__eyebrow { display: flex; align-items: center; gap: 10px; }
.lp-gs__dot { width: 8px; height: 8px; background: #ec3013; border-radius: 999px; animation: lbPulse 2.4s ease-in-out infinite; }
.lp-gs__eyebrow-t { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #2470c2; }
.lp-gs__h2 { font-size: clamp(32px, 3.8vw, 52px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; margin: 16px 0 0; text-wrap: balance; }
.lp-gs__lede { font-size: 17px; line-height: 1.65; color: #605d5d; margin: 18px 0 0; max-width: 50ch; text-wrap: pretty; }

/* Drie stappen: elke stap rijst op (vertraging 0 / 90 / 180ms) */
.lp-gs__steps { display: flex; flex-direction: column; gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; }
.lp-gs__step { display: flex; align-items: flex-start; gap: 14px; animation: lbRise .6s cubic-bezier(.2, .7, .3, 1) both; animation-timeline: view(); animation-range: entry 5% cover 35%; animation-delay: 0ms; }
.lp-gs__step--2 { animation-delay: 90ms; }
.lp-gs__step--3 { animation-delay: 180ms; }
.lp-gs__n { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: #e3eefa; color: #2470c2; border-radius: 999px; font-size: 14px; font-weight: 800; }
.lp-gs__txt { min-width: 0; }
.lp-gs__st { display: block; font-size: 16px; font-weight: 800; }
.lp-gs__sb { display: block; font-size: 14.5px; line-height: 1.55; color: #605d5d; margin-top: 3px; }

/* Score per editie (Q3 51, Q4 65, Q1 gestippeld); staafhoogte = (score - 40) / 40, afgerond */
.lp-gs__eds { margin-top: 30px; padding: 18px 20px; background: #f6f5f5; border: 1px solid #eceaea; border-radius: 16px; max-width: 460px; }
.lp-gs__eds-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lp-gs__eds-title { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #605d5d; }
.lp-gs__eds-delta { font-size: 12px; font-weight: 700; color: #12703f; }
.lp-gs__eds-chart { display: flex; align-items: flex-end; gap: 12px; height: 84px; margin-top: 14px; }
.lp-gs__ed { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.lp-gs__ed-v { font-size: 13px; font-weight: 800; color: #201e1d; font-variant-numeric: tabular-nums; }
.lp-gs__ed-bar { display: block; width: 100%; height: 28%; background: #a9c7ea; border: 0; border-radius: 8px 8px 0 0; transform-origin: bottom; animation: lbGrowY .8s cubic-bezier(.3, .85, .3, 1) both; animation-timeline: view(); animation-range: entry 10% cover 45%; animation-delay: 0ms; }
.lp-gs__ed--q4 .lp-gs__ed-bar { height: 63%; background: #2470c2; animation-delay: 120ms; }
.lp-gs__ed--q1 .lp-gs__ed-bar { height: 80%; background: transparent; border: 1.5px dashed #bab6b6; animation-delay: 240ms; }
.lp-gs__ed--q1 .lp-gs__ed-v { color: #9b9797; }
.lp-gs__eds-labels { display: flex; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e2dfdf; }
.lp-gs__ed-l { flex: 1; text-align: center; font-size: 11px; font-weight: 700; color: #605d5d; }

/* Browserkader met het nep-scherm */
.lp-gs__frame { background: #fff; border-radius: 18px; overflow: hidden; overflow: clip; box-shadow: 0 2px 6px rgba(32,30,29,.06), 0 28px 64px rgba(32,30,29,.14); }
.lp-gs__chrome { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f8f7f7; border-bottom: 1px solid #eae7e7; }
.lp-gs__dots { display: flex; gap: 5px; flex: none; }
.lp-gs__dots i { width: 9px; height: 9px; background: #e2dfdf; border-radius: 999px; }
.lp-gs__url { flex: 1; min-width: 0; max-width: 440px; display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px; background: #fff; border-radius: 999px; font-size: 11.5px; color: #605d5d; }
.lp-gs__url svg { flex: none; }
.lp-gs__urltext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-gs__urltext strong { color: #201e1d; }
.lp-gs__screen { position: relative; } /* de hoogte komt van de demo zelf (landing-gsdemo.css: aspect-ratio 2/1) */