/* Cofibit public-site finish: official supplied white logo and purple #422F5A.
   Loaded after legacy marketing component CSS, scoped away from tenant POS. */
body.cofibit-public {
    --cofibit-brand-purple: #422F5A;
    --cofibit-violet: #83679B;
    --cofibit-violet-soft: #F5F0F8;
    --cofibit-border: #E7DFEB;
    --cofibit-text: #422F5A;
}
.cofibit-public .hero-header-wrap,
.cofibit-public .modern-nav,
.cofibit-public .modern-nav-main {
    background: #422F5A !important;
}
.cofibit-public .hero-header-wrap {
    border-color: rgba(255,255,255,.13) !important;
    box-shadow: none !important;
}
.cofibit-public :is(.brand-mini,.public-brand-mini,.landing-brand-link) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cofibit-public :is(.brand-mini-logo,.public-brand-mini-logo,.landing-brand-logo) {
    width: 108px !important;
    height: 84px !important;
    max-width: 108px;
    display: block;
    object-fit: contain !important;
    filter: none !important;
}
.cofibit-public .modern-nav-main {
    min-height: 98px;
}
@media (max-width: 767.98px) {
    .cofibit-public :is(.brand-mini-logo,.public-brand-mini-logo,.landing-brand-logo) {
        width: 80px !important; height: 65px !important;
    }
    .cofibit-public .modern-nav-main { min-height: 78px; }
}
/* Remove all leftover blue and cyan glow from the statistic shell and its tiles. */
.cofibit-public .public-statistics-shell,
.cofibit-public .public-stat-card {
    background: #FFF !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.cofibit-public .public-statistics-shell {
    border: 1px solid var(--cofibit-border) !important;
    box-shadow: 0 12px 34px rgba(66,47,90,.075) !important;
}
.cofibit-public .public-statistics-shell::before,
.cofibit-public .public-statistics-shell::after,
.cofibit-public .public-stat-card::before,
.cofibit-public .public-stat-card::after {
    content: none !important;
    display: none !important;
    background: none !important;
}
.cofibit-public .public-stat-card {
    background: #FCFAFD !important;
    border: 1px solid var(--cofibit-border) !important;
    box-shadow: none !important;
}
.cofibit-public .public-stat-card:hover {
    background: #FAF7FC !important;
    border-color: #C6B4CF !important;
    transform: translate3d(0,-2px,0) !important;
    box-shadow: 0 10px 24px rgba(66,47,90,.08) !important;
}
/* Smooth transitions without large transforms that move a card out of hover. */
.cofibit-public :is(.public-stat-card,.marketing-feature-card,.feature-card,.feature-bento-card,.package-card,.landing-overview-card,.erp-feature-card) {
    transition: background-color .34s ease, border-color .34s ease,
                transform .34s cubic-bezier(.2,.8,.2,1),
                box-shadow .34s ease !important;
    backface-visibility: hidden;
}
.cofibit-public :is(.marketing-feature-card,.feature-card,.feature-bento-card,.package-card,.landing-overview-card,.erp-feature-card):hover {
    transform: translate3d(0,-2px,0) !important;
    box-shadow: 0 12px 28px rgba(66,47,90,.09) !important;
}
.cofibit-public .landing-card-item {
    transition: transform .46s cubic-bezier(.2,.8,.2,1),box-shadow .46s ease !important;
}
.cofibit-public .landing-card-item:not(.is-tilted):hover {
    transform: translateY(-2px) !important;
}
.cofibit-public .landing-card-item.is-tilted:hover {
    transform: translateY(-2px) rotate(var(--tilt-angle)) scale(.995) !important;
}
.cofibit-public .landing-card-item.is-tilted:nth-child(even):hover {
    transform: translateY(-2px) translateX(-6px) rotate(var(--tilt-angle)) scale(.995) !important;
}
.cofibit-public .landing-card-item.is-tilted:nth-child(odd):hover {
    transform: translateY(-2px) translateX(6px) rotate(var(--tilt-angle)) scale(.995) !important;
}
/* Banner changes are automatic; the complete card pauses on hover or tap.
   The progress indicator is synchronized with the slide JS timer. */
