/* ============================================================
   HET PANTHEON — /whitelabel (partnerpagina voor bureaus)

   Bouwt voort op ai-agents.css: dezelfde tokens (--pn-night,
   --pn-marble, --pn-gold, --pn-cream) en dezelfde gedeelde
   componenten (.pn-btn, .pn-section-title, .pn-faq, .pn-compare,
   .pn-price-card, .pn-cta, .pn-mockup). Alleen wat hier nieuw is,
   staat in dit bestand, allemaal onder .pn-wl-*.

   Ritme licht/donker over de pagina:
   hero night · band night-2 · voor-wie cream · lagen night ·
   whitelabelt cream · rollen night-2 · dashboard cream ·
   rekenen cream(dieper) · tarieven night-2 · vergelijking night-2 ·
   bewijs cream · onboarding night · faq cream · cta cream ·
   slotregel night.
   ============================================================ */

.pantheon--wl {
    --pn-cream-2: #efe9dd;
}

/* gedeelde binnenmaat + kopblok links uitlijnen waar dat past */
.pn-wl-inner { max-width: 1180px; margin: 0 auto; }
.pn-wl-head--left { text-align: left; margin-left: 0; }
.pn-wl-sub {
    font-size: 1.02rem; line-height: 1.75;
    color: var(--pn-marble-dim); max-width: 62ch;
    margin: 16px 0 0;
}
.pn-wl-inner > .pn-section-head { text-align: center; margin: 0 auto 48px; max-width: 720px; }
.pn-wl-inner > .pn-section-head .pn-wl-sub { margin-left: auto; margin-right: auto; }

