/* ===========================================================
   MOBIELE FIX v3 — schone aanpak, geen 100vw trucs
   =========================================================== */
@media (max-width: 1024px) {

  /* Scroll-container = html/body. overflow-x hidden stopt zijwaartse overflow */
  html {
    overflow-x: hidden !important;
    width: 100% !important;
  }
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
  }

  /* POS pagina wrapper: volle breedte, geen eigen scroll, border-box */
  .payli-page-pos {
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Alles binnen POS: border-box zodat padding niet overflowt */
  .payli-page-pos *,
  .payli-page-pos *::before,
  .payli-page-pos *::after {
    box-sizing: border-box !important;
  }

  /* Secties full-width, geen overflow naar buiten */
  .payli-page-pos .section,
  .payli-page-pos .hero,
  .payli-page-pos section {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Container: full-width met padding binnen border-box */
  .payli-page-pos .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Hero-grid 1 koloms */
  .payli-page-pos .hero-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 32px !important;
  }

  /* Hero-visual = afgekapte wrapper met vaste hoogte.
     De iPad mockup mag hierbinnen uitsteken (wordt afgeknipt) */
  .payli-page-pos .hero-visual {
    width: 100% !important;
    height: 300px !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
  }

  /* iPad: interne pixelmaten blijven (content past), geheel geschaald.
     overflow:hidden van de parent kapt het overschot af */
  .payli-page-pos .ipad-frame {
    flex: 0 0 auto !important;
    transform: scale(0.5) rotate(-2deg) !important;
    transform-origin: center center !important;
    animation: none !important;
    margin: 0 !important;
  }

  /* Tekst-blok: woorden mogen afbreken, niet uit beeld lopen */
  .payli-page-pos .hero h1,
  .payli-page-pos .hero p {
    width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* CTA-knoppen: blijven binnen het scherm */
  .payli-page-pos .hero-ctas {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  /* Noise overlay en orbs: nooit touch-events opvangen */
  .payli-page-pos::before {
    pointer-events: none !important;
  }
  .payli-page-pos .bg-orb {
    pointer-events: none !important;
  }
}

@media (max-width: 600px) {
  .payli-page-pos .hero-visual { height: 250px !important; }
  .payli-page-pos .ipad-frame {
    transform: scale(0.4) rotate(-2deg) !important;
  }
  /* Knoppen full-width gestapeld */
  .payli-page-pos .hero-ctas {
    flex-direction: column !important;
  }
  .payli-page-pos .btn-large-primary,
  .payli-page-pos .btn-large-ghost {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 400px) {
  .payli-page-pos .hero-visual { height: 210px !important; }
  .payli-page-pos .ipad-frame {
    transform: scale(0.33) rotate(-2deg) !important;
  }
}
/* === EINDE MOBIELE FIX v3 === */

/* ===========================================================
   PREVENTIVE FIXES — gebaseerd op lessen van home/pricing pagina
   =========================================================== */

/* 1. Geen witruimte boven hero (Elementor/Blocksy padding fix) */
html body main#payli-main,
body main#payli-main {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

body.page .ct-elementor-default-template {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.page .entry-header,
body.page .page-header,
body.page .ct-hero-section,
body.page h1.entry-title {
    display: none !important;
}

.payli-page-pos {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 2. Bg-orbs altijd position: fixed (anders nemen ze ruimte in) */
html body .payli-page-pos .bg-orb,
.payli-page-pos .bg-orb {
    position: fixed !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* 3. Hero gecentreerd */
html body .payli-page-pos .hero,
.payli-page-pos .hero {
    text-align: center !important;
    overflow: visible !important;
}

/* 4. Floating CTA stylen */
html body .payli-page-pos .floating-cta,
.payli-page-pos .floating-cta {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    background: #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) !important;
    z-index: 99 !important;
    transform: translateY(80px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all .3s ease !important;
}

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

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

html body .payli-page-pos .floating-cta img,
.payli-page-pos .floating-cta img {
    width: 22px !important;
    height: auto !important;
}

html body .payli-page-pos .floating-cta * {
    color: white !important;
}

/* 5. Dark CTA correct stylen (donkere achtergrond met witte tekst) */
html body .payli-page-pos .cta-dark,
.payli-page-pos .cta-dark {
    background: transparent !important;
    padding: 80px 24px !important;
    overflow: visible !important;
}

html body .payli-page-pos .cta-dark .container,
.payli-page-pos .cta-dark .container {
    background: #0B1530 !important;
    color: white !important;
    border-radius: 32px !important;
    padding: 80px 64px !important;
    max-width: 1184px !important;
    margin: 0 auto !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}

html body .payli-page-pos .cta-dark .container *,
.payli-page-pos .cta-dark .container * {
    color: white !important;
}

html body .payli-page-pos .cta-dark .container p,
.payli-page-pos .cta-dark .container p {
    color: rgba(255,255,255,.7) !important;
}

/* === EINDE PREVENTIVE FIXES === */

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

.payli-page-pos::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.035;
    mix-blend-mode: multiply;
    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.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
.payli-page-pos img { max-width: 100%; display: block; }
.payli-page-pos button { font-family: inherit; cursor: pointer; border: none; background: none; }
.payli-page-pos a { color: inherit; text-decoration: none; }
.payli-page-pos h1, .payli-page-pos h2, .payli-page-pos h3, .payli-page-pos h4 {
    font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -.03em;
    line-height: 1.05;
    font-weight: 700;
  }
.payli-page-pos .container { max-width: 1280px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }
.payli-page-pos .section { padding: 120px 0; position: relative; }
comment
.payli-page-pos .btn-ghost {
    padding: 10px 18px; font-size: 14px; font-weight: 500;
    color: var(--ink); border-radius: 100px;
    transition: background .2s;
  }
.payli-page-pos .btn-ghost:hover { background: var(--line-soft); }
.payli-page-pos .btn-primary {
    padding: 11px 22px; font-size: 14px; font-weight: 600;
    color: white; background: var(--brand); border-radius: 100px;
    box-shadow: var(--shadow-brand);
    transition: transform .2s, box-shadow .2s;
  }
.payli-page-pos .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 24px 56px rgba(41,82,197,.32), 0 10px 20px rgba(41,82,197,.20);
  }
comment
.payli-page-pos .hero {
    padding: 80px 0 100px;
    position: relative;
    overflow: hidden;
  }
.payli-page-pos .hero::before {
    content: '';
    position: absolute;
    top: -200px; right: -200px;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(41,82,197,.10), transparent 70%);
    border-radius: 50%;
    z-index: 0;
    animation: orb 20s ease-in-out infinite alternate;
  }
.payli-page-pos .hero::after {
    content: '';
    position: absolute;
    bottom: -300px; left: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255,232,199,.5), transparent 70%);
    border-radius: 50%;
    z-index: 0;
    animation: orb 25s ease-in-out infinite alternate-reverse;
  }
@keyframes orb {
    0% { transform: translate(0,0) scale(1); }
    100% { transform: translate(30px,40px) scale(1.1); }
  }
.payli-page-pos .hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: center;
  }
.payli-page-pos .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--brand-soft);
    color: var(--brand);
    padding: 8px 14px;
    font-size: 12px; font-weight: 600;
    border-radius: 100px;
    margin-bottom: 24px;
    text-transform: uppercase; letter-spacing: .08em;
  }
.payli-page-pos .eyebrow .dot {
    width: 6px; height: 6px;
    background: var(--brand);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
  }
@keyframes pulse {
    0%,100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: .5; }
  }
.payli-page-pos .hero h1 {
    font-size: clamp(48px, 7.5vw, 108px);
    letter-spacing: -.045em;
    margin-bottom: 24px;
    line-height: .98;
  }
.payli-page-pos .hero h1 .em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
    letter-spacing: -.02em;
  }
.payli-page-pos .hero p {
    font-size: 19px; color: var(--ink-soft);
    max-width: 520px;
    margin-bottom: 32px;
  }
.payli-page-pos .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.payli-page-pos .btn-large-primary {
    padding: 16px 28px; font-size: 15px; font-weight: 600;
    color: white; background: var(--brand); border-radius: 100px;
    box-shadow: var(--shadow-brand);
    display: inline-flex; align-items: center; gap: 8px;
    transition: transform .2s, box-shadow .2s;
  }
.payli-page-pos .btn-large-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 28px 64px rgba(41,82,197,.34), 0 12px 24px rgba(41,82,197,.22);
  }
.payli-page-pos .btn-large-ghost {
    padding: 16px 28px; font-size: 15px; font-weight: 600;
    color: var(--ink); border-radius: 100px;
    background: var(--paper);
    border: 1px solid var(--line);
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .2s, border-color .2s;
  }
.payli-page-pos .btn-large-ghost:hover { background: var(--bg); border-color: var(--muted-light); }
.payli-page-pos .hero-meta {
    margin-top: 32px;
    display: flex; gap: 24px; align-items: center;
    font-size: 13px; color: var(--muted);
    flex-wrap: wrap;
  }
.payli-page-pos .hero-meta-item {
    display: flex; align-items: center; gap: 8px;
  }
