body:has(#connect-view:not([hidden])):before{background:linear-gradient(90deg,#06070b99,#10051b55),linear-gradient(0deg,#06070b99,#06070b22),url('/site/assets/city-fast.webp') center center/cover no-repeat}
#connect-view.visual-guide{width:100%;max-width:1640px;padding:106px 40px 30px;min-height:calc(100svh - 60px)}
.guide-top{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center;margin-bottom:24px}
.visual-guide .guide-intro>.eyebrow{color:#bd56ff;font-size:11px;letter-spacing:1px;margin-bottom:12px}
#connect-view.visual-guide .guide-intro h1{font-size:clamp(36px,3.6vw,56px);line-height:1.05;letter-spacing:-1.7px;text-shadow:none;animation:none;font-weight:600}
#guide-client-title{color:#a83eff}
.visual-guide .guide-intro>.intro{font-size:15px;line-height:1.5;margin:15px 0 18px;color:#b6b0bf;max-width:none}
.platform-tabs{display:flex;gap:7px}
.platform-tabs button{display:flex;gap:10px;align-items:center;justify-content:center;min-width:98px;padding:11px 15px;border-radius:10px;border:1px solid #a665d344;background:#0c0b14dd;color:#ccc6d3;font-size:12px;transition:border-color .2s,background .2s}
.platform-tabs button>span{display:grid;place-items:center;font-size:20px;color:#e8e2ee;width:21px}
.platform-tabs button[aria-pressed=true]{border-color:#b345ff;background:linear-gradient(120deg,#5c148b88,#221034cc);box-shadow:inset 0 0 20px #a83eff0f}
.platform-tabs button:hover{border-color:#bb6dff}
.visual-guide .guide-client-label{display:flex;align-items:center;gap:12px;font-size:11px;color:#aaa1b5;margin-top:12px}
#connect-view.visual-guide #client{display:inline-block;width:96px;margin:0;padding:4px 8px;background:#0b0b13a8;border-color:#754d9338;font-size:11px}
.platform-native{position:absolute!important;clip-path:inset(50%);width:1px!important;height:1px;padding:0!important;margin:0!important;overflow:hidden;pointer-events:none}
.guide-app{display:flex;align-items:center;gap:20px;border:1px solid #9e40dd73;border-radius:18px;padding:28px;background:linear-gradient(115deg,#291338b0,#0b0b17d9 65%,#210b31b0);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 #ddb4ff19,0 15px 40px #0004;min-height:155px}
.client-icon{width:84px;height:84px;flex-shrink:0;display:grid;place-items:center;border-radius:23px;background:radial-gradient(at 30% 0,#113d13,#001007 80%);border:1px solid #9bdc43;font-size:26px;font-weight:700;letter-spacing:-1px;color:#acfa50;box-shadow:inset 0 1px 0 #daffa94d}
.client-icon.happ{background:linear-gradient(135deg,#5031a0,#201a58);color:#d0bcff;border-color:#ad89fb}
.guide-app-description h2{font-size:26px;letter-spacing:-.5px;font-weight:600}
.guide-app-description>p{font-size:12px;margin-top:5px;color:#b9aec6;max-width:190px}
#guide-platform-note{display:block;color:#9c7eae;font-size:11px;margin-top:12px}
#connect-view.visual-guide #guide-download{margin:0 0 0 auto;flex-shrink:0;max-width:240px}
.visual-guide #guide-download .primary{font-size:12px;line-height:1.4;padding:15px 19px;gap:0;justify-content:center;border-radius:11px;background:linear-gradient(110deg,#a83eff,#8229e8);border-color:#af4ffa;box-shadow:0 8px 30px #a83eff20;text-align:center}
#connect-view.visual-guide .instructions{display:grid;grid-template-columns:repeat(var(--guide-steps,5),minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none;overflow:visible}
#connect-view.visual-guide .guide-step,#connect-view.visual-guide .guide-step:hover{display:flex;flex-direction:column;gap:0;position:relative;min-width:0;margin:0;padding:16px 14px 10px!important;border:1px solid #9454bd5c;border-radius:16px;background:linear-gradient(160deg,#171020c9,#090b13e8);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 #ffffff09;transition:border-color .2s}
#connect-view.visual-guide .guide-step:hover{border-color:#b565e999}
#connect-view.visual-guide .guide-step:not(:last-child):after{content:'→';position:absolute;right:-21px;top:57%;z-index:3;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#160b23;border:1px solid #b659f6;color:#c874ff;font-size:23px;box-shadow:0 0 0 4px #0a0811}
.visual-guide .guide-step-heading{display:flex;align-items:flex-start;gap:12px;min-height:105px}
.visual-guide .guide-number{display:grid;place-items:center;min-width:33px;height:37px;border-radius:10px;border:1px solid #a04bd269;background:linear-gradient(135deg,#48156788,#140b20);font-size:17px;font-weight:500;letter-spacing:-.5px;color:#c36cff;box-shadow:inset 0 1px 0 #f2d4ff0a}
#connect-view.visual-guide .guide-step-heading h2{font-size:14px!important;line-height:1.3;font-weight:600;letter-spacing:-.25px;color:#faf7ff;margin:6px 0 11px;padding:0}
#connect-view.visual-guide .guide-step-heading p{font-size:11px;line-height:1.55;color:#bfb6cb;margin:0}
#connect-view.visual-guide .guide-step figure{margin:0;width:100%;min-width:0;margin-top:auto;padding-top:8px}
#connect-view.visual-guide .guide-shot{display:block;width:100%;height:clamp(270px,34vw,430px);padding:0;background:#030705;border-radius:23px;border:1px solid #9b82aa88;box-shadow:inset 0 0 0 3px #18131f,0 6px 18px #0005;overflow:hidden;cursor:zoom-in;transition:border-color .2s}
#connect-view.visual-guide .guide-shot:hover{border-color:#c18ce2;opacity:1;box-shadow:0 0 20px #a83eff1a}
#connect-view.visual-guide .guide-shot img{display:block;width:100%;height:100%;object-fit:contain;border-radius:22px}
.guide-no-shot{height:clamp(270px,34vw,430px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center}
.guide-no-shot>span{font-size:35px;color:#bc87f3;letter-spacing:2px}
.guide-no-shot p{font-size:12px}
.guide-no-shot a{font-size:12px;color:#c58af1}
.guide-device-note{font-size:10px;color:#a093af;margin:10px 4px 12px;line-height:1.6}
.guide-support{display:flex;gap:17px;align-items:center;border:1px solid #8f40bf73;border-radius:15px;padding:15px 20px;background:linear-gradient(110deg,#4b176580,#131021cc 50%,#1e102dd9);backdrop-filter:blur(14px)}
.support-symbol{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;border-radius:50%;border:1px solid #bb6bff77;background:radial-gradient(at 30% 20%,#b657f3,#5d12a0);color:#e6beff;font-size:22px;box-shadow:0 0 22px #a83eff26}
.guide-support h2{font-size:15px;letter-spacing:0;margin-bottom:3px}
.guide-support p{font-size:12px;color:#b5a7c2}
.guide-support>a{margin-left:auto;font-size:13px;border:1px solid #aa5ade60;border-radius:10px;padding:13px 20px;background:#1a102b99;white-space:nowrap}
.guide-support>a:hover{border-color:#b75dff;background:#3c165b99}
@media(min-width:1100px) and (max-height:850px){#connect-view.visual-guide{padding-top:94px}.guide-top{gap:35px;margin-bottom:18px}.visual-guide .guide-intro h1{font-size:40px!important}.visual-guide .guide-intro>.intro{font-size:13px;margin:12px 0}.guide-app{padding:22px}.platform-tabs button{padding:8px 13px}.visual-guide .guide-step-heading{min-height:105px}#connect-view.visual-guide .guide-shot,.guide-no-shot{height:300px}.guide-support{padding:10px 16px}.guide-device-note{margin:8px 4px}.guide-support>a{padding:10px 17px}}
@media(max-width:1250px){.guide-top{grid-template-columns:1fr 1fr;gap:24px}.guide-app{gap:15px;padding:20px;flex-wrap:wrap}.client-icon{width:65px;height:65px;border-radius:18px;font-size:22px}#connect-view.visual-guide #guide-download{flex-basis:100%;margin:0}.visual-guide #guide-download .primary{width:100%;padding:10px}.guide-app-description h2{font-size:23px}.guide-app-description>p{max-width:none}#guide-platform-note{margin-top:5px}.visual-guide .guide-step-heading{gap:8px;min-height:125px}.visual-guide .guide-number{min-width:27px;height:31px;font-size:15px}#connect-view.visual-guide .guide-step{padding:12px 10px 8px!important}#connect-view.visual-guide .guide-step-heading h2{font-size:13px!important}}
@media(max-width:1000px){#connect-view.visual-guide{padding:103px 25px 30px}.guide-top{grid-template-columns:1fr 1fr;align-items:center}.platform-tabs{flex-wrap:wrap}.platform-tabs button{min-width:85px;flex:1 0 40%;padding:10px}.visual-guide .guide-intro>.intro{font-size:13px}#connect-view.visual-guide .instructions{display:flex;gap:15px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 16px;scrollbar-width:thin;scrollbar-color:#8743b2 #110c18}#connect-view.visual-guide .guide-step{flex:0 0 240px;scroll-snap-align:center;padding:17px 14px 10px!important}.visual-guide .guide-step-heading{min-height:113px}.visual-guide .guide-number{min-width:33px;height:37px;font-size:17px}#connect-view.visual-guide .guide-step-heading h2{font-size:15px!important}#connect-view.visual-guide .guide-step-heading p{font-size:12px}#connect-view.visual-guide .guide-shot,.guide-no-shot{height:390px}#connect-view.visual-guide .guide-step:not(:last-child):after{right:-23px}.guide-support p{font-size:11px}.guide-support>a{font-size:12px;padding:12px}}
@media(max-width:600px){#connect-view.visual-guide{padding:95px 20px 25px}.guide-top{grid-template-columns:1fr;gap:20px}.visual-guide .guide-intro h1{font-size:38px!important}.platform-tabs{flex-wrap:nowrap;gap:5px}.platform-tabs button{min-width:0;flex:1;padding:10px 6px;font-size:10px;gap:5px}.platform-tabs button>span{width:16px;font-size:17px}.guide-app{padding:16px;gap:14px;border-radius:14px}.guide-app-description h2{font-size:22px}.guide-app-description>p{font-size:11px}.guide-app #guide-download{margin:0}.guide-app .client-icon{width:62px;height:62px}.visual-guide .guide-client-label{margin-top:12px}#connect-view.visual-guide .instructions{margin:0 -20px;padding:0 20px 15px;scroll-padding:20px}#connect-view.visual-guide .guide-step{flex-basis:calc(100vw - 75px);max-width:320px}.guide-support{gap:12px;flex-wrap:wrap;padding:16px}.guide-support>div{flex:1}.guide-support h2{font-size:14px}.guide-support p{line-height:1.5}.guide-support>a{margin:0;width:100%;text-align:center}.guide-device-note{font-size:9px}}

body:has(#connect-view.visual-guide:not([hidden])) footer.section{display:none}
.visual-guide .guide-app-description .guide-client-label{margin-top:10px;font-size:10px}
#connect-view.visual-guide .guide-app-description #client{width:80px;padding:3px 6px;font-size:10px}
@media(min-width:1001px){#connect-view.visual-guide{padding-top:100px;padding-bottom:20px}.guide-top{margin-bottom:20px}.visual-guide .guide-intro h1{font-size:clamp(38px,3.3vw,52px)!important}.visual-guide .guide-intro>.intro{font-size:14px;margin:12px 0 16px}.visual-guide .guide-intro>.eyebrow{margin-bottom:10px}.platform-tabs button{padding:10px 15px}#connect-view.visual-guide .guide-shot,.guide-no-shot{height:clamp(240px,calc(100svh - 600px),430px)}.guide-app{padding:25px}.guide-support{padding:12px 20px}.guide-support>a{padding:12px 20px}}

@media(min-width:1001px){#connect-view.visual-guide{padding-top:94px;padding-bottom:12px}.guide-top{margin-bottom:16px}.visual-guide .guide-step-heading{min-height:95px}}

/* Phone frame around the original screenshots. */
#connect-view.visual-guide .guide-step figure{position:relative;max-width:240px;margin-left:auto;margin-right:auto;padding-top:0;margin-top:auto;width:100%}
#connect-view.visual-guide .guide-shot{position:relative;width:100%;padding:8px!important;border:1px solid #b89dca!important;border-radius:30px!important;background:linear-gradient(115deg,#6a546f 0%,#211c28 2%,#07060a 5%,#131017 94%,#796080 98%,#2d2234 100%)!important;box-shadow:inset 0 0 0 2px #110e16,inset 0 0 0 3px #98809e55,0 8px 20px #0008!important;overflow:visible}
#connect-view.visual-guide .guide-shot img{border-radius:22px;background:#000;object-fit:contain;overflow:hidden}
#connect-view.visual-guide .guide-shot:before{content:'';position:absolute;z-index:2;top:9px;left:50%;transform:translateX(-50%);width:29%;height:13px;border-radius:0 0 11px 11px;background:#050507;box-shadow:0 1px 1px #ffffff0a;pointer-events:none}
#connect-view.visual-guide .guide-shot:after{content:'';position:absolute;z-index:3;top:12px;left:calc(50% - 10px);width:20px;height:2px;border-radius:4px;background:#27232d;box-shadow:17px 0 0 -0.3px #16152b;pointer-events:none}
#connect-view.visual-guide .guide-step figure:before{content:'';position:absolute;z-index:2;left:-2px;top:62px;width:3px;height:26px;border-radius:2px 0 0 2px;background:linear-gradient(90deg,#8b739c,#302837);box-shadow:0 36px 0 #66546e;pointer-events:none}
#connect-view.visual-guide .guide-step figure:after{content:'';position:absolute;z-index:2;right:-2px;top:85px;width:3px;height:42px;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#302837,#9479a4);pointer-events:none}
#connect-view.visual-guide .guide-shot:hover{border-color:#ddc3f1!important;box-shadow:inset 0 0 0 2px #110e16,inset 0 0 0 3px #98809e55,0 8px 25px #0008,0 0 18px #b260ed18!important}
@media(max-width:1000px){#connect-view.visual-guide .guide-step figure{max-width:240px}#connect-view.visual-guide .guide-shot{border-radius:32px!important;padding:9px!important}#connect-view.visual-guide .guide-shot img{border-radius:23px}}

/* Exact phone illustrations from the supplied reference, viewed through a crop. */
#connect-view.visual-guide .guide-shot.reference-phone,.viewer-screen.reference-phone{position:relative;display:block;aspect-ratio:252 / 440;height:auto!important;padding:0!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden}
#connect-view.visual-guide .guide-shot.reference-phone img,.viewer-screen.reference-phone img{position:absolute;display:block;left:var(--phone-x);top:-102.04545%;width:609.52381%!important;height:232.72727%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;border-radius:0!important;margin:0!important;background:none}
#connect-view.visual-guide .guide-shot.reference-phone:before,#connect-view.visual-guide .guide-shot.reference-phone:after,#connect-view.visual-guide .guide-step figure:has(.reference-phone):before,#connect-view.visual-guide .guide-step figure:has(.reference-phone):after{display:none}
.viewer-screen.reference-phone{width:min(360px,66vw,43svh);margin:auto}
#connect-view.visual-guide .guide-step figure:has(.reference-phone){max-width:252px;padding-top:0}
@media(min-width:1001px){#connect-view.visual-guide .guide-step figure:has(.reference-phone){width:min(100%,calc((100svh - 480px)*.5727));min-width:160px}.visual-guide .guide-step-heading{min-height:105px}}


@media(max-width:700px){
/* Instruction steps follow the page's normal vertical scroll. */
#connect-view.visual-guide .instructions{display:flex;flex-direction:column;gap:20px;overflow:visible;margin:0;padding:0;scroll-snap-type:none}
#connect-view.visual-guide .guide-step,#connect-view.visual-guide .guide-step:hover{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px;align-items:start;flex:none;width:100%;max-width:none;padding:26px 30px!important;scroll-snap-align:none}
#connect-view.visual-guide .guide-step:not(:last-child):after{display:none}
#connect-view.visual-guide .guide-step-heading{min-height:0;gap:18px}
#connect-view.visual-guide .guide-step-heading h2{font-size:23px!important;margin-top:4px;margin-bottom:14px}
#connect-view.visual-guide .guide-step-heading p{font-size:14px;line-height:1.8;max-width:510px}
#connect-view.visual-guide .guide-number{min-width:37px;height:40px;font-size:18px}
#connect-view.visual-guide .guide-step figure,#connect-view.visual-guide .guide-step figure:has(.reference-phone){width:252px;max-width:100%;min-width:0;margin:0 auto;padding:0}
#connect-view.visual-guide .guide-shot.reference-phone{height:auto!important;aspect-ratio:252/440}
#connect-view.visual-guide .guide-shot:not(.reference-phone){height:440px}
#connect-view.visual-guide .guide-no-shot{height:320px}
.guide-device-note{margin-top:17px;margin-bottom:17px}
@media(max-width:700px){#connect-view.visual-guide .instructions{margin:0;padding:0;gap:16px;overflow:visible}#connect-view.visual-guide .guide-step,#connect-view.visual-guide .guide-step:hover{display:flex;flex-direction:column;gap:24px;padding:22px 18px!important;flex:none;max-width:none;width:100%}#connect-view.visual-guide .guide-step-heading{min-height:0;gap:12px}#connect-view.visual-guide .guide-step-heading h2{font-size:21px!important;margin-top:4px;margin-bottom:10px}#connect-view.visual-guide .guide-step-heading p{font-size:13px}#connect-view.visual-guide .guide-number{min-width:32px;height:36px;font-size:16px}#connect-view.visual-guide .guide-step figure,#connect-view.visual-guide .guide-step figure:has(.reference-phone){width:252px;max-width:100%;margin:0 auto}#connect-view.visual-guide .guide-shot:not(.reference-phone){height:400px}}

}


#guide-download .download-alternative,#guide-download .download-source{display:block;font:11px/1.5 Arial,sans-serif;color:#c593e9;margin-top:9px;text-align:center}#guide-download .download-source{font-size:10px;color:#9884a9}.platform-tabs{flex-wrap:wrap}.platform-tabs button{flex:0 1 auto}@media(max-width:600px){.platform-tabs button{flex:1 0 28%}}

/* Fixed-size vector connectors, independent of the display font. */
#connect-view.visual-guide .guide-step:not(:last-child):after{content:'';width:32px;height:32px;right:-25px;top:57%;transform:translateY(-50%);border:1px solid #9853c8;border-radius:50%;background-color:#160d22;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23c78aff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:20px 20px;box-shadow:0 0 0 3px #0d0914;pointer-events:none}
@media(max-width:1000px) and (min-width:701px){#connect-view.visual-guide .guide-step:not(:last-child):after{right:-24px}}
@media(max-width:700px){#connect-view.visual-guide .guide-step:not(:last-child):after{display:none}}

#connect-view.visual-guide .guide-shot.reference-phone,.viewer-screen.reference-phone{aspect-ratio:var(--phone-aspect,252 / 440)!important}
#connect-view.visual-guide .guide-shot.reference-phone img,.viewer-screen.reference-phone img{width:var(--phone-image-width,609.52381%)!important}

/* Supplied artwork already includes a phone frame and callouts. */
#connect-view.visual-guide .guide-step figure:has(.supplied-shot){width:100%;max-width:300px;perspective:1000px}
#connect-view.visual-guide .guide-step figure:has(.supplied-shot):before,#connect-view.visual-guide .guide-step figure:has(.supplied-shot):after{display:none}
#connect-view.visual-guide .guide-shot.supplied-shot,#connect-view.visual-guide .guide-shot.supplied-shot:hover,.viewer-screen.supplied-shot{padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;overflow:visible;height:auto!important;aspect-ratio:3/5}
#connect-view.visual-guide .guide-shot.supplied-shot{transform-origin:center 65%;transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .45s;will-change:transform}
#connect-view.visual-guide .guide-shot.supplied-shot img,.viewer-screen.supplied-shot img{position:static;display:block;width:100%!important;height:100%!important;max-height:none;object-fit:contain;border-radius:0;background:none!important}
.viewer-screen.supplied-shot{width:min(560px,85vw);height:min(78svh,960px)!important;margin:auto}
@media(hover:hover) and (pointer:fine){#connect-view.visual-guide .guide-shot.supplied-shot:hover{transform:translateY(-7px) rotateY(-5deg) rotateZ(-1deg) scale(1.035);filter:drop-shadow(0 8px 15px #b52cff55)}#connect-view.visual-guide .guide-shot.supplied-shot[data-step="5"]:hover{transform:translateY(-7px) scale(1.035);filter:drop-shadow(0 0 18px #9256ff88)}}
#connect-view.visual-guide .guide-shot.supplied-shot:focus-visible{outline:2px solid #d8a7ff;outline-offset:5px}
@media(max-width:700px){#connect-view.visual-guide .guide-step figure:has(.supplied-shot){width:min(100%,330px);max-width:330px}#connect-view.visual-guide .guide-shot.supplied-shot{height:auto!important}}
@media(prefers-reduced-motion:reduce){#connect-view.visual-guide .guide-shot.supplied-shot{transition:none;transform:none!important;will-change:auto}}
#connect-view.visual-guide .guide-shot.supplied-shot:before,#connect-view.visual-guide .guide-shot.supplied-shot:after{display:none!important}
#connect-view.visual-guide .guide-shot.supplied-shot[data-step="2"] img{object-fit:cover;object-position:center bottom}

/* Align the actual phone bounds, independently of each file's transparent canvas. */
#connect-view.visual-guide .guide-shot.supplied-shot,.viewer-screen.supplied-shot{position:relative;aspect-ratio:7/10}
#connect-view.visual-guide .guide-shot.supplied-shot img,.viewer-screen.supplied-shot img{position:absolute;left:var(--art-left);top:var(--art-top);width:var(--art-width)!important;height:var(--art-height)!important;object-fit:fill!important;max-width:none!important;filter:saturate(.75) brightness(.93)}
#connect-view.visual-guide .guide-shot.supplied-shot:after,.viewer-screen.supplied-shot:after{display:block!important;content:'';position:absolute;inset:4% 18%;border:2px solid #b779e9;border-radius:14% / 6.8%;box-shadow:0 0 0 2px #1c102e,0 0 13px #a74de54d,inset 0 0 0 1px #dab2fa66;pointer-events:none}
#connect-view.visual-guide .guide-step figure:has(.supplied-shot){max-width:330px;margin-top:20px}
.viewer-screen.supplied-shot{width:min(560px,85vw,54svh);height:auto!important}
@media(hover:hover) and (pointer:fine){#connect-view.visual-guide .guide-shot.supplied-shot:hover,#connect-view.visual-guide .guide-shot.supplied-shot[data-step="5"]:hover{transform:translateY(-5px) rotateY(-3deg) scale(1.02);filter:drop-shadow(0 0 10px #a354e633)}}
@media(prefers-reduced-motion:reduce){#connect-view.visual-guide .guide-shot.supplied-shot:hover{transform:none!important}}
#connect-view.visual-guide .guide-shot.supplied-shot:after,.viewer-screen.supplied-shot:after{width:auto;height:auto;background:transparent;transform:none;box-shadow:0 0 0 4px #17101f,0 0 15px 4px #9c56d92b,inset 0 0 0 1px #dab2fa66}
#connect-view.visual-guide .guide-shot.supplied-shot img,.viewer-screen.supplied-shot img{z-index:1;filter:saturate(.55) brightness(.92)}
#connect-view.visual-guide .guide-shot.supplied-shot:after,.viewer-screen.supplied-shot:after{z-index:0}
/* Lift the complete instruction card; keep artwork fixed within it. */
#connect-view.visual-guide .guide-shot.supplied-shot,#connect-view.visual-guide .guide-shot.supplied-shot:hover,#connect-view.visual-guide .guide-shot.supplied-shot[data-step="5"]:hover{transform:none!important;filter:none;transition:none;will-change:auto}
#connect-view.visual-guide .guide-step,#connect-view.visual-guide .guide-step:hover{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
@media(hover:hover) and (pointer:fine){#connect-view.visual-guide .guide-step:hover{transform:translateY(-6px);border-color:#b779e9;box-shadow:0 12px 28px #0005,0 0 20px #a354e622}}
@media(prefers-reduced-motion:reduce){#connect-view.visual-guide .guide-step,#connect-view.visual-guide .guide-step:hover{transform:none;transition:none}}
@media(hover:hover) and (pointer:fine){#connect-view.visual-guide .guide-step:hover{transform:scale(1.012);z-index:4}}
@media(prefers-reduced-motion:reduce){#connect-view.visual-guide .guide-step:hover{transform:none}}

/* HAPP: three equal cards, with the supplied phone frames aligned. */
@media(min-width:1001px){#connect-view.visual-guide[data-client="HAPP"] .instructions{max-width:1160px;margin-inline:auto}#connect-view.visual-guide[data-client="HAPP"] .guide-step-heading{min-height:110px}#connect-view.visual-guide[data-client="HAPP"] .guide-step-heading h2{font-size:18px!important}#connect-view.visual-guide[data-client="HAPP"] .guide-step-heading p{font-size:13px}}
#connect-view.visual-guide[data-client="HAPP"] .guide-step figure:has(.supplied-shot){margin-top:auto;padding-top:16px}
@media(max-width:700px){body:has(#connect-view:not([hidden])):before{background-image:linear-gradient(90deg,#06070b99,#10051b55),linear-gradient(0deg,#06070b99,#06070b22),url('/site/assets/city-mobile-fast.webp')}}