.cofibit-public .payment-banner-card {
    background: #FFF !important;
    border-color: var(--cofibit-border) !important;
    box-shadow: 0 14px 42px rgba(66,47,90,.10) !important;
}
.cofibit-public .payment-banner-rotator {
    cursor: pointer;
    touch-action: pan-y;
}
.cofibit-public .payment-options-banner {
    transition: transform .7s cubic-bezier(.25,.75,.25,1),opacity .7s ease !important;
}
.cofibit-public .payment-banner-progress {
    background: #F0EAF3 !important;
}
.cofibit-public .payment-banner-progress::before {
    background: #8D70A5 !important;
    animation: none !important;
    transform: scaleX(0);
}
.cofibit-public .payment-banner-progress.is-running::before {
    animation: cofibitBannerProgress 6.5s linear both !important;
}
.cofibit-public .payment-banner-card.is-paused .payment-banner-progress::before {
    animation-play-state: paused !important;
}
@keyframes cofibitBannerProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
/* WhatsApp uses the familiar green, with a generous touch target. */
.cofibit-public .landing-whatsapp-float {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 207px !important;
    min-height: 66px !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 22px !important;
    border: 2px solid #FFF !important;
    border-radius: 999px !important;
    background: #25D366 !important;
    color: #FFF !important;
    font-size: 1.06rem;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(37,211,102,.28) !important;
    text-decoration: none;
    transition: transform .3s ease,box-shadow .3s ease,background-color .3s ease !important;
}
.cofibit-public .landing-whatsapp-float:hover {
    background: #1EBB59 !important; color: #FFF !important;
    transform: translateY(-3px) !important;
}
.cofibit-public .landing-whatsapp-float i {
    font-size: 2.15rem !important;
    line-height: 1 !important;
}
.cofibit-public .landing-whatsapp-float span {
    display: inline !important;
    color: #FFF;
    white-space: nowrap;
    font-size: 1.02rem;
}
@media (max-width: 767.98px) {
    .cofibit-public .landing-whatsapp-float {
        min-width: 66px !important; width: 66px !important;
        min-height: 66px !important; height: 66px !important;
        padding: 0 !important;
        left: 12px; bottom: 15px;
    }
    .cofibit-public .landing-whatsapp-float span { display: none !important; }
    .cofibit-public .landing-whatsapp-float i { font-size: 2.3rem !important; }
}
.cofibit-public .site-footer-social a {
    min-width: 42px; min-height: 42px;
    display: inline-flex; justify-content: center; align-items: center;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 13px;
    text-decoration: none;
    transition: background-color .25s ease,transform .25s ease;
}
.cofibit-public .site-footer-social a:hover {
    color: #FFF; background: rgba(255,255,255,.16);
    transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
    .cofibit-public :is(.public-stat-card,.landing-card-item,.marketing-feature-card,.package-card) {
        transition: none !important; transform: none !important;
    }
    .cofibit-public .payment-banner-progress::before { animation: none !important; }
}

/* Native vertical document flow; individual cards retain a very slight, soft tilt.
   The old sticky stack obscured the cards once their hover transform changed. */
.cofibit-public .landing-card-deck {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(18px, 2.3vw, 28px);
    isolation: isolate;
    padding-block: 12px 26px !important;
    overflow: visible;
}
.cofibit-public .landing-card-deck > .landing-card-item,
.cofibit-public .landing-card-deck > .landing-card-item:last-child {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    margin: 0 !important;
    z-index: auto !important;
    width: 100%;
    transform: rotate(var(--cofibit-card-angle, 0deg)) !important;
    transform-origin: center center;
    will-change: auto;
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease !important;
}
.cofibit-public .landing-card-deck > .landing-card-item:nth-child(4n + 1) { --cofibit-card-angle: -.3deg; }
.cofibit-public .landing-card-deck > .landing-card-item:nth-child(4n + 2) { --cofibit-card-angle: .55deg; }
.cofibit-public .landing-card-deck > .landing-card-item:nth-child(4n + 3) { --cofibit-card-angle: -.5deg; }
.cofibit-public .landing-card-deck > .landing-card-item:nth-child(4n) { --cofibit-card-angle: .35deg; }
.cofibit-public .landing-card-deck > .landing-card-item:hover,
.cofibit-public .landing-card-deck > .landing-card-item.is-tilted:hover {
    transform: translateY(-2px) rotate(var(--cofibit-card-angle,0deg)) !important;
}
.cofibit-public .landing-card-deck > .landing-card-item .landing-overview-card {
    height: auto;
    min-height: 300px;
    max-width: 100%;
}
@media (max-width: 767.98px) {
    .cofibit-public .landing-card-deck { gap: 16px; padding-block: 8px 18px !important; }
    .cofibit-public .landing-card-deck > .landing-card-item {
        --cofibit-card-angle: 0deg !important;
    }
    .cofibit-public .landing-card-deck > .landing-card-item .landing-overview-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cofibit-public .landing-card-deck > .landing-card-item,
    .cofibit-public .landing-card-deck > .landing-card-item:hover {
        transform: none !important;
        transition: none !important;
    }
}