/* ============================================================
   XION LANDINGSPAGINA'S — assets/css/landing-pages.css
   Laadt ná landing-v2.css en gebruikt diens tokens. Hier staat
   alleen wat de losse landingspagina's extra nodig hebben:
   een kop, een vergelijkingstabel, een paar kaartvormen.
   De knop, de FAQ, de band en het slotblok komen uit v2.
   ============================================================ */

/* Eén accentkleur voor de hele pagina. Work is violet, Family magenta;
   de pagina zet alleen body.lp-fam en de rest volgt. Dit is dezelfde
   regel als in de app: alleen het accent verschuift. */
:root{
    --acc:      var(--violet-500);
    --acc-d:    var(--violet-600);
    --acc-100:  var(--violet-100);
    --acc-50:   var(--violet-50);
    --rx:       var(--rx-work);
    --rx-s:     var(--rx-work-s);
}
body.lp-fam{
    --acc:      var(--magenta-500);
    --acc-d:    var(--magenta-600);
    --acc-100:  var(--magenta-100);
    --acc-50:   var(--magenta-50);
    --rx:       var(--rx-fam);
    --rx-s:     var(--rx-fam-s);
}
body.lp-fam .btn-primary{ background:var(--magenta-600); box-shadow:0 10px 26px rgba(211,44,113,.3); }
body.lp-fam .btn-primary:hover{ background:var(--magenta-500); }
body.lp-fam .btn-ghost:hover{ border-color:var(--magenta-500); color:var(--magenta-600); }
body.lp-fam .btn-light{ color:var(--magenta-600); }
body.lp-fam .btn:focus-visible{ outline-color:var(--magenta-500); }
body.lp-fam .faq summary .pm{ color:var(--magenta-600); }
body.lp-fam .kicker{ color:var(--magenta-600); }
body.lp-fam .kicker::before{ background:var(--magenta-500); }
body.lp-fam .text-link{ color:var(--magenta-600); border-bottom-color:var(--magenta-100); }
body.lp-fam .checklist li::before{ color:var(--magenta-500); }

/* Vier kolommen in de voet; de homepage houdt er drie. */
.foot-grid{ grid-template-columns:2fr 1fr 1fr 1.2fr; }

/* ── De kop ─────────────────────────────────────────────────── */
.lp-head{ padding:152px 0 56px; }
.lp-head h1{ font-size:clamp(38px,5vw,62px); font-weight:800; margin:18px 0 18px; max-width:15ch; }
.lp-head .lead{ color:var(--n500); font-size:19.5px; line-height:1.65; max-width:620px; }
.lp-head .lp-knoppen{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:32px; }
.lp-head .lp-knoppen .hint{ font-family:var(--font-m); font-size:12px; color:var(--n400); letter-spacing:.04em; }

/* ── Secties ────────────────────────────────────────────────── */
.lp-sec{ padding:72px 0; }
.lp-sec.tight{ padding:40px 0 72px; }
.lp-sec > .wrap > .lp-kop{ max-width:620px; margin-bottom:44px; }
.lp-kop h2{ font-size:clamp(30px,3.8vw,46px); font-weight:800; margin:16px 0 14px; }
.lp-kop p{ color:var(--n500); font-size:17.5px; }

/* ── Kaartrijen ─────────────────────────────────────────────── */
.lp-rij{ display:grid; gap:20px; }
.lp-rij.k2{ grid-template-columns:repeat(2,1fr); }
.lp-rij.k3{ grid-template-columns:repeat(3,1fr); }
.lp-rij.k4{ grid-template-columns:repeat(4,1fr); }
.lp-kaart{
    background:#fff; border:1px solid var(--n200); border-radius:18px;
    padding:26px 24px; display:flex; flex-direction:column; gap:9px;
}
.lp-kaart .ic{ font-size:30px; color:var(--acc); line-height:1; }
.lp-kaart h3{ font-size:19px; font-weight:700; letter-spacing:-.015em; margin:0; }
.lp-kaart p{ color:var(--n500); font-size:15.5px; line-height:1.7; margin:0; }
.lp-kaart .num{ font-family:var(--font-m); font-size:12px; font-weight:600;
                letter-spacing:.1em; color:var(--acc-d); }
.lp-kaart.uit{ background:var(--acc-50); border-color:var(--acc-100); }

/* ── De vergelijkingstabel ──────────────────────────────────── */
.lp-tabel{ width:100%; border-collapse:collapse; background:#fff;
           border:1px solid var(--n200); border-radius:18px; overflow:hidden; }
.lp-tabel th, .lp-tabel td{ padding:15px 18px; text-align:left; font-size:15.5px;
                            border-top:1px solid var(--n200); vertical-align:top; }
.lp-tabel thead th{ border-top:0; font-family:var(--font-m); font-size:11.5px;
                    letter-spacing:.12em; text-transform:uppercase; color:var(--n500);
                    font-weight:600; background:var(--n100); }
