/* ================================================
   AGGRESSIVE OVERRIDE — forces 4-col layout
   Maximum specificity to win over any other CSS
   ================================================ */
body .payli-page-home section#pricing .pricing.pricing-4col,
body.page .payli-page-home #pricing .pricing.pricing-4col,
html body .payli-page-home .pricing.pricing-4col {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    padding-top: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 1100px) {
    body .payli-page-home .pricing.pricing-4col,
    body.page .payli-page-home .pricing.pricing-4col,
    html body .payli-page-home .pricing.pricing-4col {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }
}

@media (max-width: 700px) {
    body .payli-page-home .pricing.pricing-4col,
    body.page .payli-page-home .pricing.pricing-4col,
    html body .payli-page-home .pricing.pricing-4col {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Force individual cards to behave inside grid */
body .payli-page-home .pricing.pricing-4col > .price-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ================================================ */

/* ================================================
   FIX: Combo (featured) — alle tekst wit
   ================================================ */
body .payli-page-home .price-card.featured,
body .payli-page-home .price-card.featured * {
    color: white !important;
}

body .payli-page-home .price-card.featured h3,
body .payli-page-home .price-card.featured .plan-label,
body .payli-page-home .price-card.featured .desc,
body .payli-page-home .price-card.featured .price,
body .payli-page-home .price-card.featured .price .amount,
body .payli-page-home .price-card.featured .price .currency,
body .payli-page-home .price-card.featured .price .per,
body .payli-page-home .price-card.featured .pricing-features,
body .payli-page-home .price-card.featured .pricing-features li,
body .payli-page-home .price-card.featured .pricing-features li strong {
    color: white !important;
}

body .payli-page-home .price-card.featured .pricing-features svg {
    color: white !important;
    stroke: white !important;
}

body .payli-page-home .price-card.featured .badge-popular {
    background: white !important;
    color: var(--brand) !important;
}

/* De button binnen featured kaart blijft wit (al goed) */
body .payli-page-home .price-card.featured .btn.btn-light {
    background: white !important;
    color: var(--brand) !important;
}

/* ================================================
   FIX: Blauwe streep achter "online" definitief weg
   ================================================ */
body .payli-page-home .hero h1 em::after,
body .payli-page-home .hero h1 em::before {
    display: none !important;
    content: none !important;
    background: none !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
}

/* (Telefoon-positionering verplaatst naar einde voor hogere specificiteit) */

/* ================================================ */


/*
 * Payli Home Page Styles
 * Wordt alleen geladen op pagina's met template-payli-home.php
 * Alle selectors zijn gescoped onder .payli-page-home om Blocksy conflicten te vermijden.
 */

comment
.payli-page-home::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
  }
.payli-page-home .container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.payli-page-home a { color: inherit; text-decoration: none; }
.payli-page-home button { font-family: inherit; cursor: pointer; border: none; background: none; }
.payli-page-home .display {
    font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;
    font-variation-settings: 'wdth' 100;
    letter-spacing: -.04em;
  }
comment
.payli-page-home .bg-orb {
    position: fixed; pointer-events: none; z-index: 0;
    width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(circle, rgba(41,82,197,.18), transparent 65%);
    filter: blur(40px);
    top: -200px; right: -100px;
    animation: orb-float 18s ease-in-out infinite alternate;
  }
.payli-page-home .bg-orb.b {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(79,115,216,.15), transparent 65%);
    top: 60vh; left: -150px; right: auto;
    animation-delay: -6s;
    animation-duration: 22s;
  }
@keyframes orb-float {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(-60px, 80px) scale(1.1); }
    100% { transform: translate(40px, -40px) scale(.95); }
  }
comment
.payli-page-home .logo-img { height: 32px; width: auto; display: block; }
.payli-page-home .btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: inherit; font-size: 14.5px; font-weight: 600;
    padding: 11px 18px; border-radius: 999px;
    transition: all .25s var(--ease);
    line-height: 1; white-space: nowrap;
    position: relative; overflow: hidden;
  }
.payli-page-home .btn-primary { background: var(--brand); color: white; }
.payli-page-home .btn-primary:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: var(--shadow-brand); }
.payli-page-home .btn-primary::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent);
    transform: translateX(-100%);
    transition: transform .6s var(--ease);
  }
.payli-page-home .btn-primary:hover::before { transform: translateX(100%); }
.payli-page-home .btn-ghost { color: var(--ink-soft); padding: 11px 14px; font-weight: 500; }
.payli-page-home .btn-ghost:hover { color: var(--brand); }
.payli-page-home .btn-light { background: white; color: var(--brand); }
.payli-page-home .btn-light:hover { background: var(--brand-tint); transform: translateY(-2px); }
.payli-page-home .btn-outline {
    background: transparent; color: var(--ink); border: 1px solid var(--line);
    padding: 11px 18px;
  }
.payli-page-home .btn-outline:hover { background: var(--paper); border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.payli-page-home .btn-lg { padding: 15px 26px; font-size: 15.5px; }
comment
.payli-page-home .hero {
    padding: 56px 0 96px;
    position: relative;
    overflow: hidden;
  }
.payli-page-home .hero-grid {
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px;
    align-items: center; position: relative; z-index: 1;
  }
.payli-page-home .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600;
    padding: 7px 14px; border-radius: 999px;
    background: white; color: var(--ink-soft);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
  }
.payli-page-home .eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
    box-shadow: 0 0 0 4px rgba(41,82,197,.18);
    animation: dot-pulse 2s infinite;
  }
@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(41,82,197,.18); }
    50% { box-shadow: 0 0 0 8px rgba(41,82,197,.05); }
  }
.payli-page-home .hero h1 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: 'wdth' 100;
    font-size: clamp(54px, 9vw, 124px);
    line-height: .94;
    letter-spacing: -.05em;
    font-weight: 700;
    margin: 26px 0 22px;
    color: var(--ink);
  }
.payli-page-home .hero h1 em {
    font-style: italic; color: var(--brand); font-weight: 600;
    position: relative; display: inline-block;
    font-variation-settings: 'wdth' 90;
  }
.payli-page-home .hero h1 em::after {
    display: none;
  }
@keyframes highlight-in {
    to { transform: skewX(-3deg) scaleX(1); }
  }
.payli-page-home .hero p.lead {
    font-size: 19px; color: var(--muted); max-width: 540px; line-height: 1.55;
    margin-bottom: 32px;
  }
.payli-page-home .hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.payli-page-home .hero-meta {
    margin-top: 28px; display: flex; gap: 28px; align-items: center;
    font-size: 13.5px; color: var(--muted);
  }
.payli-page-home .hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.payli-page-home .hero-meta svg { color: var(--brand); }
comment
.payli-page-home .hero-visual { position: relative; height: 540px; }
.payli-page-home .hero-visual-inner { position: absolute; inset: 0; animation: float-y 6s ease-in-out infinite; }
@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
.payli-page-home .device-pos {
    position: absolute; right: 0; top: -30px;
    width: 280px; height: 480px;
    border-radius: 38px;
    background: var(--ink);
    padding: 12px;
    box-shadow: var(--shadow-lg), 0 60px 100px -40px rgba(14,20,48,.5);
    transform: rotate(4deg);
    z-index: 2;
  }
.payli-page-home .device-pos-screen {
    width: 100%; height: 100%; border-radius: 28px;
    background: linear-gradient(160deg, #1B2148 0%, #0E1430 100%);
    overflow: hidden; position: relative;
    color: white;
    padding: 22px 16px;
    display: flex; flex-direction: column; gap: 12px;
  }
.payli-page-home .pos-topbar { display:flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.6); padding: 0 4px; }
.payli-page-home .pos-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 12px; }
.payli-page-home .pos-header h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.payli-page-home .pos-search {
    background: rgba(255,255,255,.08); border-radius: 10px; padding: 8px 12px;
    font-size: 11px; color: rgba(255,255,255,.5); display: flex; align-items: center; gap: 8px;
  }
.payli-page-home .pos-search .typing {
    border-right: 1.5px solid rgba(255,255,255,.6);
    animation: caret 1s step-end infinite;
    padding-right: 1px;
  }
@keyframes caret { 50% { border-color: transparent; } }
.payli-page-home .pos-tabs { display: flex; gap: 6px; font-size: 10.5px; flex-wrap: wrap; }
.payli-page-home .pos-tabs span { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); transition: all .3s; }
.payli-page-home .pos-tabs span.active { background: var(--brand-light); color: white; font-weight: 600; }
.payli-page-home .pos-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; flex: 1; }
.payli-page-home .pos-product {
    background: rgba(255,255,255,.04); border-radius: 12px; padding: 10px;
    display: flex; flex-direction: column; justify-content: space-between;
    border: 1px solid rgba(255,255,255,.05);
    transition: transform .3s var(--ease);
  }
