/* Boost Center-landingspagina: rondleiding (#tour). Waarden 1-op-1 uit het prototype; drempel 980px = "narrow" (s.w < 980). */
.lp-tour { --tour-c: #12703f; position: relative; overflow-x: clip; background: #f3f2f2; padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 48px); }
.lp-tour[data-tour-step="0"] { --tour-c: #12703f; }
.lp-tour[data-tour-step="1"] { --tour-c: #ec3013; }
.lp-tour[data-tour-step="2"] { --tour-c: #1f6fbf; }
.lp-tour[data-tour-step="3"] { --tour-c: #1f6fbf; }
.lp-tour[data-tour-step="4"] { --tour-c: #201e1d; }
.lp-tstep--brand { --c: #12703f; } .lp-tstep--bundel { --c: #ec3013; } .lp-tstep--insights { --c: #1f6fbf; } .lp-tstep--groei { --c: #1f6fbf; } .lp-tstep--tickets { --c: #201e1d; }
.lp-tour__wrap { max-width: 1240px; margin: 0 auto; }
.lp-tour__head { max-width: 640px; }
.lp-tour__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #ec3013; }
.lp-tour__h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; letter-spacing: -.042em; line-height: 1.04; margin: 14px 0 0; text-wrap: balance; }
.lp-tour__lede { font-size: 17px; line-height: 1.65; color: #605d5d; margin: 16px 0 0; text-wrap: pretty; }
.lp-tour__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 72px); margin-top: clamp(24px, 3vw, 40px); align-items: start; }

/* Plakkerig scherm */
.lp-tour__stick { display: flex; position: sticky; top: max(96px, calc(36px + 50vh - 250px)); flex-direction: column; gap: 16px; }
.lp-tour__glow { position: absolute; inset: 6% -8% -10% -8%; background: var(--tour-c); opacity: .16; filter: blur(70px); border-radius: 50%; transition: background-color .7s ease; pointer-events: none; }
.lp-tour__meta { position: relative; display: flex; align-items: baseline; gap: 14px; }
.lp-tour__num { font-size: 44px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--tour-c); font-variant-numeric: tabular-nums; transition: color .5s ease; }
.lp-tour__of { font-size: 14px; font-weight: 700; color: #9b9797; }
.lp-tour__label { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--tour-c); transition: color .5s ease; }
.lp-tour__frame { position: relative; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 6px rgba(32,30,29,.06), 0 34px 80px rgba(32,30,29,.16); }
.lp-tour__bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2; background: var(--tour-c); transition: background-color .5s ease; }
.lp-tour__chrome { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f8f7f7; border-bottom: 1px solid #eae7e7; }
.lp-tour__dots { display: flex; gap: 5px; flex: none; }
.lp-tour__dots i { width: 9px; height: 9px; background: #e2dfdf; border-radius: 999px; }
.lp-tour__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-tour__url svg { flex: none; }
.lp-tour__urltext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-tour__urltext strong { color: #201e1d; }
/* Het scherm: een instantie van het component "Boost App" (mock/app.php, landing-app.js); de hoogte volgt uit de breedte (verhouding 2:1) */
.lp-tour__screens { position: relative; }
.lp-tour__nav { position: relative; display: flex; gap: 6px; }
.lp-tour__link, .lp-tour__link:hover { flex: 1; display: flex; flex-direction: column; gap: 7px; text-decoration: none; font-size: 11px; font-weight: 700; color: #9b9797; white-space: nowrap; overflow: hidden; transition: color .3s ease; }
.lp-tour__link.is-active, .lp-tour__link.is-active:hover { color: #201e1d; }
.lp-tour__tick { display: block; height: 4px; border-radius: 999px; background: #d7d3d3; transition: background .3s ease; }
.lp-tour__link.is-active .lp-tour__tick { background: var(--c); }
.lp-tour__link:focus-visible { outline: 2px solid #ec3013; outline-offset: 3px; border-radius: 4px; }

/* Stapkaarten */
.lp-tour__col { min-width: 0; }
.lp-tstep { min-height: min(60vh, 540px); display: flex; flex-direction: column; justify-content: center; padding: 14px 0; }
.lp-tstep__card { padding: 26px 28px; background: transparent; border-radius: 18px; box-shadow: none; border-left: 3px solid transparent; opacity: .38; transform: translateX(-6px); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .3, 1), background .45s ease, box-shadow .45s ease, border-color .45s ease; }
.lp-tstep.is-active .lp-tstep__card { background: #fff; box-shadow: 0 1px 2px rgba(32,30,29,.05), 0 18px 44px rgba(32,30,29,.10); border-left-color: var(--c); opacity: 1; transform: none; }
.lp-tstep__top { display: flex; align-items: center; gap: 12px; }
.lp-tstep__num { font-size: 13px; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
.lp-tstep__rule { width: 28px; height: 2px; background: var(--c); border-radius: 999px; }
.lp-tstep__pillar { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--c); }
.lp-tstep__h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; margin: 14px 0 0; }
.lp-tstep__body { font-size: 16px; line-height: 1.65; color: #444141; margin: 14px 0 0; max-width: 44ch; text-wrap: pretty; }
.lp-tstep__points { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.lp-tstep__points li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: #444141; line-height: 1.45; }
.lp-tstep__points svg { flex: none; margin-top: 2px; color: var(--c); }
.lp-tstep__inline { display: none; }

/* Smal (< 980px): één kolom, geen plakkerig scherm, per stap een inline scherm (eigen instantie van de Boost App, hoogte vanzelf 2:1) */
@media (max-width: 979.98px) {
  .lp-tour__grid { grid-template-columns: 1fr; }
  .lp-tour__stick { display: none; }
  .lp-tstep { min-height: auto; }
  .lp-tstep .lp-tstep__card, .lp-tstep.is-active .lp-tstep__card { padding: 0; background: transparent; box-shadow: none; border-left-color: transparent; opacity: 1; transform: none; }
  .lp-tstep__inline { display: block; margin-top: 24px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 6px rgba(32,30,29,.06), 0 20px 48px rgba(32,30,29,.12); }
}