.payli-page-pos .hero-meta svg { width: 16px; height: 16px; color: var(--brand); }
comment
.payli-page-pos .hero-visual {
    position: relative;
    height: 640px;
    display: flex; align-items: center; justify-content: center;
  }
.payli-page-pos .ipad-frame {
    position: relative;
    width: 600px; height: 440px;
    background: linear-gradient(155deg, #2a3450 0%, #0B1530 100%);
    border-radius: 22px;
    padding: 14px;
    box-shadow: var(--shadow-xl), inset 0 0 0 2px rgba(255,255,255,.04);
    z-index: 3;
    animation: float 6s ease-in-out infinite;
    transform: rotate(-2deg);
  }
@keyframes float {
    0%,100% { transform: rotate(-2deg) translateY(0); }
    50% { transform: rotate(-2deg) translateY(-8px); }
  }
.payli-page-pos .ipad-camera {
    position: absolute;
    top: 50%; left: 6px;
    width: 4px; height: 4px;
    background: rgba(255,255,255,.2);
    border-radius: 50%;
    transform: translateY(-50%);
  }
.payli-page-pos .ipad-screen {
    background: var(--bg);
    border-radius: 12px;
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0;
  }
.payli-page-pos .pos-left {
    background: var(--paper);
    padding: 14px;
    overflow: hidden;
  }
.payli-page-pos .pos-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-soft);
  }
.payli-page-pos .pos-store {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 14px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -.02em;
  }
.payli-page-pos .pos-user {
    display: flex; align-items: center; gap: 4px;
    font-size: 9px;
    color: var(--muted);
  }
.payli-page-pos .pos-user .av {
    width: 16px; height: 16px;
    background: linear-gradient(135deg, var(--brand), var(--brand-light));
    border-radius: 50%;
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 7px; font-weight: 700;
  }
.payli-page-pos .pos-search {
    background: var(--bg);
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 10px;
    font-size: 9px;
    color: var(--muted);
    display: flex; align-items: center; gap: 6px;
    border: 1px solid var(--line-soft);
  }
.payli-page-pos .pos-search svg { width: 10px; height: 10px; color: var(--muted); }
.payli-page-pos .pos-tabs {
    display: flex; gap: 4px;
    margin-bottom: 10px;
    overflow: hidden;
  }
.payli-page-pos .pos-tab {
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 600;
    border-radius: 100px;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--line-soft);
    white-space: nowrap;
  }
.payli-page-pos .pos-tab.active {
    background: var(--ink);
    color: white;
    border-color: var(--ink);
  }
.payli-page-pos .pos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
.payli-page-pos .pos-item {
    background: var(--bg);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 8px 6px;
    text-align: center;
    transition: transform .2s;
    cursor: pointer;
  }
.payli-page-pos .pos-item:nth-child(odd) { animation: tap-item 4s ease-in-out infinite; }
@keyframes tap-item {
    0%,90%,100% { transform: scale(1); background: var(--bg); }
    45% { transform: scale(0.96); background: var(--brand-soft); }
  }
.payli-page-pos .pos-item .img {
    height: 28px;
    background: linear-gradient(135deg, var(--brand-soft), var(--brand-light));
    border-radius: 4px;
    margin-bottom: 4px;
  }
.payli-page-pos .pos-item:nth-child(2) .img { background: linear-gradient(135deg, var(--cream-soft), var(--cream-dark)); }
.payli-page-pos .pos-item:nth-child(3) .img { background: linear-gradient(135deg, #FFE8C7, #FFD580); }
.payli-page-pos .pos-item:nth-child(4) .img { background: linear-gradient(135deg, var(--brand-light), var(--brand)); }
.payli-page-pos .pos-item:nth-child(5) .img { background: linear-gradient(135deg, #C9D5F4, var(--brand-soft)); }
.payli-page-pos .pos-item:nth-child(6) .img { background: linear-gradient(135deg, var(--cream), var(--cream-soft)); }
.payli-page-pos .pos-item .nm {
    font-size: 7px;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 2px;
  }
.payli-page-pos .pos-item .pr {
    font-size: 8px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: -.02em;
  }
.payli-page-pos .pos-right {
    background: var(--ink);
    color: white;
    padding: 14px;
    display: flex; flex-direction: column;
  }
.payli-page-pos .pos-cart-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
.payli-page-pos .pos-cart-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 13px; font-weight: 700;
    letter-spacing: -.02em;
  }
.payli-page-pos .pos-cart-count {
    background: var(--brand);
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 100px;
  }
.payli-page-pos .pos-cart-items {
    flex: 1;
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 10px;
    overflow: hidden;
  }
.payli-page-pos .pos-cart-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 8px;
    background: rgba(255,255,255,.05);
    border-radius: 6px;
    font-size: 10px;
  }
.payli-page-pos .pos-cart-item .nm {
    font-weight: 500;
    color: rgba(255,255,255,.9);
  }
.payli-page-pos .pos-cart-item .qt {
    font-size: 8px;
    color: rgba(255,255,255,.4);
    margin-left: 4px;
  }
.payli-page-pos .pos-cart-item .pr {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    color: white;
    letter-spacing: -.02em;
  }
.payli-page-pos .pos-cart-totals {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 8px;
    margin-bottom: 10px;
  }
.payli-page-pos .pos-cart-row {
    display: flex; justify-content: space-between;
    font-size: 9px;
    color: rgba(255,255,255,.6);
    padding: 2px 0;
  }
.payli-page-pos .pos-cart-row.total {
    font-size: 16px;
    font-family: 'Bricolage Grotesque', sans-serif;
    color: white;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-top: 4px;
  }
.payli-page-pos .pos-cart-row.total .label {
    font-size: 10px;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
  }
.payli-page-pos .pos-pay-btn {
    background: var(--brand);
    color: white;
    padding: 10px;
    border-radius: 8px;
    font-size: 11px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    text-align: center;
    letter-spacing: -.01em;
    box-shadow: 0 4px 12px rgba(41,82,197,.4);
    position: relative;
    overflow: hidden;
  }
.payli-page-pos .pos-pay-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    animation: shimmer 3s ease-in-out infinite;
  }
@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 200%; }
  }
comment
.payli-page-pos .phone-float {
    position: absolute;
    right: -40px;
    bottom: 30px;
    width: 140px; height: 280px;
    background: linear-gradient(155deg, #1a2440 0%, #0B1530 100%);
    border-radius: 20px;
    padding: 8px;
    z-index: 4;
    box-shadow: var(--shadow-lg);
    transform: rotate(8deg);
    animation: float-phone 7s ease-in-out infinite;
  }
@keyframes float-phone {
    0%,100% { transform: rotate(8deg) translateY(0); }
    50% { transform: rotate(8deg) translateY(-12px); }
  }
.payli-page-pos .phone-screen {
    background: white;
    border-radius: 14px;
    height: 100%;
    padding: 10px 8px;
    display: flex; flex-direction: column;
    position: relative;
  }
.payli-page-pos .phone-screen::before {
    content: '';
    position: absolute;
    top: 5px; left: 50%;
    width: 30px; height: 4px;
    background: #1a2440;
    border-radius: 2px;
    transform: translateX(-50%);
  }
.payli-page-pos .phone-amount {
    margin-top: 18px;
    text-align: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.04em;
  }
.payli-page-pos .phone-amount .c { font-size: 16px; color: var(--muted); vertical-align: top; line-height: 1.4; }
.payli-page-pos .phone-label {
    text-align: center;
    font-size: 8px;
    color: var(--muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
  }
.payli-page-pos .phone-chart {
    margin: 14px 6px 10px;
    height: 60px;
    position: relative;
  }
.payli-page-pos .phone-chart svg {
    width: 100%; height: 100%;
  }
.payli-page-pos .phone-stats {
    margin-top: auto;
    padding: 8px;
    background: var(--bg);
    border-radius: 8px;
    display: flex; justify-content: space-between;
  }
.payli-page-pos .phone-stat-item {
    text-align: center;
    flex: 1;
  }
.payli-page-pos .phone-stat-item .num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.02em;
  }
.payli-page-pos .phone-stat-item .lbl {
    font-size: 7px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .1em;
  }
comment
.payli-page-pos .sync-indicator {
    position: absolute;
    top: 30%; left: 30%;
    z-index: 2;
    display: flex; align-items: center; gap: 6px;
    background: var(--paper);
    padding: 8px 12px;
    border-radius: 100px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    animation: float-badge 5s ease-in-out infinite;
  }
@keyframes float-badge {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
.payli-page-pos .sync-indicator .dot-sync {
    width: 8px; height: 8px;
    background: var(--green);
    border-radius: 50%;
    animation: pulse-green 1.5s ease-in-out infinite;
  }
@keyframes pulse-green {
    0%,100% { box-shadow: 0 0 0 0 rgba(46,204,113,.6); }
    50% { box-shadow: 0 0 0 6px rgba(46,204,113,0); }
  }
.payli-page-pos .sync-indicator svg {
    width: 14px; height: 14px;
    color: var(--brand);
  }
comment
.payli-page-pos .usp-strip {
    background: var(--ink);
    padding: 18px 0;
    overflow: hidden;
    position: relative;
  }
.payli-page-pos .usp-strip::before, .payli-page-pos .usp-strip::after {
    content: '';
    position: absolute; top: 0; bottom: 0;
    width: 80px; z-index: 2;
    pointer-events: none;
  }
.payli-page-pos .usp-strip::before {
    left: 0;
    background: linear-gradient(90deg, var(--ink), transparent);
  }
.payli-page-pos .usp-strip::after {
    right: 0;
    background: linear-gradient(-90deg, var(--ink), transparent);
  }
.payli-page-pos .usp-track {
    display: flex; gap: 56px;
    animation: marquee-rev 32s linear infinite;
    width: max-content;
  }
@keyframes marquee-rev {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
  }
.payli-page-pos .usp-item {
    display: flex; align-items: center; gap: 12px;
    color: white;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px; font-weight: 600;
    letter-spacing: -.02em;
    white-space: nowrap;
  }
.payli-page-pos .usp-item .icon {
    width: 18px; height: 18px;
    color: var(--brand-light);
    flex-shrink: 0;
  }
comment
.payli-page-pos .stats-bar {
    padding: 80px 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line-soft);
  }
.payli-page-pos .stats-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 24px;
  }
