/* Product-page presentation, separate from the interactive X4 interface. */
.x4-intro { max-width:1280px; display:grid; grid-template-columns:1fr 1.08fr; gap:65px; align-items:center; padding:40px 32px 35px!important; text-align:start; }
.control4-hero-copy { padding-block:15px; }
.control4-hero-copy .technology-link { font-size:12px; }
.control4-hero-copy .control4-brand-logo { width:210px; margin:30px 0; }
.control4-hero-copy h1 { font-size:clamp(43px,4.5vw,66px); margin:28px 0; letter-spacing:-.055em; }
.control4-hero-copy .control4-introduction { margin:0; font-size:16px; line-height:1.8; max-width:470px; }
.control4-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:28px; }
.control4-hero-actions .control4-hero-cta { margin:0; padding:14px 20px; }
.control4-hero-photo { height:570px; position:relative; border-radius:25px; overflow:hidden; background:#d6cdbf; }
.control4-hero-photo img { width:100%; height:100%; object-fit:cover; object-position:53% center; }
.control4-hero-photo::after { content:''; position:absolute; inset:60% 0 0; background:linear-gradient(transparent,#0f121ecc); }
.control4-hero-photo figcaption { position:absolute; inset-inline:30px; bottom:30px; color:#fff; z-index:1; }
.control4-hero-photo figcaption span { display:block; font-size:10px; letter-spacing:.15em; margin-bottom:10px; }
.control4-hero-photo figcaption strong { font-weight:500; font-size:23px; letter-spacing:-.02em; }
.control4-system-strip { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:20px; padding:27px 20px; color:var(--color-muted); font-size:12px; }
.control4-system-strip i { width:3px; height:3px; border-radius:50%; background:var(--color-line-strong); }
.control4-benefits { max-width:1216px; padding:40px 20px 75px; gap:42px; }
.control4-benefits article { padding-inline-start:20px; border-inline-start:1px solid var(--color-line); }
.control4-benefits article > span { color:var(--color-accent-200); }
.control4-benefits h2 { font-size:22px; }
.x4-experience { max-width:1120px; border-radius:28px; padding:35px 50px 20px; background:var(--color-ink-2); scroll-margin-top:calc(var(--header-height) + 20px); }
.control4-demo-intro { padding:10px 0 34px; }
.control4-demo-intro h2 { font-size:44px; letter-spacing:-.04em; }
.x4-demo-tools { max-width:800px; margin:0 auto 16px; }
.x4-device-stage { max-width:800px; margin-inline:auto; }
.x4-demo-caption { max-width:800px; margin:auto; }
.x4-demo-tools .x4-device-picker { background:var(--color-ink); }
.control4-installation { max-width:1160px; margin:90px auto 65px; padding:0 24px; display:grid; grid-template-columns:1fr 1fr; gap:90px; }
.control4-kicker { font-size:10px; letter-spacing:.12em; color:var(--color-muted); }
.control4-install-copy h2 { font-size:clamp(32px,3.3vw,44px); line-height:1.15; margin:18px 0 24px; max-width:430px; }
.control4-install-copy p { color:var(--color-muted); font-size:15px; line-height:1.8; max-width:400px; margin-bottom:20px; }
.control4-install-copy .technology-link { font-size:13px; }
.control4-install-steps { list-style:none; margin:0; padding:0; }
.control4-install-steps li { display:flex; gap:24px; padding:24px 0; border-bottom:1px solid var(--color-line); }
.control4-install-steps li:first-child { padding-top:0; }
.control4-install-steps li > span { font-size:12px; color:var(--color-accent-200); padding-top:6px; }
.control4-install-steps h3 { font-size:21px; letter-spacing:-.025em; margin-bottom:10px; }
.control4-install-steps p { color:var(--color-muted); font-size:14px; line-height:1.75; }
.control4-faq { max-width:1160px; margin:0 auto 65px; padding:0 24px; display:grid; grid-template-columns:1fr 1fr; gap:90px; }
.control4-faq h2 { font-size:28px; }
.control4-faq details { border-bottom:1px solid var(--color-line); }
.control4-faq summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 0; font-size:14px; font-weight:500; }
.control4-faq summary::-webkit-details-marker { display:none; }
.control4-faq summary span { font-size:22px; font-weight:400; transition:transform .2s; }
.control4-faq details[open] summary span { transform:rotate(45deg); }
.control4-faq details p { font-size:14px; color:var(--color-muted); line-height:1.8; padding-bottom:20px; }
.x4-page-end { max-width:1120px; margin:0 auto 40px; background:var(--color-ink-2); border-radius:28px; padding:55px 24px 40px; }
.x4-page-end h2 { font-size:clamp(30px,3.4vw,43px); }
@media(max-width:1199px) { .x4-experience, .x4-page-end { margin-inline:24px; } .x4-intro { gap:32px; } .control4-hero-photo { height:540px; } }
@media(max-width:900px) { .x4-intro { grid-template-columns:1fr; max-width:760px; gap:28px; } .control4-hero-copy .control4-introduction { max-width:600px; } .control4-hero-copy h1 { font-size:54px; } .control4-hero-photo { height:390px; } .control4-installation, .control4-faq { gap:40px; } }
@media(max-width:767px) {
 .x4-intro { padding:15px 24px 24px!important; }
 .control4-hero-copy { padding:0; }
 .control4-hero-copy .control4-brand-logo { width:180px; margin:25px 0; }
 .control4-hero-copy h1 { font-size:43px; margin:22px 0; }
 .control4-hero-copy .control4-introduction { font-size:15px; }
 .control4-hero-actions { gap:10px 20px; }
 .control4-hero-photo { height:340px; border-radius:19px; }
 .control4-hero-photo figcaption { inset-inline:23px; bottom:23px; }
 .control4-hero-photo figcaption strong { font-size:20px; }
 .control4-system-strip { gap:12px; font-size:10px; padding:20px; }
 .control4-benefits { padding:25px 24px 40px; gap:26px; }
 .control4-benefits article { border:0; padding:0; }
 .control4-benefits h2 { font-size:20px; }
 .x4-experience { margin-inline:12px; padding:28px 12px 12px; border-radius:22px; }
 .control4-demo-intro h2 { font-size:32px; }
 .control4-demo-intro > p { max-width:290px; font-size:13px; }
 .x4-demo-caption { font-size:11px; }
 .x4-demo-caption > span { font-size:9px; }
 .control4-installation { margin:55px auto 35px; grid-template-columns:1fr; gap:28px; }
 .control4-install-copy h2 { font-size:35px; }
 .control4-faq { margin-bottom:40px; grid-template-columns:1fr; gap:15px; }
 .control4-faq h2 { font-size:27px; }
 .x4-page-end { margin-inline:12px; padding:38px 20px 25px; border-radius:22px; }
}