/* PingWeb · Website in een dag (landingspagina). Bouwt voort op style.css; alleen wd-klassen. */

/* Iets compacter dan de homepage */
:root { --section: clamp(3.5rem, 7.5vw, 6rem); }
.section-head { max-width: none; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.section-head p { max-width: 64rem; }
.process__cta { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* Hero ------------------------------------------------------------------- */
/* Kop altijd in twee even lange regels: elke regel past precies in de kolom (9cqi ≈ breedste regel) */
.wd-hero .hero__copy { container-type: inline-size; }
.wd-hero .hero__title { font-size: clamp(2.2rem, 10vw, 2.8rem); }
.wd-hero .hero__title .wd-line { display: block; text-wrap: balance; }
@media (min-width: 560px) {
  .wd-hero .hero__title { font-size: clamp(1.9rem, 4.75vw, 4rem); font-size: clamp(1.9rem, 9cqi, 4rem); }
  .wd-hero .hero__title .wd-line { white-space: nowrap; }
}

.wd-price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem;
  margin: 1.6rem 0 0; color: var(--on-dark); font-size: var(--fs-ui);
}
.wd-price__deal { color: var(--on-dark); font-size: var(--fs-md); }
.wd-price s { color: var(--on-dark-muted); font-size: var(--fs-md); }
.wd-price strong { color: var(--white); font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; }
.wd-price small { color: var(--on-dark-muted); font-size: var(--fs-sm); }

.wd-plan {
  position: relative; width: min(100%, 440px); margin-inline: auto; padding: 1.25rem;
  border-radius: var(--r-lg); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.wd-plan__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 .35rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.wd-plan__title { color: var(--white); font-weight: 750; }
.wd-plan__chip {
  padding: .2rem .7rem; border-radius: var(--r-pill); background: rgba(63, 176, 238, .16);
  color: var(--blue-bright); font-size: var(--fs-xs); font-weight: 700;
}
.wd-plan__list { list-style: none; margin: .5rem 0 0; padding: 0; }
.wd-plan__item {
  position: relative; display: grid; grid-template-columns: 3.2rem 14px minmax(0, 1fr);
  gap: 0 .9rem; align-items: start; padding: .7rem .35rem;
}
.wd-plan__item:not(:last-child)::before {
  content: ""; position: absolute; left: calc(.35rem + 3.2rem + .9rem + 6px); top: 1.75rem; bottom: -.55rem;
  width: 2px; background: rgba(116, 181, 219, .3);
}
.wd-plan__time { padding-top: .1rem; color: var(--on-dark-muted); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.wd-plan__dot {
  position: relative; width: 14px; height: 14px; margin-top: .25rem; border-radius: 50%;
  border: 2px solid var(--blue-light); background: var(--navy-900);
}
.wd-plan__text b { display: block; color: var(--white); font-weight: 720; line-height: 1.3; }
.wd-plan__text small { display: block; margin-top: .15rem; color: var(--on-dark); font-size: var(--fs-sm); line-height: 1.4; }
.wd-plan__item--live .wd-plan__dot { border-color: var(--green-bright); background: var(--green-bright); }
.wd-plan__item--live .wd-plan__dot::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--green-bright);
  animation: dot-ping 2.6s cubic-bezier(0, 0, .2, 1) infinite;
}
.wd-plan__item--live b { color: var(--green-bright); }
@media (prefers-reduced-motion: no-preference) {
  .wd-plan__item { animation: wd-rise .7s var(--ease-out) both; animation-delay: calc(.25s + var(--i, 0) * .3s); }
}
@keyframes wd-rise { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 959.98px) { .wd-plan { margin-top: .5rem; } }

/* Zo verloopt je dag ----------------------------------------------------- */
.wd-timeline { list-style: none; display: grid; gap: 1rem; margin: 0; padding: 0; }
@media (min-width: 720px) { .wd-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wd-timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.wd-slot {
  position: relative; padding: 1.4rem; border-radius: var(--r-lg);
  background: var(--white); border: 1px solid var(--gray-200); box-shadow: var(--shadow-card);
}
.wd-slot__time {
  display: inline-block; padding: .25rem .7rem; border-radius: var(--r-pill); background: var(--blue-50);
  color: var(--blue-600); font-size: var(--fs-xs); font-weight: 750; font-variant-numeric: tabular-nums;
}
.wd-slot h3 { margin: 1rem 0 .45rem; font-size: var(--fs-h4); font-weight: 760; letter-spacing: -.02em; }
.wd-slot p { margin: 0; color: var(--muted); font-size: var(--fs-ui); line-height: 1.6; }
.wd-slot--live { background: var(--navy-900); border-color: var(--navy-900); }
@media (min-width: 720px) and (max-width: 1099.98px) { .wd-slot--live { grid-column: 1 / -1; } }
.wd-slot--live h3 { color: var(--white); }
.wd-slot--live p { color: var(--on-dark); }
.wd-slot--live .wd-slot__time { background: rgba(127, 209, 59, .16); color: var(--green-bright); }

.wd-bookends { display: grid; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 720px) { .wd-bookends { grid-template-columns: 1fr 1fr; } }
.wd-bookend {
  display: flex; align-items: flex-start; gap: .9rem; margin: 0; padding: 1.1rem 1.25rem;
  border-radius: var(--r-md); border: 1px dashed var(--line-strong); color: var(--muted); font-size: var(--fs-ui);
}
.wd-bookend strong { color: var(--ink); }
.wd-bookend .icon { margin-top: .1rem; color: var(--blue-600); }

/* Wat je krijgt ---------------------------------------------------------- */
.wd-scope { display: grid; gap: 1rem; }
@media (min-width: 900px) { .wd-scope { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; } }
.wd-scope__col { padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--gray-200); }
.wd-scope__col--in { background: var(--blue-50); border-color: var(--blue-100); }
.wd-scope__col h3, .wd-fit__col h3, .wd-extras h3 { margin: 0 0 1.1rem; font-size: var(--fs-h4); font-weight: 760; letter-spacing: -.02em; }
.wd-scope__note { margin: 1.4rem 0 0; color: var(--muted); font-size: var(--fs-ui); }
.wd-scope__note a { color: var(--blue-600); font-weight: 650; text-underline-offset: 3px; }

.wd-list { list-style: none; display: grid; gap: .75rem; margin: 0; padding: 0; }
.wd-list li { display: flex; align-items: flex-start; gap: .7rem; font-weight: 600; line-height: 1.45; }
.wd-list .icon { width: 1.4rem; height: 1.4rem; padding: .22rem; margin-top: .02rem; border-radius: 50%; }
.wd-list--in .icon { background: var(--blue-600); color: var(--white); stroke-width: 3; }
.wd-list--out li { color: var(--muted); font-weight: 550; }
.wd-list--out .icon { background: var(--gray-100); color: var(--muted); stroke-width: 2.6; transform: rotate(45deg); }

.wd-choice {
  display: grid; gap: .6rem 2rem; margin-top: 1.25rem; padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--r-lg); background: var(--navy-900); color: var(--on-dark);
}
@media (min-width: 900px) { .wd-choice { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: center; } }
.wd-choice h3 { margin: 0; color: var(--white); font-size: var(--fs-h4); font-weight: 760; }
.wd-choice p { margin: 0; }