.payli-page-pos .stat-hero {
    background: linear-gradient(155deg, var(--brand), var(--brand-darker));
    padding: 40px;
    border-radius: 24px;
    color: white;
    box-shadow: var(--shadow-brand);
    position: relative;
    overflow: hidden;
  }
.payli-page-pos .stat-hero::before {
    content: '';
    position: absolute;
    top: -40%; right: -40%;
    width: 80%; height: 80%;
    background: radial-gradient(circle, rgba(255,255,255,.1), transparent 70%);
    border-radius: 50%;
  }
.payli-page-pos .stat-hero .num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 96px; font-weight: 700;
    letter-spacing: -.05em;
    line-height: .95;
  }
.payli-page-pos .stat-hero .num .small { font-size: 50px; }
.payli-page-pos .stat-hero .label {
    margin-top: 12px;
    font-size: 16px;
    opacity: .9;
    max-width: 320px;
  }
.payli-page-pos .stat-hero .badge {
    position: absolute;
    top: 24px; right: 24px;
    background: rgba(255,255,255,.15);
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
  }
.payli-page-pos .stat-card {
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 32px 24px;
    border-radius: 20px;
    display: flex; flex-direction: column;
    justify-content: center;
  }
.payli-page-pos .stat-card .num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 48px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -.04em;
    line-height: 1;
  }
.payli-page-pos .stat-card .num .small { font-size: 28px; color: var(--brand); }
.payli-page-pos .stat-card .num.smaller { font-size: 28px; }
.payli-page-pos .stat-card .label {
    margin-top: 10px;
    font-size: 14px;
    color: var(--ink-soft);
  }
comment
.payli-page-pos .feature-block {
    padding: 120px 0;
    background: var(--bg);
  }
.payli-page-pos .feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 32px;
    padding: 64px;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
  }
.payli-page-pos .feature-grid::before {
    content: '';
    position: absolute;
    bottom: -200px; left: -200px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, var(--brand-soft), transparent 70%);
    border-radius: 50%;
    z-index: 0;
  }
.payli-page-pos .feature-content { position: relative; z-index: 1; }
.payli-page-pos .featured-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ink); color: white;
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 11px; font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
.payli-page-pos .feature-content h2 {
    font-size: 56px;
    margin-bottom: 16px;
  }
.payli-page-pos .feature-content h2 .em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
  }
.payli-page-pos .feature-content .tagline {
    font-size: 18px;
    color: var(--ink-soft);
    margin-bottom: 28px;
  }
.payli-page-pos .check-list {
    list-style: none;
    margin-bottom: 32px;
  }
.payli-page-pos .check-list li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line-soft);
    font-size: 15px;
    color: var(--ink-soft);
  }
.payli-page-pos .check-list li:last-child { border-bottom: 1px solid var(--line-soft); }
.payli-page-pos .check-list li svg {
    width: 18px; height: 18px;
    color: var(--brand);
    margin-top: 2px;
    flex-shrink: 0;
  }
.payli-page-pos .check-list strong { color: var(--ink); font-weight: 600; }
comment
.payli-page-pos .dashboard-stage {
    position: relative;
    height: 480px;
    display: flex; align-items: center; justify-content: center;
    z-index: 1;
  }
.payli-page-pos .dashboard-mock {
    width: 460px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    transform: rotate(-1deg);
  }
.payli-page-pos .dashboard-header {
    background: var(--bg);
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: center; gap: 8px;
  }
.payli-page-pos .dashboard-dots {
    display: flex; gap: 4px;
  }
.payli-page-pos .dashboard-dots span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--line);
  }
.payli-page-pos .dashboard-dots span:first-child { background: #FF6058; }
.payli-page-pos .dashboard-dots span:nth-child(2) { background: #FFBE2D; }
.payli-page-pos .dashboard-dots span:nth-child(3) { background: #2DC83C; }
.payli-page-pos .dashboard-title {
    font-size: 11px;
    color: var(--muted);
    margin-left: 8px;
  }
.payli-page-pos .dashboard-body {
    padding: 20px;
  }
.payli-page-pos .dashboard-greeting {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 14px;
    font-weight: 700;
    letter-spacing: -.02em;
  }
.payli-page-pos .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
  }
.payli-page-pos .dashboard-stat {
    background: var(--bg);
    border-radius: 8px;
    padding: 10px;
  }
.payli-page-pos .dashboard-stat .lbl {
    font-size: 8px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 3px;
  }
.payli-page-pos .dashboard-stat .val {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.02em;
  }
.payli-page-pos .dashboard-stat .change {
    font-size: 8px;
    color: var(--green-dark);
    font-weight: 600;
  }
.payli-page-pos .dashboard-stat .change.down { color: #E74C3C; }
.payli-page-pos .dashboard-chart {
    background: var(--bg);
    border-radius: 8px;
    padding: 14px;
    height: 130px;
    position: relative;
  }
.payli-page-pos .dashboard-chart-title {
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 6px;
  }
.payli-page-pos .dashboard-chart svg {
    width: 100%;
    height: 100px;
  }
.payli-page-pos .dashboard-chart .line {
    stroke: var(--brand);
    stroke-width: 2;
    fill: none;
  }
.payli-page-pos .dashboard-chart .area {
    fill: url(#chart-gradient);
  }
.payli-page-pos .dashboard-chart .point {
    fill: var(--brand);
  }
comment
.payli-page-pos .dash-badge {
    position: absolute;
    background: white;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 12px 16px;
    border-radius: 16px;
    z-index: 4;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
  }
.payli-page-pos .dash-badge svg { width: 16px; height: 16px; color: var(--brand); }
.payli-page-pos .dash-badge.b1 {
    top: 20px; right: 0;
    display: flex; align-items: center; gap: 8px;
    animation: float-badge 5s ease-in-out infinite;
  }
.payli-page-pos .dash-badge.b2 {
    bottom: 30px; left: -10px;
    animation: float-badge 5s ease-in-out infinite -2s;
  }
.payli-page-pos .dash-badge.b2 .num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 20px;
    color: var(--brand);
    letter-spacing: -.03em;
    margin-right: 4px;
  }
comment
.payli-page-pos .features-section {
    padding: 100px 0 120px;
  }
.payli-page-pos .section-title-row {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 60px;
    gap: 32px;
  }
.payli-page-pos .section-eyebrow {
    color: var(--brand);
    font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .12em;
    margin-bottom: 12px;
  }
.payli-page-pos .section-title-row h2 {
    font-size: clamp(40px, 5vw, 64px);
    max-width: 700px;
    letter-spacing: -.04em;
  }
.payli-page-pos .section-title-row h2 .em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
  }
.payli-page-pos .section-title-row p {
    color: var(--ink-soft);
    font-size: 17px;
    max-width: 360px;
    flex-shrink: 0;
  }
.payli-page-pos .bento {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    grid-template-rows: 320px 320px;
    gap: 20px;
  }
.payli-page-pos .bento-card {
    border-radius: 24px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
    display: flex; flex-direction: column;
  }
.payli-page-pos .bento-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
.payli-page-pos .bento-card.b1 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    background: linear-gradient(155deg, var(--brand), var(--brand-darker));
    color: white;
  }
.payli-page-pos .bento-card.b2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    background: var(--paper);
    border: 1px solid var(--line);
  }
.payli-page-pos .bento-card.b3 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    background: var(--cream);
    border: 1px solid var(--cream-line);
  }
.payli-page-pos .bento-card.b4 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background: var(--ink);
    color: white;
  }
.payli-page-pos .bento-card.b5 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    background: var(--paper);
    border: 1px solid var(--line);
  }
.payli-page-pos .bento-cat {
    font-size: 11px; font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 14px;
    opacity: .7;
  }
