/* Websitepagina. Bouwt op styles.css; alleen wat deze pagina extra nodig heeft. */

.ws-hero { padding-bottom: clamp(56px, 7vw, 96px); }
.ws-hero h1 { max-width: 18ch; }

/* ---------- prijzen: twee sporen ----------
   Variant kopen (standaard): koop groot, lease klein eronder.
   Variant maand (html.v-maand): lease groot en bovenaan, koop klein eronder. */
.prijs-sec { padding-top: 0; }
.prijzen { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); }
.v-maand .spoor-lease { order: -1; }

.spoor-kop { max-width: 800px; display: grid; gap: var(--s3); }
.pakketten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pakket h3 { font-size: 1.15rem; }
.prijs { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.bedrag { font-family: var(--f-cijfer); line-height: 1; letter-spacing: -0.01em; }
.vanaf, .per { color: var(--stil); font-size: .95rem; }
.omvang { font-weight: 600; }
.spoor-noot { color: var(--stil); font-size: .92rem; max-width: 72ch; }

/* groot: kaarten met alles erop */
:is(html:not(.v-maand) .spoor-koop, .v-maand .spoor-lease) .kop-klein { display: none; }
:is(html:not(.v-maand) .spoor-koop, .v-maand .spoor-lease) .spoor-kop { margin-bottom: clamp(32px, 4vw, 48px); }
:is(html:not(.v-maand) .spoor-koop, .v-maand .spoor-lease) .pakketten { gap: var(--s4); }
/* subgrid: naam, prijs, omvang en kenmerken staan in alle drie de kaarten op dezelfde hoogte */
:is(html:not(.v-maand) .spoor-koop, .v-maand .spoor-lease) .pakket {
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--s3); align-content: start;
  background: var(--vlak); border-radius: var(--r3); padding: clamp(24px, 3vw, 36px); box-shadow: var(--schaduw);
}
:is(html:not(.v-maand) .spoor-koop, .v-maand .spoor-lease) .bedrag { font-size: clamp(3rem, 5vw, 4rem); }
:is(html:not(.v-maand) .spoor-koop, .v-maand .spoor-lease) .spoor-noot { margin-top: var(--s4); }
.kenmerken { list-style: none; margin: var(--s2) 0 0; padding: var(--s3) 0 0; border-top: 1px solid var(--lijn); display: grid; gap: 10px; color: var(--stil); }
.kenmerken li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.kenmerken li::before { content: ""; width: 7px; height: 7px; margin-top: .6em; border-radius: 50%; background: var(--dawn); }

/* klein: één regel per pakket, zonder kenmerken */
:is(html:not(.v-maand) .spoor-lease, .v-maand .spoor-koop) { border-top: 1px solid var(--lijn); padding-top: clamp(32px, 4vw, 48px); }
:is(html:not(.v-maand) .spoor-lease, .v-maand .spoor-koop) .kop-groot { display: none; }
:is(html:not(.v-maand) .spoor-lease, .v-maand .spoor-koop) .kop-klein { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.025em; line-height: 1.15; }
:is(html:not(.v-maand) .spoor-lease, .v-maand .spoor-koop) .spoor-kop { margin-bottom: var(--s4); }
:is(html:not(.v-maand) .spoor-lease, .v-maand .spoor-koop) .pakketten { gap: var(--s4); }
:is(html:not(.v-maand) .spoor-lease, .v-maand .spoor-koop) .pakket { display: grid; gap: 4px; align-content: start; }
:is(html:not(.v-maand) .spoor-lease, .v-maand .spoor-koop) .pakket h3 { font-size: 1rem; color: var(--stil); font-weight: 600; }
:is(html:not(.v-maand) .spoor-lease, .v-maand .spoor-koop) .bedrag { font-size: 2.2rem; }
:is(html:not(.v-maand) .spoor-lease, .v-maand .spoor-koop) .omvang { font-weight: 400; color: var(--stil); font-size: .95rem; }
:is(html:not(.v-maand) .spoor-lease, .v-maand .spoor-koop) .kenmerken { display: none; }
:is(html:not(.v-maand) .spoor-lease, .v-maand .spoor-koop) .spoor-noot { margin-top: var(--s4); }

@media (max-width: 860px) {
  :is(html:not(.v-maand) .spoor-koop, .v-maand .spoor-lease) .pakketten { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :is(html:not(.v-maand) .spoor-lease, .v-maand .spoor-koop) .pakketten { grid-template-columns: 1fr; gap: var(--s3); }
}

/* ---------- werkwijze in drie stappen ---------- */
.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .steps-3 { grid-template-columns: 1fr; } }

/* ---------- brug naar de bots ---------- */
.brug-sec { padding-block: clamp(56px, 7vw, 88px); }
.brug { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s4); align-items: center; }
.brug .orb-dot { font-size: 2.4rem; }
.brug p { color: var(--stil); margin-top: 6px; max-width: 60ch; }
@media (max-width: 700px) { .brug { grid-template-columns: 1fr; justify-items: start; } }