/* =========================================================
   SELECT VISIBILITY — "PROOF" HERO VISUALS
   Real screenshots in clean frames (browser, laptop, phone,
   before/after). Every picture is a normal Image block:
   select it in the editor → Replace → upload your screenshot.
   ========================================================= */

.sv-proof{
    --sv-proof-radius:12px;
    --sv-proof-shadow:0 22px 50px rgba(7,52,107,.13);
    --sv-proof-shadow-hover:0 0 0 1px rgba(111,174,217,.55), 0 0 22px rgba(111,174,217,.30), 0 28px 60px rgba(7,52,107,.18);
    --sv-proof-bezel:#0B1F38;
    position:relative;
    width:100%;
    max-width:560px;
    margin-left:auto;
}

.sv-proof .wp-block-image{ margin:0; line-height:0; }
.sv-proof .wp-block-image img{ display:block; width:100%; height:auto; }

/* Caption under every visual */
.sv-proof .sv-proof-caption{
    margin-top:22px;
    color:rgba(7,52,107,.72);
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
    line-height:1.5;
    letter-spacing:.2px;
}
.sv-proof .sv-proof-caption strong{ color:var(--wp--preset--color--navy); font-weight:800; }
.sv-proof .sv-proof-caption::before{
    content:"";
    display:inline-block;
    width:22px;
    height:2px;
    margin:0 10px 3px 0;
    background:var(--wp--preset--color--sky);
    vertical-align:middle;
}


/* ---------- BROWSER FRAME ---------- */

.sv-proof-browser{
    position:relative;
    padding-top:30px;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(7,52,107,.10);
    border-radius:var(--sv-proof-radius);
    box-shadow:var(--sv-proof-shadow);
    transition:transform .35s ease, box-shadow .35s ease;
}
.sv-proof-browser::before{
    content:"";
    position:absolute;
    top:11px;
    left:14px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#6FAED9;
    box-shadow:14px 0 0 #D5B78F, 28px 0 0 #769775;
}
.sv-proof-browser::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:30px;
    border-bottom:1px solid rgba(7,52,107,.08);
    pointer-events:none;
}
.sv-proof-browser:hover{ transform:translateY(-6px); box-shadow:var(--sv-proof-shadow-hover); }


/* ---------- LAPTOP ---------- */