.payli-page-pos .bento-card h3 {
    font-size: 28px;
    margin-bottom: 12px;
    line-height: 1.05;
  }
.payli-page-pos .bento-card.b1 h3 {
    font-size: 44px;
  }
.payli-page-pos .bento-card p {
    font-size: 14px;
    opacity: .82;
    line-height: 1.5;
  }
comment
.payli-page-pos .bento-illu { position: absolute; pointer-events: none; }
.payli-page-pos .bento-sync {
    bottom: 30px; right: -20px;
    width: 320px; height: 220px;
  }
.payli-page-pos .bento-sync-line {
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  }
.payli-page-pos .bento-sync .device {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(20px);
    border-radius: 14px;
  }
.payli-page-pos .bento-sync .device.left {
    left: 0;
    width: 110px; height: 90px;
  }
.payli-page-pos .bento-sync .device.right {
    right: 0;
    width: 130px; height: 100px;
  }
.payli-page-pos .bento-sync .device.left::before, .payli-page-pos .bento-sync .device.right::before {
    content: '';
    position: absolute;
    inset: 8px;
    background: rgba(255,255,255,.15);
    border-radius: 8px;
  }
.payli-page-pos .bento-sync .pulse {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 10px; height: 10px;
    background: white;
    border-radius: 50%;
    animation: travel-sync 3s ease-in-out infinite;
  }
@keyframes travel-sync {
    0% { left: 80px; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: 220px; opacity: 0; }
  }
.payli-page-pos .bento-money {
    bottom: -30px; right: -20px;
    width: 200px; height: 130px;
    background: linear-gradient(135deg, var(--brand), var(--brand-light));
    border-radius: 14px;
    transform: rotate(-6deg);
    box-shadow: var(--shadow-md);
    padding: 14px;
  }
.payli-page-pos .bento-money .row {
    height: 6px;
    background: rgba(255,255,255,.3);
    border-radius: 3px;
    margin-bottom: 6px;
  }
.payli-page-pos .bento-money .row.short { width: 40%; }
.payli-page-pos .bento-money .pin {
    position: absolute;
    bottom: 14px; right: 14px;
    width: 32px; height: 24px;
    background: linear-gradient(135deg, #FFD580, #E5A93C);
    border-radius: 4px;
  }
.payli-page-pos .bento-hardware {
    bottom: 0; right: -10px;
    width: 200px; height: 140px;
  }
.payli-page-pos .bento-hardware .printer-mini {
    position: absolute;
    bottom: 0; right: 0;
    width: 130px; height: 80px;
    background: linear-gradient(160deg, #3a4670, #1a2440);
    border-radius: 8px;
    transform: rotate(4deg);
    box-shadow: var(--shadow-md);
  }
.payli-page-pos .bento-hardware .printer-mini::before {
    content: '';
    position: absolute;
    inset: 8px;
    background: rgba(255,255,255,.1);
    border-radius: 4px;
  }
.payli-page-pos .bento-hardware .scanner-mini {
    position: absolute;
    top: 0; left: 0;
    width: 60px; height: 100px;
    background: linear-gradient(155deg, var(--ink), #1a2440);
    border-radius: 10px 10px 18px 18px;
    transform: rotate(-12deg);
    box-shadow: var(--shadow-md);
  }
.payli-page-pos .bento-hardware .scanner-mini::before {
    content: '';
    position: absolute;
    top: 8px; left: 8px; right: 8px;
    height: 28px;
    background: rgba(0,0,0,.3);
    border-radius: 4px;
  }
.payli-page-pos .bento-hardware .scanner-mini::after {
    content: '';
    position: absolute;
    top: 18px; left: 14px; right: 14px;
    height: 8px;
    background: linear-gradient(90deg, #FF3030, #FF6060);
    border-radius: 1px;
    box-shadow: 0 0 6px rgba(255,48,48,.6);
  }
.payli-page-pos .bento-roles {
    bottom: 14px; right: 0;
    width: 240px; height: 160px;
  }
.payli-page-pos .role-card {
    position: absolute;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 10px;
    backdrop-filter: blur(20px);
    width: 130px;
  }
.payli-page-pos .role-card .role-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
  }
.payli-page-pos .role-card .role-av {
    width: 20px; height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
  }
.payli-page-pos .role-card .role-info { flex: 1; }
.payli-page-pos .role-card .role-name {
    font-size: 9px;
    color: white;
    font-weight: 600;
  }
.payli-page-pos .role-card .role-tag {
    font-size: 7px;
    color: rgba(255,255,255,.5);
  }
.payli-page-pos .role-card.r1 {
    top: 0; right: 0;
    transform: rotate(3deg);
  }
.payli-page-pos .role-card.r1 .role-av { background: linear-gradient(135deg, #FF8A65, #FF5722); }
.payli-page-pos .role-card.r2 {
    bottom: 0; left: 0;
    transform: rotate(-3deg);
  }
.payli-page-pos .role-card.r2 .role-av { background: linear-gradient(135deg, var(--brand-light), var(--brand)); }
.payli-page-pos .bento-app {
    bottom: 0; right: 0;
    width: 200px; height: 160px;
  }
.payli-page-pos .bento-app .phone-icon {
    width: 64px; height: 100px;
    background: linear-gradient(155deg, var(--ink), #1a2440);
    border-radius: 14px;
    padding: 4px;
    position: absolute;
    bottom: 0; right: 30px;
    transform: rotate(-4deg);
    box-shadow: var(--shadow-md);
  }
.payli-page-pos .bento-app .phone-icon::before {
    content: '';
    position: absolute;
    inset: 4px;
    background: linear-gradient(135deg, var(--brand), var(--brand-light));
    border-radius: 10px;
  }
.payli-page-pos .bento-app .ipad-icon {
    width: 100px; height: 80px;
    background: linear-gradient(155deg, var(--ink), #1a2440);
    border-radius: 8px;
    padding: 4px;
    position: absolute;
    top: 0; left: 0;
    transform: rotate(6deg);
    box-shadow: var(--shadow-md);
  }
.payli-page-pos .bento-app .ipad-icon::before {
    content: '';
    position: absolute;
    inset: 3px;
    background: linear-gradient(135deg, var(--cream-soft), var(--cream-dark));
    border-radius: 4px;
  }
.payli-page-pos .bento-app .badge-app {
    position: absolute;
    top: 10px; right: 0;
    background: white;
    border: 1px solid var(--line);
    padding: 4px 8px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 700;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
  }
comment
.payli-page-pos .quote-breaker {
    background: var(--cream);
    padding: 100px 0;
    border-top: 1px solid var(--cream-line);
    border-bottom: 1px solid var(--cream-line);
    position: relative;
    overflow: hidden;
  }
.payli-page-pos .quote-breaker .container { text-align: center; }
.payli-page-pos .quote-breaker .quote-mark {
    font-family: 'Instrument Serif', serif;
    font-size: 200px;
    color: var(--brand);
    line-height: 1;
    margin-bottom: -40px;
    opacity: .25;
  }
.payli-page-pos .quote-breaker blockquote {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.15;
    color: var(--ink);
    max-width: 900px;
    margin: 0 auto 32px;
    letter-spacing: -.02em;
  }
.payli-page-pos .quote-attr {
    display: inline-flex; align-items: center; gap: 12px;
    background: var(--paper);
    padding: 10px 18px;
    border-radius: 100px;
    border: 1px solid var(--cream-line);
    font-size: 14px;
    color: var(--ink-soft);
  }
.payli-page-pos .quote-attr .avatar {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, var(--brand), var(--brand-light));
    border-radius: 50%;
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 12px;
  }
comment
.payli-page-pos .how-it-works {
    background: var(--cream-soft);
    border-top: 1px solid var(--cream-line);
    border-bottom: 1px solid var(--cream-line);
    padding: 120px 0;
    position: relative;
  }
.payli-page-pos .hiw-header { text-align: center; margin-bottom: 80px; }
.payli-page-pos .hiw-header h2 {
    font-size: clamp(40px, 5vw, 64px);
    margin-bottom: 16px;
  }
.payli-page-pos .hiw-header h2 .em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
  }
.payli-page-pos .hiw-header p {
    font-size: 18px;
    color: var(--ink-soft);
    max-width: 600px;
    margin: 0 auto;
  }
.payli-page-pos .hiw-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
    margin-top: 40px;
  }
.payli-page-pos .hiw-line {
    position: absolute;
    top: 80px; left: 16%; right: 16%;
    height: 1px;
    pointer-events: none;
    z-index: 0;
  }
.payli-page-pos .hiw-line svg {
    width: 100%; height: 100px;
    overflow: visible;
  }
.payli-page-pos .hiw-line path {
    stroke: var(--brand);
    stroke-width: 2;
    stroke-dasharray: 4 6;
    fill: none;
    opacity: .4;
  }
.payli-page-pos .step {
    background: var(--paper);
    border: 1px solid var(--cream-line);
    border-radius: 24px;
    padding: 36px 32px;
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow-sm);
  }
.payli-page-pos .step-num {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 124px;
    line-height: 1;
    color: var(--brand);
    letter-spacing: -.04em;
    margin-bottom: 8px;
  }
.payli-page-pos .step h4 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -.03em;
  }
.payli-page-pos .step p {
    color: var(--ink-soft);
    font-size: 15px;
    margin-bottom: 16px;
  }
.payli-page-pos .step-meta {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px;
    background: var(--cream);
    padding: 6px 12px;
    border-radius: 100px;
    color: var(--ink-soft);
    font-weight: 500;
  }
.payli-page-pos .step-meta svg { width: 14px; height: 14px; color: var(--brand); }
comment
.payli-page-pos .hw-compat {
    padding: 120px 0;
    background: var(--bg);
  }
.payli-page-pos .compat-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 32px;
    padding: 64px;
    box-shadow: var(--shadow-md);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
.payli-page-pos .compat-card::before {
    content: '';
    position: absolute;
    bottom: -150px; right: -150px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--brand-soft), transparent 70%);
    border-radius: 50%;
  }
