.ppc-reference-design{--ppc-purple:#712158;--ppc-ink:#11131a;--ppc-button-bg:#fff;--ppc-button-text:#712158;--ppc-button-border:#fff;--ppc-button-hover-bg:#712158;--ppc-button-hover-text:#fff;--ppc-button-hover-border:#712158;--ppc-dot:#712158;position:relative!important;width:100%!important;max-width:1320px!important;margin:0 auto!important;padding:38px 76px!important;font-family:Arial,Helvetica,sans-serif!important;box-sizing:border-box!important}.ppc-reference-design *{box-sizing:border-box!important}.ppc-reference-design .ppc-viewport{overflow:hidden!important;width:100%!important}.ppc-reference-design .ppc-track{display:flex!important;align-items:stretch!important;gap:24px!important;transition:transform .55s cubic-bezier(.22,.8,.28,1)!important;will-change:transform!important}.ppc-reference-design .ppc-card{position:relative!important;display:block!important;flex:0 0 calc((100% - 48px)/3)!important;min-width:0!important;min-height:520px!important;margin:0!important;padding:0!important;border:0!important;border-radius:26px!important;overflow:hidden!important;background-color:#20242c!important;background-image:var(--ppc-bg)!important;background-repeat:no-repeat!important;background-size:cover!important;background-position:center!important;color:#fff!important;isolation:isolate!important;box-shadow:0 18px 45px rgba(16,18,26,.12)!important}.ppc-reference-design .ppc-card.is-clickable{cursor:pointer!important}.ppc-reference-design .ppc-card:before{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(180deg,rgba(5,7,13,.02) 12%,rgba(5,7,13,.10) 42%,rgba(7,8,13,.92) 100%)!important;z-index:0!important}.ppc-reference-design .ppc-card-overlay{display:none!important}.ppc-reference-design .ppc-card-content{position:absolute!important;z-index:2!important;left:32px!important;right:32px!important;bottom:30px!important;margin:0!important;padding:0!important;color:#fff!important}.ppc-reference-design .ppc-badge{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;width:auto!important;margin:0 0 18px!important;padding:10px 18px!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:999px!important;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04))!important;color:#fff!important;font-size:12px!important;line-height:1!important;font-weight:700!important;letter-spacing:1.3px!important;text-transform:uppercase!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;box-shadow:0 8px 20px rgba(0,0,0,.18),inset 0 1px 1px rgba(255,255,255,.15)!important}.ppc-reference-design .ppc-badge:before{content:""!important;width:7px!important;height:7px!important;border-radius:50%!important;background:#c12aa8!important;box-shadow:0 0 10px rgba(193,42,168,.8)!important}.ppc-reference-design .ppc-card h3{margin:0 0 12px!important;padding:0!important;color:#fff!important;font-family:Arial,Helvetica,sans-serif!important;font-size:31px!important;line-height:1.12!important;font-weight:700!important;letter-spacing:-.02em!important;text-transform:none!important}.ppc-reference-design .ppc-card p{margin:0 0 24px!important;padding:0!important;color:rgba(255,255,255,.82)!important;font-family:Arial,Helvetica,sans-serif!important;font-size:15px!important;line-height:1.55!important;font-weight:400!important}.ppc-reference-design .ppc-case-btn{appearance:none!important;-webkit-appearance:none!important;display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;min-width:0!important;margin:0!important;padding:14px 20px!important;border:1.5px solid var(--ppc-button-border)!important;border-radius:999px!important;background:var(--ppc-button-bg)!important;color:var(--ppc-button-text)!important;box-shadow:none!important;font-family:Arial,Helvetica,sans-serif!important;font-size:14px!important;line-height:1!important;font-weight:700!important;text-transform:none!important;text-decoration:none!important;cursor:pointer!important;transition:background .25s ease,border-color .25s ease,transform .25s ease!important}.ppc-reference-design .ppc-case-btn:hover{background:var(--ppc-button-hover-bg)!important;border-color:var(--ppc-button-hover-border)!important;color:var(--ppc-button-hover-text)!important;transform:translateY(-1px)!important}.ppc-reference-design .ppc-case-btn span,.ppc-reference-design .ppc-case-btn b{color:inherit!important}.ppc-reference-design .ppc-case-btn b{font-size:20px!important;line-height:1!important;font-weight:400!important}.ppc-reference-design .ppc-case-btn.is-disabled{opacity:.65!important;cursor:default!important}.ppc-reference-design .ppc-nav{position:absolute!important;top:50%!important;z-index:8!important;display:grid!important;place-items:center!important;width:50px!important;height:50px!important;margin:0!important;padding:0!important;border:1px solid #d7d9df!important;border-radius:50%!important;background:#fff!important;color:#15171d!important;box-shadow:0 8px 24px rgba(25,28,36,.14)!important;font-size:23px!important;line-height:1!important;font-weight:400!important;cursor:pointer!important;transform:translateY(-50%)!important;transition:all .2s ease!important}.ppc-reference-design .ppc-prev{left:12px!important}.ppc-reference-design .ppc-next{right:12px!important}.ppc-reference-design .ppc-nav svg{display:block!important;width:24px!important;height:24px!important;fill:none!important;stroke:currentColor!important;stroke-width:4.4!important;stroke-linecap:square!important;stroke-linejoin:miter!important;pointer-events:none!important;transition:transform .2s ease!important}.ppc-reference-design .ppc-nav:hover svg{transform:scale(1.08)!important}.ppc-reference-design .ppc-nav:hover{background:var(--ppc-purple)!important;border-color:var(--ppc-purple)!important;color:#fff!important}.ppc-reference-design .ppc-nav:disabled{opacity:.28!important;cursor:not-allowed!important}.ppc-reference-design .ppc-dots{display:flex!important;justify-content:center!important;align-items:center!important;gap:8px!important;margin:18px 0 0!important;padding:0!important}.ppc-reference-design .ppc-dot{appearance:none!important;width:8px!important;height:8px!important;margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:#c6c8ce!important;box-shadow:none!important;cursor:pointer!important}.ppc-reference-design .ppc-dot.is-active{width:24px!important;border-radius:999px!important;background:var(--ppc-dot)!important}
@media(max-width:980px){.ppc-reference-design{padding-left:64px!important;padding-right:64px!important}.ppc-reference-design .ppc-card{flex-basis:calc((100% - 24px)/2)!important}.ppc-reference-design .ppc-prev{left:8px!important}.ppc-reference-design .ppc-next{right:8px!important}}
@media(max-width:640px){.ppc-reference-design{padding:26px 52px!important}.ppc-reference-design .ppc-card{flex-basis:100%!important;min-height:470px!important;border-radius:22px!important}.ppc-reference-design .ppc-card-content{left:22px!important;right:22px!important;bottom:22px!important}.ppc-reference-design .ppc-card h3{font-size:27px!important}.ppc-reference-design .ppc-nav{width:42px!important;height:42px!important;font-size:20px!important}.ppc-reference-design .ppc-prev{left:3px!important}.ppc-reference-design .ppc-next{right:3px!important}}


/* =========================================================
   v3.6.0 — Manual sequence + equal card content alignment
   ========================================================= */

/* Keep every card content block the same height so shorter text
   does not make badge/title/button jump vertically. */
.ppc-reference-design .ppc-card-content{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    min-height:255px!important;
}

/* Badge stays in the same top slot. */
.ppc-reference-design .ppc-badge{
    align-self:flex-start!important;
    flex:0 0 auto!important;
}

/* Reserve equal title space (supports up to two lines cleanly). */
.ppc-reference-design .ppc-card h3{
    min-height:70px!important;
    display:flex!important;
    align-items:flex-start!important;
    flex:0 0 auto!important;
}

/* Reserve equal description space so short descriptions do not
   pull the CTA upward. */
.ppc-reference-design .ppc-card p{
    min-height:72px!important;
    flex:0 0 auto!important;
}

/* All CTA buttons sit on exactly the same baseline. */
.ppc-reference-design .ppc-case-btn{
    margin-top:auto!important;
    flex:0 0 auto!important;
}

/* Tablet */
@media (max-width:980px){
    .ppc-reference-design .ppc-card-content{
        min-height:245px!important;
    }
    .ppc-reference-design .ppc-card h3{
        min-height:64px!important;
    }
    .ppc-reference-design .ppc-card p{
        min-height:70px!important;
    }
}

/* Mobile: natural text flow is better when only one card is visible. */
@media (max-width:640px){
    .ppc-reference-design .ppc-card-content{
        min-height:0!important;
    }
    .ppc-reference-design .ppc-card h3,
    .ppc-reference-design .ppc-card p{
        min-height:0!important;
    }
}


/* =========================================================
   v3.6.1 — Equal content alignment override
   Keeps badge, title, description and CTA on matching rows
   even when one portfolio has much less text.
   ========================================================= */
@media (min-width:641px){
    .ppc-reference-design .ppc-card{
        position:relative!important;
        min-height:520px!important;
    }

    .ppc-reference-design .ppc-card-content{
        position:absolute!important;
        left:32px!important;
        right:32px!important;
        bottom:30px!important;
        min-height:0!important;
        display:grid!important;
        grid-template-rows:38px 72px 96px 48px!important;
        row-gap:12px!important;
        align-items:start!important;
    }

    .ppc-reference-design .ppc-badge{
        margin:0!important;
        min-height:0!important;
        align-self:start!important;
    }

    .ppc-reference-design .ppc-card h3{
        margin:0!important;
        min-height:0!important;
        display:block!important;
        overflow:hidden!important;
    }

    .ppc-reference-design .ppc-card p{
        margin:0!important;
        min-height:0!important;
        overflow:hidden!important;
    }

    .ppc-reference-design .ppc-case-btn{
        margin:0!important;
        align-self:end!important;
        width:100%!important;
    }
}

/* Mobile keeps natural content height. */
@media (max-width:640px){
    .ppc-reference-design .ppc-card-content{
        position:relative!important;
        left:auto!important;
        right:auto!important;
        bottom:auto!important;
        display:flex!important;
        min-height:0!important;
    }
}


/* =========================================================
   v3.6.2 — Same content start + all CTA buttons at bottom
   ========================================================= */
@media (min-width:641px){

    .ppc-reference-design .ppc-card{
        position:relative!important;
        min-height:520px!important;
    }

    /*
     * Every card starts its content at the same vertical point.
     * The bottom remains fixed so the CTA can stay aligned.
     */
    .ppc-reference-design .ppc-card-content{
        position:absolute!important;
        left:32px!important;
        right:32px!important;
        top:210px!important;
        bottom:30px!important;

        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;

        min-height:0!important;
        height:auto!important;
    }

    /* Badge starts at the same Y position in every card */
    .ppc-reference-design .ppc-badge{
        align-self:flex-start!important;
        margin:0 0 18px!important;
        min-height:0!important;
        flex:0 0 auto!important;
    }

    /* Reserve same title zone */
    .ppc-reference-design .ppc-card h3{
        margin:0 0 12px!important;
        min-height:70px!important;
        max-height:70px!important;
        overflow:hidden!important;
        flex:0 0 70px!important;
    }

    /* Description can vary, but gets its own consistent space */
    .ppc-reference-design .ppc-card p{
        margin:0!important;
        min-height:72px!important;
        max-height:96px!important;
        overflow:hidden!important;
        flex:0 1 auto!important;
    }

    /*
     * CTA is always pushed to the bottom of the content area,
     * regardless of how short/long the card copy is.
     */
    .ppc-reference-design .ppc-case-btn{
        margin-top:auto!important;
        margin-bottom:0!important;
        width:100%!important;
        flex:0 0 auto!important;
        align-self:stretch!important;
    }
}

/* Tablet fine-tuning */
@media (min-width:641px) and (max-width:980px){
    .ppc-reference-design .ppc-card-content{
        top:200px!important;
        left:24px!important;
        right:24px!important;
        bottom:24px!important;
    }

    .ppc-reference-design .ppc-card h3{
        min-height:64px!important;
        max-height:64px!important;
        flex-basis:64px!important;
    }
}

/* Mobile: natural flow */
@media (max-width:640px){
    .ppc-reference-design .ppc-card-content{
        position:absolute!important;
        left:22px!important;
        right:22px!important;
        top:auto!important;
        bottom:22px!important;
        display:flex!important;
        flex-direction:column!important;
    }

    .ppc-reference-design .ppc-card h3,
    .ppc-reference-design .ppc-card p{
        min-height:0!important;
        max-height:none!important;
        flex:auto!important;
    }

    .ppc-reference-design .ppc-case-btn{
        margin-top:18px!important;
    }
}


/* =========================================================
   v3.6.3 — Natural title/description height + responsive mobile
   ========================================================= */

/* Desktop / tablet:
   Content starts at the same point.
   Title and description use natural height.
   CTA stays pinned to the bottom. */
@media (min-width:641px){

    .ppc-reference-design .ppc-card-content{
        top:210px!important;
        bottom:30px!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
        min-height:0!important;
        height:auto!important;
    }

    .ppc-reference-design .ppc-badge{
        margin:0 0 16px!important;
        flex:0 0 auto!important;
    }

    .ppc-reference-design .ppc-card h3{
        margin:0 0 12px!important;
        min-height:0!important;
        max-height:none!important;
        height:auto!important;
        flex:0 0 auto!important;
        overflow:visible!important;
    }

    .ppc-reference-design .ppc-card p{
        margin:0!important;
        min-height:0!important;
        max-height:none!important;
        height:auto!important;
        flex:0 0 auto!important;
        overflow:visible!important;
    }

    .ppc-reference-design .ppc-case-btn{
        margin-top:auto!important;
        margin-bottom:0!important;
        width:100%!important;
        flex:0 0 auto!important;
    }
}

/* Tablet */
@media (min-width:641px) and (max-width:980px){
    .ppc-reference-design{
        padding-left:54px!important;
        padding-right:54px!important;
    }

    .ppc-reference-design .ppc-track{
        gap:18px!important;
    }

    .ppc-reference-design .ppc-card{
        flex:0 0 calc((100% - 18px)/2)!important;
        min-height:500px!important;
    }

    .ppc-reference-design .ppc-card-content{
        left:24px!important;
        right:24px!important;
        top:195px!important;
        bottom:24px!important;
    }

    .ppc-reference-design .ppc-card h3{
        font-size:24px!important;
        line-height:1.18!important;
    }

    .ppc-reference-design .ppc-card p{
        font-size:14px!important;
        line-height:1.5!important;
    }
}

/* Mobile */
@media (max-width:640px){

    .ppc-reference-design{
        padding:26px 18px 34px!important;
    }

    .ppc-reference-design .ppc-track{
        gap:14px!important;
        align-items:stretch!important;
    }

    .ppc-reference-design .ppc-card{
        flex:0 0 100%!important;
        min-height:500px!important;
        border-radius:20px!important;
    }

    .ppc-reference-design .ppc-card-content{
        position:absolute!important;
        left:20px!important;
        right:20px!important;
        top:195px!important;
        bottom:20px!important;

        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
    }

    .ppc-reference-design .ppc-badge{
        margin:0 0 14px!important;
        padding:8px 14px!important;
        font-size:10px!important;
    }

    .ppc-reference-design .ppc-card h3{
        margin:0 0 10px!important;
        min-height:0!important;
        max-height:none!important;
        height:auto!important;
        flex:0 0 auto!important;
        overflow:visible!important;

        font-size:23px!important;
        line-height:1.2!important;
    }

    .ppc-reference-design .ppc-card p{
        margin:0!important;
        min-height:0!important;
        max-height:none!important;
        height:auto!important;
        flex:0 0 auto!important;
        overflow:visible!important;

        font-size:14px!important;
        line-height:1.5!important;
    }

    .ppc-reference-design .ppc-case-btn{
        margin-top:auto!important;
        padding:13px 18px!important;
        font-size:13px!important;
    }

    .ppc-reference-design .ppc-nav{
        width:42px!important;
        height:42px!important;
    }

    .ppc-reference-design .ppc-prev{
        left:-4px!important;
    }

    .ppc-reference-design .ppc-next{
        right:-4px!important;
    }
}


/* =========================================================
   v3.6.4 — Remove title/description gap + mobile same as desktop
   ========================================================= */

/* Desktop + tablet:
   same content start, natural title/description, no artificial gap,
   CTA remains pinned to the bottom. */
@media (min-width:641px){
    .ppc-reference-design .ppc-card-content{
        top:210px!important;
        bottom:30px!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
    }

    .ppc-reference-design .ppc-badge{
        margin:0 0 14px!important;
    }

    .ppc-reference-design .ppc-card h3{
        margin:0 0 10px!important;
        min-height:0!important;
        max-height:none!important;
        height:auto!important;
        flex:0 0 auto!important;
        overflow:visible!important;
    }

    .ppc-reference-design .ppc-card p{
        margin:0!important;
        min-height:0!important;
        max-height:none!important;
        height:auto!important;
        flex:0 0 auto!important;
        overflow:visible!important;
    }

    .ppc-reference-design .ppc-case-btn{
        margin-top:auto!important;
        margin-bottom:0!important;
    }
}

/* Mobile:
   keep the SAME visual composition as desktop:
   image area on top, content starts lower, button stays at bottom. */
@media (max-width:640px){
    .ppc-reference-design{
        padding:24px 16px 34px!important;
    }

    .ppc-reference-design .ppc-card{
        position:relative!important;
        flex:0 0 100%!important;
        min-height:560px!important;
        border-radius:20px!important;
        background-position:center!important;
        background-size:cover!important;
    }

    .ppc-reference-design .ppc-card-content{
        position:absolute!important;
        left:20px!important;
        right:20px!important;
        top:245px!important;
        bottom:22px!important;

        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
    }

    .ppc-reference-design .ppc-badge{
        margin:0 0 14px!important;
        align-self:flex-start!important;
    }

    .ppc-reference-design .ppc-card h3{
        margin:0 0 10px!important;
        min-height:0!important;
        max-height:none!important;
        height:auto!important;
        flex:0 0 auto!important;
        overflow:visible!important;
        font-size:22px!important;
        line-height:1.2!important;
    }

    .ppc-reference-design .ppc-card p{
        margin:0!important;
        min-height:0!important;
        max-height:none!important;
        height:auto!important;
        flex:0 0 auto!important;
        overflow:visible!important;
        font-size:14px!important;
        line-height:1.5!important;
    }

    .ppc-reference-design .ppc-case-btn{
        margin-top:auto!important;
        margin-bottom:0!important;
        width:100%!important;
    }

    .ppc-reference-design .ppc-nav{
        top:50%!important;
        width:42px!important;
        height:42px!important;
        transform:translateY(-50%)!important;
    }

    .ppc-reference-design .ppc-prev{
        left:-5px!important;
    }

    .ppc-reference-design .ppc-next{
        right:-5px!important;
    }
}