.vpm-demo-card,.vpm-demo-card *{box-sizing:border-box}
.vpm-demo-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;overflow:hidden;border:1px solid #183a38;border-radius:20px;background:#fffaf0;font-family:Roboto,Arial,sans-serif}
.vpm-demo-visual{min-width:0;background:#f8c873;overflow:hidden}
.vpm-demo-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
.vpm-demo-form-panel{display:flex;align-items:center;min-width:0;padding:64px 72px;background:#fffaf0}
.vpm-form-wrap{width:100%;max-width:620px;margin:0 auto;color:#0f4c49;font-family:Roboto,Arial,sans-serif}
.vpm-form{display:grid;gap:16px;font-family:Roboto,Arial,sans-serif}
.vpm-form input[type=text],.vpm-form input[type=email]{width:100%;box-sizing:border-box;border:1px solid #9aa6ad;border-radius:9px;padding:17px 18px;font:400 17px/1.4 Roboto,Arial,sans-serif;background:#fff;color:#263d3b}
.vpm-consent{font:400 14px/1.45 Roboto,Arial,sans-serif;color:#52615f;display:flex;gap:8px;align-items:flex-start}.vpm-consent input{margin-top:2px;accent-color:#cdef57}
.vpm-form button{justify-self:start;border:1px solid #8aa522;background:#cdef57;color:#132f2d;padding:14px 30px;border-radius:999px;font:700 17px/1.2 Roboto,Arial,sans-serif;cursor:pointer}
.vpm-message{font:400 15px/1.5 Roboto,Arial,sans-serif;padding:14px 16px;border-radius:10px;margin:0 0 18px}.vpm-message.success{background:#eef8d7}.vpm-message.error{background:#fde8e8;color:#7a1c1c}.vpm-countdown{border-left-color:#9fca30!important}
@media(max-width:900px){.vpm-demo-card{grid-template-columns:1fr}.vpm-demo-visual img{height:auto;object-fit:contain}.vpm-demo-form-panel{padding:36px 26px 42px}}


.vpm-form-copy{
    margin:0 0 30px;
    font-family:Roboto,Arial,sans-serif;
}
.vpm-form-copy h2{
    margin:0 0 20px;
    color:#171717;
    font:700 38px/1.2 Roboto,Arial,sans-serif;
    letter-spacing:-0.02em;
}
.vpm-form-copy h2 span{
    color:#7fae20;
}
.vpm-form-copy p{
    max-width:600px;
    margin:0;
    color:#263331;
    font:400 18px/1.55 Roboto,Arial,sans-serif;
}
@media (max-width:900px){
    .vpm-form-copy h2{
        font-size:32px;
    }
    .vpm-form-copy p{
        font-size:17px;
    }
}


/* =========================================================
   Playground main home page — block theme / Twenty Twenty-Five
   The class is added by PHP only on playground.virfice.com front page.
   ========================================================= */

.vpm-playground-home{
    --vpm-shell-width: 1120px;
}

/* Backup for the PHP render filter that removes the Home title. */
.vpm-playground-home .wp-block-post-title{
    display:none !important;
}

/* Remove the block theme's large space between header and page content. */
.vpm-playground-home .wp-site-blocks > main,
.vpm-playground-home main.wp-block-group,
.vpm-playground-home main.wp-block-post-content,
.vpm-playground-home .wp-block-post-content{
    margin-block-start:0 !important;
    padding-block-start:0 !important;
}

.vpm-playground-home .wp-site-blocks > main{
    padding-top:28px !important;
}

/* Gutenberg often wraps the page content in one or more Groups with preset spacing. */
.vpm-playground-home .wp-site-blocks > main > .wp-block-group,
.vpm-playground-home .wp-site-blocks > main .wp-block-post-content > .wp-block-group:first-child,
.vpm-playground-home .wp-block-post-content > .wp-block-group:first-child{
    margin-top:0 !important;
    padding-top:0 !important;
}

/* Remove extra block gap above the first real piece of page content. */
.vpm-playground-home .wp-block-post-content > *:first-child{
    margin-block-start:0 !important;
}

/* Keep header, demo card and footer on the same visual grid. */
.vpm-playground-home .wp-site-blocks > header.wp-block-template-part > .wp-block-group,
.vpm-playground-home .wp-site-blocks > header.wp-block-template-part .wp-block-group.alignwide,
.vpm-playground-home .wp-site-blocks > footer.wp-block-template-part > .wp-block-group,
.vpm-playground-home .wp-site-blocks > footer.wp-block-template-part .wp-block-group.alignwide,
.vpm-playground-home .vpm-demo-card{
    width:min(calc(100% - 48px), var(--vpm-shell-width)) !important;
    max-width:var(--vpm-shell-width) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* Header: compact, centered and aligned with the demo experience. */
.vpm-playground-home .wp-site-blocks > header.wp-block-template-part{
    margin:0 !important;
    padding:0 !important;
}

.vpm-playground-home .wp-site-blocks > header.wp-block-template-part > .wp-block-group{
    padding-top:16px !important;
    padding-bottom:16px !important;
    min-height:72px;
}

/* The main form should sit close to the header, not halfway down the page. */
.vpm-playground-home .vpm-demo-card{
    margin-top:0 !important;
    margin-bottom:0 !important;
}

/* Footer: remove the oversized empty area and align it with the form. */
.vpm-playground-home .wp-site-blocks > footer.wp-block-template-part{
    margin-top:44px !important;
    padding-top:0 !important;
}

.vpm-playground-home .wp-site-blocks > footer.wp-block-template-part > .wp-block-group{
    padding-top:22px !important;
    padding-bottom:22px !important;
}

.vpm-playground-home .wp-site-blocks > footer.wp-block-template-part .wp-block-group{
    margin-top:0 !important;
}

/* Reduce inherited block-theme spacing around the content/footer boundary. */
.vpm-playground-home main + footer.wp-block-template-part{
    margin-block-start:44px !important;
}

/* Avoid unnecessary bottom whitespace on this single-purpose page. */
.vpm-playground-home .wp-site-blocks{
    padding-bottom:0 !important;
}

@media (max-width:900px){
    .vpm-playground-home{
        --vpm-shell-width:100%;
    }

    .vpm-playground-home .wp-site-blocks > main{
        padding-top:16px !important;
    }

    .vpm-playground-home .wp-site-blocks > header.wp-block-template-part > .wp-block-group,
    .vpm-playground-home .wp-site-blocks > footer.wp-block-template-part > .wp-block-group,
    .vpm-playground-home .vpm-demo-card{
        width:calc(100% - 28px) !important;
    }

    .vpm-playground-home .wp-site-blocks > footer.wp-block-template-part{
        margin-top:28px !important;
    }
}


/* =========================================================
   Virfice-style Playground header/footer
   ========================================================= */

.vpm-playground-home .wp-site-blocks{
    padding-top:0 !important;
}

.vpm-site-shell{
    width:min(calc(100% - 48px), 1120px);
    margin-left:auto;
    margin-right:auto;
}

.vpm-site-header{
    width:100%;
    background:#fffdf5;
    border-bottom:1px solid rgba(13,72,68,.18);
    font-family:Roboto,Arial,sans-serif;
}

.vpm-site-header-inner{
    min-height:78px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:40px;
}

.vpm-site-logo{
    display:inline-flex;
    align-items:center;
    text-decoration:none;
}

.vpm-site-logo img{
    display:block;
    width:142px;
    height:auto;
}

.vpm-site-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:34px;
}

.vpm-site-nav a{
    color:#123f3d;
    text-decoration:none;
    font:600 15px/1.2 Roboto,Arial,sans-serif;
    transition:opacity .18s ease;
}

.vpm-site-nav a:hover{
    opacity:.68;
}

.vpm-site-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:0 22px;
    border-radius:999px;
    background:#122f2d;
    color:#fff !important;
    text-decoration:none;
    font:600 14px/1 Roboto,Arial,sans-serif;
}

.vpm-site-cta:hover{
    opacity:.92;
}

/* Main content starts directly below new header. */
.vpm-playground-home .wp-site-blocks > main{
    padding-top:32px !important;
}

/* Footer */
.vpm-site-footer{
    margin-top:52px;
    padding:56px 0 24px;
    background:#103f3d;
    color:#edf4f1;
    font-family:Roboto,Arial,sans-serif;
}

.vpm-footer-grid{
    display:grid;
    grid-template-columns:minmax(260px,1.7fr) repeat(4,minmax(120px,1fr));
    gap:42px;
    align-items:start;
}

.vpm-footer-brand{
    padding-right:24px;
}

.vpm-footer-logo{
    display:inline-flex;
    margin-bottom:20px;
}

.vpm-footer-logo img{
    display:block;
    width:144px;
    height:auto;
    /* main logo asset is dark, so give it a subtle light plate in dark footer */
    background:#fffdf5;
    border-radius:12px;
    padding:8px 10px;
}

.vpm-footer-brand p{
    margin:0;
    max-width:320px;
    color:#d5e1de;
    font:400 14px/1.7 Roboto,Arial,sans-serif;
}

.vpm-footer-column{
    display:flex;
    flex-direction:column;
    gap:11px;
}

.vpm-footer-column h3{
    margin:0 0 6px;
    color:#fff;
    font:700 15px/1.2 Roboto,Arial,sans-serif;
}

.vpm-footer-column a{
    color:#d5e1de;
    text-decoration:none;
    font:400 13px/1.45 Roboto,Arial,sans-serif;
}

.vpm-footer-column a:hover{
    color:#c9f247;
}

.vpm-footer-bottom{
    margin-top:44px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.16);
    color:#bdceca;
    font:400 12px/1.5 Roboto,Arial,sans-serif;
}

/* Hide any stray theme header/footer that may be rendered by a nonstandard part slug. */
.vpm-playground-home .wp-site-blocks > header.wp-block-template-part,
.vpm-playground-home .wp-site-blocks > footer.wp-block-template-part{
    display:none !important;
}

/* But our replacement HTML remains visible. */
.vpm-playground-home .vpm-site-header,
.vpm-playground-home .vpm-site-footer{
    display:block !important;
}

@media (max-width:900px){
    .vpm-site-shell{
        width:calc(100% - 28px);
    }

    .vpm-site-header-inner{
        grid-template-columns:auto auto;
        gap:18px;
        min-height:70px;
    }

    .vpm-site-logo img{
        width:126px;
    }

    .vpm-site-nav{
        grid-column:1 / -1;
        grid-row:2;
        justify-content:flex-start;
        gap:22px;
        padding-bottom:16px;
        overflow-x:auto;
    }

    .vpm-site-cta{
        justify-self:end;
    }

    .vpm-footer-grid{
        grid-template-columns:1fr 1fr;
        gap:32px 26px;
    }

    .vpm-footer-brand{
        grid-column:1 / -1;
        padding-right:0;
    }
}

@media (max-width:560px){
    .vpm-site-nav{
        gap:18px;
    }

    .vpm-site-nav a{
        font-size:14px;
    }

    .vpm-site-cta{
        padding:0 17px;
        font-size:13px;
    }

    .vpm-footer-grid{
        grid-template-columns:1fr;
    }

    .vpm-footer-brand{
        grid-column:auto;
    }
}


/* =========================================================
   v0.1.24 — closer match to virfice.com shell
   ========================================================= */

.vpm-playground-home,
.vpm-playground-home .vpm-site-header,
.vpm-playground-home .vpm-site-footer,
.vpm-playground-home .vpm-site-nav,
.vpm-playground-home .vpm-site-cta,
.vpm-playground-home .vpm-footer-brand,
.vpm-playground-home .vpm-footer-column,
.vpm-playground-home .vpm-footer-bottom,
.vpm-playground-home .vpm-demo-card,
.vpm-playground-home .vpm-form-wrap,
.vpm-playground-home .vpm-form-copy,
.vpm-playground-home .vpm-form{
    font-family:Roboto, Arial, sans-serif !important;
}

/* Header proportions closer to the main Virfice site */
.vpm-playground-home .vpm-site-header-inner{
    min-height:64px !important;
    height:64px !important;
    gap:34px !important;
}

.vpm-playground-home .vpm-site-logo img{
    width:118px !important;
    height:auto !important;
}

.vpm-playground-home .vpm-site-nav{
    gap:30px !important;
}

.vpm-playground-home .vpm-site-nav a{
    font-size:14px !important;
    font-weight:600 !important;
}

.vpm-playground-home .vpm-site-cta{
    min-height:40px !important;
    padding:0 20px !important;
    font-size:13px !important;
}

/* Exactly 30px more gap between header and demo section */
.vpm-playground-home .wp-site-blocks > main{
    padding-top:62px !important;
}

/* Footer palette matched to the light Virfice site aesthetic */
.vpm-playground-home .vpm-site-footer{
    background:#fbf8ee !important;
    color:#163f3d !important;
    border-top:1px solid rgba(22,63,61,.14) !important;
}

.vpm-playground-home .vpm-footer-brand p,
.vpm-playground-home .vpm-footer-column a,
.vpm-playground-home .vpm-footer-bottom{
    color:#53615f !important;
}

.vpm-playground-home .vpm-footer-column h3{
    color:#163f3d !important;
}

.vpm-playground-home .vpm-footer-column a:hover{
    color:#6f9f17 !important;
}

.vpm-playground-home .vpm-footer-bottom{
    border-top:1px solid rgba(22,63,61,.14) !important;
}

.vpm-playground-home .vpm-footer-logo img{
    background:transparent !important;
    border-radius:0 !important;
    padding:0 !important;
    width:128px !important;
}

@media (max-width:900px){
    .vpm-playground-home .vpm-site-header-inner{
        height:auto !important;
        min-height:64px !important;
    }

    .vpm-playground-home .vpm-site-logo img{
        width:112px !important;
    }

    .vpm-playground-home .wp-site-blocks > main{
        padding-top:46px !important;
    }
}


/* =========================================================
   v0.1.25 — header typography/proportions + logo links
   ========================================================= */

.vpm-playground-home,
.vpm-playground-home button,
.vpm-playground-home input,
.vpm-playground-home a,
.vpm-playground-home p,
.vpm-playground-home span,
.vpm-playground-home h1,
.vpm-playground-home h2,
.vpm-playground-home h3{
    font-family:Roboto, Arial, sans-serif !important;
}

/* Slightly taller header to better match virfice.com */
.vpm-playground-home .vpm-site-header-inner{
    min-height:72px !important;
    height:72px !important;
    gap:36px !important;
}

/* Main-site-like logo scale */
.vpm-playground-home .vpm-site-logo img{
    width:126px !important;
    height:auto !important;
    display:block !important;
}

/* Match main-site nav weight/feel */
.vpm-playground-home .vpm-site-nav a{
    font-size:14px !important;
    font-weight:500 !important;
    line-height:1.25 !important;
    letter-spacing:0 !important;
}

.vpm-playground-home .vpm-site-cta{
    min-height:42px !important;
    padding:0 21px !important;
    font-size:13px !important;
    font-weight:500 !important;
    line-height:1 !important;
}

/* Keep the extra 30px breathing room requested previously */
.vpm-playground-home .wp-site-blocks > main{
    padding-top:62px !important;
}

/* Footer typography follows the same family/style */
.vpm-playground-home .vpm-footer-brand p,
.vpm-playground-home .vpm-footer-column a,
.vpm-playground-home .vpm-footer-column h3,
.vpm-playground-home .vpm-footer-bottom{
    font-family:Roboto, Arial, sans-serif !important;
}

.vpm-playground-home .vpm-footer-column h3{
    font-weight:600 !important;
}

.vpm-playground-home .vpm-footer-column a,
.vpm-playground-home .vpm-footer-brand p{
    font-weight:400 !important;
}

@media (max-width:900px){
    .vpm-playground-home .vpm-site-header-inner{
        min-height:68px !important;
        height:auto !important;
    }

    .vpm-playground-home .vpm-site-logo img{
        width:118px !important;
    }
}


/* Temporary demo expiry timer in the WordPress admin bar */
#wpadminbar #wp-admin-bar-vpm-demo-countdown{
    float:right;
}
#wpadminbar #wp-admin-bar-vpm-demo-countdown > .ab-item{
    background:#b9e31b !important;
    color:#102f2d !important;
    font-weight:600 !important;
    padding:0 14px !important;
}
#wpadminbar #wp-admin-bar-vpm-demo-countdown .ab-icon,
#wpadminbar #wp-admin-bar-vpm-demo-countdown .ab-icon:before{
    color:#102f2d !important;
}
#wpadminbar #wp-admin-bar-vpm-demo-countdown strong{
    font-weight:700 !important;
}