/* Experimental artwork treatment, scoped to the fictional first-impression view. */
.website-panel .website-preview{background:#e9eee0 url("product-demo/homecare-garden-path.webp") center center / cover no-repeat;position:relative;isolation:isolate}
.website-panel .website-preview:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(246,246,237,.97) 0%,rgba(246,246,237,.90) 28%,rgba(246,246,237,.58) 46%,rgba(246,246,237,.03) 75%);z-index:-1}
.website-panel .preview-hero{grid-template-columns:1fr 1fr}.website-panel .preview-photo{visibility:hidden}.website-panel .preview-hero p{color:#273e3b}.website-panel .preview-eyebrow{color:#324b43}.website-panel .preview-nav,.website-panel .preview-footer{color:#172c28}.website-panel .preview-footer{border-color:#49615866}
@media(max-width:700px){.website-panel .website-preview{background-position:55% center}.website-panel .website-preview:before{background:linear-gradient(90deg,rgba(246,246,237,.97) 0%,rgba(246,246,237,.86) 34%,rgba(246,246,237,.12) 72%)}}
.website-panel .website-preview .preview-nav>span:last-child{background:rgba(250,250,245,.88);padding:5px 6px 5px 10px;border-radius:24px}.website-panel .website-preview .preview-footer{background:rgba(247,248,241,.84);padding:12px;border-radius:5px;border:0}@media(max-width:700px){.website-panel .website-preview .preview-nav>span:last-child{padding:3px 4px 3px 6px}.website-panel .website-preview .preview-footer{padding:7px}}

.website-panel .preview-inquiry-button{border:0;border-radius:30px;background:#17171f;color:#fff;padding:10px 13px;font-family:inherit;font-size:9px;line-height:1.2;font-weight:600;cursor:pointer}.website-panel .preview-inquiry-button:hover{background:#284e4c}.website-panel .preview-inquiry-button:focus-visible{outline:2px solid #15856f;outline-offset:3px}.website-panel .preview-inquiry-button[hidden]{display:none}@media(max-width:700px){.website-panel .preview-inquiry-button{font-size:5px;padding:6px 7px}}

/* On phones, show the example as a readable website card instead of a miniature laptop. */
@media (max-width:700px){
 .website-panel .device-stage{width:100%;margin:30px auto}
 .website-panel .laptop-screen{border:0;border-radius:14px;box-shadow:0 15px 35px #152c281b;overflow:hidden}
 .website-panel .browser-chrome,.website-panel .laptop-base{display:none}
 .website-panel .walkthrough-stage,.website-panel .mock-scene{min-height:460px}
 .website-panel .website-preview{min-height:460px;padding:22px 20px 18px;background-position:59% center}
 .website-panel .website-preview:before{background:linear-gradient(90deg,rgba(249,249,241,.98) 0%,rgba(249,249,241,.88) 43%,rgba(249,249,241,.16) 100%)}
 .website-panel .preview-nav{align-items:center;gap:8px}
 .website-panel .preview-nav>span:first-child{font-size:20px}
 .website-panel .preview-nav em{font-size:7px}
 .website-panel .website-preview .preview-nav>span:last-child{font-size:0;background:transparent;padding:0}
 .website-panel .preview-inquiry-button{font-size:12px;min-height:44px;padding:11px 14px}
 .website-panel .preview-hero{display:block;min-height:270px;padding:42px 0 28px}
 .website-panel .preview-eyebrow{font-size:9px;margin-bottom:15px}
 .website-panel .preview-hero h3{font-size:clamp(36px,10vw,48px);line-height:1.02}
 .website-panel .preview-hero p{font-size:14px;line-height:1.5;margin:16px 0 18px;max-width:210px}
 .website-panel .preview-cta{font-size:11px;padding:11px 14px}
 .website-panel .preview-photo{display:none}
 .website-panel .website-preview .preview-footer{font-size:9px;gap:5px;padding:10px;background:rgba(247,248,241,.88)}
 .website-panel .mock-scene{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:25px 6%;gap:15px}
 .website-panel .mock-copy>strong{font-size:clamp(22px,6vw,30px)}
 .website-panel .mock-copy p{font-size:11px;line-height:1.55}
 .website-panel .mock-kicker,.website-panel .mock-watermark{font-size:7px}
 .website-panel .mock-phone{width:min(100%,135px)}
 .website-panel .mock-inquiry{max-width:100%;padding:15px}
 .website-panel .mock-inquiry>b{font-size:clamp(18px,5vw,23px)}
 .website-panel .mock-field>span,.website-panel .mock-input,.website-panel .mock-submit{font-size:7px}
}

/* Make the desktop mobile demonstration show the approved phone design. */
.website-panel .mobile-scene .mock-phone{width:210px;padding:7px;border:4px solid #25252e;border-radius:28px}
.website-panel .mobile-scene .phone-content{min-height:365px;padding:17px 14px 14px;border-radius:16px;color:#172c28;background:linear-gradient(90deg,rgba(249,249,241,.97),rgba(249,249,241,.83) 55%,rgba(249,249,241,.18)),url("product-demo/homecare-garden-path.webp") 58% center / cover no-repeat}
.website-panel .mobile-scene .phone-nav{margin-bottom:35px}
.website-panel .mobile-scene .phone-brand{font-size:17px;color:#172c28}
.website-panel .mobile-scene .phone-brand small{font-size:5px}
.website-panel .mobile-scene .phone-menu{font-size:12px}
.website-panel .mobile-scene .phone-hero>b{font-size:27px;line-height:1.03}
.website-panel .mobile-scene .phone-text{font-size:9px;line-height:1.5;color:#273e3b;margin:15px 0 17px}
.website-panel .mobile-scene .phone-hero img{display:none}
.website-panel .mobile-scene .phone-cta{font-size:8px;padding:10px 12px;max-width:150px}
.website-panel .mobile-scene .phone-footer{font-size:5px;color:#344c45;margin-top:26px}
@media(max-width:700px){
 .website-panel .mobile-scene .mock-phone{width:min(100%,150px);padding:5px;border-width:3px;border-radius:20px}
 .website-panel .mobile-scene .phone-content{min-height:265px;padding:11px 9px;border-radius:11px}
 .website-panel .mobile-scene .phone-nav{margin-bottom:27px}
 .website-panel .mobile-scene .phone-brand{font-size:12px}
 .website-panel .mobile-scene .phone-brand small{font-size:4px}
 .website-panel .mobile-scene .phone-menu{font-size:8px}
 .website-panel .mobile-scene .phone-hero>b{font-size:20px}
 .website-panel .mobile-scene .phone-text{font-size:7px;margin:10px 0 12px}
 .website-panel .mobile-scene .phone-cta{font-size:6px;padding:7px 9px}
 .website-panel .mobile-scene .phone-footer{font-size:4px;margin-top:17px}
}

.website-panel .mobile-scene .phone-menu{display:inline-block;background:#17171f;color:#fff;border-radius:20px;padding:7px 8px;font-size:6px;white-space:nowrap}@media(max-width:700px){.website-panel .mobile-scene .phone-menu{font-size:4.5px;padding:5px 6px}}