/* lichte secties: tekstkleuren omzetten */
.pn-wl-who .pn-section-title,
.pn-wl-brand .pn-section-title,
.pn-wl-dash .pn-section-title,
.pn-wl-calc .pn-section-title,
.pn-wl-proof .pn-section-title { color: var(--pn-ink); }
.pn-wl-who .pn-wl-sub,
.pn-wl-brand .pn-wl-sub,
.pn-wl-dash .pn-wl-sub,
.pn-wl-calc .pn-wl-sub,
.pn-wl-proof .pn-wl-sub { color: #4a4438; }

/* ============================================================
   1. HERO met lege sokkels
   ============================================================ */
.pn-wl-hero {
    position: relative;
    padding: clamp(90px, 12vh, 150px) clamp(20px, 4vw, 56px) clamp(40px, 7vh, 80px);
    background: radial-gradient(120% 80% at 50% -10%, #211c15 0%, var(--pn-night) 55%, #090806 100%);
    isolation: isolate;
    overflow: hidden;
}
.pn-wl-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pn-wl-hero-head { position: relative; z-index: 2; text-align: center; max-width: 780px; margin: 0 auto; }
.pn-wl-hero-head .pn-title em { font-style: italic; color: var(--pn-gold); }

.pn-wl-hero-actions {
    display: flex; flex-wrap: wrap; gap: 14px;
    justify-content: center; margin: 32px 0 18px;
}
.pn-wl-hero-note {
    font-size: 0.88rem; line-height: 1.6;
    color: rgba(236, 230, 216, 0.72); max-width: 52ch; margin: 0 auto;
}

/* ------------------------------------------------------------
   De sokkels. Zes vaste rollen, met daarop een wisselend
   voorbeeld-merk (data-active op .pn-wl-stage schakelt tussen
   de drie sets beelden, namen en omschrijvingen).
   ------------------------------------------------------------ */
.pn-wl-stage { position: relative; z-index: 2; margin: clamp(40px, 6vh, 72px) auto 0; }

/* alles wat per merk verschilt: alleen het actieve merk is zichtbaar */
.pn-wl-t { display: none; }
.pn-wl-stage[data-active="noors"]    .pn-wl-t[data-t="noors"],
.pn-wl-stage[data-active="mascotte"] .pn-wl-t[data-t="mascotte"],
.pn-wl-stage[data-active="neon"]     .pn-wl-t[data-t="neon"] { display: inline; }

.pn-wl-plinths {
    position: relative;
    display: flex; align-items: flex-end; justify-content: center;
    gap: clamp(10px, 2.4vw, 30px);
    max-width: 1000px; margin: 0 auto;
}
.pn-wl-plinth-floor {
    position: absolute; left: 50%; bottom: 8px;
    width: 108%; height: 130px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(201,169,110,0.16) 0%, transparent 68%);
    filter: blur(14px); pointer-events: none;
}
.pn-wl-plinth {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    flex: 1 1 0; min-width: 0;
    animation: pn-wl-rise 0.9s cubic-bezier(0.16,1,0.3,1) backwards;
    animation-delay: calc(var(--i) * 90ms);
}
@keyframes pn-wl-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
/* de plek waar de figuur op de sokkel staat */
.pn-wl-plinth-slot {
    position: relative; display: block;
    width: 100%; aspect-ratio: 3 / 5;
}
.pn-wl-fig {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; object-position: bottom center;
    opacity: 0; transition: opacity 0.7s ease;
    filter: drop-shadow(0 14px 22px rgba(0,0,0,0.6));
}
.pn-wl-stage[data-active="noors"]    .pn-wl-fig[data-t="noors"],
.pn-wl-stage[data-active="mascotte"] .pn-wl-fig[data-t="mascotte"],
.pn-wl-stage[data-active="neon"]     .pn-wl-fig[data-t="neon"] { opacity: 1; }
/* marmeren sokkelblok */
.pn-wl-plinth-body {
    width: 100%; height: clamp(26px, 4vw, 44px);
    background:
        linear-gradient(180deg, #e6dfd0 0%, #cfc5b2 40%, #b3a893 100%);
    border-radius: 2px;
    box-shadow: 0 12px 26px -10px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.5);
}
.pn-wl-plinth-plate {
    margin-top: 12px; text-align: center; max-width: 100%;
    display: flex; flex-direction: column; gap: 3px;
}
.pn-wl-plinth-name {
    font-size: clamp(0.62rem, 1.1vw, 0.74rem);
    font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--pn-gold);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pn-wl-plinth-role {
    font-size: clamp(0.58rem, 0.9vw, 0.64rem);
    letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(236, 230, 216, 0.55);
}

/* ------------------------------------------------------------
   Merkkiezer onder de sokkels
   ------------------------------------------------------------ */
.pn-wl-themebar { max-width: 720px; margin: clamp(28px, 4vh, 44px) auto 0; text-align: center; }
.pn-wl-themebar-lead {
    margin: 0 0 18px; font-size: 0.92rem; line-height: 1.65;
    color: rgba(236, 230, 216, 0.72);
}
.pn-wl-themepick {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
}
.pn-wl-themedot {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 22px; cursor: pointer;
    font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.03em;
    color: rgba(236, 230, 216, 0.62);
    background: rgba(236, 230, 216, 0.03);
    border: 1px solid rgba(236, 230, 216, 0.12);
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.pn-wl-themedot-mark {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(236, 230, 216, 0.3);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.pn-wl-themedot:hover { color: var(--pn-marble); border-color: rgba(201,169,110,0.45); }
.pn-wl-themedot.is-active {
    color: var(--pn-marble); border-color: rgba(201,169,110,0.6);
    background: rgba(201,169,110,0.08);
}
.pn-wl-themedot.is-active .pn-wl-themedot-mark {
    background: var(--pn-gold); box-shadow: 0 0 0 3px rgba(201,169,110,0.18);
}
.pn-wl-themebar-note {
    margin: 14px 0 0; min-height: 1.4em;
    font-family: var(--font-serif); font-style: italic;
    font-size: 0.94rem; color: rgba(236, 230, 216, 0.55);
}

@media (max-width: 700px) {
    .pn-wl-plinths { flex-wrap: wrap; gap: 18px 10px; }
    .pn-wl-plinth { flex: 0 0 calc(33.333% - 8px); }
    .pn-wl-themedot { font-size: 0.72rem; padding: 6px 11px; }
    /* de clamp-ondergrens levert hier 9px op, dat leest niet meer */
    .pn-wl-plinth-name { font-size: 0.72rem; letter-spacing: 0.1em; }
    .pn-wl-plinth-role { font-size: 0.64rem; letter-spacing: 0.08em; }
}

/* ============================================================
   2. BEWIJSBAND
   ============================================================ */
.pn-wl-band {
    position: relative; z-index: 1;
    background: var(--pn-night-2);
    border-top: 1px solid var(--pn-line);
    border-bottom: 1px solid var(--pn-line);
    padding: 20px clamp(20px, 4vw, 56px);
}
.pn-wl-band-inner {
    max-width: 1180px; margin: 0 auto;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px clamp(20px, 4vw, 46px);
    font-size: 0.82rem; letter-spacing: 0.04em;
    color: var(--pn-marble-dim); text-align: center;
}
.pn-wl-band-inner span { position: relative; }
.pn-wl-band-inner span + span::before {
    content: '·'; position: absolute; left: clamp(-12px, -2vw, -24px);
    color: var(--pn-gold); opacity: 0.6;
}

/* ============================================================
   3. VOOR WIE (cream)
   ============================================================ */
.pn-wl-who {
    position: relative; z-index: 1;
    background: var(--pn-cream); color: var(--pn-ink);
    padding: clamp(72px, 11vh, 130px) clamp(20px, 4vw, 56px);
}
.pn-wl-who-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 34px);
}
.pn-wl-who-card {
    padding: 30px 26px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(201,169,110,0.28);
    border-radius: 4px;
}
.pn-wl-who-num {
    font-family: var(--font-serif); font-size: 0.9rem;
    color: #9a7637; letter-spacing: 0.1em;
}
.pn-wl-who-card h3 {
    font-family: var(--font-serif); font-weight: 400;
    font-size: 1.16rem; line-height: 1.3; color: var(--pn-ink);
    margin: 10px 0 12px;
}
.pn-wl-who-card p { font-size: 0.94rem; line-height: 1.7; color: #4a4438; margin: 0; }
@media (max-width: 860px) { .pn-wl-who-grid { grid-template-columns: 1fr; } }

/* ============================================================
   4. DRIE LAGEN (night)
   ============================================================ */
.pn-wl-layers {
    position: relative; z-index: 1;
    background: var(--pn-night); color: var(--pn-marble);
    padding: clamp(72px, 11vh, 130px) clamp(20px, 4vw, 56px);
    border-top: 1px solid var(--pn-line);
}
.pn-wl-layer-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 40px);
    position: relative;
}
/* gouden verbindingslijn tussen de drie lagen */
.pn-wl-layer-grid::before {
    content: ''; position: absolute; top: 26px; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pn-line) 15%, var(--pn-line) 85%, transparent);
}
.pn-wl-layer { position: relative; padding-top: 8px; }
.pn-wl-layer-num {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    font-family: var(--font-serif); font-size: 1rem;
    color: var(--pn-gold);
    background: var(--pn-night);
    border: 1px solid rgba(201,169,110,0.38);
}
.pn-wl-layer h3 {
    font-family: var(--font-serif); font-weight: 400;
    font-size: 1.24rem; color: var(--pn-marble);
    margin: 20px 0 12px;
}
.pn-wl-layer p { font-size: 0.96rem; line-height: 1.75; color: var(--pn-marble-dim); margin: 0; }
.pn-wl-layer-close {
    margin: clamp(40px, 6vh, 64px) 0 0;
    text-align: center;
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: var(--pn-gold-soft);
}
@media (max-width: 860px) {
    .pn-wl-layer-grid { grid-template-columns: 1fr; gap: 30px; }
    .pn-wl-layer-grid::before { display: none; }
}