/* Spelregels ------------------------------------------------------------- */
.wd-rules { list-style: none; display: grid; gap: 1rem; margin: 0; padding: 0; }
@media (min-width: 640px) { .wd-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .wd-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.wd-rule {
  padding: 1.5rem; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--gray-200);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.wd-rule:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: var(--shadow-card); }
.wd-rule__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wd-rule__icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md);
  background: var(--blue-50); color: var(--blue-600);
}
.wd-rule__icon .icon { width: 24px; height: 24px; }
.wd-rule__num {
  padding: .25rem .7rem; border-radius: var(--r-pill); background: var(--gray-100);
  color: var(--muted); font-size: var(--fs-xs); font-weight: 700;
}
.wd-rule h3 { margin: 1.1rem 0 .4rem; font-size: var(--fs-md); font-weight: 750; letter-spacing: -.01em; }
.wd-rule p { margin: 0; color: var(--muted); font-size: var(--fs-ui); line-height: 1.6; }

/* Prijs ------------------------------------------------------------------ */
.wd-pricing { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 960px) { .wd-pricing { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.wd-offer {
  position: relative; padding: clamp(1.6rem, 3.5vw, 2.5rem); border-radius: var(--r-xl);
  background: var(--navy-900); color: var(--on-dark);
  box-shadow: 0 2px 6px rgba(11, 27, 51, .12), 0 26px 50px -24px rgba(11, 27, 51, .6);
}
.wd-offer__badge {
  display: inline-block; padding: .3rem .85rem; border-radius: var(--r-pill);
  background: rgba(127, 209, 59, .14); color: var(--green-bright); font-size: var(--fs-xs); font-weight: 750;
}
.wd-offer h3 { margin: 1rem 0 0; color: var(--white); font-size: var(--fs-h3); font-weight: 780; letter-spacing: -.03em; }
.wd-offer__price { display: flex; align-items: baseline; gap: .8rem; margin: 1.1rem 0 .3rem; }
.wd-offer__price s { color: var(--on-dark-muted); font-size: var(--fs-lg); }
.wd-offer__from { color: var(--on-dark); font-size: var(--fs-md); }
.wd-offer__from s { font-size: inherit; }
.wd-offer__price strong { color: var(--white); font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.wd-offer__sub { margin: 0 0 1.6rem; color: var(--on-dark); font-size: var(--fs-ui); }
.wd-offer .wd-list { margin-bottom: 2rem; }
.wd-offer .wd-list li { color: var(--white); }
.wd-offer .wd-list--in .icon { background: rgba(63, 176, 238, .18); color: var(--blue-bright); }

.wd-extras { padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--gray-200); }
.wd-extras table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.wd-extras th, .wd-extras td { padding: .85rem 0; border-bottom: 1px solid var(--gray-200); text-align: left; vertical-align: top; }
.wd-extras th { padding-right: 1rem; color: var(--ink); font-weight: 600; }
.wd-extras td { color: var(--ink); font-weight: 750; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wd-extras tr:last-child th, .wd-extras tr:last-child td { border-bottom: 0; }
.wd-extras__note { margin: 1rem 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }
.wd-extras__note a { color: var(--blue-600); text-underline-offset: 2px; }

/* Past het bij jou ------------------------------------------------------- */
.wd-fit { display: grid; gap: 1rem; }
@media (min-width: 900px) { .wd-fit { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.wd-fit__col { padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--gray-200); }
.wd-fit__col--yes { border-color: var(--blue-100); box-shadow: var(--shadow-card); }

/* Minder beweging -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wd-plan__item--live .wd-plan__dot::after { display: none; }
  .wd-rule:hover { transform: none; }
}