.web-demos{padding:28px 0 76px}.web-demos-heading{margin-bottom:34px}.web-demos-heading h2{font-size:clamp(30px,4.5vw,52px);line-height:1.08;letter-spacing:-.045em;margin:10px 0 18px}.web-demos-heading p{max-width:650px;margin:0;color:#58656b}.web-demo-list{display:grid;gap:26px}.web-demo-row{font:inherit;color:#243b45;display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:40px;text-align:left;padding:38px 0 38px 38px;width:100%;border:1px solid #dce5e8;border-radius:22px;background:#f6f8f8;overflow:hidden;cursor:pointer;transition:box-shadow .2s,border-color .2s}.web-demo-row:hover{border-color:#91b1bc;box-shadow:0 16px 42px #173f4f12}.web-demo-copy{display:flex;flex-direction:column;align-items:flex-start}.web-demo-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.11em;font-weight:650;color:#527483;margin-bottom:24px}.web-demo-title{font-size:clamp(24px,2.7vw,36px);line-height:1.15;letter-spacing:-.035em;max-width:390px}.web-demo-description{display:block;margin-top:18px;line-height:1.65;color:#60737c;font-size:15px;max-width:380px}.web-demo-open{display:inline-flex;gap:24px;align-items:center;margin-top:26px;font-size:14px;font-weight:700;color:#22657c}.web-demo-open span{font-size:25px}.web-demo-preview{display:block;overflow:hidden;border-radius:13px 0 0 13px;border:1px solid #d6e0e4;border-right:0;box-shadow:0 14px 38px #1a3c4d15;transform:translateX(8px);transition:transform .2s;background:#fff}.web-demo-row:hover .web-demo-preview{transform:translateX(0)}.web-preview-chrome{display:flex;gap:5px;align-items:center;background:#fff;padding:10px 13px;height:34px}.web-preview-chrome>i{width:6px;height:6px;background:#d5dce0;border-radius:50%}.web-preview-chrome>i:first-child{background:#e6a69c}.web-preview-chrome>i:nth-child(2){background:#e4cf9e}.web-preview-chrome>i:nth-child(3){background:#a8c5b5}.web-preview-chrome>span{flex:1;text-align:center;font-size:9px;color:#73848a;margin-right:25px}.web-preview-content{display:block;position:relative;background:#e9efff;min-height:260px}.web-preview-content img{display:block;object-fit:cover;width:100%;height:270px}.web-preview-name{display:block;font-size:13px;font-weight:800;letter-spacing:.15em;padding:14px 18px;color:#182c64}.web-preview-claim{display:block;background:#e9efff;color:#182c64;padding:16px 18px;font-size:20px;font-weight:750;line-height:1.1;letter-spacing:-.03em}.demo-onepager .web-preview-content,.demo-onepager .web-preview-claim{background:#e4efeb;color:#183f43}.demo-onepager .web-preview-name{color:#183f43}.demo-cms .web-preview-content,.demo-cms .web-preview-claim{background:#f1eee2;color:#3a493b}.demo-cms .web-preview-name{color:#3a493b;font-family:Georgia,serif}.demo-shop .web-preview-content,.demo-shop .web-preview-claim{background:#e3f4fa;color:#114d64}.demo-shop .web-preview-name{color:#114d64}.web-demo-caption{display:flex;gap:40px;margin-top:24px;color:#60717a;font-size:12px;line-height:1.6}.web-demo-caption p{flex:1;margin:0}.web-demo-caption strong{color:#1c414f}.web-demo-modal{box-sizing:border-box;border:0;background:#edf1f3;color:#243b45;padding:14px;max-width:none;max-height:none;width:calc(100vw - 32px);height:calc(100dvh - 32px);border-radius:20px;overflow:hidden}.web-demo-modal[open]{display:flex;flex-direction:column}.web-demo-modal:not([open]){display:none}.web-demo-modal::backdrop{background:#132932b8;backdrop-filter:blur(8px)}.web-demo-modal-head{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 2px 10px;gap:16px;flex-shrink:0}.web-demo-modal-head strong{font-size:16px}.web-demo-modal-head button{border:1px solid #cbd7dc;border-radius:9px;padding:10px 15px;background:white;font:inherit;color:#193c4b;cursor:pointer;min-height:42px}.web-browser{border:1px solid #d9e2e5;border-radius:13px;overflow:hidden;background:#e8edef;flex:1;min-height:0;display:flex;flex-direction:column}.web-browser-bar{display:flex;align-items:center;gap:14px;padding:9px 16px;background:#f3f5f6;border-bottom:1px solid #d9e2e5;flex-shrink:0}.web-browser-dots{display:flex;gap:6px}.web-browser-dots i{width:9px;height:9px;border-radius:50%;background:#c5ced3}.web-browser-dots i:first-child{background:#f0938c}.web-browser-dots i:nth-child(2){background:#ecc985}.web-browser-dots i:nth-child(3){background:#9cbfa1}.web-browser-address{flex:1;min-width:0;background:#fff;color:#61757e;text-align:center;padding:7px 12px;border:1px solid #e3e8eb;border-radius:7px;font-size:12px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.web-browser-tools{display:flex;gap:5px}.web-browser button{font:inherit;line-height:1;border:1px solid transparent;background:transparent;border-radius:7px;padding:9px 10px;color:#345260;cursor:pointer;min-height:42px;min-width:42px}.web-browser button[aria-pressed=true]{background:white;border-color:#cbd7dc}.web-browser button svg{display:block;width:19px;height:19px}.web-demo-stage{flex:1;min-height:0;position:relative;overflow:hidden;background:#d9e5ed}.web-device-scene{position:absolute;inset:0}.web-phone-photo{display:none}.web-frame-mount{position:absolute;inset:0;overflow:hidden;background:#fff}.web-frame-mount iframe{border:0;width:100%;height:100%;display:block;background:#fff;transform-origin:top left}.web-frame-mount iframe[hidden]{display:none!important}.web-browser[data-device=mobile] .web-demo-stage{background:#fff}.web-browser[data-device=mobile] .web-device-scene{inset:auto;top:0;left:50%;transform:translateX(-50%);height:100%;aspect-ratio:3/2}.web-browser[data-device=mobile] .web-phone-photo{display:block;position:absolute;width:100%;height:100%;max-width:none;inset:0;pointer-events:none;user-select:none}.web-browser[data-device=mobile] .web-frame-mount{inset:auto;left:37.35%;top:10.3%;width:25.3%;height:71.7%;border-radius:0 0 13px 13px}.web-modal-hint{font-size:12px;line-height:1.4;margin:9px 3px 0;color:#60717a;flex-shrink:0}.web-package .web-example-button{display:block;background:transparent;color:#286584;border:0;padding:16px 0 0;cursor:pointer;font:inherit;font-weight:650;text-align:left;text-decoration:underline;text-underline-offset:4px}.web-demo-row:focus-visible,.web-demo-modal button:focus-visible{outline:3px solid #e59b55;outline-offset:3px}
@media(max-width:800px){.web-demo-row{gap:24px;padding:26px 0 26px 26px;grid-template-columns:1fr 1fr}.web-demo-kicker{margin-bottom:18px}.web-preview-content img{height:235px}.web-demo-description{font-size:14px}.web-demo-title{font-size:26px}.web-preview-claim{font-size:17px}}
@media(max-width:600px){.web-demos{padding-top:10px;padding-bottom:42px}.web-demos-heading p{font-size:15px}.web-demo-list{gap:20px}.web-demo-row{grid-template-columns:1fr;padding:24px;gap:22px;border-radius:18px}.web-demo-description{margin-top:13px}.web-demo-kicker{margin-bottom:14px}.web-demo-open{margin-top:18px}.web-demo-preview{transform:none;border:1px solid #d6e0e4;border-radius:10px}.web-preview-content{min-height:0}.web-preview-content img{height:185px}.web-preview-name{padding:10px 14px;font-size:11px}.web-preview-claim{padding:12px 14px;font-size:18px}.web-demo-caption{display:block}.web-demo-caption p+p{margin-top:10px}.web-demo-modal{padding:7px;width:calc(100vw - 8px);height:calc(100dvh - 8px);border-radius:12px}.web-demo-modal-head{gap:8px}.web-demo-modal-head strong{font-size:13px}.web-demo-modal-head button{font-size:13px;padding:9px 12px}.web-browser-bar{padding:6px;gap:5px}.web-browser-dots{display:none}.web-browser-address{padding:7px 4px;font-size:10px}.web-browser-tools{gap:2px}.web-browser button{padding:9px;min-width:40px}.web-modal-hint{font-size:11px;max-height:46px;overflow:auto}}
@media(prefers-reduced-motion:reduce){.web-demo-row,.web-demo-preview{transition:none}}

/* v063: single scene, white edges and a frameless, larger mobile preview. */
.web-demo-modal-head strong{margin-right:auto}.web-browser-tools{align-items:center;flex-shrink:0}.web-browser-tools button{font:inherit;display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1;border:1px solid transparent;border-radius:10px;background:transparent;padding:10px 13px;color:#345260;min-height:42px;cursor:pointer}.web-browser-tools button svg{width:19px;height:19px;display:block}.web-browser-tools button span{font-size:12px;font-weight:650}.web-browser-tools button[aria-pressed=true]{background:#fff;border-color:#cbd7dc;box-shadow:0 2px 7px #123c5010}.web-demo-modal[data-device=mobile]{background:#fff}.web-demo-modal[data-device=mobile] .web-browser{border:0;border-radius:0;background:#fff}.web-demo-modal[data-device=mobile] .web-browser-bar{display:none}.web-browser[data-device=mobile] .web-demo-stage{background:#fff}.web-browser[data-device=mobile] .web-device-scene{aspect-ratio:3/2;height:114%;top:-2%;width:auto}.web-browser[data-device=mobile] .web-phone-photo{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 25%,#000 72%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 25%,#000 72%,transparent 100%)}.web-demo-modal[data-device=mobile] .web-modal-hint{text-align:center;color:#77858b}.web-demo-stage{transform-origin:center center}
@media(max-width:600px){.web-demo-modal-head{flex-wrap:wrap;gap:6px;padding:0 2px 8px}.web-demo-modal-head strong{order:0;flex:1}.web-demo-modal-head>[data-demo-close]{order:1}.web-demo-modal-head .web-browser-tools{order:2;justify-content:center;flex-basis:100%}.web-browser-tools button{padding:8px 12px;min-height:40px}.web-browser-tools button span{font-size:12px}.web-demo-modal[data-device=mobile] .web-modal-hint{font-size:10px;max-height:30px}.web-browser[data-device=mobile] .web-frame-mount{border-radius:0 0 9px 9px}}

/* v064: package information and pricing integrated into each example row. */
article.web-demo-row{cursor:default;grid-template-columns:1.05fr 1.15fr;gap:34px;padding-top:34px;padding-bottom:34px}.web-demo-row .web-demo-kicker{margin-bottom:14px}.web-demo-row h3.web-demo-title{margin:0 0 20px;font-size:clamp(26px,2.7vw,36px);font-weight:750}.web-demo-package{width:100%;max-width:450px}.web-demo-package p{color:#536a74;font-size:15px;line-height:1.65;margin:0 0 14px}.web-demo-package .web-price{font-size:37px;font-weight:750;letter-spacing:-1px;line-height:1.1;color:#17617a;margin:0 0 5px}.web-demo-package .web-price small{font-size:16px;letter-spacing:0;font-weight:500}.web-demo-package .web-price-note{font-size:12px;color:#607780;margin:0 0 20px}.web-demo-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px 22px;margin-top:8px}.web-demo-actions .button{font-size:13px;min-height:44px;padding:12px 16px}.web-demo-actions .web-demo-open{font:inherit;font-size:13px;font-weight:650;border:0;background:transparent;padding:10px 0;margin:0;gap:10px;min-height:44px;cursor:pointer;text-align:left}.web-demo-row button.web-demo-preview{padding:0;font:inherit;text-align:left;cursor:pointer;min-width:0;color:inherit;background:#fff}.web-preview-launch{display:flex;justify-content:flex-end;padding:12px 17px;font-size:12px;color:#28596b;background:#fff;font-weight:650}.web-demo-row button:focus-visible,.web-demo-row a:focus-visible{outline:3px solid #e59b55;outline-offset:3px}.web-package-terms{font-size:12px;line-height:1.65;color:#60717a;margin-top:25px;max-width:950px}.web-package-terms p{margin:0}.web-demo-row .web-preview-content img{height:290px}
@media(max-width:900px){article.web-demo-row{grid-template-columns:1.1fr 1fr;gap:24px}.web-demo-row h3.web-demo-title{font-size:27px}.web-demo-package p{font-size:14px}.web-demo-package .web-price{font-size:34px}.web-demo-package .web-price-note{font-size:12px}.web-demo-actions{gap:6px 16px}.web-demo-row .web-preview-content img{height:260px}}
@media(max-width:600px){article.web-demo-row{grid-template-columns:1fr;padding:24px;gap:24px}.web-demo-package{max-width:none}.web-demo-row h3.web-demo-title{margin-bottom:18px;font-size:28px}.web-demo-row .web-preview-content img{height:190px}.web-demo-actions{gap:8px 16px}.web-demo-package .web-price-note{margin-bottom:18px}.web-preview-launch{padding:11px 14px}}

.web-demos-heading p.web-demo-reduced-note{max-width:800px;margin-top:22px;padding:18px 22px;border-left:3px solid #6b9aa8;background:#eef4f5;border-radius:0 10px 10px 0;font-size:14px;line-height:1.65;color:#526c77}.web-demo-reduced-note strong{color:#264d5d;font-weight:700}@media(max-width:600px){.web-demos-heading p.web-demo-reduced-note{padding:15px 17px;font-size:13px}}

/* v065: real touch devices show the actual responsive page, without a device simulation. */
.web-demo-modal.is-native-phone{inset:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;padding:0;border:0;border-radius:0;background:#fff;overscroll-behavior:none}.web-demo-modal.is-native-phone .web-demo-modal-head{flex-wrap:nowrap;flex-shrink:0;min-height:46px;margin:0;padding:calc(4px + env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) 4px max(10px,env(safe-area-inset-left,0px));gap:10px;border-bottom:1px solid #e5ebee;background:#fff}.web-demo-modal.is-native-phone .web-demo-modal-head strong{font-size:12px;line-height:1.25;flex:1;min-width:0;order:1}.web-demo-modal.is-native-phone .web-demo-modal-head>[data-demo-close]{order:0;min-height:40px;padding:8px 10px;font-size:13px;background:#f3f6f7;border:0;white-space:nowrap}.web-demo-modal.is-native-phone .web-browser-tools,.web-demo-modal.is-native-phone .web-browser-bar,.web-demo-modal.is-native-phone .web-phone-photo,.web-demo-modal.is-native-phone .web-modal-hint{display:none!important}.web-demo-modal.is-native-phone .web-browser{flex:1;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:#fff}.web-demo-modal.is-native-phone .web-demo-stage{background:#fff;flex:1;min-height:0}.web-demo-modal.is-native-phone .web-device-scene{inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none}.web-demo-modal.is-native-phone .web-frame-mount{inset:0;width:100%;height:100%;border-radius:0}.web-demo-modal.is-native-phone .web-frame-mount iframe{width:100%;height:100%;transform:none;border-radius:0}

/* v067: author credit lives in the existing chrome, not above the demo. */
.web-preview-credit{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap;color:#526c77;font-size:11px;flex-shrink:0}.web-preview-credit>span{font:400 14px/1.2 Arial,Helvetica,sans-serif;letter-spacing:-.5px}.web-preview-credit b{font-weight:800}.web-preview-head-credit{display:none}.web-demo-modal[data-device=mobile] .web-preview-head-credit,.web-demo-modal.is-native-phone .web-preview-head-credit{display:inline-flex}.web-demo-modal.is-native-phone .web-preview-head-credit{order:2;font-size:9px;gap:4px}.web-demo-modal.is-native-phone .web-preview-credit>span{font-size:12px}.web-demo-modal.is-native-phone #web-demo-modal-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* v077: a single browser status bar starts directly at the preview's top edge. */
.web-demo-modal{padding:0}
.web-demo-modal-head{min-height:56px;padding:8px 14px;justify-content:initial;gap:11px;background:#f5f7f8;border-bottom:1px solid #d9e2e5}
.web-demo-modal-head #web-demo-modal-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.web-demo-modal-head .web-browser-dots{flex-shrink:0}
.web-demo-modal-head .web-browser-address{flex:1;min-width:100px;max-width:none}
.web-demo-modal-head .web-browser-tools{margin-left:auto}
.web-demo-modal-head>[data-demo-close]{white-space:nowrap}
.web-demo-modal .web-browser{border:0;border-radius:0}
.web-demo-modal .web-modal-hint{margin:0;padding:7px 14px;background:#f5f7f8;border-top:1px solid #d9e2e5}
.web-demo-modal.is-native-phone .web-demo-modal-head #web-demo-modal-title{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:nowrap;border:0}
.web-demo-modal.is-native-phone .web-demo-modal-head .web-browser-address,.web-demo-modal.is-native-phone .web-demo-modal-head .web-browser-dots{display:none}
@media(max-width:700px){.web-demo-modal-head{flex-wrap:nowrap;padding:6px 8px;gap:6px}.web-demo-modal-head .web-device-button span{display:none}.web-demo-modal-head .web-browser-address{font-size:10px;min-width:30px}.web-demo-modal-head>[data-demo-close]{font-size:12px;padding:8px!important}.web-demo-modal .web-modal-hint{padding:6px 8px}}