/* ============================================================
   5. WAT JE WHITELABELT (cream)
   ============================================================ */
.pn-wl-brand {
    position: relative; z-index: 1;
    background: var(--pn-cream); color: var(--pn-ink);
    padding: clamp(72px, 11vh, 130px) clamp(20px, 4vw, 56px);
    border-top: 1px solid rgba(201,169,110,0.25);
}
.pn-wl-brand-layout {
    display: grid; grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(36px, 6vw, 76px); align-items: center;
}
.pn-wl-check { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 12px; }
.pn-wl-check li {
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 0.96rem; line-height: 1.6; color: #4a4438;
}
.pn-wl-check-mark {
    flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 0.7rem;
    color: #8a6a28; background: rgba(201,169,110,0.18);
    border: 1px solid rgba(201,169,110,0.4);
}
.pn-wl-honest {
    margin-top: 34px; padding: 22px 24px;
    background: rgba(255,255,255,0.65);
    border-left: 2px solid var(--pn-gold);
    border-radius: 0 4px 4px 0;
}
.pn-wl-honest h4 {
    font-family: var(--font-serif); font-weight: 400; font-size: 1.02rem;
    color: var(--pn-ink); margin: 0 0 8px;
}
.pn-wl-honest p { font-size: 0.92rem; line-height: 1.7; color: #4a4438; margin: 0; }

/* twee dashboardschillen naast elkaar: hetzelfde product, ander merk */
.pn-wl-brand-visual { position: relative; display: grid; gap: 18px; }
.pn-wl-skin {
    position: relative; display: grid; gap: 9px;
    padding: 18px 18px 22px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 22px 46px -22px rgba(27,24,19,0.42);
    border: 1px solid rgba(27,24,19,0.08);
}
.pn-wl-skin-bar { height: 6px; width: 46px; border-radius: 3px; background: var(--sk, #c9a96e); }
.pn-wl-skin-logo {
    font-family: var(--font-serif); font-size: 0.82rem;
    letter-spacing: 0.14em; color: var(--sk, #c9a96e);
}
.pn-wl-skin-row { height: 9px; border-radius: 3px; background: rgba(27,24,19,0.09); }
.pn-wl-skin-row--short { width: 62%; }
.pn-wl-skin-cta { height: 26px; width: 108px; border-radius: 3px; background: var(--sk, #c9a96e); opacity: 0.9; }
.pn-wl-skin[data-wl-skin="a"] { --sk: #2f5fd0; transform: rotate(-1.2deg); }
.pn-wl-skin[data-wl-skin="b"] { --sk: #e2564a; transform: rotate(1deg); }

@media (max-width: 900px) {
    .pn-wl-brand-layout { grid-template-columns: 1fr; }
    .pn-wl-brand-visual { max-width: 420px; margin: 0 auto; }
}

/* ============================================================
   6. DE ROLLEN (night-2)
   ============================================================ */
.pn-wl-roles {
    position: relative; z-index: 1;
    background: var(--pn-night-2); color: var(--pn-marble);
    padding: clamp(72px, 11vh, 130px) clamp(20px, 4vw, 56px);
    border-top: 1px solid var(--pn-line);
}
.pn-wl-role-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.4vw, 26px);
}
.pn-wl-role {
    display: flex; flex-direction: column;
    padding: 26px 24px 22px;
    background: linear-gradient(180deg, rgba(236,230,216,0.05), rgba(236,230,216,0.015));
    border: 1px solid rgba(236,230,216,0.10);
    border-radius: 6px;
    transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.pn-wl-role:hover { border-color: rgba(201,169,110,0.4); transform: translateY(-3px); }
.pn-wl-role-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pn-wl-role-num {
    font-family: var(--font-serif); font-size: 0.88rem;
    letter-spacing: 0.1em; color: var(--pn-gold);
}
/* het "invoerveld" waar de partner zijn eigen naam neerzet */
.pn-wl-role-field {
    flex: 1; min-width: 0;
    padding: 7px 12px;
    font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--pn-marble-faint);
    background: rgba(0,0,0,0.24);
    border: 1px dashed rgba(236,230,216,0.18);
    border-radius: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.pn-wl-role:hover .pn-wl-role-field,
.pn-wl-role-field.is-filled { color: var(--pn-gold-soft); border-color: rgba(201,169,110,0.45); border-style: solid; }
/* fundament (Argos + Pythia) versus de vier doeners */
.pn-wl-role-tag {
    display: inline-block; margin-bottom: 10px;
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: rgba(236,230,216,0.55);
}
.pn-wl-role--incl { border-color: rgba(201,169,110,0.34); }
.pn-wl-role--incl .pn-wl-role-tag { color: var(--pn-gold); }
.pn-wl-role-title {
    font-family: var(--font-serif); font-weight: 400;
    font-size: 1.18rem; color: var(--pn-marble); margin: 0 0 10px;
}
.pn-wl-role-does { font-size: 0.92rem; line-height: 1.65; color: var(--pn-marble-dim); margin: 0 0 16px; }
.pn-wl-role-client {
    font-size: 0.88rem; line-height: 1.6; color: var(--pn-marble-dim);
    padding-top: 14px; margin: auto 0 0;
    border-top: 1px solid rgba(236,230,216,0.08);
}
.pn-wl-role-client span {
    display: block; font-size: 0.68rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--pn-gold); margin-bottom: 6px;
}
.pn-wl-role-ours {
    margin-top: 14px; font-size: 0.74rem;
    color: rgba(236,230,216,0.5); letter-spacing: 0.04em;
}
.pn-wl-roles-note {
    margin: clamp(32px, 5vh, 48px) auto 0; max-width: 62ch; text-align: center;
    font-size: 0.94rem; line-height: 1.7; color: var(--pn-marble-dim);
}
@media (max-width: 980px) { .pn-wl-role-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pn-wl-role-grid { grid-template-columns: 1fr; } }

/* ============================================================
   7. DASHBOARD (cream)
   ============================================================ */
.pn-wl-dash {
    position: relative; z-index: 1;
    background: var(--pn-cream); color: var(--pn-ink);
    padding: clamp(72px, 11vh, 130px) clamp(20px, 4vw, 56px);
    border-top: 1px solid rgba(201,169,110,0.25);
}
.pn-wl-dash-layout {
    display: grid; grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(36px, 6vw, 76px); align-items: center;
}
.pn-wl-dash-list { margin: 32px 0 0; display: grid; gap: 20px; }
.pn-wl-dash-list dt {
    font-family: var(--font-serif); font-size: 1.02rem;
    color: var(--pn-ink); margin-bottom: 5px;
}
.pn-wl-dash-list dd { margin: 0; font-size: 0.93rem; line-height: 1.7; color: #4a4438; }

.pn-wl-dash-caption {
    margin: 18px 0 0; font-size: 0.82rem; line-height: 1.6;
    color: #6a6356; text-align: center;
}
@media (max-width: 960px) {
    .pn-wl-dash-layout { grid-template-columns: 1fr; }
    .pn-wl-dash .pn-wl-head--left { text-align: center; }
    .pn-wl-dash .pn-wl-sub { margin-left: auto; margin-right: auto; }
}

/* ============================================================
   8. REKENSOMMETJE (dieper cream)
   ============================================================ */
.pn-wl-calc {
    position: relative; z-index: 1;
    background: var(--pn-cream-2); color: var(--pn-ink);
    padding: clamp(72px, 11vh, 130px) clamp(20px, 4vw, 56px);
    border-top: 1px solid rgba(201,169,110,0.3);
}
.pn-wl-calc-box {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 48px);
    max-width: 980px; margin: 0 auto;
    padding: clamp(26px, 3.5vw, 40px);
    background: #fff;
    border: 1px solid rgba(201,169,110,0.34);
    border-radius: 6px;
    box-shadow: 0 26px 60px -30px rgba(27,24,19,0.35);
}
.pn-wl-calc-controls { display: grid; gap: 26px; align-content: start; }
.pn-wl-ctrl { display: grid; gap: 10px; }
.pn-wl-ctrl-label {
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: #8a7a5c;
}
.pn-wl-ctrl-out {
    font-family: var(--font-serif); font-size: 1.5rem;
    color: #9a7637; line-height: 1;
}
.pn-wl-ctrl input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 3px; border-radius: 2px;
    background: rgba(201,169,110,0.35); outline: none; cursor: pointer;
}
.pn-wl-ctrl input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--pn-gold); cursor: pointer;
    box-shadow: 0 2px 8px rgba(154,118,55,0.45);
}
.pn-wl-ctrl input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px; border: none; border-radius: 50%;
    background: var(--pn-gold); cursor: pointer;
}
.pn-wl-ctrl select {
    width: 100%; padding: 11px 12px;
    font-family: var(--font-sans); font-size: 0.9rem; color: var(--pn-ink);
    background: #fff; border: 1px solid rgba(27,24,19,0.16); border-radius: 4px;
}
.pn-wl-ctrl select:focus { outline: none; border-color: var(--pn-gold); }

.pn-wl-calc-out {
    display: flex; flex-direction: column; justify-content: center;
    padding-left: clamp(0px, 2vw, 26px);
    border-left: 1px solid rgba(201,169,110,0.28);
}
.pn-wl-calc-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 16px; padding: 11px 0;
    font-size: 0.94rem; color: #4a4438;
    border-bottom: 1px solid rgba(27,24,19,0.07);
}
.pn-wl-calc-row em {
    display: block; font-style: normal; font-size: 0.74rem; color: #8a7a5c; margin-top: 2px;
}
.pn-wl-calc-row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pn-wl-calc-row--total {
    border-bottom: none; padding-top: 18px;
    font-family: var(--font-serif); font-size: 1.06rem; color: var(--pn-ink);
}
.pn-wl-calc-row--total span:last-child {
    font-size: clamp(1.5rem, 3vw, 2.1rem); color: #9a7637; line-height: 1;
}
.pn-wl-calc-margin { margin: 6px 0 0; font-size: 0.86rem; color: #6a6356; }
.pn-wl-calc-margin strong { color: #9a7637; font-weight: 500; }
.pn-wl-calc-note {
    max-width: 72ch; margin: clamp(24px, 4vh, 36px) auto 0; text-align: center;
    font-size: 0.88rem; line-height: 1.7; color: #6a6356;
}
@media (max-width: 820px) {
    .pn-wl-calc-box { grid-template-columns: 1fr; }
    .pn-wl-calc-out { padding-left: 0; padding-top: 20px; border-left: none; border-top: 1px solid rgba(201,169,110,0.28); }
}

/* ============================================================
   9. TARIEVEN (night-2)
   ============================================================ */
.pn-wl-price {
    position: relative; z-index: 1;
    background: var(--pn-night-2); color: var(--pn-marble);
    padding: clamp(72px, 11vh, 130px) clamp(20px, 4vw, 56px);
    border-top: 1px solid var(--pn-line);
}
.pn-wl-price-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 3vw, 32px);
    max-width: 860px; margin: 0 auto;
}
.pn-wl-price .pn-price-card .pn-btn { margin-top: auto; justify-content: center; }
@media (max-width: 760px) { .pn-wl-price-grid { grid-template-columns: 1fr; } }

.pn-wl-wholesale {
    max-width: 860px; margin: clamp(32px, 5vh, 50px) auto 0;
    padding: 28px clamp(20px, 3vw, 32px);
    border: 1px solid rgba(236,230,216,0.10); border-radius: 6px;
    background: rgba(0,0,0,0.2);
}
.pn-wl-wholesale h3 {
    font-family: var(--font-serif); font-weight: 400; font-size: 1.06rem;
    color: var(--pn-marble); margin: 0 0 20px; text-align: center;
}
.pn-wl-wholesale-base {
    max-width: 64ch; margin: -8px auto 22px; text-align: center;
    font-size: 0.92rem; line-height: 1.7; color: rgba(236, 230, 216, 0.78);
}
.pn-wl-wholesale-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 18px; text-align: center;
}
.pn-wl-wholesale-grid > div {
    padding: 16px 12px; border-radius: 4px;
    background: rgba(236,230,216,0.03);
    border: 1px solid rgba(236,230,216,0.07);
}
.pn-wl-wholesale-grid strong {
    display: block; font-family: var(--font-serif); font-weight: 400;
    font-size: 1.5rem; color: var(--pn-gold);
}
.pn-wl-wholesale-grid span {
    display: block; margin: 4px 0 6px;
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--pn-marble);
}
.pn-wl-wholesale-grid p { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--pn-marble-dim); }
.pn-wl-wholesale-note {
    margin: 20px 0 0; text-align: center;
    font-size: 0.88rem; line-height: 1.7; color: rgba(236, 230, 216, 0.78);
}
@media (max-width: 700px) { .pn-wl-wholesale-grid { grid-template-columns: 1fr; } }

