/* ==========================================================================
   Polder & serif — de stijl van de hele website (sinds november 2026).
   Ontwerp: Desktop/RVOfactuur-online/Online/ontwerp-polder/index.html.

   Laadt als laatste op elke websitepagina (renderSiteStart in _site.php),
   ná functie.css en artikel.css. Die werken met --fx-variabelen; hier krijgen
   die de Polder-kleuren, en koppen, knoppen en blokken de Polder-vorm.
   De startpagina heeft daarnaast polder-home.css.

   Licht en donker: site-theme.js zet data-theme op <html> (eigen keuze uit
   localStorage "rvo-theme", anders de instelling van de computer).
   Geen inline stijlen: de CSP staat alleen style-src 'self' toe.
   ========================================================================== */

@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/geist-variable.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

/* ---------- Kleuren ---------- */
html{
    --pd-paper:#fbfaf6;--pd-paper-2:#f4f2ea;--pd-card:#ffffff;--pd-soft:#fcfbf8;
    --pd-ink:#1b1d1a;--pd-ink-2:#2b2e29;--pd-muted:#5d6258;--pd-line:#e2e0d6;--pd-line-2:#cfd2c9;--pd-line-soft:#efede6;
    --pd-green:#3f6b38;--pd-green-ink:#2f5a2a;--pd-green-soft:#e6efe1;--pd-green-btn:#3f6b38;
    --pd-earth:#8a6a52;--pd-blue:#206e9c;--pd-blue-hover:#185a80;--pd-sun:#f5e9cd;
    --pd-on-ink:#ffffff;--pd-btn-hover:#3f6b38;--pd-night:#1b1d1a;--pd-foot:#20251e;--pd-device:#1b1d1a;
    --pd-air:#eef4f1;--pd-nav-bg:rgba(251,250,246,.86);
    --pd-st-sent-bg:#e4eef5;--pd-st-sent:#2f5f7f;--pd-st-ok-bg:#f6ecd0;--pd-st-ok:#7a5a12;
    --pd-glow:63 107 56;
    --pd-shadow:0 30px 60px -36px rgba(27,40,20,.4),0 0 0 1px rgba(27,29,26,.05);
    --pd-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
    --pd-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    --pd-wrap:1160px;
}
html[data-theme="dark"]{
    color-scheme:dark;
    --pd-paper:#11140f;--pd-paper-2:#171b15;--pd-card:#1c2119;--pd-soft:#20261d;
    --pd-ink:#ecebe3;--pd-ink-2:#d5d6cc;--pd-muted:#a2a898;--pd-line:#2c3228;--pd-line-2:#3b4236;--pd-line-soft:#283024;
    --pd-green:#9cc98a;--pd-green-ink:#b9d9aa;--pd-green-soft:#223020;
    --pd-blue:#2a7fb0;--pd-blue-hover:#3990c2;
    --pd-on-ink:#11140f;--pd-btn-hover:#b9d9aa;--pd-night:#0a0c09;--pd-foot:#0a0c09;--pd-device:#050605;
    --pd-air:#141b1f;--pd-nav-bg:rgba(17,20,15,.86);
    --pd-st-sent-bg:#1c2c38;--pd-st-sent:#9fc4de;--pd-st-ok-bg:#342b16;--pd-st-ok:#e6c77a;
    --pd-glow:127 174 111;
    --pd-shadow:0 30px 60px -30px rgba(0,0,0,.75),0 0 0 1px #2c3228;
}

