/* Public website. Shared with the restrained Fleet direction from PR #125.
   Product mockups keep their own visual language; page chrome stays quiet. */
@font-face { font-family:'DM Sans'; src:url('/fonts/dm-sans-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('/fonts/dm-sans-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('/fonts/dm-sans-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('/fonts/dm-sans-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
:root {
  --bg:#fff; --black:#202421; --gray:#59605b; --gray-light:#667069;
  --gray-border:#e1e5e1; --green:#087a3a; --green-dark:#066b31;
  --green-bg:#f5f7f5; --warm:#f5f7f5; --radius:6px;
}
.site-page { background:var(--bg); color:var(--black); font-family:'DM Sans',sans-serif; }
.site-page nav { background:rgba(255,255,255,.97); backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid var(--gray-border); }
.site-page .logo span { animation:none; text-shadow:none; }
.site-page :is(h1,h2,h3,.article-title,.blog-card-title,.price-amount,.value-prop-num) { font-family:'DM Sans',sans-serif; color:var(--black); }
.site-page :is(section,.credibility,.value-section,.lead-section,.faq) h2 { font-size:30px; font-weight:600; line-height:1.3; letter-spacing:-.65px; text-align:left; }
.site-page :is(.section-sub,.how-sub,.pricing-sub,.frustratie-sub,.credibility-sub) { text-align:left; color:var(--gray); line-height:1.7; margin:14px 0 30px; }
.site-page .hero { max-width:1220px; padding:140px 40px 62px; gap:48px; text-align:left; opacity:1; animation:none; }
.site-page .hero h1 { font-size:clamp(36px,3.6vw,52px); font-weight:600; line-height:1.14; letter-spacing:-1.5px; }
.site-page :is(.hero-tag,.hero-tagline) { background:none; border:0; border-radius:0; padding:0; color:var(--gray); font-size:14px; font-weight:500; text-transform:none; letter-spacing:0; margin-bottom:18px; }
.site-page .hero p { color:var(--gray); font-size:16px; line-height:1.7; margin-left:0; }
.site-page .hero-gradient { background:none; -webkit-text-fill-color:currentColor; color:inherit; }
.site-page :is(.btn-wa,.btn-submit,.btn-price,.nav-cta,.btn,.lead-form-card button) { border-radius:6px; box-shadow:none; transition:background .15s,color .15s; }
.site-page :is(.btn-wa,.btn-submit,.btn-price,.nav-cta,.btn,.lead-form-card button):hover { transform:none; box-shadow:none; }
.site-page :is(.card,.frustratie-card,.credibility-card,.related-card) { background:transparent; border:0; border-top:1px solid var(--gray-border); border-radius:0; padding:24px 12px 12px 0; box-shadow:none; }
.site-page :is(.card,.frustratie-card,.credibility-card,.related-card,.price-card,.step):hover { transform:none; box-shadow:none; }
.site-page :is(.card,.frustratie-card,.credibility-card) h3 { font-size:19px; font-weight:600; line-height:1.4; letter-spacing:-.3px; color:var(--black); }
.site-page :is(.card,.frustratie-card,.credibility-card) p { font-size:14px; line-height:1.8; }
.site-page :is(.grid-3,.frustratie-grid,.credibility-grid) { gap:32px; }
.site-page .step-num { background:#f1f3f1; color:var(--black); border-radius:6px; box-shadow:none; }
.site-page .step:hover .step-num { transform:none; }
.site-page .phone { box-shadow:0 8px 25px #16251b12; transform:none; animation:none; }
.site-page .phone-container { animation:none; }
.site-page :is(.value-section,.lead-section) { background:#f5f7f5; border:1px solid var(--gray-border); border-radius:8px; }
.site-page :is(.lead-section h2,.lead-section label) { color:var(--black); }
.site-page .lead-form-card { background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; margin-left:0; }
.site-page :is(.lead-form,.lead-form-card) :is(input,select) { background:#fff; border:1px solid #bfc8c0; border-radius:5px; min-height:48px; }
.site-page .faq-item { background:transparent; border-bottom:1px solid var(--gray-border); }
.site-page .faq-question { font-family:inherit; }
.site-page .fade-in,.site-page .fade-in.animate { opacity:1; transform:none; transition:none; }
.site-page .wave-divider { display:none; }
.site-page .site-footer::before { display:none; }
.site-page :is(a,button,input,select,textarea,summary):focus-visible { outline:3px solid var(--green); outline-offset:4px; }
.site-page .site-footer :focus-visible { outline-color:#fff; }

/* Landing pages: identical reading width, section rhythm and form treatment. */
.marketing-page section:not(.hero),.marketing-page :is(.credibility,.value-section,.lead-section) { max-width:1140px; margin:0 auto; padding:62px 40px; }
.marketing-page :is(.value-section,.lead-section) { margin:24px auto; }
.marketing-page .steps { max-width:none; }
.marketing-page .step { padding:24px 0; border-bottom:1px solid var(--gray-border); }
.marketing-page .btn-secondary { display:block; width:fit-content; margin:20px 0 0; }
.marketing-page .lead-form { margin-left:0; }
.marketing-page :is(.lead-form,.lead-form-card) { max-width:520px; }
.marketing-page .lead-form button { border-radius:6px; box-shadow:none; }
.marketing-page .lead-form button:hover { transform:none; box-shadow:none; }
.marketing-page .lead-section .lead-sub { text-align:left; color:var(--gray); line-height:1.7; }
.marketing-page .value-item { text-align:left; }
.marketing-page .faq { max-width:none; }

/* Homepage: structure comes from spacing and rules rather than stacked cards. */
.home-page :is(.frustratie,.how,.pricing) { max-width:1140px; padding:62px 40px; margin:0 auto; }
.home-page :is(.credibility,.faq) { background:#fff; padding:62px 40px; }
.home-page :is(.credibility-inner,.faq-inner) { max-width:1060px; margin:0 auto; }
.home-page .value-props-wrap { background:#fff; border-top:1px solid var(--gray-border); border-bottom:1px solid var(--gray-border); }
.home-page .value-prop-num { font-size:17px; font-weight:600; }
.home-page .steps::before { display:none; }
.home-page .step { border:1px solid var(--gray-border); border-radius:6px; background:#fff; box-shadow:none; }
.home-page .price-card { border:1px solid var(--gray-border); border-radius:8px; box-shadow:none; }
.home-page .price-card.featured { background:#f5f7f5; border:1px solid #8dada0; box-shadow:none; }
.home-page .price-badge { border-radius:4px; background:#e9eee9; color:var(--black); }
.home-page .price-amount { font-weight:600; }
.home-page .pricing-fleet { border-radius:6px; background:#f5f7f5; color:var(--black); border:1px solid var(--gray-border); }
.home-page .pricing-fleet:hover { background:#edf1ed; transform:none; }
.home-page .pricing-fleet span { color:var(--gray); }
.home-page .cta-banner { background:#f5f7f5; border-top:1px solid var(--gray-border); text-align:left; }
.home-page .cta-banner-inner { max-width:1060px; }
.home-page .cta-banner :is(h2,p) { color:var(--black); }
.home-page .mockup-hint span { animation:none; }

/* Editorial pages: titles and metadata replace decorative gradient thumbnails. */
.editorial-page .blog-hero { max-width:1200px; text-align:left; padding-top:140px; }
.editorial-page :is(.blog-hero h1,.article-title) { font-size:clamp(32px,3.6vw,48px); font-weight:600; line-height:1.2; letter-spacing:-1px; }
.editorial-page .blog-card { border:0; border-top:1px solid var(--gray-border); border-radius:0; box-shadow:none; background:none; }
.editorial-page .blog-card:hover { transform:none; box-shadow:none; border-color:var(--green); }
.editorial-page .blog-card-body { padding:24px 0; }
.editorial-page .blog-card-title { font-size:22px; font-weight:600; line-height:1.4; }
.editorial-page :is(.blog-card-category,.article-category) { color:var(--gray); background:none; padding:0; border-radius:0; }
.editorial-page .article-content h2 { font-size:26px; font-weight:600; }
.editorial-page .article-content h3 { font-size:20px; font-weight:600; }
.editorial-page .article-content blockquote { background:#f5f7f5; border-radius:0; }
.legal-page .page { max-width:760px; }
.legal-page h1 { font-size:32px; font-weight:600; letter-spacing:-.65px; }
.legal-page h2 { font-weight:600; }
.legal-page :is(p,li) { color:var(--gray); font-size:15px; line-height:1.8; }
.error-page { text-align:left; }
.error-page .code { font:600 48px/1.2 'DM Sans',sans-serif; color:var(--gray); margin-bottom:24px; }

@media(max-width:900px) {
  .site-page .hero { grid-template-columns:1fr; padding:118px 28px 48px; gap:36px; }
  .site-page .hero h1 { max-width:650px; font-size:44px; }
  .site-page .hero p { max-width:600px; }
  .marketing-page :is(.value-section,.lead-section) { margin:24px 20px; }
}
@media(max-width:540px) {
  .site-page .hero { padding:112px 22px 38px; }
  .site-page .hero h1 { font-size:36px; letter-spacing:-1px; line-height:1.16; }
  .site-page :is(section,.credibility,.value-section,.lead-section,.faq) h2 { font-size:26px; }
  .marketing-page section:not(.hero),.marketing-page :is(.credibility,.value-section,.lead-section),
  .home-page :is(.frustratie,.how,.pricing,.credibility,.faq) { padding:38px 22px; }
  .site-page :is(.grid-3,.frustratie-grid,.credibility-grid) { grid-template-columns:1fr; gap:16px; }
  .site-page .hero p { font-size:15px; }
  .site-page .value-grid { grid-template-columns:1fr; gap:24px; }
  .editorial-page .blog-hero { padding-top:112px; }
}
/* Product examples: large, legible documents rather than more benefit copy. */
.site-page section.product-visuals { max-width:1140px; margin:auto; padding:62px 40px; }
.pv-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px; }
.pv-heading p { color:var(--gray); font-size:15px; line-height:1.7; margin-top:12px; }
.pv-example { color:var(--gray); font-size:11px; white-space:nowrap; border:1px solid var(--gray-border); padding:6px 10px; border-radius:4px; }
.pv-switches { display:flex; gap:28px; border-bottom:1px solid var(--gray-border); margin-bottom:24px; }
.pv-switches button { background:none; border:0; border-bottom:2px solid transparent; padding:12px 0; color:var(--gray); font:500 14px 'DM Sans',sans-serif; cursor:pointer; }
.pv-switches button[aria-pressed=true] { color:var(--black); border-bottom-color:var(--green); }
.pv-panel { margin:0; }
.pv-panel[hidden] { display:none; }
.pv-canvas { background:#f2f5f2; border:1px solid #e1e7e1; border-radius:8px; min-height:380px; padding:40px; display:flex; align-items:center; justify-content:center; }
.pv-panel figcaption { font-size:13px; color:var(--gray); margin-top:14px; line-height:1.6; }
.pv-receipt-stage { width:100%; max-width:780px; display:grid; grid-template-columns:1fr 48px 1.15fr; gap:24px; align-items:center; }
.pv-paper { position:relative; width:276px; max-width:100%; justify-self:center; padding:24px 18px 18px; background-color:#faf9f5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23808080' opacity='.08' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"),linear-gradient(94deg,#fffefa,#f1f0e9 48%,#fffefa 52%); border:0; box-shadow:1px 2px 3px #26362a16,5px 12px 18px #26362a18; transform:rotate(-2deg); font:11px/1.35 'Courier New',monospace; color:#373730; }
.pv-paper .pv-line { margin:4px 0; gap:8px; }
.pv-paper .pv-barcode { height:24px; margin:16px auto 8px; opacity:.8; }
.pv-tax-grid { display:grid; grid-template-columns:repeat(4,1fr); row-gap:6px; text-align:right; margin-top:16px; font-size:10px; }
.pv-tax-grid > :nth-child(4n+1) { text-align:left; }
.pv-paper .pv-pin-heading { text-align:left; margin-bottom:10px; font-weight:bold; }
.pv-paper::after { content:''; position:absolute; bottom:-5px; left:-1px; right:-1px; height:6px; background:linear-gradient(135deg,#faf9f2 50%,transparent 50%) 0 0/8px 8px repeat-x; }
.pv-paper .pv-receipt-address { font-size:10px; margin-top:8px; }
.pv-fuel { display:block; margin-bottom:8px; letter-spacing:.8px; }
.pv-paper .pv-receipt-total { font-size:16px; color:#30302a; }
.pv-receipt-thanks { margin-top:16px; font-size:10px; letter-spacing:1px; }
.pv-paper .pv-receipt-demo { margin-top:12px; font-size:9px; color:#77776b; line-height:1.5; }
.pv-paper > span { display:block; text-align:center; }
.pv-paper .pv-paper-brand { color:var(--black); font-size:17px; font-weight:700; letter-spacing:2px; margin-bottom:6px; }
.pv-paper-rule { border-top:1px dashed #aaa99d; margin:12px 0; }
.pv-line { display:flex; justify-content:space-between; gap:16px; margin:8px 0; }
.pv-barcode { height:26px; max-width:150px; margin:26px auto 0; background:repeating-linear-gradient(90deg,#555 0 2px,transparent 2px 5px,#555 5px 6px,transparent 6px 9px); }
.pv-arrow { color:#75877b; font-size:30px; text-align:center; }
.pv-result { background:white; border:1px solid #dce4dd; border-radius:8px; padding:26px; }
.pv-result-head { display:flex; align-items:center; gap:10px; font-size:15px; }
.pv-check { background:#e8f3eb; color:var(--green); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; }
.pv-result dl { margin:20px 0; }
.pv-result dl > div { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid #edf0ed; font-size:14px; }
.pv-result dt { color:var(--gray); }
.pv-result dd { margin:0; font-weight:500; }
.pv-result .pv-review { margin:0; font-size:12px; color:var(--green); }
.pv-earnings,.pv-report { width:100%; max-width:740px; background:white; border:1px solid #dce4dd; border-radius:8px; padding:30px; }
.pv-document-head { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.pv-label { font-size:11px; color:var(--gray); }
.site-page .pv-document-head h3 { font-size:20px; line-height:1.4; font-weight:600; margin-top:6px; }
.pv-period,.pv-file { font-size:12px; color:var(--gray); border:1px solid var(--gray-border); border-radius:4px; padding:6px 10px; }
.pv-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:32px 0; }
.pv-metrics span { display:block; font-size:12px; color:var(--gray); margin-bottom:8px; }
.pv-metrics strong { font-size:clamp(18px,2.3vw,28px); font-weight:600; letter-spacing:-.5px; }
.pv-chart { display:flex; height:52px; border-radius:4px; overflow:hidden; font-size:13px; }
.pv-chart span { display:flex; align-items:center; padding:0 16px; }
.pv-chart-net { width:75%; background:#247a50; color:white; }
.pv-chart-fee { width:25%; background:#dfe8df; color:#405544; }
.pv-legend { display:flex; justify-content:space-between; color:var(--gray); font-size:11px; margin-top:10px; }
.pv-total { padding-top:20px; margin:26px 0 0; border-top:1px solid var(--gray-border); font-size:12px; color:var(--gray); }
.pv-income-total { display:flex; flex-direction:column; gap:8px; margin:28px 0; }
.pv-income-total > span { color:var(--gray); font-size:13px; }
.pv-income-total strong { font-size:36px; font-weight:600; letter-spacing:-1px; }
.pv-income-total small { color:var(--gray); font-size:11px; }
.pv-platforms { display:grid; gap:24px; }
.pv-platform { display:grid; grid-template-columns:76px 1fr 90px; gap:20px; align-items:center; }
.pv-platform-name { font-size:16px; font-weight:700; letter-spacing:-.5px; }
.pv-sumup { color:#172e3c; }
.pv-bolt { color:#16874e; }
.pv-uber { color:#111; }
.pv-platform-track { height:18px; background:#f1f4f1; border-radius:3px; overflow:hidden; }
.pv-platform-track > span { display:block; height:100%; background:#8cae97; }
.pv-platform strong { text-align:right; font-size:14px; font-weight:500; white-space:nowrap; }
.pv-income-equation { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:18px 0; margin:-8px 0 26px; border-top:1px solid var(--gray-border); border-bottom:1px solid var(--gray-border); }
.pv-income-equation span { font-size:11px; color:var(--gray); }
.pv-income-equation strong { display:block; color:var(--black); font-size:18px; font-weight:500; margin-top:6px; }
.pv-source-detail { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:12px 0 0; }
.pv-source-detail dt { font-size:10px; color:var(--gray); margin-bottom:4px; }
.pv-source-detail dd { font-size:12px; margin:0; }
.pv-source + .pv-source { border-top:1px solid var(--gray-border); padding-top:20px; }
.pv-quarter-totals { margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:20px 0; border-top:1px solid var(--gray-border); border-bottom:1px solid var(--gray-border); }
.pv-quarter-totals span,.pv-quarter-totals small { display:block; color:var(--gray); font-size:11px; }
.pv-quarter-totals strong { display:block; font-size:24px; font-weight:600; letter-spacing:-.5px; margin:8px 0; }
.pv-vat-lines { margin:20px 0; }
.pv-vat-lines > div { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:10px 0; font-size:13px; }
.pv-vat-lines small { display:block; color:var(--gray); margin-top:4px; }
.pv-vat-lines strong { font-weight:500; white-space:nowrap; }
.pv-vat-balance { background:#eef4ef; border-left:3px solid var(--green); padding:20px; display:flex; flex-direction:column; gap:8px; }
.pv-vat-balance > span { color:#335741; font-size:13px; }
.pv-vat-balance strong { font-size:34px; font-weight:600; letter-spacing:-1px; }
.pv-vat-balance small { font-size:11px; color:var(--gray); }
.pv-cost-details { margin-top:22px; font-size:12px; }
.pv-cost-details summary { cursor:pointer; padding:8px 0; color:var(--gray); }
.pv-cost-details dl > div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--gray-border); }
.pv-cost-details dd { margin:0; white-space:nowrap; }
.pv-cost-details p,.pv-report .pv-vat-note { color:var(--gray); font-size:11px; line-height:1.6; margin:14px 0 0; }
.pv-report-total { display:flex; align-items:baseline; flex-wrap:wrap; gap:14px; padding:24px 0; margin:16px 0 8px; border-top:1px solid var(--gray-border); }
.pv-report-total span,.pv-report-total small { color:var(--gray); font-size:12px; }
.pv-report-total strong { font-size:30px; font-weight:600; letter-spacing:-1px; }
.pv-report-row { display:grid; grid-template-columns:100px 1fr 65px; gap:20px; align-items:center; font-size:13px; margin:20px 0; }
.pv-report-row > div { background:#f1f4f1; height:12px; border-radius:2px; overflow:hidden; }
.pv-report-row i { display:block; height:100%; background:#88aa91; }
.pv-report-row strong { font-weight:500; text-align:right; }
.pv-document-foot { display:flex; justify-content:space-between; gap:16px; font-size:11px; color:var(--gray); border-top:1px solid var(--gray-border); padding-top:20px; margin-top:28px; }
.pv-flow { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; list-style:none; padding:0; margin:36px 0 0; }
.pv-flow li { display:flex; align-items:baseline; gap:14px; border-top:1px solid var(--gray-border); padding-top:20px; }
.pv-flow li > span { color:#738278; font-size:12px; }
.site-page .pv-flow h3 { font-size:16px; font-weight:600; margin:0 0 6px; }
.pv-flow p { font-size:13px; color:var(--gray); line-height:1.6; }
@media(max-width:700px) {
  .site-page section.product-visuals { padding:38px 22px; }
  .pv-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .pv-canvas { padding:22px; min-height:0; }
  .pv-receipt-stage { grid-template-columns:1fr; gap:16px; max-width:360px; }
  .pv-paper { padding:22px 14px; max-width:276px; width:100%; justify-self:center; font-size:10px; }
  .pv-arrow { transform:rotate(90deg); line-height:1; }
  .pv-result,.pv-earnings,.pv-report { padding:20px; }
  .pv-flow { grid-template-columns:1fr; gap:16px; margin-top:28px; }
  .pv-metrics { grid-template-columns:1fr; gap:14px; margin:24px 0; }
  .pv-metrics > div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
  .pv-metrics span { margin:0; }
  .pv-metrics strong { font-size:22px; }
  .pv-platform { grid-template-columns:55px 1fr 73px; gap:10px; }
  .pv-platform-name { font-size:14px; }
  .pv-platform strong { font-size:12px; }
  .pv-income-total strong { font-size:30px; }
  .pv-quarter-totals { grid-template-columns:1fr; gap:18px; }
  .pv-quarter-totals strong { font-size:24px; }
  .pv-vat-lines > div { font-size:12px; gap:10px; }
  .pv-source-detail { gap:6px; }
  .pv-source-detail dd { font-size:11px; }
  .pv-report-row { grid-template-columns:76px 1fr 46px; gap:10px; font-size:11px; }
  .pv-report-total { gap:8px; }
  .pv-report-total > span { width:100%; }
  .pv-chart span { padding:0 8px; font-size:11px; }
  .pv-document-head { align-items:flex-start; }
  .pv-period { white-space:nowrap; padding:5px; font-size:10px; }
  .site-page .pv-document-head h3 { font-size:17px; }
}
.home-page .hero { padding-bottom:24px; }
.home-page section.product-visuals { padding-top:32px; }
@media(max-width:540px) {
  .home-page .hero { padding-bottom:16px; }
  .home-page section.product-visuals { padding-top:24px; }
  .home-page .pv-switches { gap:20px; }
  .home-page .pv-switches button { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
  .site-page,.site-page *,.site-page *::before,.site-page *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  html:has(.site-page) { scroll-behavior:auto; }
}