.sv-proof-laptop{
    position:relative;
    padding:12px 12px 14px;
    background:var(--sv-proof-bezel);
    border-radius:16px 16px 6px 6px;
    box-shadow:var(--sv-proof-shadow);
    transition:transform .35s ease, box-shadow .35s ease;
}
.sv-proof-laptop::after{               /* keyboard base */
    content:"";
    position:absolute;
    left:-7%;
    right:-7%;
    bottom:-14px;
    height:14px;
    background:linear-gradient(#D9DDE3, #A9B1BC);
    border-radius:0 0 14px 14px;
    box-shadow:0 14px 26px rgba(7,52,107,.16);
}
.sv-proof-laptop::before{              /* notch on the base */
    content:"";
    position:absolute;
    left:50%;
    bottom:-14px;
    z-index:1;
    width:16%;
    height:5px;
    transform:translateX(-50%);
    background:#8E97A3;
    border-radius:0 0 8px 8px;
}
.sv-proof-laptop .wp-block-image{
    overflow:hidden;
    border-radius:4px;
    aspect-ratio:16 / 10;
    background:#fff;
}
.sv-proof-laptop .wp-block-image img{ height:100%; object-fit:cover; object-position:top center; }
.sv-proof-laptop:hover{ transform:translateY(-6px); box-shadow:var(--sv-proof-shadow-hover); }


/* ---------- PHONE ---------- */

.sv-proof-phone{
    position:absolute;
    z-index:2;
    width:27%;
    padding:7px;
    background:var(--sv-proof-bezel);
    border-radius:24px;
    box-shadow:0 20px 40px rgba(7,52,107,.25);
    transition:transform .35s ease, box-shadow .35s ease;
}
.sv-proof-phone .wp-block-image{
    overflow:hidden;
    border-radius:18px;
    aspect-ratio:9 / 19.5;
    background:#fff;
}
.sv-proof-phone .wp-block-image img{ height:100%; object-fit:cover; object-position:top center; }
.sv-proof-phone:hover{ transform:translateY(-6px) rotate(0deg) !important; box-shadow:var(--sv-proof-shadow-hover); }


/* ---------- HOME: collage ---------- */

.sv-proof-home{ padding:34px 0 46px 0; }
.sv-proof-home .sv-proof-laptop{ width:88%; margin-left:auto; }
.sv-proof-home .sv-proof-phone{ right:-2%; bottom:0; transform:rotate(3deg); }
.sv-proof-home .sv-proof-card{
    position:absolute;
    z-index:3;
    left:-6%;
    top:auto;
    bottom:6%;
    width:44%;
    transform:rotate(-3deg);
}
.sv-proof-home .sv-proof-card:hover{ transform:translateY(-6px) rotate(0deg); }
.sv-proof-home .sv-proof-caption{ margin-top:30px; }


/* ---------- WEB DEVELOPMENT: laptop + phone, page scrolls on hover ---------- */

.sv-proof-web{ padding:0 0 30px; }
.sv-proof-web .sv-proof-laptop{ width:92%; }
.sv-proof-web .sv-proof-phone{ right:0; bottom:20px; width:25%; }

.sv-proof-scroll .wp-block-image img{
    height:auto;
    min-height:100%;
    object-fit:initial;
    transform:translateY(0);
    transition:transform 6s cubic-bezier(.45,.05,.35,1);
}
.sv-proof-scroll:hover .wp-block-image img{ transform:translateY(var(--sv-scroll, -70%)); }


/* ---------- PERFORMANCE: before / after ---------- */

.sv-compare{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sv-compare > .sv-compare-before,
.sv-compare > .sv-compare-after{ position:relative; }
.sv-compare .sv-compare-label{
    position:absolute;
    z-index:2;
    top:42px;
    left:12px;
    padding:5px 10px;
    color:#fff;
    background:var(--wp--preset--color--navy);
    font-family:Arial,Helvetica,sans-serif;
    font-size:10px;
    font-weight:800;
    line-height:1;
    letter-spacing:1.4px;
    text-transform:uppercase;
    border-radius:3px;
}
.sv-compare .sv-compare-after .sv-compare-label{ left:auto; right:12px; background:var(--wp--preset--color--green); }
.sv-compare > .sv-proof-caption{ grid-column:1 / -1; margin-top:8px; }

/* Slider mode (switched on by site.js) */
.sv-compare.is-slider{ display:block; }
.sv-compare.is-slider .sv-compare-stage{
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(7,52,107,.10);
    border-radius:var(--sv-proof-radius);
    box-shadow:var(--sv-proof-shadow);
    padding-top:30px;
    touch-action:pan-y;
    cursor:ew-resize;
    transition:box-shadow .35s ease, transform .35s ease;
}
.sv-compare.is-slider .sv-compare-stage:hover{ box-shadow:var(--sv-proof-shadow-hover); transform:translateY(-4px); }
.sv-compare.is-slider .sv-compare-stage::before{   /* browser dots */
    content:"";
    position:absolute;
    top:11px;
    left:14px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#6FAED9;
    box-shadow:14px 0 0 #D5B78F, 28px 0 0 #769775;
}
.sv-compare.is-slider .sv-compare-before,
.sv-compare.is-slider .sv-compare-after{ border:0; border-radius:0; box-shadow:none; padding-top:0; transform:none !important; }
.sv-compare.is-slider .sv-compare-before::before,
.sv-compare.is-slider .sv-compare-before::after,
.sv-compare.is-slider .sv-compare-after::before,
.sv-compare.is-slider .sv-compare-after::after{ display:none; }
.sv-compare.is-slider .sv-compare-after{
    position:absolute;
    inset:30px 0 0 0;
    clip-path:inset(0 0 0 var(--sv-split, 50%));
}
.sv-compare.is-slider .sv-compare-label{ top:12px; }
.sv-compare-handle{
    position:absolute;
    z-index:4;
    top:30px;
    bottom:0;
    left:var(--sv-split, 50%);
    width:2px;
    margin-left:-1px;
    background:var(--wp--preset--color--navy);
    pointer-events:none;
}
.sv-compare-handle::after{
    content:"‹ ›";
    position:absolute;
    top:50%;
    left:50%;
    width:38px;
    height:38px;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:var(--wp--preset--color--navy);
    border:3px solid #fff;
    border-radius:50%;
    box-shadow:0 6px 16px rgba(7,52,107,.3);
    font:700 15px/1 Arial, sans-serif;
    letter-spacing:1px;
}
.sv-compare-range{
    position:absolute;
    z-index:5;
    inset:30px 0 0 0;
    width:100%;
    height:calc(100% - 30px);
    margin:0;
    opacity:0;
    cursor:ew-resize;
}


/* ---------- PHONES / TABLETS ---------- */

@media(max-width:921px){
    .sv-proof{ max-width:620px; margin:10px auto 0; }
}

@media(max-width:620px){
    .sv-proof-home{ padding:18px 0 34px; }
    .sv-proof-home .sv-proof-laptop{ width:84%; }
    .sv-proof-home .sv-proof-card{ left:0; width:46%; bottom:4%; }
    .sv-proof-phone{ padding:5px; border-radius:18px; }
    .sv-proof-phone .wp-block-image{ border-radius:13px; }
    .sv-proof-laptop{ padding:8px 8px 10px; border-radius:12px 12px 5px 5px; }
    .sv-proof-laptop::after{ bottom:-10px; height:10px; left:-5%; right:-5%; }
    .sv-proof-laptop::before{ bottom:-10px; height:4px; }
    .sv-compare-handle::after{ width:32px; height:32px; font-size:13px; }
}

/* Touch screens: no hover, so let the page scroll slowly on its own once */
@media(hover:none){
    .sv-proof-scroll.is-inview .wp-block-image img{ transform:translateY(var(--sv-scroll, -70%)); transition-duration:9s; }
}

@media (prefers-reduced-motion: reduce){
    .sv-proof-scroll .wp-block-image img{ transition:none; transform:none !important; }
}

/* ---------- layout fixes: caption always sits under the visual ---------- */
.sv-proof-home,
.sv-proof-web{ padding-bottom:64px; }
.sv-proof-home > .sv-proof-caption,
.sv-proof-web > .sv-proof-caption{ position:absolute; left:0; right:0; bottom:0; margin:0; }
.sv-proof-home{ padding-top:20px; }
.sv-proof-home .sv-proof-phone{ bottom:44px; right:-1%; }
.sv-proof-home .sv-proof-card{ bottom:86px; left:-4%; }
.sv-proof-web .sv-proof-phone{ bottom:52px; right:-2%; }

.sv-compare .sv-compare-label{ top:auto; bottom:12px; }
.sv-compare.is-slider .sv-compare-label{ top:auto; bottom:12px; }

@media(max-width:620px){
    .sv-proof-home,
    .sv-proof-web{ padding-bottom:58px; }
    .sv-proof-home .sv-proof-phone{ bottom:40px; }
    .sv-proof-home .sv-proof-card{ bottom:70px; left:0; }
    .sv-proof-web .sv-proof-phone{ bottom:46px; }
}

/* ---------- SEO: second chart (dark, Ahrefs) floats over the first ---------- */
.sv-proof-seo{ padding-bottom:0; }
.sv-proof-seo .sv-proof-float{
    position:relative;
    z-index:2;
    width:78%;
    margin:-46px -5% 0 auto;
}
.sv-proof-dark{ background:#2B2E33; border-color:#3a3d43; }
.sv-proof-dark::before{ background:#6FAED9; }
.sv-proof-dark::after{ border-bottom-color:rgba(255,255,255,.08); }

@media(max-width:620px){
    .sv-proof-seo .sv-proof-float{ width:86%; margin:-26px 0 0 auto; }
}

/* ---------- centred in the hero column (vertically + horizontally) ---------- */
.sv-pg .sv-proof{
    align-self:center;
    justify-self:center;
    margin-left:auto;
    margin-right:auto;
}
.sv-proof-seo .sv-proof-float{ margin-right:0; }

/* ---------- SEO: the two charts lean in opposite directions (like the Home collage)
   and straighten up + lift when you hover them ---------- */
.sv-proof-seo > .sv-proof-browser:not(.sv-proof-float){ transform:rotate(-2deg); }
.sv-proof-seo > .sv-proof-float{ transform:rotate(3deg); }
.sv-proof-seo > .sv-proof-browser:hover{ transform:translateY(-6px) rotate(0deg); z-index:3; }
.sv-proof-seo{ padding-top:14px; }
@media (prefers-reduced-motion: reduce){
    .sv-proof-seo > .sv-proof-browser{ transition:none; }
}