/* pilotkader: eerlijk over wat er nog gebouwd wordt */
.pn-wl-pilot {
    max-width: 860px; margin: clamp(28px, 4vh, 42px) auto 0;
    padding: 30px clamp(22px, 3vw, 34px);
    border: 1px solid rgba(201,169,110,0.4); border-radius: 6px;
    background:
        radial-gradient(90% 140% at 50% 0%, rgba(201,169,110,0.14), transparent 65%),
        rgba(0,0,0,0.24);
    text-align: center;
}
.pn-wl-pilot-tag {
    display: inline-block; margin-bottom: 14px;
    padding: 5px 12px; border-radius: 20px;
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--pn-night); background: var(--pn-gold);
}
.pn-wl-pilot h3 {
    font-family: var(--font-serif); font-weight: 400;
    font-size: clamp(1.1rem, 2.2vw, 1.44rem); color: var(--pn-marble);
    margin: 0 0 14px;
}
.pn-wl-pilot p {
    margin: 0 auto; max-width: 62ch;
    font-size: 0.96rem; line-height: 1.75; color: var(--pn-marble-dim);
}
.pn-wl-pilot strong { color: var(--pn-gold-soft); font-weight: 500; }

/* ============================================================
   11. BEWIJS (cream)
   ============================================================ */