.payli-page-pos .compat-content { position: relative; z-index: 1; }
.payli-page-pos .compat-content h2 {
    font-size: clamp(32px, 4vw, 48px);
    margin-bottom: 16px;
  }
.payli-page-pos .compat-content h2 .em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
  }
.payli-page-pos .compat-content p {
    font-size: 17px;
    color: var(--ink-soft);
    margin-bottom: 24px;
    max-width: 480px;
  }
.payli-page-pos .compat-list {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 24px;
  }
.payli-page-pos .compat-tag {
    padding: 8px 14px;
    background: var(--brand-soft);
    color: var(--brand);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
  }
.payli-page-pos .compat-tag.dark {
    background: var(--ink);
    color: white;
  }
.payli-page-pos .compat-visual {
    position: relative;
    height: 280px;
    z-index: 1;
  }
.payli-page-pos .compat-device {
    position: absolute;
    background: linear-gradient(155deg, #2a3450, #0B1530);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
  }
.payli-page-pos .compat-device.terminal {
    top: 20px; right: 60px;
    width: 100px; height: 160px;
    transform: rotate(-6deg);
    padding: 6px;
  }
.payli-page-pos .compat-device.terminal::before {
    content: '';
    position: absolute;
    inset: 6px 6px auto 6px;
    height: 80px;
    background: white;
    border-radius: 6px;
  }
.payli-page-pos .compat-device.printer {
    top: 100px; left: 30px;
    width: 130px; height: 90px;
    transform: rotate(4deg);
    padding: 8px;
  }
.payli-page-pos .compat-device.printer::before {
    content: '';
    position: absolute;
    top: 28px; left: 8px; right: 8px;
    height: 50px;
    background: white;
    border-radius: 2px;
  }
.payli-page-pos .compat-device.tablet {
    bottom: 0; right: 0;
    width: 180px; height: 120px;
    transform: rotate(-3deg);
    padding: 6px;
    border: 4px solid #5a3920;
  }
.payli-page-pos .compat-device.tablet::before {
    content: '';
    position: absolute;
    inset: 4px;
    background: linear-gradient(135deg, var(--brand), var(--brand-light));
    border-radius: 4px;
  }
.payli-page-pos .compat-link-line {
    position: absolute;
    top: 50%; left: 50%;
    width: 70%;
    height: 1px;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
.payli-page-pos .compat-link-line svg {
    width: 100%; overflow: visible;
  }
.payli-page-pos .compat-link-line path {
    stroke: var(--brand);
    stroke-width: 1.5;
    stroke-dasharray: 3 4;
    fill: none;
    opacity: .4;
  }
comment
.payli-page-pos .faq-section {
    padding: 120px 0;
  }
.payli-page-pos .faq-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 80px;
  }
.payli-page-pos .faq-grid h2 {
    font-size: clamp(36px, 4.5vw, 56px);
    margin-bottom: 16px;
  }
.payli-page-pos .faq-grid h2 .em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
  }
.payli-page-pos .faq-grid > div:first-child p {
    color: var(--ink-soft);
    font-size: 16px;
    margin-bottom: 24px;
  }
.payli-page-pos .faq-help {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px;
    display: flex; flex-direction: column; gap: 12px;
  }
.payli-page-pos .faq-help h4 {
    font-size: 16px;
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
  }
.payli-page-pos .faq-help-link {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0;
    font-size: 14px;
    border-top: 1px solid var(--line-soft);
    color: var(--ink-soft);
    transition: color .2s;
  }
.payli-page-pos .faq-help-link:hover { color: var(--brand); }
.payli-page-pos .faq-help-link svg { width: 14px; height: 14px; }
.payli-page-pos .faq-list {
    border-top: 1px solid var(--line);
  }
.payli-page-pos .faq-item {
    border-bottom: 1px solid var(--line);
  }
.payli-page-pos .faq-q {
    width: 100%;
    padding: 24px 0;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
.payli-page-pos .faq-q .plus {
    width: 28px; height: 28px;
    background: var(--bg);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink);
    font-size: 18px;
    font-weight: 400;
    flex-shrink: 0;
    transition: all .3s;
  }
.payli-page-pos .faq-item.open .faq-q .plus {
    background: var(--brand);
    color: white;
    transform: rotate(45deg);
  }
.payli-page-pos .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease, padding .3s ease;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.65;
  }
.payli-page-pos .faq-item.open .faq-a {
    max-height: 400px;
    padding: 0 0 24px;
  }
comment
.payli-page-pos .cta-dark {
    padding: 100px 0;
    background: var(--ink);
    color: white;
    position: relative;
    overflow: hidden;
  }
.payli-page-pos .cta-dark::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(41,82,197,.4), transparent 70%);
    border-radius: 50%;
  }
.payli-page-pos .cta-dark::after {
    content: '';
    position: absolute;
    bottom: -200px; left: -100px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(85,119,217,.2), transparent 70%);
    border-radius: 50%;
  }
.payli-page-pos .cta-dark .container {
    text-align: center;
    position: relative; z-index: 1;
  }
.payli-page-pos .cta-dark .eyebrow {
    background: rgba(255,255,255,.1);
    color: white;
  }
.payli-page-pos .cta-dark h2 {
    font-size: clamp(48px, 6vw, 88px);
    margin-bottom: 24px;
    color: white;
  }
.payli-page-pos .cta-dark h2 .em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand-light);
  }
.payli-page-pos .cta-dark p {
    font-size: 18px;
    color: rgba(255,255,255,.7);
    max-width: 540px;
    margin: 0 auto 36px;
  }
.payli-page-pos .cta-dark-btns {
    display: flex; gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }
comment
.payli-page-pos .payment-icons {
    display: flex; gap: 12px;
    align-items: center;
  }
.payli-page-pos .pay-icon {
    height: 28px;
    padding: 4px 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink);
    display: flex; align-items: center;
    letter-spacing: -.02em;
  }