.payli-page-home .pos-product:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); }
.payli-page-home .pos-product .img { height: 38px; border-radius: 6px; margin-bottom: 6px; }
comment
.payli-page-home .pos-product .img.a { background: linear-gradient(135deg, #B5C7F0, #4F73D8); }
.payli-page-home .pos-product .img.b { background: linear-gradient(135deg, #DCE5F6, #2952C5); }
.payli-page-home .pos-product .img.c { background: linear-gradient(135deg, #7E9BE8, #1A3AA3); }
.payli-page-home .pos-product .img.d { background: linear-gradient(135deg, #4F73D8, #102985); }
.payli-page-home .pos-product .name { font-size: 10px; color: rgba(255,255,255,.85); }
.payli-page-home .pos-product .price { font-size: 11px; color: var(--brand-light); font-weight: 700; margin-top: 2px; }
.payli-page-home .pos-total {
    background: rgba(255,255,255,.05); border-radius: 12px; padding: 10px 12px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px;
  }
.payli-page-home .pos-total .total-label { color: rgba(255,255,255,.6); }
.payli-page-home .pos-total .amount { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.payli-page-home .pos-pay-btn {
    background: var(--brand); color: white; border-radius: 12px;
    padding: 12px; text-align: center; font-size: 12.5px; font-weight: 700;
    position: relative; overflow: hidden;
  }
.payli-page-home .pos-pay-btn::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.3), transparent);
    transform: translateX(-100%);
    animation: shine 3s ease-in-out infinite;
  }
@keyframes shine {
    0%, 60% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
.payli-page-home .device-shop {
    position: absolute; left: 0; bottom: 30px;
    width: 380px; height: 280px;
    border-radius: 16px; overflow: hidden;
    background: white;
    box-shadow: var(--shadow-lg), 0 40px 80px -30px rgba(14,20,48,.3);
    transform: rotate(-3deg);
    z-index: 1;
    border: 1px solid var(--line);
    animation: float-y 6s ease-in-out infinite;
    animation-delay: -2s;
  }
.payli-page-home .browser-bar {
    height: 28px; background: var(--soft-2); border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: center; padding: 0 12px; gap: 6px;
  }
.payli-page-home .browser-bar .dot { width: 9px; height: 9px; border-radius: 50%; }
.payli-page-home .browser-bar .dot:nth-child(1) { background: #FF5A37; opacity: .6; }
.payli-page-home .browser-bar .dot:nth-child(2) { background: #E8B845; opacity: .6; }
.payli-page-home .browser-bar .dot:nth-child(3) { background: var(--brand); opacity: .6; }
.payli-page-home .browser-url { margin-left: 12px; font-size: 10px; color: var(--muted); background: var(--bg); padding: 3px 10px; border-radius: 6px; }
.payli-page-home .shop-content { padding: 14px; }
.payli-page-home .shop-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.payli-page-home .shop-header .brand { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.payli-page-home .shop-header .nav-mini { display: flex; gap: 12px; font-size: 9px; color: var(--muted); }
.payli-page-home .shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.payli-page-home .shop-item .img { height: 80px; border-radius: 8px; }
.payli-page-home .shop-item .img.a { background: linear-gradient(135deg, #B5C7F0, #4F73D8); }
.payli-page-home .shop-item .img.b { background: linear-gradient(135deg, #DCE5F6, #2952C5); }
.payli-page-home .shop-item .img.c { background: linear-gradient(135deg, #7E9BE8, #1A3AA3); }
.payli-page-home .shop-item .name { font-size: 9.5px; margin-top: 6px; color: var(--ink); font-weight: 600; }
.payli-page-home .shop-item .price { font-size: 9px; color: var(--muted); }
.payli-page-home .toast-stack {
    position: absolute; left: -20px; top: 0;
    z-index: 4; display: flex; flex-direction: column; gap: 10px;
    pointer-events: none;
  }
.payli-page-home .toast {
    background: white; color: var(--ink);
    padding: 12px 14px; border-radius: 14px;
    font-size: 12px; display: flex; align-items: center; gap: 10px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    min-width: 220px;
    transform: translateX(-340px);
    opacity: 0;
    transition: all .6s var(--ease);
  }
.payli-page-home .toast.show { transform: translateX(0); opacity: 1; }
.payli-page-home .toast .icon-circle {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--brand-tint); color: var(--brand);
    display: grid; place-items: center; flex-shrink: 0;
  }
.payli-page-home .toast .icon-circle.green { background: rgba(31,181,122,.15); color: var(--green); }
.payli-page-home .toast .text { flex: 1; }
.payli-page-home .toast .text strong { display: block; font-weight: 700; font-size: 12.5px; }
.payli-page-home .toast .text span { color: var(--muted); font-size: 10.5px; }
comment
.payli-page-home .trust {
    padding: 40px 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    overflow: hidden;
    background: var(--paper);
  }
.payli-page-home .trust-label {
    text-align: center; font-size: 12.5px; color: var(--muted);
    letter-spacing: .14em; text-transform: uppercase; margin-bottom: 26px; font-weight: 600;
  }
.payli-page-home .marquee {
    display: flex; gap: 64px; animation: marquee 38s linear infinite;
    width: max-content; align-items: center;
  }
.payli-page-home .marquee-wrap { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.payli-page-home .marquee:hover { animation-play-state: paused; }
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
.payli-page-home .trust-item {
    color: var(--ink-soft); white-space: nowrap; opacity: .55;
    line-height: 1;
  }
.payli-page-home .trust-item.s1 { font-family: 'Bricolage Grotesque', sans-serif; font-style: italic; font-weight: 400; font-size: 26px; letter-spacing: -.02em; }
.payli-page-home .trust-item.s2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 15px; }
.payli-page-home .trust-item.s3 { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 32px; letter-spacing: -.02em; }
.payli-page-home .trust-item.s4 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -.04em; }
.payli-page-home .trust-item.s5 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -.03em; font-variation-settings: 'wdth' 90; }
.payli-page-home .trust-item.s6 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; font-size: 20px; letter-spacing: .02em; }
.payli-page-home .trust-item.s7 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 300; font-size: 28px; letter-spacing: -.04em; font-variation-settings: 'wdth' 110; }
.payli-page-home .trust-bullet { width: 4px; height: 4px; border-radius: 50%; background: var(--brand); opacity: .4; flex-shrink: 0; }
comment
.payli-page-home .stats {
    padding: 80px 0;
    position: relative;
    z-index: 1;
  }
.payli-page-home .stats-grid {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
    background: var(--paper); border: 1px solid var(--line-soft);
    border-radius: 28px; overflow: hidden;
  }
.payli-page-home .stat {
    padding: 40px 32px;
    border-right: 1px solid var(--line-soft);
    position: relative;
    display: flex; flex-direction: column; justify-content: center;
  }
.payli-page-home .stat:last-child { border-right: none; }
.payli-page-home .stat-hero {
    background: var(--brand);
    color: white;
    padding: 56px 40px;
  }
.payli-page-home .stat-hero .stat-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(64px, 8vw, 104px);
    font-weight: 700; letter-spacing: -.05em;
    line-height: .9;
    color: white;
    margin-bottom: 12px;
    display: flex; align-items: baseline; gap: 4px;
  }
.payli-page-home .stat-hero .stat-value .suffix { font-size: 48px; opacity: .9; }
.payli-page-home .stat-hero .stat-label { font-size: 15px; color: rgba(255,255,255,.85); font-weight: 500; max-width: 260px; line-height: 1.4; }
.payli-page-home .stat:not(.stat-hero) .stat-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 48px; font-weight: 700; letter-spacing: -.04em;
    line-height: 1; color: var(--brand);
    margin-bottom: 8px;
    display: inline-flex; align-items: baseline; gap: 2px;
  }
.payli-page-home .stat:not(.stat-hero) .stat-value .suffix { font-size: 24px; font-weight: 600; opacity: .8; }
.payli-page-home .stat:not(.stat-hero) .stat-label { font-size: 13.5px; color: var(--muted); font-weight: 500; }
comment
.payli-page-home section { padding: 96px 0; position: relative; z-index: 1; }
.payli-page-home .section-eyebrow {
    font-size: 12.5px; color: var(--brand); font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px;
    display: inline-flex; align-items: center; gap: 10px;
  }
.payli-page-home .section-eyebrow::before {
    content: ''; width: 24px; height: 1px; background: var(--brand);
  }
.payli-page-home .section-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: 'wdth' 100;
    font-size: clamp(36px, 5.5vw, 64px);
    line-height: 1.0; letter-spacing: -.04em; font-weight: 700;
    max-width: 780px; color: var(--ink);
  }
.payli-page-home .section-title em {
    font-style: italic; color: var(--brand); font-weight: 600;
    font-variation-settings: 'wdth' 90;
  }
.payli-page-home .section-sub {
    font-size: 18px; color: var(--muted); max-width: 560px;
    margin-top: 18px; line-height: 1.55;
  }
.payli-page-home .section-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 40px; margin-bottom: 56px;
  }
comment
.payli-page-home .showcase-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  }
.payli-page-home .showcase-card {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 28px; padding: 48px 44px;
    position: relative; overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  }
.payli-page-home .showcase-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.payli-page-home .showcase-card.dark { background: var(--ink); color: white; border-color: var(--ink-2); }
.payli-page-home .showcase-card .label {
    font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); font-weight: 700; margin-bottom: 18px;
  }
.payli-page-home .showcase-card.dark .label { color: var(--brand-light); }
.payli-page-home .showcase-card h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(30px, 3.5vw, 40px); font-weight: 700;
    line-height: 1.0; letter-spacing: -.04em; margin-bottom: 14px;
  }
.payli-page-home .showcase-card h3 em { font-style: italic; color: var(--brand); font-weight: 600; font-variation-settings: 'wdth' 90; }
.payli-page-home .showcase-card.dark h3 em { color: var(--brand-light); }
.payli-page-home .showcase-card p {
    color: var(--muted); font-size: 16px; line-height: 1.55; margin-bottom: 28px;
  }
.payli-page-home .showcase-card.dark p { color: rgba(255,255,255,.65); }
.payli-page-home .feature-list { list-style: none; margin-bottom: 32px; }
.payli-page-home .feature-list li {
    padding: 10px 0; font-size: 15px; display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid var(--line-soft);
    font-weight: 500;
  }
.payli-page-home .showcase-card.dark .feature-list li { border-color: rgba(255,255,255,.08); }
.payli-page-home .feature-list li:last-child { border-bottom: none; }
.payli-page-home .feature-list .check {
    width: 22px; height: 22px; border-radius: 50%; background: var(--brand);
    display: grid; place-items: center; flex-shrink: 0;
  }
.payli-page-home .feature-list .check svg { width: 12px; height: 12px; color: white; }
.payli-page-home .showcase-mock {
    margin-top: 32px; border-radius: 16px; overflow: hidden;
    background: var(--bg); aspect-ratio: 16/9; position: relative;
  }
.payli-page-home .showcase-card.dark .showcase-mock { background: var(--ink-2); }
.payli-page-home .mock-pos-large {
    width: 100%; height: 100%; padding: 24px; display: grid;
    grid-template-columns: 1.4fr 1fr; gap: 16px;
    background: linear-gradient(135deg, #0E1430 0%, #1B2148 100%);
  }
.payli-page-home .mock-pos-large .left { display: flex; flex-direction: column; gap: 12px; }
.payli-page-home .mock-pos-large .left h4 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 14px; font-weight: 700; color: white; letter-spacing: -.02em; }
.payli-page-home .mock-pos-large .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: 1; }
.payli-page-home .mock-pos-large .product-tile {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px; padding: 8px; font-size: 9px; color: rgba(255,255,255,.7);
    display: flex; flex-direction: column; gap: 4px;
  }
.payli-page-home .mock-pos-large .product-tile .ph { height: 24px; border-radius: 4px; }
.payli-page-home .mock-pos-large .right {
    background: rgba(255,255,255,.03); border-radius: 12px; padding: 16px;
    display: flex; flex-direction: column; gap: 8px;
  }
.payli-page-home .mock-pos-large .cart-item {
    display: flex; justify-content: space-between; padding: 6px 0;
    font-size: 9.5px; color: rgba(255,255,255,.85);
    border-bottom: 1px dashed rgba(255,255,255,.08);
  }
.payli-page-home .mock-pos-large .total {
    margin-top: auto; font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 24px; font-weight: 700; letter-spacing: -.03em;
    color: var(--brand-light);
  }
.payli-page-home .mock-pos-large .pay-btn {
    background: var(--brand); color: white; padding: 8px;
    border-radius: 8px; text-align: center; font-size: 11px; font-weight: 700;
  }
.payli-page-home .mock-shop-large { width: 100%; height: 100%; background: white; }
.payli-page-home .mock-shop-large .topbar {
    height: 24px; background: var(--soft-2); border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: center; padding: 0 10px; gap: 5px;
  }
.payli-page-home .mock-shop-large .topbar .d { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.payli-page-home .mock-shop-large .body {
    padding: 18px 20px; display: flex; flex-direction: column; gap: 12px;
  }
.payli-page-home .mock-shop-large .head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.payli-page-home .mock-shop-large .brand { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
.payli-page-home .mock-shop-large .nav-mini { display: flex; gap: 14px; font-size: 9px; color: var(--muted); }
.payli-page-home .mock-shop-large .hero-banner {
    background: linear-gradient(135deg, var(--brand-tint), var(--brand-soft));
    border-radius: 8px; padding: 14px; display: flex; justify-content: space-between; align-items: center;
  }
.payli-page-home .mock-shop-large .hero-banner h5 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.payli-page-home .mock-shop-large .shop-cta { background: var(--brand); color: white; padding: 4px 10px; border-radius: 999px; font-size: 8.5px; font-weight: 600; }
.payli-page-home .mock-shop-large .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.payli-page-home .mock-shop-large .item { display: flex; flex-direction: column; gap: 4px; }
.payli-page-home .mock-shop-large .item .ph { height: 50px; border-radius: 6px; }
.payli-page-home .mock-shop-large .item .nm { font-size: 8.5px; font-weight: 600; }
.payli-page-home .mock-shop-large .item .pr { font-size: 8px; color: var(--muted); }
comment
.payli-page-home .bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(220px, auto);
    gap: 16px;
  }
.payli-page-home .bento-card {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 22px; padding: 28px;
    display: flex; flex-direction: column; justify-content: space-between;
    overflow: hidden; position: relative;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  }
.payli-page-home .bento-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.payli-page-home .bento-card .icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--brand-tint); color: var(--brand);
    display: grid; place-items: center; margin-bottom: 16px;
    position: relative;
  }
.payli-page-home .bento-card .icon::after {
    content: ''; position: absolute; inset: 6px;
    border-radius: 8px; border: 1px solid currentColor; opacity: .15;
  }
.payli-page-home .bento-card h4 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 23px; font-weight: 700;
    line-height: 1.15; letter-spacing: -.03em; margin-bottom: 8px;
  }
.payli-page-home .bento-card p { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.payli-page-home .bento-card.b-1 {
    grid-column: span 3; grid-row: span 2;
    background: var(--brand);
    color: white; border-color: var(--brand-dark);
    background-image:
      radial-gradient(800px 320px at 20% 0%, rgba(255,255,255,.10), transparent 60%),
      radial-gradient(500px 240px at 100% 100%, rgba(255,255,255,.08), transparent 70%);
  }
.payli-page-home .bento-card.b-1 p { color: rgba(255,255,255,.78); }
.payli-page-home .bento-card.b-1 h4 { font-size: 38px; max-width: 380px; line-height: 1.05; }
.payli-page-home .bento-card.b-1 .icon { background: rgba(255,255,255,.18); color: white; }
.payli-page-home .bento-card.b-2 { grid-column: span 3; }
.payli-page-home .bento-card.b-3 { grid-column: span 2; background: linear-gradient(170deg, var(--paper), var(--soft)); }
.payli-page-home .bento-card.b-4 { grid-column: span 2; }
.payli-page-home .bento-card.b-5 { grid-column: span 2; }
.payli-page-home .bento-viz {
    margin-top: 18px; display: flex; gap: 6px; align-items: flex-end; height: 80px;
  }
.payli-page-home .bento-viz .bar {
    flex: 1; background: var(--brand); border-radius: 4px 4px 0 0;
    opacity: .85;
    height: 0;
    transition: height 1.2s var(--ease);
  }
.payli-page-home .reveal.in .bento-viz .bar { transition-delay: .2s; }
.payli-page-home .reveal.in .bento-viz .bar:nth-child(1) { height: 40%; }
.payli-page-home .reveal.in .bento-viz .bar:nth-child(2) { height: 60%; transition-delay: .25s; }
.payli-page-home .reveal.in .bento-viz .bar:nth-child(3) { height: 30%; transition-delay: .3s; }
.payli-page-home .reveal.in .bento-viz .bar:nth-child(4) { height: 75%; transition-delay: .35s; }
.payli-page-home .reveal.in .bento-viz .bar:nth-child(5) { height: 90%; opacity: 1; transition-delay: .4s; }
.payli-page-home .reveal.in .bento-viz .bar:nth-child(6) { height: 55%; transition-delay: .45s; }
.payli-page-home .reveal.in .bento-viz .bar:nth-child(7) { height: 70%; transition-delay: .5s; }
.payli-page-home .sync-illustration {
    width: 100%; margin-top: 16px;
    display: flex; align-items: center; justify-content: space-around;
    position: relative;
  }
.payli-page-home .sync-illustration .node {
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
    padding: 10px 14px; border-radius: 12px; font-size: 11px; color: white;
    display: flex; align-items: center; gap: 6px; font-weight: 600;
    position: relative; z-index: 2;
  }
.payli-page-home .sync-illustration .arrow {
    color: rgba(255,255,255,.4);
    position: relative; z-index: 1;
  }
.payli-page-home .sync-illustration .traveling-dot {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    background: white; box-shadow: 0 0 10px rgba(255,255,255,.8);
    top: 50%; left: 25%; margin-top: -4px;
    animation: travel 3s linear infinite;
    z-index: 3;
  }
@keyframes travel {
    0% { left: 23%; opacity: 0; }
    10% { opacity: 1; }
    50% { left: 50%; opacity: 1; }
    90% { left: 75%; opacity: 1; }
    100% { left: 77%; opacity: 0; }
  }
.payli-page-home .receipt-mini {
    background: white; border-radius: 8px; padding: 14px; margin-top: 16px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-soft);
    box-shadow: 0 4px 12px rgba(14,20,48,.08);
    border: 1px solid var(--line-soft);
  }
.payli-page-home .receipt-mini .r-header { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 14px; text-align: center; padding-bottom: 8px; border-bottom: 1px dashed var(--line); letter-spacing: -.02em; }
.payli-page-home .receipt-mini .r-line { display: flex; justify-content: space-between; padding: 4px 0; font-size: 9.5px; color: var(--muted); }
.payli-page-home .receipt-mini .r-total { display: flex; justify-content: space-between; border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 6px; font-weight: 700; color: var(--brand); font-family: 'Bricolage Grotesque', sans-serif; font-size: 12px; letter-spacing: -.02em; }
comment
.payli-page-home .quote-breaker {
    background: var(--cream);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--cream-line);
    border-bottom: 1px solid var(--cream-line);
  }