.pn-wl-proof {
    position: relative; z-index: 1;
    background: var(--pn-cream); color: var(--pn-ink);
    padding: clamp(72px, 11vh, 130px) clamp(20px, 4vw, 56px);
    border-top: 1px solid rgba(201,169,110,0.25);
}
.pn-wl-proof-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 3vw, 34px); max-width: 900px; margin: 0 auto;
}
.pn-wl-proof-card {
    padding: 30px 28px;
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(201,169,110,0.28); border-radius: 4px;
}
.pn-wl-proof-card h3 {
    font-family: var(--font-serif); font-weight: 400; font-size: 1.2rem;
    color: var(--pn-ink); margin: 0 0 12px;
}
.pn-wl-proof-card p { font-size: 0.94rem; line-height: 1.7; color: #4a4438; margin: 0 0 16px; }
.pn-wl-proof-card a {
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: #8a6a28; border-bottom: 1px solid rgba(154,118,55,0.35); padding-bottom: 2px;
}
.pn-wl-proof-card a:hover { opacity: 1; border-color: var(--pn-gold); }
@media (max-width: 760px) { .pn-wl-proof-grid { grid-template-columns: 1fr; } }

/* ============================================================
   12. ONBOARDING (night)
   ============================================================ */
.pn-wl-timeline {
    position: relative; z-index: 1;
    background: var(--pn-night); color: var(--pn-marble);
    padding: clamp(72px, 11vh, 130px) clamp(20px, 4vw, 56px);
    border-top: 1px solid var(--pn-line);
}
.pn-wl-steps {
    list-style: none; margin: 0 auto; padding: 0 0 0 30px;
    max-width: 720px; position: relative;
    display: grid; gap: 34px;
}
.pn-wl-steps::before {
    content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px;
    width: 1px; background: linear-gradient(180deg, var(--pn-gold), rgba(201,169,110,0.12));
}
.pn-wl-steps li { position: relative; }
.pn-wl-steps li::before {
    content: ''; position: absolute; left: -30px; top: 7px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--pn-gold); box-shadow: 0 0 0 4px rgba(201,169,110,0.14);
}
.pn-wl-step-when {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--pn-gold);
}
.pn-wl-steps h3 {
    font-family: var(--font-serif); font-weight: 400; font-size: 1.16rem;
    color: var(--pn-marble); margin: 8px 0 8px;
}
.pn-wl-steps p { margin: 0; font-size: 0.95rem; line-height: 1.7; color: var(--pn-marble-dim); }

