/* Real product screens, paired with the feature they explain. */
.vf-business-card-try{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 17px;border:1.5px solid #153e30;border-radius:999px;background:var(--green);color:white;font:inherit;font-size:14px;font-weight:800;line-height:1.5;cursor:pointer;box-shadow:3px 3px 0 #153e30;transition:transform .2s,box-shadow .2s}
.vf-business-card-try:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #153e30}.vf-business-card-try svg{width:23px;height:23px;flex:none}.vf-business-card-action{gap:12px}.vf-business-card-audio{font-size:11px;color:#4f655b;line-height:1.4}
.vs-feature{padding:24px;background:#edf5f0;min-height:365px}.vs-feature-embed{background:#edf0f8}.vs-feature-form{background:#f9eff3}.vs-feature-personal{background:#eef4f7}
.vs-shot{display:block;position:relative;width:100%;padding:0;border:1px solid #c4d5cc;border-radius:8px;overflow:hidden;cursor:zoom-in;background:#fff;color:#173e30}
.vs-crop{display:block;position:relative;overflow:hidden;aspect-ratio:var(--shot-ratio);width:100%;background:#fff}
.vs-crop>img{display:block;position:absolute;width:var(--image-w);height:var(--image-h);max-width:none;left:var(--image-x);top:var(--image-y);object-fit:fill}
.vs-zoom{position:absolute;display:flex;align-items:center;gap:4px;right:7px;bottom:7px;background:#fff;border:1px solid #b6cabc;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:800;line-height:1.2;box-shadow:0 2px 8px #183c2b1a}
.vs-zoom svg{width:14px;height:14px}.vs-shot:focus-visible,.vs-switch button:focus-visible,.vf-business-card-try:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.vs-kicker{display:block;font-size:11px;font-weight:850;letter-spacing:.05em;color:var(--green);margin-bottom:14px}
.vs-viewer-pair{display:grid;grid-template-columns:1fr 26px 1fr;gap:12px;align-items:center;max-width:400px;margin:0 auto}
.vs-viewer-pair figure{margin:0}.vs-viewer-pair .vs-shot{border:2px solid #183e30;border-radius:11px;box-shadow:3px 4px 0 #183e30}
.vs-viewer-pair figcaption{font-size:12px;font-weight:750;line-height:1.7;margin-top:13px}.vs-viewer-pair figcaption b{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:var(--green);color:#fff;font-size:10px;margin-right:5px}
.vs-flow-arrow svg{width:26px;height:20px;color:var(--green)}
.aio-body .vs-reading-point{font-size:13px;line-height:1.85;margin:20px 0 0;font-weight:650}.vs-reading-point strong{font-weight:850;color:var(--green)}
.vs-web-focus{display:grid;grid-template-columns:1fr 100px;align-items:center;gap:16px;margin-top:16px}.vs-web-focus b{font-size:17px;line-height:1.7}.vs-web-focus .vs-shot{border:2px solid var(--green);border-radius:10px}.vs-web-focus .vs-zoom>span{display:none}
.vs-form-example{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:center}.vs-form-example figure{margin:0}.vs-form-example figure>.vs-shot{border:2px solid #153e30;border-radius:12px}.vs-form-example figcaption{font-size:11px;line-height:1.7;text-align:center;margin-top:8px}.vs-form-focus h4{font-size:20px;line-height:1.65;margin:0 0 18px}.aio-body .vs-form-focus p{font-size:13px;line-height:1.85;margin:16px 0 0}
.vs-switch{display:flex;gap:7px;margin-bottom:23px}.vs-switch button{flex:1;padding:10px 8px;min-height:44px;border:1px solid #a8bdb0;border-radius:8px;background:#fff;color:#1e3e30;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.vs-switch button[aria-selected=true]{background:var(--green);color:#fff;border-color:var(--green)}
.vs-feature [hidden]{display:none!important}.vs-condition{display:flex;gap:12px;margin:0 0 22px}.vs-condition>span{display:block;flex:1;background:white;border-left:3px solid var(--green);padding:10px 12px;font-size:12px;color:#507162;line-height:1.6}.vs-condition>span>span{display:block;color:#163c2c;font-size:16px;font-weight:850;margin-top:3px}.vs-time{gap:7px}.vs-time>span{padding:9px}.vs-time>span>span{font-size:11px;white-space:nowrap}
.vs-feature-insight>.vs-shot{max-width:360px;margin:auto}.vs-feature .vf-caption{min-height:0}
/* Each metric carries its own screenshot and a concrete reading / action pair. */
.vs-metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px;align-items:stretch}
.vs-metric{display:flex;flex-direction:column;min-width:0;border:1px solid #c1d2c7;border-radius:14px;background:white;overflow:hidden}
.vs-metric>header{padding:24px 24px 18px}.vs-metric>header>span{font-size:11px;letter-spacing:.05em;color:var(--green);font-weight:850}.vs-metric h3{font-size:22px;line-height:1.5;margin:10px 0 0;min-height:66px}
.vs-metric>.vs-shot{width:calc(100% - 32px);margin:0 16px;border-radius:8px;background:#f3f6f4}
.vs-metric>.vs-shot .vs-crop{height:210px;aspect-ratio:auto}.vs-metric-overview>.vs-shot .vs-crop{height:auto;aspect-ratio:2870/1030}.vs-metric-completion>.vs-shot .vs-crop{height:auto;aspect-ratio:780/215}.vs-metric-exit>.vs-shot .vs-crop{height:auto;aspect-ratio:1320/180}.vs-metric-engagement>.vs-shot .vs-crop{height:auto;aspect-ratio:1320/345}
.vs-metric-copy{padding:23px 24px 24px;display:flex;flex-direction:column;flex:1}.vs-metric-copy h4{font-size:18px;line-height:1.6;margin:0 0 12px}.aio-body .vs-metric-copy p{font-size:15px;line-height:1.9;margin:0 0 18px}.aio-body .vs-metric-copy .vs-metric-benefit{margin:auto 0 0;background:#f0f6f2;padding:14px 15px;border-radius:8px;font-size:13px}.vs-metric-benefit>span{display:block;font-size:10px;letter-spacing:.06em;color:var(--green);font-weight:850;margin-bottom:5px}
.vs-metric-responses{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr;align-items:start}.vs-metric-responses>header{grid-column:1/-1}.vs-metric-responses h3{min-height:0}.vs-metric-responses>.vs-shot .vs-crop{height:auto;aspect-ratio:1790/335}.vs-metric-responses .vs-metric-copy{padding-top:0}.aio-body .vs-screen-note{font-size:11px;line-height:1.8;color:#5e7165;margin:20px 0 40px}
#measurement .aio-signal-flow{margin-top:28px}
.vs-metric-routes .vs-crop{aspect-ratio:790/735!important;height:auto!important}.vs-metric-users .vs-crop{aspect-ratio:1140/555!important;height:auto!important}
/* Modal supports both portrait player captures and wide admin screens. */
.va-lightbox-body img{width:auto;max-width:100%;height:auto}.va-lightbox-body.is-portrait img{max-height:calc(100dvh - 170px);width:auto;max-width:100%}
@media(min-width:1101px){.vf-explorer{grid-template-columns:minmax(150px,.55fr) minmax(0,1.55fr);gap:24px}}
@media(max-width:700px){.vs-metric-grid{grid-template-columns:1fr;gap:24px}.vs-metric-responses{display:flex;grid-column:auto}.vs-metric-responses .vs-metric-copy{padding-top:23px}.vs-metric h3{min-height:0}.vs-metric>header{padding:23px 22px 19px}.vs-metric-copy{padding:22px}.vs-metric-copy h4{font-size:18px}.vs-feature{padding:20px;min-height:0}.vs-viewer-pair{gap:9px;grid-template-columns:1fr 20px 1fr}.vs-flow-arrow svg{width:20px}.vs-viewer-pair figcaption{font-size:10px}.vs-viewer-pair figcaption b{width:16px;height:16px;font-size:9px;margin-right:3px}.vs-form-example{gap:14px}.vs-form-focus h4{font-size:17px;margin-bottom:14px}.aio-body .vs-form-focus p{font-size:12px}.vs-condition>span{padding:9px;font-size:11px}.vs-condition>span>span{font-size:13px}.vs-time>span>span{font-size:10px}.vs-switch button{font-size:11px}.vf-business-card-try{font-size:13px;padding:11px 13px}.va-lightbox-body:not(.is-portrait) img{width:850px;max-width:none}.va-lightbox-body.is-portrait img{max-height:none;max-width:100%;width:100%}}
@media(prefers-reduced-motion:no-preference){.vf-panel.is-activated .vs-feature>.vs-viewer-pair,.vf-panel.is-activated .vs-feature>.vs-shot,.vf-panel.is-activated .vs-form-example{animation:vs-reveal .35s both}@keyframes vs-reveal{from{opacity:.4;transform:translateY(7px)}to{opacity:1;transform:none}}}
.no-motion .vs-feature *{animation:none!important}
/* Keep each screenshot beside its explanation; no empty half-cards. */
.vs-metric-grid{grid-template-columns:1fr;gap:24px}
.vs-metric,.vs-metric-responses{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 28px;padding:26px;align-items:center}
.vs-metric>header,.vs-metric-responses>header{grid-column:1/-1;padding:0 0 22px}.vs-metric h3{min-height:0;margin:9px 0 0;font-size:23px}
.vs-metric>.vs-shot{width:100%;margin:0}.vs-metric-copy,.vs-metric-responses .vs-metric-copy{padding:0}.aio-body .vs-metric-copy .vs-metric-benefit{margin:3px 0 0}
@media(max-width:700px){.vs-metric,.vs-metric-responses{display:flex;padding:22px;gap:0}.vs-metric>header{padding:0 0 19px;width:100%}.vs-metric h3{font-size:22px}.vs-metric-copy,.vs-metric-responses .vs-metric-copy{padding-top:22px}.vs-metric>.vs-shot{width:100%}}
@media(max-width:700px){.aio-body .vs-reading-point{font-size:14px}.vs-viewer-pair figcaption{font-size:12px}.vs-switch button{font-size:12px}.aio-body .vs-form-focus p{font-size:13px}}