.payli-page-home .quote-breaker::before {
    content: ''; position: absolute; inset: 0;
    background:
      radial-gradient(800px 400px at 10% 30%, rgba(41,82,197,.04), transparent 60%),
      radial-gradient(700px 300px at 90% 80%, rgba(232,184,69,.06), transparent 60%);
    pointer-events: none;
  }
.payli-page-home .big-quote-wrap {
    position: relative; z-index: 1;
    max-width: 920px; margin: 0 auto;
    padding: 0 28px;
    text-align: center;
  }
.payli-page-home .quote-mark-svg {
    color: var(--brand); opacity: .15;
    margin: 0 auto 24px;
    width: 80px; height: 64px;
    display: block;
  }
.payli-page-home .big-quote-text {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(40px, 6.5vw, 88px);
    font-weight: 400; line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: 48px;
  }
.payli-page-home .big-quote-text em {
    font-style: italic; color: var(--brand);
  }
.payli-page-home .big-quote-attr {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 12px 20px;
    background: rgba(255,255,255,.6);
    border: 1px solid var(--cream-line);
    border-radius: 999px;
  }
.payli-page-home .big-quote-attr .av {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-light), var(--brand));
    color: white; display: grid; place-items: center; font-weight: 700; font-size: 14px;
  }
.payli-page-home .big-quote-attr .info { text-align: left; }
.payli-page-home .big-quote-attr strong { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.payli-page-home .big-quote-attr span { font-size: 12.5px; color: var(--muted); }
comment
.payli-page-home .how-it-works {
    background: var(--cream-soft);
    border-top: 1px solid var(--cream-line);
    border-bottom: 1px solid var(--cream-line);
    position: relative;
    overflow: hidden;
  }
.payli-page-home .how-it-works::before {
    content: ''; position: absolute; inset: 0;
    background-image:
      radial-gradient(900px 400px at 80% 20%, rgba(41,82,197,.05), transparent 60%);
    pointer-events: none;
  }
.payli-page-home .steps-wrap { position: relative; margin-top: 64px; }
.payli-page-home .step-connector {
    position: absolute;
    top: 88px; left: 8%; right: 8%;
    height: 2px; pointer-events: none; z-index: 0;
  }
.payli-page-home .step-connector svg { width: 100%; height: 100%; overflow: visible; }
.payli-page-home .step-connector path {
    stroke: var(--brand); stroke-width: 2; stroke-dasharray: 6 8;
    fill: none; opacity: 0;
    stroke-dashoffset: 1000;
    transition: opacity .6s var(--ease), stroke-dashoffset 2s var(--ease) .3s;
  }
.payli-page-home .reveal.in .step-connector path { opacity: .35; stroke-dashoffset: 0; }
.payli-page-home .steps {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    position: relative; z-index: 1;
  }
.payli-page-home .step {
    background: var(--paper); border: 1px solid var(--cream-line);
    border-radius: 22px; padding: 40px 32px;
    position: relative;
    transition: all .3s var(--ease);
  }
.payli-page-home .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-soft); }
.payli-page-home .step-num {
    font-family: 'Instrument Serif', serif;
    font-style: italic; font-size: 124px; font-weight: 400;
    line-height: .85; color: var(--brand);
    margin-bottom: 16px; letter-spacing: -.04em;
    opacity: .92;
  }