/* ============================================================
   14. CTA-formulier (op de cream .pn-cta)
   ============================================================ */
.pn-wl-form select,
.pn-wl-form textarea {
    width: 100%; padding: 13px 14px;
    font-family: var(--font-sans); font-size: 0.94rem; color: var(--pn-ink);
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(27,24,19,0.16); border-radius: 4px;
    resize: vertical;
}
.pn-wl-form select:focus,
.pn-wl-form textarea:focus { outline: none; border-color: var(--pn-gold); }

.pn-wl-checks {
    border: 1px solid rgba(27,24,19,0.14); border-radius: 4px;
    padding: 14px 16px 16px; margin: 0;
    background: rgba(255,255,255,0.5);
    text-align: left;
}
.pn-wl-checks legend {
    padding: 0 6px; font-size: 0.72rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: #8a7a5c;
}
.pn-wl-checks label {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 8px 16px 0 0; font-size: 0.9rem; color: #4a4438; cursor: pointer;
}
.pn-wl-checks input[type="checkbox"] { accent-color: var(--pn-gold); width: 15px; height: 15px; }
.pn-wl-form-note {
    margin: 14px 0 0; font-size: 0.82rem; color: #6a6356; text-align: center;
}

/* ============================================================
   15. SLOTREGEL (night)
   ============================================================ */
.pn-wl-closing {
    position: relative; z-index: 1;
    background: var(--pn-night);
    padding: clamp(56px, 9vh, 100px) clamp(20px, 4vw, 56px);
    border-top: 1px solid var(--pn-line);
    text-align: center;
}
.pn-wl-closing p {
    margin: 0; font-family: var(--font-serif); font-style: italic;
    font-size: clamp(1.2rem, 3vw, 2rem);
    color: var(--pn-gold-soft); line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
    .pn-wl-plinth { animation: none; }
    .pn-wl-fig, .pn-wl-role { transition: none; }
}