/* Original Example Home Care concept. Clay is a visual reference only.
   Scoped to the fictional walkthrough; Timberpoint's hero is unchanged. */
.website-panel{display:flex;flex-direction:column;height:auto;min-height:max(920px,100svh);padding:116px 5% 42px}
.website-panel .panel-heading{position:relative;inset:auto}
.website-panel .device-stage{position:relative;inset:auto;display:block;width:min(100%,960px);margin:34px auto 40px;perspective:none}
.website-panel .device-shadow{display:none}
.website-panel .laptop{width:100%;transform:none}
.website-panel .laptop-screen{border:6px solid #24252b;border-bottom-width:9px;border-radius:14px 14px 5px 5px;box-shadow:0 22px 65px #2024361c}
.website-panel .browser-chrome{height:28px;background:#ededf0;color:#61616b;font-size:7px}
.website-panel .browser-chrome>i{background:#b4b4bf;width:5px;height:5px}
.website-panel .laptop-base{height:9px;background:linear-gradient(#d8dce2,#8f99a5);box-shadow:0 5px 8px #19233320}
.website-panel .laptop-base:before{background:#8f98a1;height:3px}
.website-panel .walkthrough-stage{min-height:440px;background:#f3f3f5}
.website-panel .website-preview{padding:28px 34px 0;background:#f3f3f5;color:#16161d}
.website-panel .preview-nav{font-size:9px;letter-spacing:0;gap:16px}
.website-panel .preview-nav>span:first-child{font-size:19px;font-weight:750;letter-spacing:-.065em;text-transform:lowercase;line-height:1.1}
.website-panel .preview-nav em{font-size:7px;font-style:normal;letter-spacing:.14em;display:block;margin-top:4px;text-transform:uppercase;font-weight:550}
.website-panel .preview-nav b{border-radius:30px;background:#17171f;color:#fff;padding:10px 13px;font-weight:600}
.website-panel .preview-hero{grid-template-columns:1.08fr 1fr;gap:14px;padding:18px 0 14px;min-height:300px}
.website-panel .preview-eyebrow{font-size:8px;letter-spacing:.15em;color:#656570;margin-bottom:19px}
.website-panel .preview-hero h3{font-family:inherit;font-weight:650;font-size:clamp(30px,3.9vw,56px);line-height:1.02;letter-spacing:-.065em;color:#17171f}
.website-panel .preview-hero p{color:#686872;font-size:11px;line-height:1.5;margin:19px 0 22px}
.website-panel .preview-cta{background:#17171f;color:#fff;border-radius:28px;font-size:9px;padding:12px 15px;font-weight:550;display:inline-flex;align-items:center;gap:20px}
.website-panel .preview-photo{display:flex;flex-direction:column;justify-content:center;align-items:center;background:transparent;aspect-ratio:auto;min-height:290px;position:relative}
.website-panel .preview-photo img{position:relative;inset:auto;display:block;width:100%;height:auto;max-height:300px;object-fit:contain;border-radius:0;filter:none}
.website-panel .preview-photo>span{position:static;background:none;color:#747480;font-size:6px;letter-spacing:.12em;padding:0;align-self:center;margin-top:-8px}
.website-panel .preview-footer{border-color:#dcdce2;color:#747480;padding:18px 0;font-size:8px;letter-spacing:0;gap:12px}
.website-panel .panel-bottom{position:relative;inset:auto;margin-top:auto}
.website-panel .walkthrough-choice.is-selected{color:#17171f;border-bottom-color:#17171f}
.website-panel .walkthrough-choice:hover{color:#4755d6}
.website-panel .mock-scene{min-height:440px;background:#f3f3f5;color:#17171f;padding:32px 9%;gap:32px}
.website-panel .mock-copy>strong{font-family:inherit;font-size:clamp(26px,3.2vw,43px);font-weight:650;letter-spacing:-.06em;color:#17171f}
.website-panel .mock-copy p{font-size:11px;color:#686872;margin:18px 0 28px}
.website-panel .mock-kicker{color:#747480;letter-spacing:.12em;font-size:8px}
.website-panel .mock-watermark{color:#747480;font-size:7px}
.website-panel .mock-phone{width:150px;border-color:#25252e;background:#25252e;border-radius:23px;box-shadow:0 18px 32px #2f24541c}
.website-panel .phone-content{background:#fafafa;color:#17171f;min-height:270px;padding:12px;border-radius:12px}
.website-panel .phone-content img{height:105px;object-fit:contain;background:#f3f3f5;border-radius:6px}
.website-panel .phone-nav{font-size:6px}
.website-panel .phone-label{font-size:5px;letter-spacing:.08em;color:#777781}
.website-panel .phone-content b{font-family:inherit;font-size:20px;font-weight:650;letter-spacing:-.055em;line-height:1.02}
.website-panel .phone-text{color:#6b6b75;font-size:6px;line-height:1.5}
.website-panel .phone-cta{background:#17171f;color:#fff;border-radius:20px;font-size:6px;padding:8px 10px}
.website-panel .mock-inquiry{background:#fff;border-color:#e2e2e8;border-radius:15px;max-width:280px;padding:26px;box-shadow:0 18px 38px #30255010}
.website-panel .mock-inquiry>b{font-family:inherit;font-weight:650;font-size:30px;letter-spacing:-.055em;color:#17171f}
.website-panel .mock-inquiry .mock-kicker{font-size:7px;color:#747480}
.website-panel .mock-input{color:#686872;background:#f7f7f9;border:0;border-bottom:1px solid #dddde4;border-radius:5px;padding:12px;font-size:9px;margin-top:9px;gap:8px}
.website-panel .mock-submit{background:#17171f;color:#fff;border-radius:22px;padding:12px;font-size:9px;margin-top:16px}
.website-panel .mock-inquiry small{color:#747480;font-size:7px;line-height:1.5}
@media(max-width:700px){
 .website-panel{min-height:0;padding:100px 5% 45px}
 .website-panel .device-stage{margin:30px auto 30px;width:100%}
 .website-panel .laptop-screen{border-width:4px;border-bottom-width:6px;border-radius:9px 9px 3px 3px}
 .website-panel .browser-chrome{height:19px;font-size:4px;gap:3px;padding:0 6px}
 .website-panel .browser-chrome>i{width:3px;height:3px}
 .website-panel .walkthrough-stage,.website-panel .mock-scene{min-height:320px}
 .website-panel .website-preview{padding:15px 13px 0}
 .website-panel .preview-nav{font-size:5px;gap:7px}
 .website-panel .preview-nav>span:first-child{font-size:12px}
 .website-panel .preview-nav em{font-size:4px;letter-spacing:.1em;margin-top:3px}
 .website-panel .preview-nav b{padding:6px 7px}
 .website-panel .preview-hero{min-height:185px;padding:12px 0 8px;gap:5px;grid-template-columns:1.15fr 1fr}
 .website-panel .preview-eyebrow{font-size:4px;letter-spacing:.08em;margin-bottom:12px}
 .website-panel .preview-hero h3{font-size:clamp(19px,5.7vw,31px)}
 .website-panel .preview-hero p{font-size:6px;margin:12px 0 14px}
 .website-panel .preview-cta{font-size:5px;padding:8px 9px;gap:9px}
 .website-panel .preview-photo{min-height:160px}
 .website-panel .preview-photo img{max-height:180px}
 .website-panel .preview-photo>span{font-size:3px;letter-spacing:.06em;margin-top:-3px;text-align:center}
 .website-panel .preview-footer{font-size:4px;padding:12px 0;gap:8px}
 .website-panel .mock-scene{padding:22px 7%;gap:14px}
 .website-panel .mock-copy>strong{font-size:clamp(19px,5.4vw,28px)}
 .website-panel .mock-copy p{font-size:7px;margin:12px 0 18px}
 .website-panel .mock-kicker,.website-panel .mock-watermark{font-size:5px}
 .website-panel .mock-phone{width:100px;border-radius:17px;padding:5px;border-width:3px}
 .website-panel .phone-content{padding:7px;min-height:190px;border-radius:8px}
 .website-panel .phone-content img{height:64px}
 .website-panel .phone-nav{font-size:4px}
 .website-panel .phone-label{font-size:3px}
 .website-panel .phone-content b{font-size:14px}
 .website-panel .phone-text,.website-panel .phone-cta{font-size:4px}
 .website-panel .phone-cta{padding:6px 7px}
 .website-panel .mock-inquiry{padding:14px;max-width:155px;border-radius:10px}
 .website-panel .mock-inquiry>b{font-size:19px;margin-bottom:12px}
 .website-panel .mock-inquiry .mock-kicker{font-size:4px}
 .website-panel .mock-input{font-size:5px;padding:8px;margin-top:6px}
 .website-panel .mock-submit{font-size:5px;padding:8px;margin-top:10px}
 .website-panel .mock-inquiry small{font-size:4px}
}

/* Matching concept card on the examples page. */
.example-website .website-specimen{background:#f3f3f5;color:#17171f}
.example-website .specimen-bar{border-color:#dcdce2;letter-spacing:0}
.example-website .specimen-content{width:60%}
.example-website .specimen-content>strong{font-family:inherit;font-weight:650;letter-spacing:-.06em;line-height:1.02}
.example-website .specimen-content p{color:#686872}
.example-website .specimen-cta{background:#17171f;color:#fff;border-radius:25px}
.example-website .specimen-kicker,.example-website .specimen-label{color:#747480}
.example-website .specimen-house{border-radius:0;overflow:visible;opacity:1}
.example-website .specimen-house img{object-fit:contain}

/* Matched mobile and inquiry art direction; static fictional interfaces. */
.website-panel .walkthrough-stage,.website-panel .mock-scene{min-height:460px}
.website-panel .mock-scene{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:24px 8%;gap:28px}
.website-panel .mock-copy{max-width:300px}
.website-panel .mock-copy>strong{font-size:clamp(29px,3.2vw,43px);font-weight:600;line-height:1.06}
.website-panel .mock-copy p{font-size:13px;line-height:1.65;max-width:255px;margin:20px 0 28px}
.website-panel .mock-kicker{font-size:8px;letter-spacing:.15em}
.website-panel .mock-phone{width:174px;padding:7px;border:4px solid #25252e;border-radius:26px;box-shadow:0 18px 38px #2521341a}
.website-panel .phone-content{padding:13px 12px 12px;border-radius:15px;min-height:315px;background:#fafafa}
.website-panel .phone-nav{margin-bottom:16px;align-items:center}
.website-panel .phone-brand{font-size:14px;letter-spacing:-.06em;line-height:1;font-weight:700}
.website-panel .phone-brand small{display:block;font-size:4px;letter-spacing:.13em;margin-top:4px}
.website-panel .phone-menu{font-size:10px}
.website-panel .phone-hero>b{font-size:23px;line-height:1.02}
.website-panel .phone-text{font-size:6.5px;line-height:1.5;margin:10px 0 4px}
.website-panel .phone-hero img{height:93px;border-radius:0;background:transparent;margin:4px 0 8px}
.website-panel .phone-cta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;font-size:6px;border-radius:18px}
.website-panel .phone-footer{display:block;font-size:4px;letter-spacing:.08em;color:#747480;margin-top:11px;text-align:center}
.website-panel .mock-inquiry{width:100%;max-width:300px;padding:25px;border-radius:18px;border:1px solid #e0e0e6;box-shadow:0 18px 42px #2521340c}
.website-panel .inquiry-brand{display:flex;align-items:baseline;gap:8px;font-size:16px;font-weight:700;letter-spacing:-.06em;margin-bottom:23px}
.website-panel .inquiry-brand>span{font-size:5px;letter-spacing:.12em;color:#747480;font-weight:500}
.website-panel .mock-inquiry .mock-kicker{font-size:6px;margin-bottom:10px}
.website-panel .mock-inquiry>b{font-size:29px;line-height:1.03;margin-bottom:23px;font-weight:600}
.website-panel .mock-field{margin-top:15px}
.website-panel .mock-field>span{display:block;font-size:7px;font-weight:550;color:#454550;margin-bottom:6px}
.website-panel .mock-input{font-size:8px;background:#f6f6f8;padding:11px 10px;border:1px solid #e6e6ec;border-radius:7px;margin:0;justify-content:space-between;color:#797984}
.website-panel .mock-submit{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:8px;padding:12px 14px;margin-top:20px}
.website-panel .mock-inquiry small{font-size:6px;line-height:1.65;margin-top:13px;color:#747480;text-align:center}
@media(max-width:700px){
 .website-panel .walkthrough-stage,.website-panel .mock-scene{min-height:340px}
 .website-panel .mock-scene{padding:20px 6%;gap:15px}
 .website-panel .mock-copy>strong{font-size:clamp(18px,5vw,28px)}
 .website-panel .mock-copy p{font-size:7px;line-height:1.65;margin:13px 0 20px}
 .website-panel .mock-kicker,.website-panel .mock-watermark{font-size:4.5px}
 .website-panel .mock-phone{width:108px;padding:5px;border-width:3px;border-radius:18px}
 .website-panel .phone-content{padding:8px 7px;border-radius:10px;min-height:216px}
 .website-panel .phone-nav{margin-bottom:11px}
 .website-panel .phone-brand{font-size:9px}
 .website-panel .phone-brand small{font-size:3px;margin-top:3px}
 .website-panel .phone-menu{font-size:7px}
 .website-panel .phone-hero>b{font-size:15px}
 .website-panel .phone-text{font-size:4.5px;margin:7px 0 3px}
 .website-panel .phone-hero img{height:65px;margin:3px 0 6px}
 .website-panel .phone-cta{font-size:4px;padding:6px;gap:5px}
 .website-panel .phone-footer{font-size:2.8px;margin-top:8px}
 .website-panel .mock-inquiry{padding:13px;max-width:165px;border-radius:11px}
 .website-panel .inquiry-brand{font-size:11px;margin-bottom:14px;gap:4px}
 .website-panel .inquiry-brand>span{font-size:3px}
 .website-panel .mock-inquiry .mock-kicker{font-size:4px;margin-bottom:7px}
 .website-panel .mock-inquiry>b{font-size:clamp(14px,4.2vw,20px);margin-bottom:14px}
 .website-panel .mock-field{margin-top:10px}
 .website-panel .mock-field>span{font-size:4.5px;margin-bottom:4px}
 .website-panel .mock-input{font-size:4.5px;padding:7px 6px;gap:5px;border-radius:4px}
 .website-panel .mock-submit{font-size:4.5px;padding:8px;margin-top:13px;gap:5px}
 .website-panel .mock-inquiry small{font-size:3.8px;margin-top:9px}
}