.payli-page-pos .pay-icon.bc { color: #005498; }
comment
.payli-page-pos .floating-cta {
    position: fixed;
    bottom: 24px; right: 24px;
    background: var(--brand);
    color: white;
    padding: 14px 22px;
    border-radius: 100px;
    box-shadow: var(--shadow-brand);
    display: flex; align-items: center; gap: 10px;
    font-weight: 600;
    font-size: 14px;
    transition: all .3s;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    z-index: 50;
  }
.payli-page-pos .floating-cta.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }
.payli-page-pos .floating-cta:hover { transform: translateY(-2px) scale(1.02); }
.payli-page-pos .floating-cta img { height: 16px; filter: brightness(0) invert(1); }
comment
@media (max-width: 1280px) {
  .payli-page-pos .hero h1 { font-size: clamp(40px, 6.5vw, 88px); }
}
@media (max-width: 1024px) {
  .payli-page-pos .container { padding: 0 24px; }
  .payli-page-pos .section { padding: 90px 0; }
  .payli-page-pos .hero { padding: 60px 0 80px; }
  .payli-page-pos .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .payli-page-pos .hero-grid > div:first-child { text-align: center; }
  .payli-page-pos .hero-grid > div:first-child .eyebrow, .payli-page-pos .hero-grid > div:first-child .hero-ctas, .payli-page-pos .hero-grid > div:first-child .hero-meta { justify-content: center; }
  .payli-page-pos .hero p { margin-left: auto; margin-right: auto; }
  .payli-page-pos .ipad-frame { width: 100%; max-width: 460px; height: auto; aspect-ratio: 4/3; }
  .payli-page-pos .feature-grid { grid-template-columns: 1fr; gap: 48px; padding: 40px; text-align: center; }
  .payli-page-pos .feature-content .featured-tag { margin-left: auto; margin-right: auto; }
  .payli-page-pos .check-list li { text-align: left; }
  .payli-page-pos .stats-grid { grid-template-columns: 1fr 1fr; }
  .payli-page-pos .stat-hero { grid-column: 1 / -1; }
  .payli-page-pos .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .payli-page-pos .bento-card.b1 { grid-column: 1 / -1; grid-row: auto; height: 360px; }
  .payli-page-pos .bento-card.b2, .payli-page-pos .bento-card.b3, .payli-page-pos .bento-card.b4, .payli-page-pos .bento-card.b5 { grid-column: auto; grid-row: auto; height: 280px; }
  .payli-page-pos .hiw-steps { grid-template-columns: 1fr; gap: 32px; }
  .payli-page-pos .hiw-line { display: none; }
  .payli-page-pos .step { padding: 28px 24px; }
  .payli-page-pos .step-num { font-size: 88px; }
  .payli-page-pos .compat-card { grid-template-columns: 1fr; gap: 48px; padding: 40px; text-align: center; }
  .payli-page-pos .compat-list { justify-content: center; }
  .payli-page-pos .faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .payli-page-pos .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .payli-page-pos .section-title-row { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }
  .payli-page-pos .nav-links { display: none; }
  .payli-page-pos .nav-toggle { display: flex; }
}
@media (max-width: 768px) {
  .payli-page-pos .container { padding: 0 18px; }
  .payli-page-pos .section { padding: 70px 0; }
  .payli-page-pos .hero { padding: 32px 0 60px; }
  .payli-page-pos .hero h1 { font-size: clamp(36px, 9vw, 56px); }
  .payli-page-pos .hero p { font-size: 16px; }
  .payli-page-pos .hero-visual { height: auto; min-height: 340px; transform: none; }
  .payli-page-pos .ipad-frame { width: 100%; max-width: 340px; height: auto; aspect-ratio: 4/3; }
  .payli-page-pos .phone-float { right: -20px; transform: rotate(8deg) scale(0.8); }
  .payli-page-pos .sync-indicator { font-size: 10px; padding: 6px 10px; }
  .payli-page-pos .stats-grid { grid-template-columns: 1fr; gap: 16px; }
  .payli-page-pos .stat-hero { padding: 32px 24px; }
  .payli-page-pos .stat-hero .num { font-size: 64px; }
  .payli-page-pos .stat-card { padding: 24px 20px; }
  .payli-page-pos .stat-card .num { font-size: 36px; }
  .payli-page-pos .stat-card .num.smaller { font-size: 22px; }
  .payli-page-pos .bento { grid-template-columns: 1fr; }
  .payli-page-pos .bento-card { height: auto; min-height: 240px; padding: 28px 24px; }
  .payli-page-pos .bento-card.b1 { height: auto; min-height: 320px; }
  .payli-page-pos .bento-card h3 { font-size: 24px; }
  .payli-page-pos .bento-card.b1 h3 { font-size: 32px; }
  .payli-page-pos .bento-illu { transform: scale(0.78); transform-origin: bottom right; }
  .payli-page-pos .quote-breaker { padding: 60px 0; }
  .payli-page-pos .quote-breaker blockquote { font-size: clamp(26px, 7vw, 38px); }
  .payli-page-pos .quote-breaker .quote-mark { font-size: 140px; margin-bottom: -28px; }
  .payli-page-pos .how-it-works { padding: 70px 0; }
  .payli-page-pos .step-num { font-size: 72px; }
  .payli-page-pos .step h4 { font-size: 22px; }
  .payli-page-pos .feature-grid { padding: 32px 24px; gap: 32px; border-radius: 24px; }
  .payli-page-pos .feature-content h2 { font-size: 36px; }
  .payli-page-pos .dashboard-stage { height: 380px; }
  .payli-page-pos .dashboard-mock { width: 100%; max-width: 420px; }
  .payli-page-pos .dash-badge { font-size: 11px; padding: 8px 12px; }
  .payli-page-pos .compat-card { padding: 32px 24px; border-radius: 24px; }
  .payli-page-pos .compat-content h2 { font-size: 32px; }
  .payli-page-pos .compat-visual { height: 240px; }
  .payli-page-pos .cta-dark h2 { font-size: clamp(36px, 8vw, 56px); }
  .payli-page-pos .cta-dark { padding: 70px 0; }
  .payli-page-pos .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .payli-page-pos .footer-brand { grid-column: 1 / -1; }
  .payli-page-pos .footer-bottom { flex-direction: column; align-items: flex-start; }
  .payli-page-pos .nav-cta .btn-ghost { display: none; }
  .payli-page-pos .nav-cta .btn-primary { padding: 10px 16px; font-size: 13px; }
  .payli-page-pos .nav-logo { height: 26px; }
  .payli-page-pos .floating-cta { padding: 12px 18px; font-size: 13px; bottom: 16px; right: 16px; }
  .payli-page-pos .usp-item { font-size: 15px; }
  .payli-page-pos .usp-track { gap: 36px; }
}
@media (max-width: 480px) {
  .payli-page-pos .container { padding: 0 16px; }
  .payli-page-pos .section { padding: 56px 0; }
  .payli-page-pos .hero h1 { font-size: clamp(32px, 10vw, 44px); letter-spacing: -.03em; }
  .payli-page-pos .btn-large-primary, .payli-page-pos .btn-large-ghost { padding: 14px 22px; font-size: 14px; width: 100%; justify-content: center; }
  .payli-page-pos .hero-ctas { width: 100%; flex-direction: column; }
  .payli-page-pos .hero-meta { gap: 12px; font-size: 12px; flex-direction: column; align-items: center; }
  .payli-page-pos .hero-visual { height: auto; min-height: 280px; transform: none; }
  .payli-page-pos .ipad-frame { width: 100%; max-width: 300px; }
  .payli-page-pos .phone-float { right: -30px; transform: rotate(8deg) scale(0.65); }
  .payli-page-pos .stat-hero .num { font-size: 56px; }
  .payli-page-pos .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .payli-page-pos .footer-brand { grid-column: auto; }
  .payli-page-pos .cta-dark-btns { flex-direction: column; width: 100%; }
  .payli-page-pos .cta-dark-btns a { width: 100%; justify-content: center; }
  .payli-page-pos .nav-inner { padding: 14px 18px; }
}


/* ===========================================================
   ULTRA FIX: Witte achtergrond + full-width — geen zwarte randen
   =========================================================== */

/* HTML element zelf */
html {
    background: #FAFBFD !important;
    background-color: #FAFBFD !important;
}

