.v2-page .cap-scroll{position:relative;margin-block:32px 96px;color:#101010;isolation:isolate}
.cap-pin{--cap-sticky-top:100px;position:relative;top:0;padding-block:24px;min-height:calc(100svh - 124px);display:flex;align-items:center;box-sizing:border-box}
.cap-scroll[data-scroll=true] .cap-pin{position:sticky;top:var(--cap-sticky-top)}
.cap-layout{display:grid;width:100%;grid-template-columns:.85fr 1.15fr;align-items:center;gap:64px;min-height:min(620px,calc(100svh - 200px))}
.v2-page .cap-copy h2{font-family:Hoss,sans-serif;font-size:clamp(32px,3.7vw,50px);font-weight:700;line-height:1.06;letter-spacing:-.045em;margin:0 0 30px}
.cap-steps{display:grid;gap:8px}
.cap-step{position:relative;padding:20px 24px 20px 30px;border-radius:14px;transition:background-color 220ms var(--ease)}
.cap-step.is-active{background:#f3f3f1}
.cap-progress{position:absolute;left:12px;top:22px;bottom:22px;width:2px;background:#e5e5e2;overflow:hidden}
.cap-progress-fill{display:block;width:100%;height:100%;background:#101010;transform:scaleY(0);transform-origin:top}
.cap-step h3{margin:0}
.cap-step button{appearance:none;border:0;background:none;color:#757575;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:0;text-align:left;cursor:pointer;font-family:Hoss,sans-serif;font-size:clamp(25px,2.6vw,36px);line-height:1.12;letter-spacing:-.035em;transition:color 200ms var(--ease)}
.cap-step.is-active button{color:#101010}
.cap-step button>svg{width:22px;height:22px;flex:none;opacity:0;transform:translateX(-5px);transition:opacity 200ms var(--ease),transform 200ms var(--ease)}
.cap-step.is-active button>svg{opacity:1;transform:translateX(0)}
.cap-step button:focus-visible{outline:2px solid #101010;outline-offset:6px;border-radius:3px}
.cap-description{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 220ms var(--ease),opacity 180ms var(--ease)}
.cap-description p{overflow:hidden;min-height:0;margin:0;font:16px/1.55 Real,Arial,sans-serif;letter-spacing:0;color:#444}
.cap-step.is-active .cap-description{grid-template-rows:1fr;opacity:1}
.cap-step.is-active .cap-description p{padding-top:14px}
.cap-stage{position:relative;min-width:0;width:100%;aspect-ratio:1.08;max-height:calc(100svh - 180px);border:1px solid #e8e8e4;border-radius:28px;background:radial-gradient(ellipse at 55% 35%,#fff 5%,#f2f2ef 74%);overflow:hidden}
.cap-fit{position:absolute;top:50%;left:0;width:100%;aspect-ratio:3/2;transform:translateY(-50%)}
.cap-scene{position:absolute;inset:0;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity 240ms var(--ease),transform 240ms var(--ease)}
.cap-scene.is-active{opacity:1;transform:translateY(0)}
.cap-canvas{width:900px;height:600px;position:absolute;inset:0 auto auto 0;transform:scale(.65);transform-origin:0 0;font-family:Real,Arial,sans-serif;font-size:18px;line-height:1.4;color:#25241e}
.cap-scene-art{position:relative;width:100%;height:100%}
.cap-canvas h3,.cap-canvas p{margin:0}
.cap-canvas svg{flex:none}
.cap-browser-bar{display:flex;align-items:center;justify-content:space-between;height:38px;padding:0 18px;background:#fff;border-bottom:1px solid #e3e3df;color:#898985;font-size:12px;letter-spacing:0}
.cap-dots{display:flex;gap:5px}
.cap-dots i{height:5px;width:5px;border-radius:50%;background:#d3d3ce}
.cap-brand{font-family:Hoss,sans-serif;font-size:29px;letter-spacing:-1.7px;line-height:1}
.cap-mark{display:inline-flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;background:#101010;border-radius:11px}
.cap-mark img{width:25px;filter:invert(1)}
.cap-mini-icon{display:inline-flex;align-items:center;justify-content:center;background:#f5f5f3;width:42px;height:42px;border-radius:10px;font-size:22px;flex:none}
.cap-context-site{position:absolute;left:145px;top:67px;width:600px;height:335px;border:1px solid #d9d9d4;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 20px 50px #00000009}
.cap-context-page{height:297px;display:grid;grid-template-columns:1fr 43%;background:#f8f7f2}
.cap-context-page>div{padding:30px}
.cap-context-page h3{font-family:Real,sans-serif;font-size:35px;letter-spacing:-1.5px;font-weight:400;line-height:1.1;margin:28px 0 15px}
.cap-context-page p{font-size:14px;color:#77776e}
.cap-context-page>img{width:100%;height:100%;object-fit:cover}
.cap-scan{position:absolute;top:40px;left:0;right:0;height:1px;background:#77776e;box-shadow:0 0 24px 8px #ffffff70;pointer-events:none}
.cap-context-tag{position:absolute;display:flex;align-items:center;gap:15px;padding:17px 20px;border:1px solid #deded9;background:#fff;border-radius:14px;box-shadow:0 10px 25px #00000007}
.cap-context-tag b{display:block;font-size:18px;font-weight:700;margin-bottom:3px}
.cap-context-tag div>span{display:block;font-size:15px;color:#77776e}
.cap-context-tag>svg{width:21px;height:21px;margin-left:6px}
.cap-services{top:145px;left:37px}
.cap-voice{top:285px;right:32px}
.cap-customers{top:387px;left:80px}
.cap-context-ready{position:absolute;left:270px;top:512px;display:flex;align-items:center;gap:13px;font-size:20px}
.cap-context-ready>svg{width:21px;height:21px}
.cap-edit-site{position:absolute;left:55px;top:65px;width:790px;height:463px;background:#fff;border:1px solid #d9d9d4;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px #00000009}
.cap-edit-photo{position:relative;height:425px;color:#fff}
.cap-edit-photo>img,.cap-photo-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cap-photo-shade{background:linear-gradient(90deg,#17130c70,transparent 80%)}
.cap-edit-nav{position:absolute;top:25px;left:35px;right:35px;display:flex;align-items:center;justify-content:space-between}
.cap-edit-nav .cap-brand{color:#f5c88d}
.cap-edit-nav>span{font-size:12px;color:#f4e9db}
.cap-headline-old,.cap-headline-new{position:absolute;top:114px;left:49px;font:51px/1.02 Real,Arial,sans-serif;letter-spacing:-2.8px}
.cap-headline-old em,.cap-headline-new em{font-style:normal;color:#f5c88d}
.cap-headline-new{opacity:0}
.cap-edit-selection{position:absolute;left:38px;top:102px;width:355px;height:128px;border:1px solid #fff9;border-radius:2px}
.cap-edit-selection i{position:absolute;width:7px;height:7px;background:white;border:1px solid #ddd}
.cap-edit-selection i:nth-child(1){left:-4px;top:-4px}.cap-edit-selection i:nth-child(2){right:-4px;top:-4px}.cap-edit-selection i:nth-child(3){right:-4px;bottom:-4px}.cap-edit-selection i:nth-child(4){left:-4px;bottom:-4px}
.cap-site-sub{position:absolute;top:267px;left:49px;font-size:14px;line-height:1.5}
.cap-site-cta{position:absolute;top:330px;left:49px;display:flex;align-items:center;justify-content:space-between;width:178px;padding:10px 12px;border:1px solid #ffffff88;font-size:14px}
.cap-site-cta svg{width:16px;height:16px}
.cap-edit-request{position:absolute;left:27px;top:26px;display:flex;align-items:center;gap:13px;padding:12px 18px 12px 12px;border-radius:14px;background:#fff;box-shadow:0 10px 35px #0000000f;border:1px solid #e3e3df;font-size:17px}
.cap-edit-done{position:absolute;bottom:40px;right:27px;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e3e3df;border-radius:12px;padding:17px 23px;box-shadow:0 10px 35px #0000000c;font-size:17px}
.cap-edit-done svg{width:22px;height:22px}
.cap-edit-cursor{position:absolute;left:220px;top:235px}
.cap-metric-card{position:absolute;background:#fff;border:1px solid #deded9;border-radius:18px;padding:26px 28px;box-shadow:0 18px 45px #00000008}
.cap-metric-traffic{left:45px;top:40px;width:730px;height:312px}
.cap-metric-conversion{right:35px;top:320px;width:562px;height:245px;box-shadow:0 18px 45px #0000000d}
.cap-metric-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:28px}
.cap-canvas .cap-metric-header h3{font-family:Real,Arial,sans-serif;font-size:23px;font-weight:700;letter-spacing:-.5px;line-height:1.2}
.cap-canvas .cap-metric-header p{font-size:15px;line-height:1.4;color:#77776e;margin-top:5px}
.cap-metric-header strong{font-family:Hoss,sans-serif;font-size:44px;line-height:1.1;font-weight:700;letter-spacing:-1.7px;font-variant-numeric:tabular-nums}
.cap-chart-plot{position:relative;margin-left:34px}
.cap-chart-plot svg{width:100%;height:auto;display:block;overflow:visible}
.cap-chart-plot svg path[fill],.cap-chart-plot svg circle{stroke:none}
.cap-chart-axis{position:absolute;top:-6px;left:-34px;height:calc(100% - 19px);display:flex;flex-direction:column;justify-content:space-between;font-size:12px;line-height:1;color:#92928c}
.cap-chart-months{display:flex;justify-content:space-between;font-size:12px;color:#92928c;margin-top:14px}
.cap-metric-conversion .cap-metric-header{margin-bottom:23px}
.cap-metric-conversion .cap-metric-header strong{font-size:40px}
.cap-metric-conversion .cap-metric-header h3{font-size:22px}
.cap-chart-example{position:absolute;left:62px;bottom:39px;color:#92928c;font-size:13px}
@media(hover:hover) and (pointer:fine){.cap-step:not(.is-active) button:hover{color:#101010}}
@media(max-width:1100px){.cap-layout{gap:32px;grid-template-columns:.95fr 1.05fr}.cap-step{padding-right:18px}.cap-description p{font-size:15px}.cap-stage{aspect-ratio:1}.cap-copy h2{white-space:nowrap}}
@media(max-width:760px){
 .v2-page .cap-scroll{margin-block:24px 64px}.cap-pin{--cap-sticky-top:76px;padding-block:8px 16px;min-height:0;display:block}.cap-layout{display:flex;flex-direction:column;align-items:stretch;gap:18px;min-height:0}.v2-page .cap-copy h2{font-size:34px;line-height:1.05;margin-bottom:15px;white-space:normal}.cap-steps{gap:4px}.cap-step{padding:11px 18px 11px 25px;border-radius:10px}.cap-progress{left:10px;top:13px;bottom:13px}.cap-step button{font-size:26px}.cap-step button>svg{width:19px;height:19px}.cap-description p{font-size:14px;line-height:1.4}.cap-step.is-active .cap-description p{padding-top:9px}.cap-stage{aspect-ratio:3/2;border-radius:18px}.cap-layout{max-width:560px;margin-inline:auto}
}
@media(max-width:360px){.v2-page .cap-copy h2{font-size:30px}.cap-step button{font-size:24px}.cap-description p{font-size:13px}.cap-layout{gap:14px}.cap-step{padding-block:10px}.cap-pin{--cap-sticky-top:72px}}

/* Phone-sized labels and charts inside the same landscape visual. */
@media(max-width:760px){
 .cap-description{display:block;height:0;overflow:hidden;transition:height 220ms var(--ease),opacity 180ms var(--ease)}
 .cap-step.is-active .cap-description{height:var(--cap-description-height,68px)}
 .cap-description p{padding-top:9px}
}
@media(max-width:360px){.cap-pin{padding-bottom:10px}}
@media(max-width:1100px){
 .cap-context-tag{max-width:840px}
 .cap-context-tag b{font-size:calc(12px * var(--cap-inverse-scale,2.5))}
 .cap-context-tag div>span{font-size:calc(9px * var(--cap-inverse-scale,2.5))}
 .cap-context-ready{left:0;right:0;justify-content:center;font-size:calc(11px * var(--cap-inverse-scale,2.5))}
 .cap-edit-request,.cap-edit-done{font-size:calc(10px * var(--cap-inverse-scale,2.5))}
 .cap-edit-request{max-width:846px}
 .cap-chart-canvas{width:100%;height:100%;transform:none}
 .cap-chart-canvas .cap-metric-card{padding:10px 12px;border-radius:11px;box-shadow:0 7px 20px #00000007}
 .cap-chart-canvas .cap-metric-traffic{left:4%;top:5%;width:88%;height:51%}
 .cap-chart-canvas .cap-metric-conversion{right:4%;top:52%;width:75%;height:44%}
 .cap-chart-canvas .cap-metric-header{align-items:center;gap:8px;margin-bottom:8px;height:24px}
 .cap-chart-canvas .cap-metric-header h3{font-size:13px;line-height:1.15;letter-spacing:-.3px}
 .cap-chart-canvas .cap-metric-header p{display:none}
 .cap-chart-canvas .cap-metric-header strong{font-size:23px;line-height:1;letter-spacing:-.8px;white-space:nowrap}
 .cap-chart-canvas .cap-chart-plot{margin-left:22px;height:calc(100% - 47px)}
 .cap-chart-canvas .cap-chart-plot svg{height:100%;width:100%}
 .cap-chart-canvas .cap-chart-axis{font-size:9px;top:-4px;left:-22px;height:calc(100% + 8px);color:#767670}
 .cap-chart-canvas .cap-chart-months{font-size:9px;margin-top:5px;line-height:1;color:#767670}
 .cap-chart-canvas .cap-chart-example{left:4%;bottom:3%;width:17%;font-size:9px;line-height:1.2}
}
@media(max-width:360px){
 .cap-chart-canvas .cap-metric-card{padding:8px 10px}
 .cap-chart-canvas .cap-metric-header{height:21px;margin-bottom:6px}
 .cap-chart-canvas .cap-metric-header h3{font-size:12px}
 .cap-chart-canvas .cap-metric-header strong{font-size:21px}
 .cap-chart-canvas .cap-chart-plot{height:calc(100% - 42px)}
}

@media(max-height:500px) and (orientation:landscape){.cap-stage{max-height:none}}
@media(prefers-reduced-motion:reduce){.cap-step,.cap-step button,.cap-step button>svg,.cap-description,.cap-scene{transition:none}.cap-pin{position:relative!important;top:0}.cap-scroll{height:auto!important}.cap-canvas [data-at],.cap-canvas [data-until]{transform:none!important}.cap-scan,.cap-edit-cursor{display:none}.cap-headline-old{opacity:0!important}.cap-headline-new{opacity:1!important}.cap-post-status>span:first-child{opacity:0!important}.cap-edit-selection{opacity:0!important}}