/* ---------- Pagina ---------- */
html[data-theme] body.site-page{margin:0;background:var(--pd-paper);color:var(--pd-ink);font-family:var(--pd-sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body.site-page main{display:block}
.pd-wrap{max-width:var(--pd-wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.pd-serif{font-family:var(--pd-serif);font-weight:400;letter-spacing:-.01em;line-height:1.04}
.pd-serif em{font-style:italic;color:var(--pd-green);padding-right:.06em}
/* ":root" erbij zodat het kopje wint van "blok p"-regels (bijv. .pd-cta p) */
:root .pd-kicker{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;line-height:1.4;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pd-green-ink)}
:focus-visible{outline:2px solid var(--pd-green);outline-offset:3px}

/* ---------- Knoppen ---------- */
.pd-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:14px 24px;font-family:var(--pd-sans);font-weight:600;font-size:16px;line-height:1.1;text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.pd-btn .arr{transition:transform .15s ease}
.pd-btn:hover .arr{transform:translateX(3px)}
.pd-btn-earth{background:var(--pd-earth);color:#fff}
.pd-btn-earth:hover{background:var(--pd-green-btn);color:#fff}
.pd-btn-dark{background:var(--pd-ink);color:var(--pd-on-ink)}
.pd-btn-dark:hover{background:var(--pd-btn-hover);color:var(--pd-on-ink)}
.pd-btn-line{border-color:var(--pd-ink);color:var(--pd-ink);background:transparent}
.pd-btn-line:hover{background:var(--pd-sun);border-color:var(--pd-ink);color:#1b1d1a}
html[data-theme="dark"] .pd-btn-line:hover{border-color:var(--pd-sun)}
.pd-btn-sm{padding:10px 18px;font-size:15px}

/* ---------- Menubalk ---------- */
.pd-nav{position:sticky;top:0;z-index:50;background:var(--pd-nav-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s ease;font-family:var(--pd-sans)}
.pd-nav.scrolled,.pd-nav.open{border-bottom-color:var(--pd-line)}
.pd-nav .pd-wrap{display:flex;align-items:center;gap:30px;height:74px}
.pd-logo{display:flex;align-items:center;margin-right:auto}
.pd-logo img{height:26px;width:auto;display:block}
.pd-logo .site-logo-dark{display:none}
html[data-theme="dark"] .pd-logo .site-logo-light{display:none}
html[data-theme="dark"] .pd-logo .site-logo-dark{display:block}
.pd-links{display:flex;gap:28px;font-size:15px;color:var(--pd-muted)}
.pd-links a{text-decoration:none;position:relative;color:inherit}
.pd-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--pd-ink);transform:scaleX(0);transition:transform .2s ease}
.pd-links a:hover,.pd-links a.active{color:var(--pd-ink)}
.pd-links a:hover::after,.pd-links a.active::after{transform:scaleX(1)}
.pd-login{text-decoration:none;font-weight:500;font-size:15px;color:var(--pd-ink)}
.pd-login:hover{color:var(--pd-green)}
.pd-icon-btn{flex:none;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--pd-line-2);background:transparent;color:var(--pd-ink);display:grid;place-items:center;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.pd-icon-btn:hover{background:var(--pd-paper-2);border-color:var(--pd-ink)}
.pd-icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Licht/donker: de knop toont waar je naartoe gaat (maan in licht, zon in donker) */
.pd-theme .sun{display:none}
html[data-theme="dark"] .pd-theme .moon{display:none}
html[data-theme="dark"] .pd-theme .sun{display:block}
.pd-menu{display:none}
.pd-menu .close{display:none}
.pd-menu-only{display:none!important}
.pd-theme-row{align-items:center;gap:10px;padding:12px 0;border:0;background:none;color:var(--pd-ink);font:inherit;cursor:pointer;text-align:left}
.pd-theme-row .pd-theme{display:inline-grid;width:18px;height:18px}
.pd-theme-row svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pd-nav.open .pd-menu .open-icon{display:none}
.pd-nav.open .pd-menu .close{display:block}

/* ---------- Voettekst ---------- */
/* "html[data-theme] .marketing-page footer.pd-foot": wint van de oude voetregels in app.css/theme.css */
html[data-theme] .marketing-page footer.pd-foot{display:block;background:var(--pd-foot);color:#b8beb3;padding:60px 0 40px;border-top:0;font-size:15px;line-height:1.6;font-family:var(--pd-sans)}
html[data-theme] .marketing-page .pd-foot p{font-size:15px;line-height:1.6;margin:0}
.pd-foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.pd-foot .pd-logo{display:inline-flex;margin:0 0 16px}
.pd-foot .pd-logo img{height:24px}
.pd-foot .pd-logo .site-logo-light{display:none}
.pd-foot .pd-logo .site-logo-dark{display:block}
.pd-foot p{margin:0;max-width:34ch}
.pd-foot h2{margin:0 0 12px;color:#fff;font-family:var(--pd-serif);font-weight:400;font-size:22px;line-height:1.2}
.pd-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pd-foot a{color:inherit;text-decoration:none}
.pd-foot a:hover{color:#fff}
.pd-foot-bottom{border-top:1px solid #353b32;margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px}

/* ==========================================================================
   Gedeelde bouwstenen (functie.css / artikel.css) in Polder-kleuren
   ========================================================================== */
html[data-theme] .fx,
html[data-theme] .fx-site main{
    --fx-bg:var(--pd-paper);--fx-alt:var(--pd-paper-2);--fx-card:var(--pd-card);--fx-soft:var(--pd-soft);
    --fx-line:var(--pd-line);--fx-line-soft:var(--pd-line-soft);--fx-ink:var(--pd-ink);--fx-muted:var(--pd-muted);
    --fx-primary:var(--pd-green);--fx-primary-solid:#3f6b38;--fx-primary-soft:var(--pd-green-soft);--fx-accent:var(--pd-green);
    --fx-shadow:var(--pd-shadow);--fx-dot:transparent;
    --fx-green-bg:var(--pd-green-soft);--fx-green:var(--pd-green-ink);
    --fx-amber-bg:var(--pd-st-ok-bg);--fx-amber:var(--pd-st-ok);
    --fx-blue-bg:var(--pd-st-sent-bg);--fx-blue:var(--pd-st-sent);
    --fx-slate-bg:var(--pd-paper-2);--fx-slate:var(--pd-muted);
    background:var(--pd-paper);color:var(--pd-ink);font-family:var(--pd-sans)
}
/* Plekken waar functie.css/artikel.css het oude lettertype vastzetten → Geist;
   koppen in de schreefletter */
.mk-title,.mk-logo b,.mk-logo span,.mk-paper-title,.mk-kpi strong,.mk-chart text,.mk-migrate-box b,.mk-app-top b,.fx-steps li::before,.fx-faq summary,.fx-other strong,.fx-plan-price strong,.fx-compare-head,.fx-compare-foot>:nth-child(n+2),.fx-compare-value,.mk-phone-total,.fx-faq-jump strong,
.fx-site .step-list li::before,.fx-site .guide-steps li::before,.fx-site .faq-list summary,.fx-site .example-invoice .example-total,.fx-site .rate-calc-amount strong{font-family:var(--pd-sans)}
html[data-theme] :is(.fx,.fx-site main) :is(h1,h2){overflow-wrap:break-word;hyphens:auto;font-family:var(--pd-serif);font-weight:400;letter-spacing:-.01em;line-height:1.04;text-wrap:balance}
html[data-theme] :is(.fx,.fx-site main) h1{font-size:clamp(44px,6.2vw,78px)}
html[data-theme] :is(.fx,.fx-site main) h2{font-size:clamp(36px,4.6vw,58px)}
html[data-theme] :is(.fx,.fx-site main) h3{font-family:var(--pd-serif);font-weight:400;letter-spacing:0;line-height:1.1}
html[data-theme] :is(.fx,.fx-site main) :is(h1,h2,h3) em{font-family:var(--pd-serif);font-style:italic;color:var(--pd-green);padding-right:.06em}
html[data-theme] .fx .fx-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--pd-green-ink);font-size:13px;font-weight:600;letter-spacing:.1em}
.fx-center .fx-eyebrow{justify-content:center}
html[data-theme] :is(.fx,.fx-site main) .fx-lead{font-size:19px;color:var(--pd-muted)}

/* Knoppen in de blokken */
html[data-theme] :is(.fx,.fx-site main) .fx-btn{border-radius:999px;padding:14px 24px;font-size:16px;box-shadow:none;transform:none}
html[data-theme] :is(.fx,.fx-site main) .fx-btn-primary{background:var(--pd-earth);color:#fff}
html[data-theme] :is(.fx,.fx-site main) .fx-btn-primary:hover{background:var(--pd-green-btn);color:#fff;transform:none;box-shadow:none}
html[data-theme] :is(.fx,.fx-site main) .fx-btn-ghost{background:transparent;border:1px solid var(--pd-ink);color:var(--pd-ink)}
html[data-theme] :is(.fx,.fx-site main) .fx-btn-ghost:hover{background:var(--pd-sun);color:#1b1d1a;transform:none}
html[data-theme="dark"] :is(.fx,.fx-site main) .fx-btn-ghost:hover{border-color:var(--pd-sun)}
.fx-pro{background:var(--pd-ink);color:var(--pd-on-ink);border-radius:5px;padding:2px 6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* Kop van een pagina: een zachte strook lucht */
html[data-theme] .fx .fx-hero{background:linear-gradient(180deg,var(--pd-paper) 0%,var(--pd-air) 58%,var(--pd-paper) 100%)}

/* Kenmerken onder de kop: tussen lijnen, zonder kaartjes */
.fx .fx-highlights{gap:0;border-top:1px solid var(--pd-line)}
.fx .fx-highlight{border:0;border-left:1px solid var(--pd-line);border-radius:0;background:transparent;padding:28px 24px 8px}
/* Lijntjes tussen de kolommen en boven de tweede rij. Vier kolommen (standaard)
   of drie (.fx-highlights-3, vakpagina's); die laatste regels zijn sterker. */
.fx .fx-highlights > .fx-highlight:nth-child(4n+1){border-left:0;padding-left:0}
.fx .fx-highlights > .fx-highlight:nth-child(n+5){border-top:1px solid var(--pd-line)}
.fx .fx-highlights-3 .fx-highlights > .fx-highlight:nth-child(n){border-left:1px solid var(--pd-line);padding-left:24px;border-top:0}
.fx .fx-highlights-3 .fx-highlights > .fx-highlight:nth-child(3n+1){border-left:0;padding-left:0}
.fx .fx-highlights-3 .fx-highlights > .fx-highlight:nth-child(n+4){border-top:1px solid var(--pd-line)}
.fx .fx-highlight:hover{transform:none;box-shadow:none}
.fx .fx-highlight .fx-icon{width:auto;height:auto;background:none;border-radius:0;justify-content:start;color:var(--pd-green)}
.fx .fx-highlight h3{margin:14px 0 8px;font-size:26px}
.fx .fx-highlight p{font-size:15px}

/* Kaartjes naar andere pagina's */
.fx .fx-other{border-color:var(--pd-line);border-radius:18px;transition:transform .3s ease,box-shadow .3s ease}
.fx .fx-other:hover{transform:translateY(-3px);border-color:transparent;box-shadow:0 0 0 1px rgb(var(--pd-glow) / .5),0 0 0 6px rgb(var(--pd-glow) / .1),0 22px 50px -20px rgb(var(--pd-glow) / .45)}
.fx .fx-other strong{font-size:16.5px;font-weight:600}
.fx .fx-other-all .fx-icon{background:var(--pd-green-btn);color:#fff}
.fx .fx-chips a:hover{border-color:var(--pd-green);color:var(--pd-green)}

/* Mockup-vensters */
.fx .mk-window{border-radius:22px;border-color:var(--pd-line-soft)}
.fx .mk-title{font-family:var(--pd-serif);font-weight:400;font-size:22px}
.fx .mk-chart .bar-a,.fx .mk-chart-legend i{fill:#3f6b38;background:#3f6b38}
.fx .mk-chart .bar-b,.fx .mk-chart-legend i.b{fill:#a9cbe0;background:#a9cbe0}
html[data-theme="dark"] .fx .mk-chart .bar-a,html[data-theme="dark"] .fx .mk-chart-legend i{fill:#7fae6f;background:#7fae6f}
html[data-theme="dark"] .fx .mk-chart .bar-b,html[data-theme="dark"] .fx .mk-chart-legend i.b{fill:#4d7590;background:#4d7590}
.fx .mk-phone{background:var(--pd-device);border-radius:40px}
.fx .mk-phone-screen::before{background:var(--pd-device)}
.fx .mk-toast{background:var(--pd-night);color:#fff;border:0}
html[data-theme="dark"] .fx .mk-toast{box-shadow:0 0 0 1px #2c3228,0 18px 40px -16px rgba(0,0,0,.7)}
.fx .mk-toast small{color:#b8beb3}
.fx .mk-toast-icon{background:#3f6b38;color:#fff}
.fx .mk-btn{border-radius:999px;background:var(--pd-blue);box-shadow:0 6px 16px -8px rgba(32,110,156,.55)}
.fx .mk-btn.mk-btn-ghost{background:var(--fx-card);box-shadow:none}
.fx .mk-focus .mk-input{border-color:#3f6b38;box-shadow:0 0 0 3px rgb(var(--pd-glow) / .18)}
.fx .mk-meter i{background:linear-gradient(90deg,#3f6b38,#7fae6f)}
.fx .mk-scan-frame{border-color:#9cc98a}
.fx .mk-app-fab{background:var(--pd-blue);box-shadow:0 8px 20px -6px rgba(32,110,156,.5)}
.fx .mk-tx-blue{border-left-color:var(--pd-blue)}
/* "Btw verlegd" in de voorbeeldfacturen: groen, zoals het stempel en het label op de startpagina */
html[data-theme] .fx :is(.mk-shifted,.mk-totals .mk-shifted span){color:var(--pd-green-ink)}
.fx .mk-shift-note{border-left-color:#3f6b38;background:var(--pd-green-soft)}
html[data-theme] .fx-site main .data-form :is(input,select,textarea):focus{border-color:#3f6b38;box-shadow:0 0 0 3px rgb(var(--pd-glow) / .18)}

/* Losse stappenblokken op functiepagina's (ol.fx-steps): grote schuine cijfers */
.fx .fx-steps li{border-color:var(--pd-line);border-radius:18px}
.fx .fx-steps li::before{display:block;width:auto;height:auto;border-radius:0;background:none;color:var(--pd-green);font-family:var(--pd-serif);font-style:italic;font-weight:400;font-size:44px;line-height:1}
html[data-theme] .fx .fx-steps h3{font-size:24px}

/* ---------- Pagina's met de oudere opbouw (artikel.css): uitleg, /functies, Mac … ---------- */
html[data-theme] .fx-site .page-hero{background:linear-gradient(180deg,var(--pd-paper) 0%,var(--pd-air) 58%,var(--pd-paper) 100%)}
html[data-theme] .fx-site main :is(h1,h2,h3,legend){font-family:var(--pd-serif);font-weight:400;letter-spacing:-.01em}
html[data-theme] .fx-site main :is(h1,h2,h3) em{font-weight:400}
html[data-theme] .fx-site .page-hero h1{font-size:clamp(44px,6vw,72px);line-height:1.04}
html[data-theme] .fx-site .page-section-head h2{font-size:clamp(32px,3.8vw,48px);line-height:1.08}
html[data-theme] .fx-site .page-text h2{font-size:clamp(28px,3vw,38px);line-height:1.1}
html[data-theme] .fx-site .page-text h3,html[data-theme] .fx-site .info-card h3,html[data-theme] .fx-site :is(.step-list,.guide-steps) h3{font-size:24px;line-height:1.15}
html[data-theme] .fx-site main .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--pd-green-ink)!important;letter-spacing:.1em;text-transform:uppercase}
/* Vragen op deze pagina's (renderSiteFaq) hebben de Polder-vorm; ze staan op de papierkleur */
html[data-theme] .fx-site main .pd-faq{background:transparent}
html[data-theme] .fx-site main .gold-button{border-radius:999px;padding:14px 24px;font-size:16px;background:var(--pd-earth);box-shadow:none;transform:none}
html[data-theme] .fx-site main .gold-button:hover{background:var(--pd-green-btn);transform:none}
html[data-theme] .fx-site main .dark-button{border-radius:999px;padding:14px 24px;font-size:16px;background:transparent;border-color:var(--pd-ink);color:var(--pd-ink)}
html[data-theme] .fx-site main .dark-button:hover{background:var(--pd-sun);color:#1b1d1a;transform:none}
html[data-theme] .fx-site main .page-jump a:hover{border-color:var(--pd-green);color:var(--pd-green)}
html[data-theme] .fx-site .info-card{border-radius:18px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
html[data-theme] .fx-site a.info-card:hover{transform:translateY(-3px);border-color:transparent;box-shadow:0 0 0 1px rgb(var(--pd-glow) / .5),0 0 0 6px rgb(var(--pd-glow) / .1),0 22px 50px -20px rgb(var(--pd-glow) / .45)}
html[data-theme] .fx-site :is(.step-list,.guide-steps) li::before{background:none;width:auto;height:auto;color:var(--pd-green);font-family:var(--pd-serif);font-style:italic;font-weight:400;font-size:44px;line-height:1}
html[data-theme] .fx-site .faq-list summary{font-weight:600}

/* Losse vragenlijsten (ul .fx-faq, bijv. /veelgestelde-vragen): tussen lijnen met een plusje */
.fx .fx-faq{gap:0;border-top:1px solid var(--pd-line-2)}
.fx .fx-faq details{border:0;border-bottom:1px solid var(--pd-line-2);border-radius:0;background:transparent}
.fx .fx-faq summary{padding:22px 0;font-weight:500;font-size:19px}
.fx .fx-faq summary::after{width:14px;height:14px;border:0;transform:none;background:linear-gradient(var(--pd-ink),var(--pd-ink)) center/14px 1.5px no-repeat,linear-gradient(var(--pd-ink),var(--pd-ink)) center/1.5px 14px no-repeat;transition:transform .2s ease}
.fx .fx-faq details[open] summary{color:var(--pd-ink)}
.fx .fx-faq details[open] summary::after{transform:rotate(45deg)}
.fx .fx-faq details p{padding:0 40px 24px 0;font-size:16px}
.fx .fx-faq-head .fx-icon{background:none;color:var(--pd-green)}
.fx .fx-faq-jump a:hover{border-color:var(--pd-green)}

/* Brede tabellen (bijv. /factuurprogramma-vergelijken) scrollen binnen hun kader */
html[data-theme] .fx-site main .compare-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
html[data-theme] .fx-site main :has(> .compare-wrap){min-width:0;max-width:100%}

/* Vergelijkingstabel met drie abonnementen (/prijzen) */
.fx .fx-compare-3{max-width:1000px}
.fx .fx-compare-3 .fx-compare-row{grid-template-columns:minmax(0,1fr) repeat(3,104px)}
.fx .fx-compare-3 .fx-compare-head>:last-child{color:var(--pd-green)}
.fx .fx-compare-3 .fx-compare-value{font-size:16px}
@media (max-width:640px){
    .fx .fx-compare-3 .fx-compare-row{grid-template-columns:minmax(0,1fr) repeat(3,52px);gap:6px}
    .fx .fx-compare-3 .fx-compare-value,.fx .fx-compare-3 .fx-compare-foot>:nth-child(n+2){font-size:12.5px}
    .fx .fx-compare-3 .fx-compare-head{font-size:13px}
}

/* Vragen: tekst links, vragen rechts tussen lijnen */
.pd-faq{background:var(--pd-paper-2);padding-block:104px}
.pd-faq-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
.pd-faq-side h2{max-width:100%;overflow-wrap:break-word;hyphens:auto}
.pd-faq-side{display:flex;flex-direction:column;align-items:flex-start;gap:18px;position:sticky;top:110px}
html[data-theme] .pd-faq .pd-faq-side h2{margin:0;font-size:clamp(38px,4.8vw,60px)}
.pd-faq-side p{margin:0;color:var(--pd-muted)}
.pd-faq-side a{color:var(--pd-green);text-decoration:underline;text-underline-offset:3px}
.pd-qa{border-top:1px solid var(--pd-line-2)}
.pd-qa details{border-bottom:1px solid var(--pd-line-2)}
.pd-qa summary{list-style:none;cursor:pointer;padding:22px 0;font-weight:500;font-size:19px;display:flex;justify-content:space-between;gap:16px;align-items:center;color:var(--pd-ink)}
.pd-qa summary::-webkit-details-marker{display:none}
.pd-qa summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--pd-ink),var(--pd-ink)) center/14px 1.5px no-repeat,linear-gradient(var(--pd-ink),var(--pd-ink)) center/1.5px 14px no-repeat;transition:transform .2s ease}
.pd-qa details[open] summary::after{transform:rotate(45deg)}
.pd-qa details p{overflow-wrap:anywhere;margin:0;padding:0 40px 24px 0;color:var(--pd-muted);max-width:62ch}
.pd-qa details p a{color:var(--pd-green);text-decoration:underline;text-underline-offset:3px}

/* Stappen: donker blok met grote cijfers en een lijn met een lichtpuntje */
.pd-steps{position:relative;overflow:hidden;background:var(--pd-night);color:#fff;padding-block:104px;font-family:var(--pd-sans)}
html[data-theme="dark"] .pd-steps{box-shadow:inset 0 1px 0 #1f251c,inset 0 -1px 0 #1f251c}
.pd-steps .pd-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin:0 auto 52px;max-width:760px}
.pd-steps .pd-kicker{color:#a8c99a}
html[data-theme] .pd-steps .pd-head h2{margin:0;font-size:clamp(38px,5vw,64px);color:#fff}
html[data-theme] .pd-steps .pd-head h2 em{color:#a8c99a}
.pd-steps .pd-head p{margin:0;color:#b8beb3;max-width:52ch}
.pd-step-box{position:relative}
.pd-step-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),1fr);position:relative}
.pd-step-grid::before{content:"";position:absolute;left:16%;right:16%;top:46px;border-top:1px dashed #4a5045}
.pd-step{position:relative;z-index:2;padding:0 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.pd-step strong{display:inline-block;font-family:var(--pd-serif);font-style:italic;font-weight:400;font-size:64px;line-height:1;color:#a8c99a;background:var(--pd-night);padding:0 18px}
html[data-theme] .pd-steps .pd-step h3{margin:0;font-family:var(--pd-serif);font-weight:400;font-size:30px;line-height:1.1;color:#fff}
.pd-step p{margin:0;color:#b8beb3;font-size:16px;max-width:32ch}
.pd-step-grid::after{content:"";position:absolute;left:16%;right:16%;top:46px;border-top:2px solid #a8c99a;transform:scaleX(0);transform-origin:left center;opacity:0}
.pd-step-dot{position:absolute;top:46px;left:16%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#d8ecc9;box-shadow:0 0 0 4px rgba(168,201,154,.25),0 0 18px 4px rgba(168,201,154,.55);opacity:0;pointer-events:none;z-index:1}
.pd-steps.anim .pd-step{opacity:.35}
.pd-steps.anim.is-playing .pd-step-grid::after{animation:pd-step-line 10.5s ease-in-out infinite}
.pd-steps.anim.is-playing .pd-step-dot{animation:pd-step-dot 10.5s ease-in-out infinite}
.pd-steps.anim.is-playing .pd-step:nth-of-type(1){animation:pd-step-1 10.5s ease-in-out infinite}
.pd-steps.anim.is-playing .pd-step:nth-of-type(2){animation:pd-step-2 10.5s ease-in-out infinite}
.pd-steps.anim.is-playing .pd-step:nth-of-type(3){animation:pd-step-3 10.5s ease-in-out infinite}
.pd-steps.anim.is-playing .pd-step:nth-of-type(1) strong{animation:pd-num-1 10.5s ease-out infinite}
.pd-steps.anim.is-playing .pd-step:nth-of-type(2) strong{animation:pd-num-2 10.5s ease-out infinite}
.pd-steps.anim.is-playing .pd-step:nth-of-type(3) strong{animation:pd-num-3 10.5s ease-out infinite}
@keyframes pd-step-line{0%,8%{transform:scaleX(0);opacity:1}32%,40%{transform:scaleX(.5);opacity:1}62%,92%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes pd-step-dot{0%,6%{left:16%;opacity:0}8%{left:16%;opacity:1}32%,40%{left:50%;opacity:1}62%{left:84%;opacity:1}66%,100%{left:84%;opacity:0}}
@keyframes pd-step-1{0%{opacity:.35}6%,92%{opacity:1}100%{opacity:.35}}
@keyframes pd-step-2{0%,30%{opacity:.35}34%,92%{opacity:1}100%{opacity:.35}}
@keyframes pd-step-3{0%,60%{opacity:.35}64%,92%{opacity:1}100%{opacity:.35}}
@keyframes pd-num-1{0%,2%{transform:scale(1)}7%{transform:scale(1.18)}14%,100%{transform:scale(1)}}
@keyframes pd-num-2{0%,32%{transform:scale(1)}36%{transform:scale(1.18)}42%,100%{transform:scale(1)}}
@keyframes pd-num-3{0%,62%{transform:scale(1)}66%{transform:scale(1.18)}72%,100%{transform:scale(1)}}
/* Factuurtje dat uit stap 3 komt en rechts het beeld uit vliegt */
.pd-step-doc{position:absolute;left:50%;top:32px;width:48px;height:60px;margin:-30px 0 0 -24px;opacity:0;pointer-events:none;z-index:3;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.pd-step-doc svg{display:block;width:100%;height:100%}
.pd-steps.anim.is-playing .pd-step-doc{animation:pd-step-doc 10.5s infinite}
@keyframes pd-step-doc{
    0%,64%{opacity:0;transform:translate(0,10px) scale(.3) rotate(0deg);animation-timing-function:cubic-bezier(.2,.9,.3,1.2)}
    71%{opacity:1;transform:translate(0,-78px) scale(1) rotate(-6deg);animation-timing-function:ease-in-out}
    77%{opacity:1;transform:translate(6px,-84px) scale(1) rotate(-2deg);animation-timing-function:cubic-bezier(.55,0,.9,.45)}
    88%{opacity:1;transform:translate(70vw,-150px) scale(.85) rotate(14deg)}
    89%,100%{opacity:0;transform:translate(70vw,-150px) scale(.85) rotate(14deg)}
}
.pd-step-grid.n4{--n:4}
.pd-step-grid.n4::before{left:12%;right:12%}

/* Prijskaarten: wit, groot bedrag, blauwe knop; bij hover een groene gloed */
.pd-prices{display:grid;grid-template-columns:repeat(var(--n,2),1fr);gap:20px;max-width:900px;margin:0 auto;align-items:stretch;font-family:var(--pd-sans)}
.pd-price{position:relative;background:var(--pd-card);border-radius:24px;padding:40px 38px 44px;display:flex;flex-direction:column;color:var(--pd-ink);
    box-shadow:0 0 0 1px var(--pd-line),0 14px 34px -22px rgba(27,40,20,.18);transition:box-shadow .3s ease,transform .3s ease}
html[data-theme="dark"] .pd-price{box-shadow:0 0 0 1px var(--pd-line),0 14px 34px -22px rgba(0,0,0,.6)}
.pd-price:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgb(var(--pd-glow) / .55),0 0 0 7px rgb(var(--pd-glow) / .12),0 0 48px 4px rgb(var(--pd-glow) / .28),0 28px 60px -18px rgb(var(--pd-glow) / .5)}
.pd-price-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
html[data-theme] .pd-prices .pd-price h3{margin:0;font-family:var(--pd-sans);font-weight:700;font-size:30px;letter-spacing:-.02em;line-height:1.1;color:var(--pd-ink)}
.pd-price .tag{background:var(--pd-green-soft);color:var(--pd-green-ink);font-size:13px;font-weight:600;border-radius:999px;padding:4px 12px}
.pd-price .intro{margin:14px 0 0;color:var(--pd-muted);font-size:17px;line-height:1.65;min-height:3.3em}
.pd-amount{display:flex;justify-content:center;align-items:flex-start;gap:6px;margin-top:46px;line-height:1}
.pd-amount b{font-size:80px;font-weight:700;letter-spacing:-.045em}
.pd-amount sup{font-size:24px;font-weight:700;margin-top:8px;letter-spacing:-.01em;vertical-align:baseline}
.pd-per{margin:14px 0 0;text-align:center;color:var(--pd-muted);font-size:16px}
.pd-price .pd-plan-btn{margin-top:34px;width:100%;border-radius:12px;padding:17px 24px;background:var(--pd-blue);color:#fff;font-size:17px}
.pd-price .pd-plan-btn:hover{background:var(--pd-blue-hover);color:#fff}
.pd-price h4{margin:40px 0 0;font-size:17px;font-weight:700}
.pd-price ul{margin:16px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:16.5px;color:var(--pd-ink-2)}
.pd-price li::marker{color:var(--pd-green)}
.pd-price li strong{font-weight:600}
.fx .fx-hero .pd-prices{margin-top:56px}
.fx .fx-hero .fx-plans-note{margin-top:32px}
/* Drie kaarten naast elkaar */
.pd-prices.n3{--n:3;max-width:1120px}
.pd-prices.n3 .pd-price{padding:38px 34px 42px}
.pd-prices.n3 .pd-amount b{font-size:76px}
/* Bij "Per jaar": de gewone maandprijs doorgestreept, en onder het bedrag het jaartotaal */
.pd-per-year{display:none;margin-top:4px;font-size:14px}
.pd-prices.is-year .pd-per-year{display:block}
.pd-amount{position:relative}
.pd-amount .was{position:absolute;left:0;bottom:calc(100% + 4px);font-size:16px;font-weight:600;letter-spacing:0;color:var(--pd-muted);
    text-decoration:line-through;text-decoration-thickness:1.5px;opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
.pd-prices.is-year .pd-amount .was{opacity:1;transform:none}
@keyframes pd-price-swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pd-amount.swap,.pd-per.swap{animation:pd-price-swap .35s cubic-bezier(.3,.7,.2,1)}
/* Schakelaar per maand / per jaar, met een handgetekend pijltje naar "Per jaar" */
.pd-billing{position:relative;width:max-content;margin:0 auto 48px;font-family:var(--pd-sans)}
.fx .fx-hero .pd-billing{margin-top:48px}
.pd-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--pd-paper-2);border-radius:999px;padding:5px;box-shadow:inset 0 0 0 1px var(--pd-line)}
.pd-seg::before{content:"";position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);background:var(--pd-card);border-radius:999px;
    box-shadow:0 0 0 1px rgb(27 29 26 / .06),0 6px 16px -8px rgb(27 40 20 / .35);transition:transform .4s cubic-bezier(.3,.7,.2,1)}
.pd-seg.is-year::before{transform:translateX(100%)}
.pd-seg button{position:relative;z-index:1;border:0;background:none;cursor:pointer;font:600 16px/1 var(--pd-sans);color:var(--pd-muted);padding:14px 30px;border-radius:999px;transition:color .25s ease}
.pd-seg button[aria-pressed="true"],.pd-seg button:hover{color:var(--pd-ink)}
.pd-billing-note{position:absolute;left:100%;top:-34px;margin-left:6px;display:flex;align-items:flex-start;gap:4px;color:var(--pd-green);pointer-events:none}
.pd-billing-note svg{width:96px;height:56px;margin-top:22px;overflow:visible}
.pd-billing-note path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.pd-billing-note .note-text{font-family:var(--pd-serif);font-style:italic;font-size:27px;line-height:1;white-space:nowrap;transform:rotate(-5deg);opacity:0}
.pd-billing.in .pd-billing-note .line{transition:stroke-dashoffset 1s cubic-bezier(.5,0,.3,1) .35s;stroke-dashoffset:0}
.pd-billing.in .pd-billing-note .head{transition:stroke-dashoffset .25s ease-out 1.3s;stroke-dashoffset:0}
.pd-billing.in .pd-billing-note .note-text{transition:opacity .5s ease;opacity:1}
@media (max-width:1000px){
    .pd-billing-note{position:static;justify-content:center;margin:12px 0 0}
    .pd-billing-note svg{display:none}
    .pd-billing-note .note-text{font-size:24px;transform:none}
    /* Onder de schakelaar alleen tonen bij Per jaar; de ruimte blijft, zodat de kaarten niet verspringen */
    .pd-seg:not(.is-year) + .pd-billing-note .note-text{opacity:0;visibility:hidden}
    .pd-billing.in .pd-seg.is-year + .pd-billing-note .note-text{visibility:visible}
}
@media (max-width:640px){
    .pd-billing{margin-bottom:36px}
    .pd-seg button{padding:13px 22px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
    .pd-billing-note path{stroke-dashoffset:0}
    .pd-billing-note .note-text{opacity:1}
    .pd-seg::before{transition:none}
    .pd-amount.swap,.pd-per.swap{animation:none}
}
.pd-price-note,.pd-home .pd-price-note{margin:40px 0 0;text-align:center;color:var(--pd-muted);font-size:15px}
.pd-price-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- Slotblok: avondpolder die schemert bij het scrollen ---------- */
.pd-cta{position:relative;overflow:hidden;color:var(--pd-ink);font-family:var(--pd-sans);--pd-fade:var(--pd-paper);--dusk:0;--warm:0;--night:0;--stars:0;--lights:0}
.pd-cta > svg{position:absolute;inset:0;width:100%;height:100%}
/* Zachte overgang vanuit het blok erboven (JS zet --pd-fade op die kleur) */
.pd-cta::before{content:"";position:absolute;inset:0 0 auto;height:260px;z-index:1;pointer-events:none;
    background:linear-gradient(to bottom,var(--pd-fade) 0%,color-mix(in srgb,var(--pd-fade) 90%,transparent) 14%,color-mix(in srgb,var(--pd-fade) 72%,transparent) 30%,color-mix(in srgb,var(--pd-fade) 50%,transparent) 46%,color-mix(in srgb,var(--pd-fade) 28%,transparent) 62%,color-mix(in srgb,var(--pd-fade) 12%,transparent) 78%,color-mix(in srgb,var(--pd-fade) 3%,transparent) 90%,transparent 100%)}
.pd-cta .pd-wrap{position:relative;z-index:2;text-align:center;padding-block:170px 220px;display:flex;flex-direction:column;align-items:center;gap:20px}
html[data-theme] .pd-cta .pd-wrap h2{margin:0;font-size:clamp(44px,7vw,88px);color:var(--pd-ink)}
.pd-cta h2 em{display:inline-block;padding-right:.12em;margin-right:-.12em}
.pd-cta p{margin:0;font-size:19px;color:var(--pd-ink-2);max-width:46ch}
.pd-cta .pd-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.pd-cta small{font-size:14px;color:var(--pd-ink-2)}
.pd-cta .warm-sky{opacity:var(--warm)}
.pd-cta .dusk-sky{opacity:var(--night)}
.pd-cta .stars{opacity:var(--stars)}
.pd-cta .sun{transform:translateY(calc(var(--dusk) * 46px))}
.pd-cta .sun-dusk{opacity:var(--dusk)}
.pd-cta .sun-glow{opacity:calc(var(--dusk) * .9)}
.pd-cta .night{opacity:calc(var(--dusk) * .85)}
.pd-cta .night-ground{opacity:calc(var(--dusk) * .55)}
.pd-cta .road-glow{opacity:calc(var(--dusk) * .45)}
.pd-cta .lamp,.pd-cta .lamp-glow{opacity:var(--lights)}
.pd-cta h2,.pd-cta p,.pd-cta small,.pd-cta .pd-kicker,.pd-cta h2 em{transition:color .6s ease}
html[data-theme] .pd-cta.is-dusk .pd-wrap h2,.pd-cta.is-dusk p,.pd-cta.is-dusk small{color:#fbf6ea}
html[data-theme] .pd-cta.is-dusk .pd-kicker,html[data-theme] .pd-cta.is-dusk .pd-wrap h2 em{color:#f6c27a}
.pd-cta .pd-btn-dark{transition:background .6s ease,color .6s ease;background:#1b1d1a;color:#fff}
.pd-cta .pd-btn-dark:hover{background:#3f6b38}
.pd-cta.is-dusk .pd-btn-dark{background:#fbf6ea;color:#1b1d1a}
.pd-cta.is-dusk .pd-btn-dark:hover{background:#f6c27a}
.pd-cta .pd-btn-line{border-color:#1b1d1a;color:#1b1d1a;transition:border-color .6s ease,color .6s ease,background .15s ease}
.pd-cta.is-dusk .pd-btn-line{border-color:#fbf6ea;color:#fbf6ea}
.pd-cta.is-dusk .pd-btn-line:hover{background:#fbf6ea;color:#1b1d1a}
/* Molenwieken draaien langzaam */
.pd-mill-blades{transform-box:fill-box;transform-origin:50% 50%}

/* ---------- Lichte versie: af en toe een paar vogels over het scherm (polder.js) ---------- */
.pd-sky{position:fixed;inset:0;z-index:45;pointer-events:none;overflow:hidden}
html[data-theme="dark"] .pd-sky{display:none}
/* Vliegtuigje met spandoek (polder.js) */
.pd-sky-plane{position:absolute;left:0;fill:none;stroke:#4f5a49;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pd-sky-plane svg{display:block;width:100%;height:auto;overflow:visible}
.pd-sky-plane .banner{fill:#fffdf8;transform-box:fill-box;transform-origin:100% 50%;animation:pd-sky-flutter 1s ease-in-out infinite alternate}
.pd-sky-plane .prop{transform-box:fill-box;transform-origin:50% 50%;animation:pd-sky-prop .12s linear infinite alternate}
.pd-sky-plane text{fill:var(--pd-green);stroke:none;font-family:var(--pd-serif);font-style:italic;font-size:19px}
@keyframes pd-sky-flutter{to{transform:skewY(2deg) scaleY(.96)}}
@keyframes pd-sky-prop{to{transform:scaleY(.15)}}
@media (prefers-reduced-motion:reduce),(max-width:760px){ .pd-sky{display:none} }

/* Kenmerken onder de kop: lijntjes per schermbreedte (zie functie.css voor de kolommen) */
@media (max-width:1080px){
    .fx .fx-highlights > .fx-highlight:nth-child(n){border-left:1px solid var(--pd-line);padding-left:24px;border-top:0}
    .fx .fx-highlights > .fx-highlight:nth-child(odd){border-left:0;padding-left:0}
    .fx .fx-highlights > .fx-highlight:nth-child(n+3){border-top:1px solid var(--pd-line)}
}
@media (max-width:960px){
    .fx .fx-highlights-3 .fx-highlights > .fx-highlight:nth-child(n){border-left:1px solid var(--pd-line);padding-left:24px;border-top:0}
    .fx .fx-highlights-3 .fx-highlights > .fx-highlight:nth-child(odd){border-left:0;padding-left:0}
    .fx .fx-highlights-3 .fx-highlights > .fx-highlight:nth-child(n+3){border-top:1px solid var(--pd-line)}
}
@media (max-width:640px){
    .fx .fx-highlights > .fx-highlight:nth-child(n),
    .fx .fx-highlights-3 .fx-highlights > .fx-highlight:nth-child(n){border-left:0;padding-left:0;border-top:1px solid var(--pd-line)}
    .fx .fx-highlights > .fx-highlight:nth-child(1),
    .fx .fx-highlights-3 .fx-highlights > .fx-highlight:nth-child(1){border-top:0}
}

/* ---------- Kleinere schermen ---------- */
@media (max-width:1000px){
    .pd-links{display:none}
    .pd-menu{display:grid}
    .pd-nav.open .pd-links{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:8px 20px 18px;background:var(--pd-paper);border-bottom:1px solid var(--pd-line);font-size:17px}
    .pd-nav.open .pd-links a{padding:12px 0;border-bottom:1px solid var(--pd-line-soft);color:var(--pd-ink)}
    .pd-nav.open .pd-links a::after{display:none}
    .pd-nav.open .pd-menu-only{display:flex!important}
    .pd-nav .pd-wrap{position:relative}
    .pd-faq-grid{grid-template-columns:minmax(0,1fr);gap:32px}
    .pd-faq-side{position:static}
    .pd-foot-grid{grid-template-columns:1fr 1fr}
    .pd-prices{grid-template-columns:1fr;max-width:560px}
    .pd-price .intro{min-height:0}
}
@media (max-width:640px){
    html[data-theme] body.site-page{font-size:16px}
    .pd-nav .pd-wrap{gap:12px;height:64px}
    .pd-logo img{height:21px}
    .pd-login{display:none}
    .pd-icon-btn{width:36px;height:36px}
    .pd-faq,.pd-steps{padding-block:72px}
    html[data-theme] .pd-faq .pd-faq-side h2{font-size:clamp(30px,8.6vw,38px)}
    /* Lange woorden (bijv. "boekhoudprogramma?") passen zo op een iPhone */
    html[data-theme] :is(.fx,.fx-site main) h1,html[data-theme] .fx-site .page-hero h1{font-size:clamp(34px,10.4vw,44px)}
    html[data-theme] :is(.fx,.fx-site main) h2{font-size:clamp(30px,8.8vw,38px)}
    .pd-step-grid,.pd-step-grid.n4{grid-template-columns:1fr;gap:44px}
    .pd-step-grid::before,.pd-step-grid::after,.pd-step-dot{display:none}
    .pd-price{padding:32px 26px 36px}
    .pd-amount b{font-size:68px}
    .pd-cta::before{height:170px}
    .pd-cta .pd-wrap{padding-block:116px 170px}
    .pd-foot-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
    .pd-nav .pd-wrap{gap:8px}
    .pd-logo img{height:19px}
    .pd-nav-long{display:none}
    /* Licht/donker staat dan in het uitklapmenu, zodat alles op één regel past */
    .pd-nav .pd-wrap > .pd-theme{display:none}
}
@media (prefers-reduced-motion:no-preference){
    .pd-cta .pd-mill-blades{animation:pd-turn 24s linear infinite}
    @keyframes pd-turn{to{transform:rotate(360deg)}}
}
@media (prefers-reduced-motion:reduce){
    .pd-steps.anim .pd-step{opacity:1;animation:none!important}
    .pd-step-grid::after,.pd-step-dot,.pd-step-doc{display:none}
    .pd-step strong{animation:none!important}
    .pd-price,.fx .fx-other{transition:none}
}

/* Foto achter de kop van een vakpagina (30% zichtbaar = 70% transparant), loopt boven en onder zacht weg */
.fx .fx-hero.fx-hero-photo{position:relative;isolation:isolate;overflow:hidden}
.fx-hero-photo .fx-hero-bg{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:center 35%;opacity:.3;pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 72%,transparent 100%)}

/* Zachte overgang tussen lichte (paper) en beige (paper-2) secties: de onderste sectie loopt bovenaan over
   vanuit de kleur van de sectie erboven. Donker stappenblok en slotblok (eigen overgang) blijven zoals ze zijn. */
:root{--pd-fade:160px}
@media (max-width:640px){:root{--pd-fade:110px}}
html[data-theme] .fx-hero + .fx-section-alt,
html[data-theme] .fx-hero + .pd-faq,
html[data-theme] .fx-section:not(.fx-section-alt) + .fx-section-alt,
html[data-theme] .fx-section:not(.fx-section-alt) + .pd-faq,
html[data-theme] .page-hero + .page-section-alt,
html[data-theme] .page-section:not(.page-section-alt) + .page-section-alt,
html[data-theme] .pd-hero + .pd-build,
html[data-theme] .pd-section:not(.pd-build) + .pd-build,
html[data-theme] .pd-section:not(.pd-build) + .pd-faq{background:linear-gradient(180deg,var(--pd-paper) 0,var(--pd-paper-2) var(--pd-fade))}
html[data-theme] .fx-section-alt + .fx-section:not(.fx-section-alt),
html[data-theme] .pd-faq + .fx-section:not(.fx-section-alt),
html[data-theme] .page-section-alt + .page-section:not(.page-section-alt),
html[data-theme] .pd-build + .pd-section:not(.pd-build),
html[data-theme] .pd-faq + .pd-section{background:linear-gradient(180deg,var(--pd-paper-2) 0,var(--pd-paper) var(--pd-fade))}