.lp-tabel tbody th{ font-weight:700; color:var(--ink); width:30%; }
.lp-tabel td strong{ color:var(--ink); }
.lp-tabel .ja{ color:var(--jade); font-weight:800; }
.lp-tabel .nee{ color:var(--n400); }
.lp-tabel col.mij{ background:var(--acc-50); }
.lp-tabel thead th.mij{ background:var(--acc-100); color:var(--acc-d); }
.lp-uitleg{ font-size:13.5px; color:var(--n400); margin-top:14px; max-width:760px; }

/* ── Prijsstrook ────────────────────────────────────────────── */
.lp-prijs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.lp-plan{ background:#fff; border:1px solid var(--n200); border-radius:20px; padding:28px 26px; }
.lp-plan.aan{ border-color:var(--acc); box-shadow:var(--sh-md); }
.lp-plan .pn{ font-family:var(--font-m); font-size:11.5px; letter-spacing:.14em;
              text-transform:uppercase; color:var(--acc-d); }
.lp-plan .pp{ font-size:38px; font-weight:800; font-family:var(--font-d);
              color:var(--ink); letter-spacing:-.03em; margin:10px 0 2px; }
.lp-plan .pp small{ font-size:15px; font-weight:600; color:var(--n500); letter-spacing:0; }
.lp-plan .pw{ font-size:14px; color:var(--n500); margin-bottom:16px; }
.lp-plan ul{ list-style:none; display:grid; gap:9px; margin:0 0 20px; padding:0; }
.lp-plan li{ font-size:14.5px; color:var(--n600); display:flex; gap:9px; }
.lp-plan li::before{ content:"✓"; color:var(--jade); font-weight:800; flex:none; }

/* ── Schermafbeelding ───────────────────────────────────────── */
.lp-shot-wrap{ margin:0 0 8px; }
.lp-shot{ background:#fff; border:1px solid var(--n200); border-radius:var(--rx);
          box-shadow:var(--sh-lg); overflow:hidden; }
.lp-shot img{ width:100%; height:auto; display:block; }
.lp-bijschrift{ font-family:var(--font-m); font-size:12px; color:var(--n400);
                margin-top:14px; letter-spacing:.04em; }

/* ── Genummerde stappen ─────────────────────────────────────── */
.lp-stappen{ counter-reset:stap; display:grid; gap:2px; }
.lp-stap{ display:grid; grid-template-columns:56px 1fr; gap:22px;
          padding:26px 0; border-top:1px solid var(--n200); }
.lp-stap:last-child{ border-bottom:1px solid var(--n200); }
.lp-stap .n{ font-family:var(--font-m); font-size:13px; font-weight:600; color:var(--acc-d);
             padding-top:4px; }
.lp-stap h3{ font-size:21px; font-weight:700; margin:0 0 6px; letter-spacing:-.015em; }
.lp-stap p{ color:var(--n500); font-size:16px; margin:0; max-width:640px; }

/* ── Citaat / uitgelicht ────────────────────────────────────── */
.lp-quote{ background:var(--acc-50); border-radius:var(--rx);
           padding:44px clamp(26px,4vw,56px); }
.lp-quote blockquote{ font-family:var(--font-d); font-size:clamp(22px,2.7vw,32px);
                      font-weight:700; line-height:1.34; color:var(--ink);
                      letter-spacing:-.02em; margin:0; max-width:820px; }
.lp-quote cite{ display:block; font-style:normal; font-size:14.5px;
                color:var(--n500); margin-top:18px; }

/* ── Links naar de andere pagina's ──────────────────────────── */
.lp-ook{ display:flex; flex-wrap:wrap; gap:10px; }
.lp-ook a{ background:#fff; border:1px solid var(--n200); border-radius:999px;
           padding:9px 17px; font-size:14.5px; font-weight:600; color:var(--n600);
           text-decoration:none; }
.lp-ook a:hover{ border-color:var(--acc); color:var(--acc-d); }

@media (max-width:980px){
    .lp-rij.k4{ grid-template-columns:repeat(2,1fr); }
    .lp-rij.k3{ grid-template-columns:1fr; }
    .lp-prijs{ grid-template-columns:1fr; }
}
@media (max-width:760px){
    .lp-head{ padding-top:118px; }
    .lp-rij.k2, .lp-rij.k4{ grid-template-columns:1fr; }
    .lp-stap{ grid-template-columns:1fr; gap:6px; }
    .lp-tabel th, .lp-tabel td{ padding:12px 13px; font-size:14.5px; }
    .lp-tabel tbody th{ width:auto; }
}

/* "op aanvraag" achter een kopje: voor iets dat bestaat maar nog niet voor
   iedereen openstaat. Bewust zichtbaar en niet weggemoffeld, want een belofte
   die de bezoeker niet kan innen kost je meer dan hij oplevert. */
.lp-nog {
    font-family: var(--font-m); font-size: 10.5px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--amber); background: #FFF6E5;
    padding: 2px 7px; border-radius: 999px;
    margin-left: 6px; vertical-align: middle; white-space: nowrap;
}