/* Body op POS template — witte achtergrond */
html body,
html body.page-template-template-payli-pos,
html body.payli-custom-template {
    background: #FAFBFD !important;
    background-color: #FAFBFD !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Alle directe children van body — geen breedte-beperking */
html body > *,
html body.payli-custom-template > * {
    max-width: 100% !important;
}

/* Specifiek: alle Blocksy/Elementor wrappers */
html body .ct-drawer-canvas,
html body .ct-main-styles,
html body #wrapper,
html body #page,
html body .site,
html body main,
html body main#payli-main,
html body main.site-main,
html body article,
html body .elementor,
html body .elementor-page,
html body .elementor-section,
html body .elementor-container,
html body .elementor-column,
html body .elementor-widget,
html body .elementor-widget-container,
html body .ct-container,
html body .entry-content,
html body .post-inner,
html body .entry,
html body .post {
    background: transparent !important;
    background-color: transparent !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Page wrapper zelf — vol breedte met witte achtergrond */
html body .payli-page-pos,
html body .payli-page-home,
html body .payli-page-pricing {
    background: #FAFBFD !important;
    background-color: #FAFBFD !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

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

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


/* ===========================================================
   FIX: Bento cards tekst kleuren + decoratieve elementen onder tekst
   =========================================================== */

/* === b1 kaart (groot blauw) — witte tekst forceren === */
html body .payli-page-pos .bento-card.b1,
.payli-page-pos .bento-card.b1 {
    background: linear-gradient(155deg, #2952C5, #15307E) !important;
}
html body .payli-page-pos .bento-card.b1,
html body .payli-page-pos .bento-card.b1 *,
.payli-page-pos .bento-card.b1,
.payli-page-pos .bento-card.b1 * {
    color: white !important;
}
html body .payli-page-pos .bento-card.b1 .bento-cat,
.payli-page-pos .bento-card.b1 .bento-cat {
    color: rgba(255,255,255,.8) !important;
}
html body .payli-page-pos .bento-card.b1 p,
.payli-page-pos .bento-card.b1 p {
    color: rgba(255,255,255,.85) !important;
}

/* === b4 kaart (ink/zwart) — witte tekst === */
html body .payli-page-pos .bento-card.b4,
.payli-page-pos .bento-card.b4 {
    background: #0B1530 !important;
}
html body .payli-page-pos .bento-card.b4,
html body .payli-page-pos .bento-card.b4 *,
.payli-page-pos .bento-card.b4,
.payli-page-pos .bento-card.b4 * {
    color: white !important;
    text-decoration: none !important;
}
html body .payli-page-pos .bento-card.b4 h3,
.payli-page-pos .bento-card.b4 h3 {
    color: white !important;
    text-decoration: none !important;
}
html body .payli-page-pos .bento-card.b4 .bento-cat,
.payli-page-pos .bento-card.b4 .bento-cat {
    color: rgba(255,255,255,.7) !important;
}
html body .payli-page-pos .bento-card.b4 p,
.payli-page-pos .bento-card.b4 p {
    color: rgba(255,255,255,.85) !important;
}

/* Forceer alle decoratieve mockup elementen ONDER de tekst */
html body .payli-page-pos .bento-card,
.payli-page-pos .bento-card {
    position: relative !important;
    overflow: hidden !important;
}

/* Tekst content boven de decoratieve elementen */
html body .payli-page-pos .bento-card .bento-cat,
html body .payli-page-pos .bento-card h3,
html body .payli-page-pos .bento-card > p,
.payli-page-pos .bento-card .bento-cat,
.payli-page-pos .bento-card h3,
.payli-page-pos .bento-card > p {
    position: relative !important;
    z-index: 5 !important;
}

/* Decoratieve elementen achter de tekst */
html body .payli-page-pos .bento-card .bento-deco,
html body .payli-page-pos .bento-card .terminal-mock,
html body .payli-page-pos .bento-card .device-mock,
html body .payli-page-pos .bento-card .card-mock,
html body .payli-page-pos .bento-card svg:not(.icon),
html body .payli-page-pos .bento-card img,
.payli-page-pos .bento-card .bento-deco,
.payli-page-pos .bento-card .terminal-mock,
.payli-page-pos .bento-card .device-mock,
.payli-page-pos .bento-card .card-mock {
    position: absolute !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

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


/* ===========================================================
   FIX: Spacing tussen secties + alle algemene padding
   =========================================================== */

/* Ruimte tussen alle hoofdsecties */
html body .payli-page-pos .stats-bar,
.payli-page-pos .stats-bar {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

html body .payli-page-pos .feature-block,
.payli-page-pos .feature-block {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

html body .payli-page-pos .features-bento,
.payli-page-pos .features-bento {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

html body .payli-page-pos .quote-breaker,
.payli-page-pos .quote-breaker {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

html body .payli-page-pos .how-it-works,
.payli-page-pos .how-it-works {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
}

html body .payli-page-pos .hardware-compat,
.payli-page-pos .hardware-compat {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

html body .payli-page-pos .faq-section,
.payli-page-pos .faq-section {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

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


/* ===========================================================
   FIX: Bento decoraties verkleinen + onder tekst plaatsen
   =========================================================== */

/* Tekst BOVEN decoratieve elementen (zonder uitzondering) */
html body .payli-page-pos .bento-card,
.payli-page-pos .bento-card {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

html body .payli-page-pos .bento-card .bento-cat,
html body .payli-page-pos .bento-card h3,
html body .payli-page-pos .bento-card > p,
.payli-page-pos .bento-card .bento-cat,
.payli-page-pos .bento-card h3,
.payli-page-pos .bento-card > p {
    position: relative !important;
    z-index: 10 !important;
}

/* Decoratieve illustraties altijd achter tekst */
html body .payli-page-pos .bento-illu,
.payli-page-pos .bento-illu {
    z-index: 1 !important;
    pointer-events: none !important;
}

/* === b3 (Werkt met alle hardware) — decoratie kleiner & lager === */
html body .payli-page-pos .bento-card.b3 .bento-hardware,
.payli-page-pos .bento-card.b3 .bento-hardware,
html body .payli-page-pos .bento-hardware,
.payli-page-pos .bento-hardware {
    bottom: -20px !important;
    right: -10px !important;
    width: 180px !important;
    height: 110px !important;
    top: auto !important;
}

html body .payli-page-pos .bento-hardware .scanner-mini,
.payli-page-pos .bento-hardware .scanner-mini {
    top: auto !important;
    bottom: 0 !important;
    left: auto !important;
    right: 100px !important;
    width: 50px !important;
    height: 80px !important;
}

html body .payli-page-pos .bento-hardware .printer-mini,
.payli-page-pos .bento-hardware .printer-mini {
    width: 110px !important;
    height: 70px !important;
}

/* === b5 (iPad/telefoon of beide) — decoratie kleiner & lager === */
html body .payli-page-pos .bento-card.b5 .bento-app,
.payli-page-pos .bento-card.b5 .bento-app,
html body .payli-page-pos .bento-app,
.payli-page-pos .bento-app {
    bottom: -20px !important;
    right: -10px !important;
    top: auto !important;
}

html body .payli-page-pos .bento-app .ipad-icon,
.payli-page-pos .bento-app .ipad-icon {
    top: auto !important;
    bottom: 60px !important;
    right: 70px !important;
    width: 60px !important;
    height: 75px !important;
    left: auto !important;
}

html body .payli-page-pos .bento-app .phone-icon,
.payli-page-pos .bento-app .phone-icon {
    bottom: 0 !important;
    right: 0 !important;
    top: auto !important;
    left: auto !important;
}

/* Badge "iOS · Android" aan de TOP RECHTS forceren — niet over tekst */
html body .payli-page-pos .bento-card.b5 .badge-app,
.payli-page-pos .bento-card.b5 .badge-app {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 10 !important;
}

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


/* ===========================================================
   FIX: USP strip donkere achtergrond met witte tekst
   =========================================================== */

html body .payli-page-pos .usp-strip,
.payli-page-pos .usp-strip {
    background: #0B1530 !important;
    background-color: #0B1530 !important;
    color: white !important;
    padding: 22px 0 !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Radial gradient overlay voor extra diepte (zoals homepage) */
html body .payli-page-pos .usp-strip > *,
.payli-page-pos .usp-strip > * {
    position: relative !important;
    z-index: 2 !important;
}

/* Fade-out gradient links/rechts */
html body .payli-page-pos .usp-strip::before,
.payli-page-pos .usp-strip::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 80px !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, #0B1530, transparent) !important;
}

html body .payli-page-pos .usp-strip::after,
.payli-page-pos .usp-strip::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 80px !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background: linear-gradient(-90deg, #0B1530, transparent) !important;
}

/* USP items witte tekst */
html body .payli-page-pos .usp-item,
.payli-page-pos .usp-item {
    color: white !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

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

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


/* ===========================================================
   FIX: Eyebrow, sync-indicator en hero-meta correct stylen
   =========================================================== */

/* === Eyebrow ("IOS & ANDROID · VANDAAG NOG BEGINNEN") === */
html body .payli-page-pos .hero .eyebrow,
html body .payli-page-pos .eyebrow,
.payli-page-pos .hero .eyebrow,
.payli-page-pos .eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #E8EEFB !important;
    background-color: #E8EEFB !important;
    color: #2952C5 !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 100px !important;
    margin-bottom: 24px !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    width: auto !important;
    max-width: max-content !important;
}

html body .payli-page-pos .eyebrow .dot,
.payli-page-pos .eyebrow .dot {
    width: 6px !important;
    height: 6px !important;
    background: #2952C5 !important;
    background-color: #2952C5 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/* === Sync indicator ("Realtime sync · Webshop & POS") === */
html body .payli-page-pos .sync-indicator,
.payli-page-pos .sync-indicator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: white !important;
    background-color: white !important;
    color: #0B1530 !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 100px !important;
    box-shadow: 0 4px 16px rgba(11,21,48,.08) !important;
    border: 1px solid #E2E6F0 !important;
    margin-bottom: 24px !important;
    width: auto !important;
    max-width: max-content !important;
    position: relative !important;
    z-index: 5 !important;
}

html body .payli-page-pos .sync-indicator .dot-sync,
.payli-page-pos .sync-indicator .dot-sync {
    width: 8px !important;
    height: 8px !important;
    background: #22c55e !important;
    background-color: #22c55e !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

html body .payli-page-pos .sync-indicator svg,
.payli-page-pos .sync-indicator svg {
    width: 14px !important;
    height: 14px !important;
    color: #2952C5 !important;
    stroke: #2952C5 !important;
    flex-shrink: 0 !important;
}

/* === Hero meta items (de 3 vinkjes onder de CTAs) === */
html body .payli-page-pos .hero-meta,
.payli-page-pos .hero-meta {
    margin-top: 32px !important;
    display: flex !important;
    gap: 24px !important;
    align-items: center !important;
    font-size: 13px !important;
    color: #6B7494 !important;
    flex-wrap: wrap !important;
}

html body .payli-page-pos .hero-meta-item,
.payli-page-pos .hero-meta-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #6B7494 !important;
}

html body .payli-page-pos .hero-meta svg,
html body .payli-page-pos .hero-meta-item svg,
.payli-page-pos .hero-meta svg,
.payli-page-pos .hero-meta-item svg {
    width: 16px !important;
    height: 16px !important;
    color: #2952C5 !important;
    stroke: #2952C5 !important;
    flex-shrink: 0 !important;
}

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


/* ===========================================================
   FIX: Hero ruimte boven + phone-float correct positioneren
   =========================================================== */

/* Hero meer padding-top — niet plakken aan nav */
html body .payli-page-pos .hero,
.payli-page-pos .hero {
    padding-top: 80px !important;
    padding-bottom: 100px !important;
    overflow: visible !important;
    position: relative !important;
}

/* Hero-visual moet relative zijn voor absolute children */
html body .payli-page-pos .hero-visual,
.payli-page-pos .hero-visual {
    position: relative !important;
    overflow: visible !important;
}

/* Phone-float ABSOLUUT gepositioneerd (drijvend over tablet rechter onderhoek) */
html body .payli-page-pos .phone-float,
.payli-page-pos .phone-float {
    position: absolute !important;
    right: -40px !important;
    bottom: 30px !important;
    top: auto !important;
    left: auto !important;
    width: 140px !important;
    height: 280px !important;
    background: linear-gradient(155deg, #1a2440 0%, #0B1530 100%) !important;
    border-radius: 20px !important;
    padding: 8px !important;
    z-index: 4 !important;
    box-shadow: 0 24px 64px rgba(11,21,48,.18), 0 8px 16px rgba(11,21,48,.12) !important;
    transform: rotate(8deg) !important;
    margin: 0 !important;
}

/* Op kleinere schermen: phone iets naar binnen */
@media (max-width: 1100px) {
    html body .payli-page-pos .phone-float,
    .payli-page-pos .phone-float {
        right: -20px !important;
        transform: rotate(8deg) scale(0.85) !important;
    }
}

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


/* ===========================================================
   FIX: Dark CTA eyebrow correct stylen + sectie achtergrond
   =========================================================== */

/* Dark CTA sectie: lichte achtergrond rondom de donkere container */
html body .payli-page-pos .cta-dark,
.payli-page-pos .cta-dark {
    background: #FAFBFD !important;
    background-color: #FAFBFD !important;
    padding: 100px 24px !important;
    width: 100% !important;
    overflow: visible !important;
    position: relative !important;
}

/* De donkere container met afgeronde hoeken */
html body .payli-page-pos .cta-dark .container,
.payli-page-pos .cta-dark .container {
    background: #0B1530 !important;
    background-color: #0B1530 !important;
    color: white !important;
    border-radius: 32px !important;
    padding: 80px 64px !important;
    max-width: 1184px !important;
    margin: 0 auto !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Eyebrow IN de dark CTA: doorzichtige witte pil met witte tekst */
html body .payli-page-pos .cta-dark .eyebrow,
html body .payli-page-pos .cta-dark .container .eyebrow,
.payli-page-pos .cta-dark .eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255,255,255,.08) !important;
    background-color: rgba(255,255,255,.08) !important;
    color: white !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 100px !important;
    margin-bottom: 24px !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    width: auto !important;
    max-width: max-content !important;
}

html body .payli-page-pos .cta-dark .eyebrow .dot,
.payli-page-pos .cta-dark .eyebrow .dot {
    background: #6B8DEF !important;
    background-color: #6B8DEF !important;
}

/* Tekst binnen dark CTA */
html body .payli-page-pos .cta-dark .container h2,
.payli-page-pos .cta-dark .container 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: 20px !important;
}

html body .payli-page-pos .cta-dark .container h2 .em,
html body .payli-page-pos .cta-dark .container h2 em,
.payli-page-pos .cta-dark .container h2 .em,
.payli-page-pos .cta-dark .container h2 em {
    color: #6B8DEF !important;
    font-style: italic !important;
    font-family: 'Instrument Serif', serif !important;
    font-weight: 400 !important;
}

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

/* CTA-dark-btns gecentreerd */
html body .payli-page-pos .cta-dark-btns,
.payli-page-pos .cta-dark-btns {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    position: relative !important;
    z-index: 5 !important;
}

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


/* ===========================================================
   FIX: Page wrapper geen eigen scroll
   =========================================================== */

html body .payli-page-pos,
.payli-page-pos {
    overflow-y: visible !important;
    height: auto !important;
}

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


/* ===========================================================
   FIX: Dashboard badges floating naast mockup
   =========================================================== */

/* Dashboard stage moet relative zijn voor absolute children */
html body .payli-page-pos .dashboard-stage,
.payli-page-pos .dashboard-stage {
    position: relative !important;
    overflow: visible !important;
}

/* Badges absoluut gepositioneerd over de mockup */
html body .payli-page-pos .dash-badge,
.payli-page-pos .dash-badge {
    position: absolute !important;
    background: white !important;
    background-color: white !important;
    border: 1px solid #E2E6F0 !important;
    box-shadow: 0 8px 24px rgba(11,21,48,.10), 0 4px 8px rgba(11,21,48,.06) !important;
    padding: 12px 16px !important;
    border-radius: 16px !important;
    z-index: 10 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0B1530 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    max-width: max-content !important;
}

/* Badge "Live data" rechtsboven */
html body .payli-page-pos .dash-badge.b1,
.payli-page-pos .dash-badge.b1 {
    top: 20px !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
}

/* Badge "+12% tov vorige week" linksonder */
html body .payli-page-pos .dash-badge.b2,
.payli-page-pos .dash-badge.b2 {
    bottom: 30px !important;
    left: -10px !important;
    top: auto !important;
    right: auto !important;
}

html body .payli-page-pos .dash-badge svg,
.payli-page-pos .dash-badge svg {
    width: 16px !important;
    height: 16px !important;
    color: #2952C5 !important;
    stroke: #2952C5 !important;
    flex-shrink: 0 !important;
}

html body .payli-page-pos .dash-badge.b2 .num,
.payli-page-pos .dash-badge.b2 .num {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #2952C5 !important;
    letter-spacing: -.03em !important;
    margin-right: 4px !important;
}

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


/* ===========================================================
   FIX: Hardware compatibility - betere device compositie
   =========================================================== */

/* Visual container — meer hoogte voor mooie compositie */
html body .payli-page-pos .compat-visual,
.payli-page-pos .compat-visual {
    position: relative !important;
    height: 420px !important;
    min-height: 420px !important;
    z-index: 1 !important;
    overflow: visible !important;
}

/* Alle devices: betere look met gradient en schaduw */
html body .payli-page-pos .compat-device,
.payli-page-pos .compat-device {
    position: absolute !important;
    background: linear-gradient(155deg, #2a3450 0%, #0B1530 100%) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 48px rgba(11,21,48,.25), 0 8px 16px rgba(11,21,48,.15) !important;
    overflow: hidden !important;
}

/* === Terminal (linksboven) - rechtopstaand met scherm bovenaan === */
html body .payli-page-pos .compat-device.terminal,
.payli-page-pos .compat-device.terminal {
    top: 40px !important;
    left: 80px !important;
    right: auto !important;
    width: 130px !important;
    height: 220px !important;
    transform: rotate(-8deg) !important;
    padding: 10px !important;
    z-index: 3 !important;
}

html body .payli-page-pos .compat-device.terminal::before,
.payli-page-pos .compat-device.terminal::before {
    content: '' !important;
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: 14px !important;
    height: 130px !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05) !important;
}

/* Klein blauwe accent op terminal scherm */
html body .payli-page-pos .compat-device.terminal::after,
.payli-page-pos .compat-device.terminal::after {
    content: '' !important;
    position: absolute !important;
    bottom: 30px !important;
    left: 25px !important;
    right: 25px !important;
    height: 32px !important;
    background: linear-gradient(135deg, #2952C5, #1E40AF) !important;
    border-radius: 6px !important;
}

/* === Printer (linksonder) === */
html body .payli-page-pos .compat-device.printer,
.payli-page-pos .compat-device.printer {
    bottom: 30px !important;
    left: 0 !important;
    top: auto !important;
    width: 160px !important;
    height: 110px !important;
    transform: rotate(6deg) !important;
    padding: 12px !important;
    z-index: 2 !important;
}

html body .payli-page-pos .compat-device.printer::before,
.payli-page-pos .compat-device.printer::before {
    content: '' !important;
    position: absolute !important;
    top: 50px !important;
    left: 12px !important;
    right: 12px !important;
    height: 50px !important;
    background: white !important;
    border-radius: 4px !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05) !important;
}

/* === Tablet/Kassalade (rechts) === */
html body .payli-page-pos .compat-device.tablet,
.payli-page-pos .compat-device.tablet {
    top: 80px !important;
    right: 30px !important;
    bottom: auto !important;
    left: auto !important;
    width: 220px !important;
    height: 160px !important;
    transform: rotate(-4deg) !important;
    padding: 12px !important;
    border: none !important;
    z-index: 2 !important;
}

html body .payli-page-pos .compat-device.tablet::before,
.payli-page-pos .compat-device.tablet::before {
    content: '' !important;
    position: absolute !important;
    inset: 12px !important;
    background: linear-gradient(135deg, #2952C5, #5577D9) !important;
    border-radius: 8px !important;
}

/* Verbindingslijn tussen devices (subtiel) */
html body .payli-page-pos .compat-link-line,
.payli-page-pos .compat-link-line {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

html body .payli-page-pos .compat-link-line svg,
.payli-page-pos .compat-link-line svg {
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
}

html body .payli-page-pos .compat-link-line path,
.payli-page-pos .compat-link-line path {
    stroke: #2952C5 !important;
    stroke-width: 1.5 !important;
    stroke-dasharray: 4 6 !important;
    fill: none !important;
    opacity: .35 !important;
}

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