.payli-page-home .step h4 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; font-weight: 700; margin-bottom: 10px; letter-spacing: -.03em; }
.payli-page-home .step p { color: var(--muted); font-size: 15px; line-height: 1.55; }
comment
.payli-page-home .testimonials {
    background: var(--paper);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
  }
.payli-page-home .testi-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  }
.payli-page-home .testi {
    padding: 36px 32px;
    border-radius: 22px;
    background: var(--bg);
    border: 1px solid var(--line-soft);
    display: flex; flex-direction: column;
    gap: 20px;
    transition: all .3s var(--ease);
  }
.payli-page-home .testi:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.payli-page-home .testi-quote {
    font-family: 'Instrument Serif', serif;
    font-size: 22px; font-weight: 400; line-height: 1.3;
    color: var(--ink); letter-spacing: -.01em;
    flex: 1;
  }
.payli-page-home .testi-rating { display: flex; gap: 2px; }
.payli-page-home .testi-rating svg { color: var(--gold); }
.payli-page-home .testi-author { display: flex; align-items: center; gap: 12px; }
.payli-page-home .testi-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; color: white;
    font-size: 16px; flex-shrink: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
.payli-page-home .testi-avatar.a { background: linear-gradient(135deg, #4F73D8, #2952C5); }
.payli-page-home .testi-avatar.b { background: linear-gradient(135deg, #1A3AA3, #102985); }
.payli-page-home .testi-avatar.c { background: linear-gradient(135deg, #7E9BE8, #4F73D8); }
.payli-page-home .testi-author .name { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; }
.payli-page-home .testi-author .role { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
comment
.payli-page-home .industries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.payli-page-home .industry {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 22px; padding: 36px 32px; min-height: 360px;
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    transition: all .3s var(--ease);
  }
.payli-page-home .industry:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-soft); }
.payli-page-home .industry-icon-block {
    width: 68px; height: 68px;
    border-radius: 18px;
    background: var(--brand);
    color: white;
    display: grid; place-items: center;
    margin-bottom: 28px;
    position: relative;
    transition: transform .4s var(--ease);
  }
.payli-page-home .industry:hover .industry-icon-block { transform: scale(1.05) rotate(-3deg); }
.payli-page-home .industry.a .industry-icon-block { background: linear-gradient(135deg, var(--brand-light), var(--brand)); }
.payli-page-home .industry.b .industry-icon-block { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); }
.payli-page-home .industry.c .industry-icon-block { background: linear-gradient(135deg, var(--brand-dark), var(--brand-darker)); }
.payli-page-home .industry-icon-block svg { width: 32px; height: 32px; }
.payli-page-home .industry .badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--brand-tint); color: var(--brand);
    padding: 5px 12px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; align-self: flex-start;
    letter-spacing: -.005em;
    margin-bottom: 14px;
  }
.payli-page-home .industry h4 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 28px; font-weight: 700;
    line-height: 1.05; letter-spacing: -.03em; margin-bottom: 14px;
    color: var(--ink);
  }
.payli-page-home .industry h4 em { font-style: italic; color: var(--brand); font-weight: 600; font-variation-settings: 'wdth' 90; }
.payli-page-home .industry p { font-size: 14.5px; color: var(--muted); line-height: 1.55; margin-bottom: 24px; flex: 1; }
.payli-page-home .industry-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; color: var(--brand);
  }
.payli-page-home .industry-link svg { transition: transform .25s var(--ease); }
.payli-page-home .industry:hover .industry-link svg { transform: translateX(6px); }
.payli-page-home .industry-deco {
    position: absolute; right: -50px; top: -40px; width: 220px; height: 220px;
    border-radius: 50%; opacity: .04;
    pointer-events: none;
    background: radial-gradient(circle, var(--brand), transparent 70%);
    transition: transform .6s var(--ease), opacity .3s;
  }
.payli-page-home .industry:hover .industry-deco { transform: scale(1.3) rotate(20deg); opacity: .08; }
comment
.payli-page-home .usp-strip {
    background: var(--ink);
    color: white;
    padding: 22px 0;
    overflow: hidden;
    position: relative;
  }
.payli-page-home .usp-strip::before {
    content: ''; position: absolute; inset: 0;
    background:
      radial-gradient(800px 200px at 50% 50%, rgba(41,82,197,.4), transparent 70%);
    pointer-events: none;
  }
.payli-page-home .usp-marquee {
    display: flex; gap: 56px; animation: marquee-rev 32s linear infinite;
    width: max-content; align-items: center;
    position: relative;
  }
.payli-page-home .usp-marquee-wrap { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
@keyframes marquee-rev {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
  }
.payli-page-home .usp-item {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 600; letter-spacing: -.01em;
    white-space: nowrap;
  }
.payli-page-home .usp-item svg { color: var(--brand-light); flex-shrink: 0; }
.payli-page-home .usp-divider { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.3); flex-shrink: 0; }
comment
.payli-page-home .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }

/* 4-koloms layout — gebruikt voor Free + POS + Webshop + Combo */
.payli-page-home .pricing.pricing-4col {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  padding-top: 24px !important; /* ruimte voor "Meest gekozen" badge */
}
.payli-page-home .pricing-4col .price-card {
  padding: 28px 22px;
}
.payli-page-home .pricing-4col .price-card h3 {
  font-size: 22px;
}
.payli-page-home .pricing-4col .price-card .desc {
  font-size: 13px;
}
.payli-page-home .pricing-4col .price-card .price .amount {
  font-size: 52px;
}
.payli-page-home .pricing-4col .pricing-features li {
  font-size: 13px;
  padding: 5px 0;
}
/* In 4-koloms: featured kaart niet uitsteken (zou awkward ogen rechts) */
.payli-page-home .pricing-4col .price-card.featured { transform: translateY(0); }
.payli-page-home .pricing-4col .price-card.featured:hover { transform: translateY(-4px); }

/* 4-koloms layout — gebruikt door home page met Free + POS + Webshop + Combo */
.payli-page-home .pricing.pricing-4col {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  padding-top: 24px !important; /* ruimte voor "Meest gekozen" badge */
}
.payli-page-home .pricing-4col .price-card {
  padding: 28px 22px;
}
.payli-page-home .pricing-4col .price-card h3 {
  font-size: 22px;
}
.payli-page-home .pricing-4col .price-card .desc {
  font-size: 13px;
}
.payli-page-home .pricing-4col .price-card .price .amount {
  font-size: 52px;
}
.payli-page-home .pricing-4col .pricing-features li {
  font-size: 13px;
  padding: 5px 0;
}
.payli-page-home .price-card {
    background: var(--paper); border: 1px solid var(--line-soft);
    border-radius: 24px; padding: 36px 32px;
    display: flex; flex-direction: column;
    position: relative;
    transition: all .3s var(--ease);
  }
.payli-page-home .price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.payli-page-home .price-card.featured {
    background: var(--brand); color: white; border-color: var(--brand-dark);
    box-shadow: var(--shadow-brand);
    background-image: radial-gradient(700px 280px at 30% 0%, rgba(255,255,255,.10), transparent 60%);
    transform: translateY(-12px);
  }
.payli-page-home .price-card.featured:hover { transform: translateY(-16px); }
/* In 4-koloms layout: featured kaart niet hoger laten staan (zou awkward ogen rechts) */
.payli-page-home .pricing-4col .price-card.featured { transform: translateY(0); }
.payli-page-home .pricing-4col .price-card.featured:hover { transform: translateY(-4px); }

.payli-page-home .price-card .plan-label {
    font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); font-weight: 700; margin-bottom: 8px;
  }
.payli-page-home .price-card.featured .plan-label { color: rgba(255,255,255,.85); }
.payli-page-home .price-card h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 28px; font-weight: 700;
    margin-bottom: 8px; letter-spacing: -.03em;
  }
.payli-page-home .price-card .desc { color: var(--muted); font-size: 14.5px; min-height: 44px; margin-bottom: 24px; }
.payli-page-home .price-card.featured .desc { color: rgba(255,255,255,.78); }
.payli-page-home .price {
    display: flex; align-items: baseline; gap: 4px;
    margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line-soft);
    font-family: 'Bricolage Grotesque', sans-serif;
  }
.payli-page-home .price-card.featured .price { border-color: rgba(255,255,255,.18); }
.payli-page-home .price .amount { font-size: 64px; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.payli-page-home .price .currency { font-size: 32px; font-weight: 700; }
.payli-page-home .price .per { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; color: var(--muted); margin-left: 4px; font-weight: 500; }
.payli-page-home .price-card.featured .price .per { color: rgba(255,255,255,.7); }
.payli-page-home .price-card .pricing-features { list-style: none; flex: 1; margin-bottom: 28px; }
.payli-page-home .price-card .pricing-features li {
    padding: 8px 0; font-size: 14px; display: flex; align-items: flex-start; gap: 10px; font-weight: 500;
  }
.payli-page-home .price-card.featured .pricing-features li { color: rgba(255,255,255,.92); }
.payli-page-home .price-card .pricing-features svg { flex-shrink: 0; margin-top: 4px; color: var(--brand); }
.payli-page-home .price-card.featured .pricing-features svg { color: white; }
.payli-page-home .badge-popular {
    position: absolute; top: 28px; right: 28px;
    background: white; color: var(--brand);
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
    letter-spacing: -.005em;
  }
comment
.payli-page-home .faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; }
.payli-page-home .faq-item {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    overflow: hidden;
    transition: all .3s var(--ease);
  }
.payli-page-home .faq-item:hover { border-color: var(--brand-soft); }
.payli-page-home .faq-item.open { border-color: var(--brand-soft); box-shadow: var(--shadow-sm); }
.payli-page-home .faq-q {
    width: 100%;
    padding: 22px 28px;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; text-align: left;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px; font-weight: 600; color: var(--ink);
    letter-spacing: -.02em;
  }
.payli-page-home .faq-q .icon-toggle {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--brand-tint); color: var(--brand);
    display: grid; place-items: center; flex-shrink: 0;
    transition: all .3s var(--ease);
  }
.payli-page-home .faq-item.open .icon-toggle { background: var(--brand); color: white; transform: rotate(45deg); }
.payli-page-home .faq-a {
    max-height: 0; overflow: hidden;
    transition: max-height .4s var(--ease), padding .4s var(--ease);
    padding: 0 28px;
  }
.payli-page-home .faq-item.open .faq-a {
    max-height: 300px; padding: 0 28px 24px;
  }
.payli-page-home .faq-a p {
    color: var(--muted); font-size: 15px; line-height: 1.6;
    max-width: 680px;
  }
comment
.payli-page-home .cta-section {
    background: var(--ink); color: white;
    border-radius: 32px; padding: 88px 64px;
    margin: 0 auto; max-width: 1184px;
    position: relative; overflow: hidden;
    text-align: center;
  }
.payli-page-home .cta-section::before {
    content: ''; position: absolute; inset: 0;
    background:
      radial-gradient(900px 360px at 50% 0%, rgba(41,82,197,.40), transparent 60%),
      radial-gradient(500px 240px at 100% 100%, rgba(79,115,216,.18), transparent 70%);
    animation: cta-pulse 8s ease-in-out infinite;
  }
@keyframes cta-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
  }
.payli-page-home .cta-section .inner { position: relative; z-index: 1; }
.payli-page-home .cta-section h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(40px, 6vw, 80px);
    font-weight: 700; letter-spacing: -.05em; line-height: .98; max-width: 800px; margin: 0 auto 20px;
  }
.payli-page-home .cta-section h2 em { font-style: italic; color: var(--brand-light); font-weight: 600; font-variation-settings: 'wdth' 90; }
.payli-page-home .cta-section p { color: rgba(255,255,255,.7); font-size: 18px; max-width: 540px; margin: 0 auto 36px; }
comment
.payli-page-home .floating-cta {
    position: fixed; bottom: 24px; right: 24px;
    background: var(--brand); color: white;
    padding: 14px 22px; border-radius: 999px;
    display: flex; align-items: center; gap: 10px;
    font-size: 14.5px; font-weight: 600;
    box-shadow: var(--shadow-brand), 0 0 0 0 rgba(41,82,197,.4);
    z-index: 49;
    cursor: pointer;
    transition: all .3s var(--ease);
    transform: translateY(80px); opacity: 0;
    animation: floating-pulse 3s ease-in-out infinite;
  }
.payli-page-home .floating-cta.visible { transform: translateY(0); opacity: 1; }
.payli-page-home .floating-cta:hover { transform: translateY(-4px); background: var(--brand-dark); }
.payli-page-home .floating-cta img { width: 24px; height: 22px; }
@keyframes floating-pulse {
    0%, 100% { box-shadow: var(--shadow-brand), 0 0 0 0 rgba(41,82,197,.4); }
    50% { box-shadow: var(--shadow-brand), 0 0 0 12px rgba(41,82,197,0); }
  }
comment
.payli-page-home footer {
    padding: 72px 0 40px; border-top: 1px solid var(--line-soft);
    background: var(--paper);
  }
.payli-page-home .socials { display: flex; gap: 10px; }
.payli-page-home .socials a {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--line); display: grid; place-items: center;
    color: var(--ink-soft); transition: all .25s var(--ease);
  }
.payli-page-home .socials a:hover { background: var(--brand); color: white; border-color: var(--brand); transform: translateY(-2px); }
comment
.payli-page-home .reveal {
    opacity: 0; transform: translateY(24px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
  }
.payli-page-home .reveal.in { opacity: 1; transform: translateY(0); }
comment
@media (max-width: 1100px) {
  .payli-page-home .hero h1 { font-size: clamp(44px, 7vw, 72px);   .payli-page-home .pricing.pricing-4col { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
  .payli-page-home .pricing.pricing-4col { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .payli-page-home .pricing-4col .price-card.featured { transform: none; order: 0; }
}
@media (max-width: 980px) {
  .payli-page-home .nav-links { display: none; }
  .payli-page-home .mobile-toggle { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: white; cursor: pointer; }
  .payli-page-home .nav-links.mobile-open {
      display: flex !important;
      flex-direction: column;
      position: fixed;
      top: 70px; left: 16px; right: 16px;
      padding: 16px;
      background: var(--paper);
      border-radius: 20px;
      box-shadow: 0 24px 64px rgba(11,21,48,0.10), 0 6px 16px rgba(11,21,48,0.06);
      z-index: 99;
      gap: 4px;
    }
  .payli-page-home .nav-links.mobile-open a {
      width: 100%;
      padding: 12px 16px;
      border-radius: 10px;
    }
  .payli-page-home .nav-links.mobile-open a:hover {
      background: var(--bg);
    }
  .payli-page-home .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .payli-page-home .hero-visual { height: 480px; }
  .payli-page-home .device-pos { right: 50%; transform: translateX(50%) rotate(4deg); }
  .payli-page-home .device-shop { display: none; }
  .payli-page-home .toast-stack { display: none; }
  .payli-page-home .stats-grid { grid-template-columns: 1fr 1fr; }
  .payli-page-home .stat-hero { grid-column: 1 / -1; }
  .payli-page-home .stat:nth-child(2) { border-right: 1px solid var(--line-soft); border-bottom: none; }
  .payli-page-home .stat:nth-child(3) { border-bottom: none; border-right: none; border-top: 1px solid var(--line-soft); }
  .payli-page-home .stat:nth-child(4) { border-right: none; border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); }
  .payli-page-home .showcase-grid, .payli-page-home .steps, .payli-page-home .industries, .payli-page-home .pricing:not(.pricing-4col), .payli-page-home .testi-grid { grid-template-columns: 1fr; }
  .payli-page-home .pricing.pricing-4col { grid-template-columns: repeat(2, 1fr) !important; }
  .payli-page-home .step-connector { display: none; }
  .payli-page-home .price-card.featured { transform: translateY(0); }
  .payli-page-home .price-card.featured:hover { transform: translateY(-4px); }
  .payli-page-home .bento { grid-template-columns: 1fr; }
  .payli-page-home .bento-card.b-1, .payli-page-home .bento-card.b-2, .payli-page-home .bento-card.b-3, .payli-page-home .bento-card.b-4, .payli-page-home .bento-card.b-5 { grid-column: span 1; grid-row: auto; }
  .payli-page-home .bento-card.b-1 h4 { font-size: 28px; }
  .payli-page-home .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .payli-page-home .section-head { flex-direction: column; align-items: flex-start; }
  .payli-page-home .cta-section { padding: 56px 32px; border-radius: 24px; }
  .payli-page-home section { padding: 64px 0; }
  .payli-page-home .container { padding: 0 20px; }
  .payli-page-home .floating-cta { bottom: 16px; right: 16px; padding: 12px 18px; font-size: 13.5px; }
  .payli-page-home .quote-breaker { padding: 80px 0; }
  .payli-page-home .step-num { font-size: 96px; }
}
/* Pricing 4-col specifiek: ga naar 1-koloms onder 768px */
@media (max-width: 768px) {
  .payli-page-home .pricing.pricing-4col { grid-template-columns: 1fr !important; gap: 20px !important; }
  .payli-page-home .pricing.pricing-4col { grid-template-columns: 1fr !important; gap: 16px !important; }
}

@media (max-width: 768px) {
  .payli-page-home section { padding: 56px 0; }
  .payli-page-home .hero { padding: 40px 0 60px; }
  .payli-page-home .hero h1 { font-size: clamp(36px, 8.5vw, 56px); letter-spacing: -.04em; }
  .payli-page-home .hero p { font-size: 16px; }
  .payli-page-home .hero-visual { height: 420px; transform: scale(0.85); }
  .payli-page-home .device-pos { width: 280px; }
  .payli-page-home .marquee-track { gap: 40px; }
  .payli-page-home .marquee-item { font-size: 14px; }
  .payli-page-home .stat-hero .stat-value { font-size: 64px; }
  .payli-page-home .quote-breaker { padding: 60px 0; }
  .payli-page-home .big-quote-text { font-size: clamp(28px, 7vw, 44px); }
  .payli-page-home .quote-mark { font-size: 140px; margin-bottom: -28px; }
  .payli-page-home .bento-card { padding: 28px 24px; }
  .payli-page-home .nav-cta .btn-ghost { display: none; }
  .payli-page-home .nav-cta .btn-primary { padding: 10px 16px; font-size: 13px; }
  .payli-page-home .logo-img { height: 28px; }
  .payli-page-home .industry-card { padding: 28px 24px; }
  .payli-page-home .price-card { padding: 32px 24px; }
  .payli-page-home .price-amount { font-size: 48px !important; }
  .payli-page-home .testi-card { padding: 28px 24px; }
  .payli-page-home .faq-item { padding: 20px 0; }
  .payli-page-home .cta-section { padding: 48px 24px; }
  .payli-page-home .cta-section h3 { font-size: 36px; }
}
@media (max-width: 600px) {
  .payli-page-home .container { padding: 0 18px; }
  .payli-page-home .hero h1 { font-size: clamp(32px, 10vw, 44px); }
  .payli-page-home .footer-grid { grid-template-columns: 1fr; }
  .payli-page-home .hero-cta { flex-direction: column; align-items: stretch; width: 100%; }
  .payli-page-home .hero-cta .btn { justify-content: center; width: 100%; }
  .payli-page-home .hero-meta { flex-direction: column; gap: 10px; align-items: flex-start; }
  .payli-page-home .device-pos { width: 240px; height: 420px; right: 50%; }
  .payli-page-home .hero-visual { transform: scale(0.7); height: 380px; }
  .payli-page-home .stats-grid { grid-template-columns: 1fr; }
  .payli-page-home .stat { border-right: none !important; border-bottom: 1px solid var(--line-soft) !important; border-left: none !important; border-top: none !important; }
  .payli-page-home .stat:last-child { border-bottom: none !important; }
  .payli-page-home .stat-hero { padding: 40px 28px; }
  .payli-page-home .stat-hero .stat-value { font-size: 56px; }
  .payli-page-home .step-num { font-size: 72px; }
  .payli-page-home .big-quote-text { font-size: 32px; }
  .payli-page-home .nav { padding: 14px 18px; }
  .payli-page-home .price-card .price-cta { width: 100%; justify-content: center; }
  .payli-page-home .price-card .pkg-features { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .payli-page-home, .payli-page-home *::before, .payli-page-home *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
}

/* FIX: Hero reveal-elementen moeten altijd zichtbaar zijn (geen wachten op observer) */
.payli-page-home .hero .reveal,
.payli-page-home .hero .reveal.in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* FIX: Als JavaScript niet werkt, toon ALLE reveal-elementen na 1s */
@keyframes payliRevealFallback {
  to { opacity: 1; transform: translateY(0); }
}
.payli-page-home .reveal {
  animation: payliRevealFallback 0.6s ease-out 1.5s forwards;
}
.payli-page-home .reveal.in {
  animation: none;
  opacity: 1;
  transform: translateY(0);
}


/* ===========================================================
   ULTRA SPECIFICATIE FIXES — moet aan het EINDE staan om te winnen
   =========================================================== */

/* Blauwe streep achter <em> in hero — VOLLEDIG VERWIJDEREN */
html body.page .payli-page-home section.hero h1 em::after,
html body .payli-page-home .hero h1 em::after,
.payli-page-home h1 em::after {
    content: '' !important;
    display: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    animation: none !important;
}

/* Verwijder ook eventueel ::before of background-image truc op em zelf */
html body .payli-page-home .hero h1 em {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
html body .payli-page-home .hero h1 em::before {
    display: none !important;
    content: none !important;
}

/* Stop ook de keyframe animatie voor highlight */
@keyframes highlight-in {
    from { transform: skewX(-3deg) scaleX(0); }
    to { transform: skewX(-3deg) scaleX(0); }
}

/* Zwevende telefoon — meer naar boven binnen zijn container */
html body .payli-page-home .device-pos,
.payli-page-home .hero .device-pos {
    top: -40px !important;
    right: 0 !important;
    z-index: 5 !important;
    transform: rotate(4deg) !important;
}

/* Hero visueel container — overflow visible voor zwevende elementen */
html body .payli-page-home .hero-visual,
.payli-page-home .hero .hero-visual {
    overflow: visible !important;
    height: 540px !important;
}

/* Hero zelf — wel overflow visible maar geen onnodige hoogte */
html body .payli-page-home section.hero {
    overflow: visible !important;
}

/* === EINDE ULTRA FIXES === */


/* ===========================================================
   AGGRESSIVE WHITESPACE FIX — verwijder elke witruimte boven hero
   =========================================================== */

/* Reset op page wrapper */
.payli-page-home {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Reset op alle Blocksy en WordPress content wrappers */
body.page #main,
body.page main,
body.page article,
body.page .ct-container,
body.page .ct-main-styles,
body.page .ct-block-styles,
body.page .entry-content,
body.page .entry-header,
body.page .post-content,
body.page main > article > .entry-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Verberg ALLE mogelijke page-title/header elementen die Blocksy/WP genereert */
body.page .ct-hero-section,
body.page .entry-header,
body.page .page-header,
body.page header.page-header,
body.page header.entry-header,
body.page .post-title,
body.page h1.entry-title,
body.page h1.page-title,
body.page .blocksy-hero,
body.page .ct-page-header,
body.page .breadcrumbs,
body.page nav.breadcrumbs,
body.page .yoast-breadcrumb {
    display: none !important;
}

/* Hero zelf — minder padding-top */
html body .payli-page-home .hero {
    padding-top: 40px !important;
    margin-top: 0 !important;
}

/* Bg-orbs niet te ver van hero plaatsen */
.payli-page-home .bg-orb {
    z-index: 0 !important;
}


/* ===========================================================
   ELEMENTOR FIX — verwijder Elementor's container padding
   =========================================================== */

/* Reset alle Elementor container/section paddings */
body.elementor-page .elementor,
body.elementor-page .elementor-section,
body.elementor-page .elementor-container,
body.elementor-page .elementor-column,
body.elementor-page .elementor-widget-wrap,
body.elementor-page .elementor-widget,
body.elementor-page .elementor-element,
body.elementor-page .elementor-inner-section,
body.elementor-page .elementor-row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Belangrijker: het Elementor template-wrapper zelf */
body.elementor-page .ct-elementor-default-template,
body .ct-elementor-default-template {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Elementor "default-kit" container die alles wrapped */
body.elementor-page main#payli-main,
body.elementor-page #payli-main,
body main#payli-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
    min-height: 0 !important;
}

/* Elementor Default Page Layout */
body.elementor-default .elementor-default,
body.elementor-page .elementor-default {
    padding: 0 !important;
    margin: 0 !important;
}

/* Verwijder Elementor automatic content padding op pages */
body.elementor-page .elementor-widget-theme-post-content {
    padding: 0 !important;
}
body.elementor-page .elementor-widget-theme-post-content .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* Verwijder Elementor's default min-height van 100vh op section */
body.elementor-page .elementor-section.elementor-section-height-default {
    min-height: 0 !important;
}

/* === EINDE ELEMENTOR FIX === */


/* ===========================================================
   TARGETED FIX — main#payli-main padding wegwerken
   Veroorzaakt door Elementor Pro op alle pagina's
   =========================================================== */

html body main#payli-main,
html body.elementor-page main#payli-main,
body main#payli-main,
main#payli-main {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Hero direct onder nav */
body .payli-page-home .hero,
html body .payli-page-home .hero {
    padding-top: 56px !important;
    margin-top: 0 !important;
}

/* Page wrapper geen marges */
body .payli-page-home,
html body .payli-page-home {
    margin: 0 !important;
    padding: 0 !important;
}

/* === EINDE TARGETED FIX === */


/* ===========================================================
   FIX: bg-orb moet ALTIJD position:fixed zijn (niet in flow)
   Iets overschreef dit waardoor orb verticale ruimte innam
   =========================================================== */

html body .payli-page-home .bg-orb,
html body .payli-page-home .bg-orb.b,
.payli-page-home .bg-orb,
.payli-page-home .bg-orb.b {
    position: fixed !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Eerste orb (zonder .b) — rechtsboven */
html body .payli-page-home .bg-orb:not(.b) {
    width: 600px !important;
    height: 600px !important;
    top: -200px !important;
    right: -100px !important;
    left: auto !important;
}

/* Tweede orb (.b) — onderkant links */
html body .payli-page-home .bg-orb.b {
    width: 500px !important;
    height: 500px !important;
    top: 60vh !important;
    left: -150px !important;
    right: auto !important;
}

/* === EINDE BG-ORB FIX === */


/* ===========================================================
   FIX: Trust marquee — eigen sectie met goede spacing
   =========================================================== */

/* Hero — adequate padding-bottom voor witruimte naar marquee */
html body .payli-page-home .hero {
    padding-top: 56px !important;
    padding-bottom: 80px !important;
    margin-bottom: 0 !important;
}

/* Trust marquee — eigen sectie met witte achtergrond en luchtige padding */
html body .payli-page-home .trust,
.payli-page-home .trust {
    padding: 56px 0 !important;
    margin: 0 !important;
    background: white !important;
    border-top: 1px solid var(--line-soft) !important;
    border-bottom: 1px solid var(--line-soft) !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
}

/* Trust label boven de slider met goede spacing */
html body .payli-page-home .trust-label,
.payli-page-home .trust-label {
    text-align: center !important;
    font-size: 12.5px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    margin-bottom: 32px !important;
    margin-top: 0 !important;
    font-weight: 600 !important;
    display: block !important;
    width: 100% !important;
}

/* Marquee container - duidelijk gescheiden */
html body .payli-page-home .marquee-wrap {
    margin-top: 0 !important;
    overflow: hidden !important;
}

/* === EINDE TRUST FIX === */


/* ===========================================================
   FIX: Slider kleiner + meer ruimte naar volgende blok
   =========================================================== */

/* Slider items 20% kleiner maken */
html body .payli-page-home .trust-item.s1 { font-size: 21px !important; }
html body .payli-page-home .trust-item.s2 { font-size: 12px !important; }
html body .payli-page-home .trust-item.s3 { font-size: 25px !important; }
html body .payli-page-home .trust-item.s4 { font-size: 18px !important; }
html body .payli-page-home .trust-item.s5 { font-size: 19px !important; }
html body .payli-page-home .trust-item.s6 { font-size: 16px !important; }
html body .payli-page-home .trust-item.s7 { font-size: 22px !important; }

/* Trust label iets kleiner */
html body .payli-page-home .trust-label,
.payli-page-home .trust-label {
    font-size: 11.5px !important;
    margin-bottom: 28px !important;
}

/* Trust sectie iets compacter (minder padding) */
html body .payli-page-home .trust,
.payli-page-home .trust {
    padding: 44px 0 !important;
}

/* Marquee gap kleiner */
html body .payli-page-home .marquee {
    gap: 52px !important;
}

/* Stats sectie — meer padding-top voor extra ruimte tussen slider en stats */
html body .payli-page-home .stats {
    padding-top: 110px !important;
    padding-bottom: 80px !important;
}

/* === EINDE SLIDER FIX === */


/* ===========================================================
   FIX: Showcase-grid (POS app + Webshop) naast elkaar
   Was 1-koloms vanaf 980px, nu pas vanaf 768px
   =========================================================== */

/* Op alle schermen breder dan 768px: 2 kaarten naast elkaar */
html body .payli-page-home .showcase-grid,
.payli-page-home .showcase-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
}

/* Pas op kleinere schermen (mobile/tablet): onder elkaar */
@media (max-width: 768px) {
    html body .payli-page-home .showcase-grid,
    .payli-page-home .showcase-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* === EINDE SHOWCASE FIX === */


/* ===========================================================
   FIX: Witte tekst in donkere kaarten + bento grid layout
   =========================================================== */

/* === DONKERE SHOWCASE CARD (POS app) — alle tekst wit === */
html body .payli-page-home .showcase-card.dark,
html body .payli-page-home .showcase-card.dark *,
.payli-page-home .showcase-card.dark,
.payli-page-home .showcase-card.dark * {
    color: white !important;
}

html body .payli-page-home .showcase-card.dark p,
.payli-page-home .showcase-card.dark p {
    color: rgba(255,255,255,.7) !important;
}

html body .payli-page-home .showcase-card.dark .feature-list li,
.payli-page-home .showcase-card.dark .feature-list li {
    color: rgba(255,255,255,.92) !important;
    border-color: rgba(255,255,255,.1) !important;
}

html body .payli-page-home .showcase-card.dark .label,
.payli-page-home .showcase-card.dark .label {
    color: var(--brand-light) !important;
}

html body .payli-page-home .showcase-card.dark h3 em,
.payli-page-home .showcase-card.dark h3 em {
    color: var(--brand-light) !important;
}

/* Knop binnen donkere kaart: witte achtergrond met blauwe tekst */
html body .payli-page-home .showcase-card.dark .btn,
.payli-page-home .showcase-card.dark .btn {
    background: white !important;
    color: var(--brand) !important;
}

/* === BLAUWE BENTO CARD (b-1: "Voorraad die zichzelf bijwerkt") === */
html body .payli-page-home .bento-card.b-1,
html body .payli-page-home .bento-card.b-1 *,
.payli-page-home .bento-card.b-1,
.payli-page-home .bento-card.b-1 * {
    color: white !important;
}

html body .payli-page-home .bento-card.b-1 p,
.payli-page-home .bento-card.b-1 p {
    color: rgba(255,255,255,.85) !important;
}

html body .payli-page-home .bento-card.b-1 .icon,
.payli-page-home .bento-card.b-1 .icon {
    background: rgba(255,255,255,.15) !important;
    color: white !important;
}

/* === BENTO GRID — naast elkaar in asymmetrisch layout === */
html body .payli-page-home .bento,
.payli-page-home .bento {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-auto-rows: minmax(220px, auto) !important;
    gap: 16px !important;
}

/* Kaart 1 (groot blauw) — links 3 kolommen breed, 2 rijen hoog */
html body .payli-page-home .bento-card.b-1,
.payli-page-home .bento-card.b-1 {
    grid-column: span 3 !important;
    grid-row: span 2 !important;
}

/* Kaart 2 — rechts 3 kolommen breed */
html body .payli-page-home .bento-card.b-2,
.payli-page-home .bento-card.b-2 {
    grid-column: span 3 !important;
    grid-row: span 1 !important;
}

/* Kaart 3 — 3 kolommen */
html body .payli-page-home .bento-card.b-3,
.payli-page-home .bento-card.b-3 {
    grid-column: span 3 !important;
    grid-row: span 1 !important;
}

/* Kaart 4 — 2 kolommen */
html body .payli-page-home .bento-card.b-4,
.payli-page-home .bento-card.b-4 {
    grid-column: span 2 !important;
    grid-row: span 1 !important;
}

/* Kaart 5 — 4 kolommen */
html body .payli-page-home .bento-card.b-5,
.payli-page-home .bento-card.b-5 {
    grid-column: span 4 !important;
    grid-row: span 1 !important;
}

/* Op tablet: 3-koloms layout */
@media (max-width: 1100px) {
    html body .payli-page-home .bento,
    .payli-page-home .bento {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    html body .payli-page-home .bento-card.b-1,
    .payli-page-home .bento-card.b-1 {
        grid-column: span 3 !important;
    }
    html body .payli-page-home .bento-card.b-2,
    html body .payli-page-home .bento-card.b-3,
    .payli-page-home .bento-card.b-2,
    .payli-page-home .bento-card.b-3 {
        grid-column: span 3 !important;
    }
    html body .payli-page-home .bento-card.b-4,
    html body .payli-page-home .bento-card.b-5,
    .payli-page-home .bento-card.b-4,
    .payli-page-home .bento-card.b-5 {
        grid-column: span 3 !important;
    }
}

/* Op mobile: 1-koloms */
@media (max-width: 768px) {
    html body .payli-page-home .bento,
    .payli-page-home .bento {
        grid-template-columns: 1fr !important;
    }
    html body .payli-page-home .bento-card,
    .payli-page-home .bento-card {
        grid-column: span 1 !important;
        grid-row: auto !important;
    }
}

/* === EINDE FIX === */


/* ===========================================================
   FIX: Cream achtergrond voor "Live in drie stappen" + ruimte tussen secties
   =========================================================== */

/* "Live in drie stappen" sectie — cream achtergrond met directe hex */
html body .payli-page-home .how-it-works,
.payli-page-home .how-it-works {
    background: #F7F1E2 !important;
    background-color: #F7F1E2 !important;
    border-top: 1px solid rgba(184,156,98,.15) !important;
    border-bottom: 1px solid rgba(184,156,98,.15) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 120px 0 !important;
    margin: 0 !important;
}

/* Quote-breaker sectie — ook iets meer ruimte */
html body .payli-page-home .quote-breaker,
.payli-page-home .quote-breaker {
    padding: 100px 0 !important;
    margin: 0 !important;
}

/* Bento sectie — meer padding-bottom voor adem naar quote */
html body .payli-page-home .bento-section,
.payli-page-home .bento-section {
    padding-bottom: 100px !important;
}

/* Algemene ruimte tussen alle secties op homepage */
html body .payli-page-home > section + section,
html body .payli-page-home section + .quote-breaker,
html body .payli-page-home section + .how-it-works {
    margin-top: 0 !important;
}

/* Zorg dat alle sections op de homepage default 100px padding hebben */
html body .payli-page-home .stats,
html body .payli-page-home .product-showcase,
html body .payli-page-home .bento-section,
html body .payli-page-home .industries-section,
html body .payli-page-home .testimonials,
html body .payli-page-home #pricing,
html body .payli-page-home #faq {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

/* === EINDE FIX === */


/* ===========================================================
   FIX: Industries 3-koloms + USP strip donkere achtergrond
   =========================================================== */

/* Industries — 3 kaarten naast elkaar */
html body .payli-page-home .industries,
.payli-page-home .industries {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

/* Industry kaarten — duidelijke styling */
html body .payli-page-home .industry,
.payli-page-home .industry {
    background: white !important;
    border: 1px solid var(--line-soft) !important;
    border-radius: 22px !important;
    padding: 32px 28px !important;
    transition: transform .3s ease, box-shadow .3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

html body .payli-page-home .industry:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(11,21,48,.08) !important;
}

/* Industries section — subtiele zachte achtergrond */
html body .payli-page-home .industries-section,
.payli-page-home .industries-section {
    background: #FAFBFD !important;
    padding: 100px 0 !important;
}

/* Op tablet: 2 kolommen, op mobile: 1 kolom */
@media (max-width: 1024px) {
    html body .payli-page-home .industries,
    .payli-page-home .industries {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 700px) {
    html body .payli-page-home .industries,
    .payli-page-home .industries {
        grid-template-columns: 1fr !important;
    }
}

/* === USP STRIP — donkere achtergrond met witte tekst === */
html body .payli-page-home .usp-strip,
.payli-page-home .usp-strip {
    background: #0B1530 !important;
    background-color: #0B1530 !important;
    color: white !important;
    padding: 28px 0 !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
}

html body .payli-page-home .usp-strip::before,
.payli-page-home .usp-strip::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(800px 200px at 50% 50%, rgba(41,82,197,.4), transparent 70%) !important;
    pointer-events: none !important;
}

html body .payli-page-home .usp-item,
.payli-page-home .usp-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: white !important;
    white-space: nowrap !important;
}

html body .payli-page-home .usp-item svg,
.payli-page-home .usp-item svg {
    color: #6B8DEF !important;
    stroke: #6B8DEF !important;
    flex-shrink: 0 !important;
}

html body .payli-page-home .usp-divider,
.payli-page-home .usp-divider {
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.3) !important;
    flex-shrink: 0 !important;
}

/* === EINDE FIX === */


/* ===========================================================
   FIX: CTA donkere achtergrond + ruimte tussen secties
   =========================================================== */

/* CTA dark sectie — donkere achtergrond met witte tekst */
html body .payli-page-home .cta-section,
.payli-page-home .cta-section {
    background: #0B1530 !important;
    background-color: #0B1530 !important;
    color: white !important;
    border-radius: 32px !important;
    padding: 88px 64px !important;
    margin: 0 auto !important;
    max-width: 1184px !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: center !important;
}

html body .payli-page-home .cta-section::before,
.payli-page-home .cta-section::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      radial-gradient(900px 360px at 50% 0%, rgba(41,82,197,.40), transparent 60%),
      radial-gradient(500px 240px at 100% 100%, rgba(79,115,216,.18), transparent 70%) !important;
    pointer-events: none !important;
}

html body .payli-page-home .cta-section *,
.payli-page-home .cta-section * {
    color: white !important;
}

html body .payli-page-home .cta-section h2,
.payli-page-home .cta-section h2 {
    color: white !important;
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: clamp(40px, 5vw, 64px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -.04em !important;
    margin-bottom: 24px !important;
}

html body .payli-page-home .cta-section h2 em,
.payli-page-home .cta-section h2 em {
    color: #6B8DEF !important;
    font-style: italic !important;
    font-weight: 600 !important;
}

html body .payli-page-home .cta-section p,
.payli-page-home .cta-section p {
    color: rgba(255,255,255,.7) !important;
    font-size: 18px !important;
    max-width: 540px !important;
    margin: 0 auto 36px !important;
}

/* Knop binnen dark CTA: witte achtergrond met blauwe tekst */
html body .payli-page-home .cta-section .btn,
.payli-page-home .cta-section .btn {
    background: white !important;
    color: var(--brand) !important;
}

/* Ruimte rondom CTA sectie */
html body .payli-page-home #cta-wrap,
html body .payli-page-home .cta-wrap {
    padding: 100px 0 !important;
}

/* Ruimte tussen industries section en USP strip */
html body .payli-page-home .industries-section {
    padding: 100px 0 !important;
    margin-bottom: 0 !important;
}

/* Ruimte tussen USP strip en pricing */
html body .payli-page-home .usp-strip {
    margin: 0 0 0 0 !important;
}

html body .payli-page-home #pricing {
    padding-top: 100px !important;
}

/* Ruimte tussen FAQ en CTA dark */
html body .payli-page-home #faq {
    padding-bottom: 100px !important;
}

/* === EINDE FIX === */


/* ===========================================================
   FIX: Floating CTA + meer ruimte tussen slider en blokken
   =========================================================== */

/* Floating CTA — knop rechtsonder met witte tekst op blauw */
html body .payli-page-home .floating-cta,
html body .floating-cta,
.payli-page-home .floating-cta {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    background: #2952C5 !important;
    background-color: #2952C5 !important;
    color: white !important;
    padding: 14px 22px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 12px 32px rgba(41,82,197,.35), 0 0 0 0 rgba(41,82,197,.4) !important;
    z-index: 99 !important;
    cursor: pointer !important;
    transition: all .3s ease !important;
    border: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: translateY(80px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: floating-pulse 3s ease-in-out infinite !important;
}

html body .payli-page-home .floating-cta.visible,
html body .floating-cta.visible,
.payli-page-home .floating-cta.visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

html body .payli-page-home .floating-cta:hover,
.payli-page-home .floating-cta:hover {
    background: #1E40AF !important;
    transform: translateY(-4px) !important;
    color: white !important;
}

html body .payli-page-home .floating-cta img,
.payli-page-home .floating-cta img {
    width: 22px !important;
    height: auto !important;
    display: inline-block !important;
    margin: 0 !important;
}

html body .payli-page-home .floating-cta span,
.payli-page-home .floating-cta span,
html body .payli-page-home .floating-cta {
    color: white !important;
}

/* === Ruimte tussen USP strip en Industries (slider en blokken) === */
html body .payli-page-home .usp-strip {
    margin-bottom: 0 !important;
}

html body .payli-page-home .industries-section,
html body .payli-page-home section.industries-section {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
    margin-top: 0 !important;
}

/* Specifiek: ruimte BOVEN de industries sectie */
html body .payli-page-home .usp-strip + section,
html body .payli-page-home .usp-strip + .industries-section {
    padding-top: 120px !important;
}

/* === EINDE FIX === */


/* ===========================================================
   MOBILE FIX: Pricing kaarten op homepage goed zichtbaar
   =========================================================== */

/* Tablet (768px en kleiner): 2 kolommen */
@media (max-width: 900px) {
    html body .payli-page-home section#pricing,
    body .payli-page-home section#pricing {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    html body .payli-page-home .pricing.pricing-4col,
    body .payli-page-home .pricing.pricing-4col,
    body.page .payli-page-home .pricing.pricing-4col {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        padding-top: 32px !important;
    }
    
    /* Featured kaart niet uitsteken op tablet */
    html body .payli-page-home .pricing-4col .price-card.featured,
    body .payli-page-home .pricing-4col .price-card.featured {
        transform: translateY(0) !important;
    }
    
    html body .payli-page-home .pricing-4col .price-card.featured:hover,
    body .payli-page-home .pricing-4col .price-card.featured:hover {
        transform: translateY(-4px) !important;
    }
}

/* Mobiel (640px en kleiner): 1 kolom met goede padding */
@media (max-width: 640px) {
    html body .payli-page-home section#pricing,
    body .payli-page-home section#pricing {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    
    html body .payli-page-home .pricing.pricing-4col,
    body .payli-page-home .pricing.pricing-4col,
    body.page .payli-page-home .pricing.pricing-4col {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding-top: 40px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Kaart styling op mobiel — comfortabele padding */
    html body .payli-page-home .pricing-4col .price-card,
    html body .payli-page-home .price-card,
    body .payli-page-home .pricing-4col .price-card,
    body .payli-page-home .price-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 32px 24px !important;
        border-radius: 20px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Featured kaart NIET omhoog op mobiel (geen overlap) */
    html body .payli-page-home .price-card.featured,
    html body .payli-page-home .pricing-4col .price-card.featured,
    body .payli-page-home .price-card.featured {
        transform: translateY(0) !important;
    }
    
    html body .payli-page-home .price-card.featured:hover,
    html body .payli-page-home .pricing-4col .price-card.featured:hover,
    body .payli-page-home .price-card.featured:hover {
        transform: translateY(-4px) !important;
    }
    
    /* Tekst grootte normaliseren op mobiel */
    html body .payli-page-home .pricing-4col .price-card h3,
    body .payli-page-home .pricing-4col .price-card h3,
    html body .payli-page-home .price-card h3 {
        font-size: 24px !important;
    }
    
    html body .payli-page-home .pricing-4col .price-card .desc,
    body .payli-page-home .pricing-4col .price-card .desc {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    html body .payli-page-home .pricing-4col .price-card .price .amount,
    body .payli-page-home .pricing-4col .price-card .price .amount {
        font-size: 56px !important;
    }
    
    html body .payli-page-home .pricing-4col .pricing-features li,
    body .payli-page-home .pricing-4col .pricing-features li {
        font-size: 14px !important;
        padding: 6px 0 !important;
    }
    
    /* Badge "Meest gekozen" op mobiel goed positioneren */
    html body .payli-page-home .price-card .badge-popular,
    body .payli-page-home .price-card .badge-popular {
        top: -12px !important;
        font-size: 11px !important;
        padding: 6px 12px !important;
    }
    
    /* CTA buttons full-width op mobiel */
    html body .payli-page-home .price-card .btn,
    body .payli-page-home .price-card .btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* Extra klein scherm (380px en kleiner) */
@media (max-width: 380px) {
    html body .payli-page-home section#pricing,
    body .payli-page-home section#pricing {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    html body .payli-page-home .pricing-4col .price-card,
    html body .payli-page-home .price-card,
    body .payli-page-home .price-card {
        padding: 28px 20px !important;
    }
    
    html body .payli-page-home .pricing-4col .price-card h3,
    body .payli-page-home .pricing-4col .price-card h3 {
        font-size: 22px !important;
    }
    
    html body .payli-page-home .pricing-4col .price-card .price .amount,
    body .payli-page-home .pricing-4col .price-card .price .amount {
        font-size: 48px !important;
    }
}

/* Page wrapper geen horizontaal overflow op mobiel */
@media (max-width: 900px) {
    html body .payli-page-home,
    .payli-page-home {
        overflow-x: hidden !important;
    }
}

/* === EINDE MOBILE FIX === */


/* ===========================================================
   FINAL MOBILE FIX: Pricing kaarten ECHT onder elkaar op mobiel
   Gebruikt extreem hoge specificity om alle conflicten te winnen
   =========================================================== */

/* Tablet — onder 1024px: 2 kolommen */
@media screen and (max-width: 1024px) {
    html body.page .payli-page-home #pricing .pricing,
    html body.page .payli-page-home #pricing .pricing.pricing-4col,
    html body.page .payli-page-home section#pricing .pricing.pricing-4col,
    html body .payli-page-home .pricing.pricing-4col,
    body .payli-page-home .pricing.pricing-4col,
    .payli-page-home .pricing.pricing-4col {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    html body.page .payli-page-home #pricing .pricing-4col .price-card.featured,
    html body .payli-page-home .pricing-4col .price-card.featured,
    .payli-page-home .pricing-4col .price-card.featured {
        transform: translateY(0) !important;
    }
}

/* Mobiel — onder 768px: 1 kolom (alle 4 kaarten onder elkaar) */
@media screen and (max-width: 768px) {
    html body.page .payli-page-home #pricing,
    html body.page .payli-page-home section#pricing,
    html body .payli-page-home #pricing,
    html body .payli-page-home section#pricing {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    html body.page .payli-page-home #pricing .pricing,
    html body.page .payli-page-home #pricing .pricing.pricing-4col,
    html body.page .payli-page-home section#pricing .pricing.pricing-4col,
    html body .payli-page-home .pricing,
    html body .payli-page-home .pricing.pricing-4col,
    body .payli-page-home .pricing.pricing-4col,
    .payli-page-home .pricing,
    .payli-page-home .pricing.pricing-4col {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 20px !important;
        padding-top: 40px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Elke kaart full-width */
    html body.page .payli-page-home .pricing.pricing-4col > .price-card,
    html body.page .payli-page-home #pricing .price-card,
    html body .payli-page-home .pricing-4col > .price-card,
    html body .payli-page-home .price-card,
    body .payli-page-home .price-card,
    .payli-page-home .price-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        padding: 32px 24px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        border-radius: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        transform: translateY(0) !important;
    }
    
    /* Featured kaart NIET omhoog (geen overlap) */
    html body.page .payli-page-home .price-card.featured,
    html body .payli-page-home .price-card.featured,
    html body .payli-page-home .pricing-4col .price-card.featured,
    .payli-page-home .price-card.featured {
        transform: translateY(0) !important;
        margin-top: 0 !important;
    }
    
    html body .payli-page-home .price-card.featured:hover,
    .payli-page-home .price-card.featured:hover {
        transform: translateY(-4px) !important;
    }
    
    /* Tekstgroottes — leesbaar */
    html body .payli-page-home .pricing-4col .price-card h3,
    html body .payli-page-home .price-card h3,
    .payli-page-home .price-card h3 {
        font-size: 24px !important;
    }
    
    html body .payli-page-home .pricing-4col .price-card .desc,
    html body .payli-page-home .price-card .desc {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    html body .payli-page-home .pricing-4col .price-card .price .amount,
    html body .payli-page-home .price-card .price .amount {
        font-size: 56px !important;
    }
    
    html body .payli-page-home .pricing-4col .pricing-features li,
    html body .payli-page-home .pricing-features li {
        font-size: 14px !important;
        padding: 6px 0 !important;
    }
    
    /* Badge "Meest gekozen" goed positioneren */
    html body .payli-page-home .price-card .badge-popular,
    .payli-page-home .price-card .badge-popular {
        top: -12px !important;
        font-size: 11px !important;
        padding: 6px 12px !important;
    }
    
    /* CTA buttons full-width */
    html body .payli-page-home .price-card .btn,
    .payli-page-home .price-card .btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* Klein scherm (≤ 380px) — extra compact */
@media screen and (max-width: 380px) {
    html body .payli-page-home #pricing,
    html body .payli-page-home section#pricing {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    html body .payli-page-home .price-card {
        padding: 28px 20px !important;
    }
    
    html body .payli-page-home .pricing-4col .price-card h3 {
        font-size: 22px !important;
    }
    
    html body .payli-page-home .pricing-4col .price-card .price .amount {
        font-size: 48px !important;
    }
}

/* Page wrapper — geen horizontaal overflow */
@media screen and (max-width: 1024px) {
    html body .payli-page-home,
    body .payli-page-home,
    .payli-page-home {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* === EINDE FINAL MOBILE FIX === */


/* ===========================================================
   COMING SOON badge + disabled CTA voor Free plan
   =========================================================== */

html body .payli-page-home .price-card.price-card-coming-soon,
.payli-page-home .price-card.price-card-coming-soon {
    position: relative !important;
}

html body .payli-page-home .price-card .badge-coming-soon,
.payli-page-home .price-card .badge-coming-soon {
    position: absolute !important;
    top: -12px !important;
    left: 24px !important;
    background: linear-gradient(135deg, #FFA726 0%, #FB8C00 100%) !important;
    color: white !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 100px !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 12px rgba(251,140,0,.30) !important;
    z-index: 5 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

/* Disabled CTA — niet klikbaar, andere kleur */
html body .payli-page-home .btn.btn-disabled,
.payli-page-home .btn.btn-disabled {
    background: #F1F4F9 !important;
    color: #6E7B96 !important;
    border: 1px solid #E2E6F0 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    text-decoration: none !important;
    user-select: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .payli-page-home .btn.btn-disabled:hover,
.payli-page-home .btn.btn-disabled:hover {
    background: #F1F4F9 !important;
    transform: none !important;
}