/* Solar4life Site — brand pages, the showcase layout (§ J; modules/77-brand-show.php). Rounded, no dead space, one step smaller on phones. */
.s4l-bs{--bs-ink:#173c30;--bs-mint:#b9f0aa;--bs-mint2:#86df94;--bs-cream:#fffef9;--bs-line:#d7e0d0;--bs-muted:#5f6f66;--bs-r:26px;color:var(--bs-ink)}
.s4l-bs *{box-sizing:border-box}
.s4l-bs h2{font-size:clamp(26px,3.2vw,36px);line-height:1.15;margin:0 0 14px;letter-spacing:-.01em}
.s4l-bs h3{font-size:19px;line-height:1.3;margin:0 0 6px}
.s4l-bs-k{margin:0 0 6px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#2f7a52}
.s4l-bs-sec{margin:26px 0 0;padding:clamp(22px,3.5vw,38px);background:var(--bs-cream);border:1px solid var(--bs-line);border-radius:var(--bs-r)}
.s4l-bs-btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:999px;background:var(--bs-mint);color:var(--bs-ink)!important;font-weight:800;text-decoration:none!important;border:1.5px solid var(--bs-mint);transition:transform .15s,background .15s}
.s4l-bs-btn:hover{background:#cdf5c2;transform:translateY(-1px)}
.s4l-bs-btn.is-ghost{background:transparent;border-color:currentColor;color:inherit!important}
.s4l-bs-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 0}
.s4l-bs-acts .s4l-sl-add{border-radius:999px}
/* the top: the brand in dark green, its own products beside it */
.s4l-bs-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:center;margin:14px 0 0;padding:clamp(24px,4vw,48px);border-radius:var(--bs-r);background:radial-gradient(120% 140% at 100% 0,#2e6b52 0,#173c30 55%,#10291f 100%);color:#fbfbf0;overflow:hidden}
.s4l-bs-hero:not(.has-pics){grid-template-columns:1fr}
.s4l-bs-kicker{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--bs-mint)}
.s4l-bs-logo{margin:0 0 12px}.s4l-bs-logo-img{max-height:48px;width:auto;filter:brightness(0) invert(1);opacity:.95}
.s4l-bs-name{margin:0;font-size:clamp(40px,6vw,68px);line-height:1;letter-spacing:-.02em;color:#fff;border:0;padding:0}
.s4l-bs-tag{margin:14px 0 0;font-size:clamp(18px,2.1vw,23px);line-height:1.35;font-weight:600;color:#e9f6e3;max-width:36em}
.s4l-bs-blurb{margin:12px 0 0;color:#cfe6c8;font-size:16px;line-height:1.55;max-width:42em}
.s4l-bs-hero .s4l-bs-btn.is-ghost{color:#fbfbf0!important;border-color:rgba(251,251,240,.55)}
.s4l-bs-pics{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);min-height:260px}
.s4l-bs-pics.n1{grid-template-columns:1fr}.s4l-bs-pics.n3 figure:first-child{grid-row:span 2}
.s4l-bs-pics figure{margin:0;background:#fffef9;border-radius:20px;display:flex;align-items:center;justify-content:center;padding:14px;overflow:hidden;min-height:120px}
.s4l-bs-pics img{max-width:100%;max-height:300px;width:auto;height:auto;object-fit:contain}
/* the facts in tiles */
.s4l-bs-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:14px 0 0;padding:0}
.s4l-bs-facts div{margin:0;padding:14px 16px;background:var(--bs-cream);border:1px solid var(--bs-line);border-radius:18px}
.s4l-bs-facts dt{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--bs-muted)}
.s4l-bs-facts dd{margin:4px 0 0;font-size:16.5px;font-weight:700;line-height:1.35}
/* why we install it */
.s4l-bs-why{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:start}
.s4l-bs-lead{font-size:17.5px;line-height:1.6;margin:0}.s4l-bs-lead p{margin:0 0 10px}
.s4l-bs-makes{margin:12px 0 0;color:var(--bs-muted);line-height:1.55}.s4l-bs-site{margin:10px 0 0}.s4l-bs-site a{font-weight:700;color:var(--bs-ink)}
.s4l-bs-points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.s4l-bs-points li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:#eef6ea;border-radius:18px}
.s4l-bs-points span{flex:none;width:32px;height:32px;border-radius:50%;background:var(--bs-ink);color:var(--bs-mint);font-weight:800;display:flex;align-items:center;justify-content:center}
.s4l-bs-points p{margin:4px 0 0;line-height:1.5;font-weight:600}
/* the flagship */
.s4l-bs-flag{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,3vw,40px);align-items:center;background:linear-gradient(180deg,#fffef9,#f3f8ef)}
.s4l-bs-flag-art .s4lc-artwrap{margin:0}.s4l-bs-flag-art .s4lc-art{border-radius:22px;min-height:260px}
.s4l-bs-flag h2 a{color:var(--bs-ink);text-decoration:none}
.s4l-bs-ticks{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.s4l-bs-ticks li{position:relative;padding-left:28px;line-height:1.45}
.s4l-bs-ticks li::before{content:"";position:absolute;left:2px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--bs-mint2)}
.s4l-bs-ticks li::after{content:"";position:absolute;left:7px;top:6px;width:5px;height:8px;border:solid var(--bs-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.s4l-bs-price{margin:14px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}.s4l-bs-price b{font-size:28px}.s4l-bs-price span,.s4l-bs-price small{color:var(--bs-muted)}
/* packages, sideways on a phone */
.s4l-bs-pkgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.s4l-bs-pkg{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:20px;background:#fff;border:1px solid var(--bs-line)}
.s4l-bs-pkg h3{font-size:18px;margin:0}.s4l-bs-pkg-tags{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bs-muted)}
.s4l-bs-pkg-spec{margin:0;display:flex;gap:12px;flex-wrap:wrap;color:var(--bs-muted)}.s4l-bs-pkg-spec b{color:var(--bs-ink)}
.s4l-bs-pkg-pay{margin:auto 0 0;padding-top:6px}.s4l-bs-pkg-pay b{font-size:24px}.s4l-bs-pkg-pay span{color:var(--bs-muted)}
.s4l-bs-pkg-go{font-weight:700;color:var(--bs-ink)}
.s4l-bs-badge{align-self:flex-start;padding:3px 10px;border-radius:999px;background:var(--bs-mint);font-size:12px;font-weight:800}
.s4l-bs-typehead{margin:18px 0 10px}
/* know before you buy */
.s4l-bs-know{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.s4l-bs-know article{padding:18px 20px;border-radius:20px;background:#fff;border:1px solid var(--bs-line)}
.s4l-bs-know article.is-watch{background:#fff8ec;border-color:#f0dcb4}
.s4l-bs-know p{margin:0;line-height:1.6}
.s4l-bs-ico{display:inline-flex;width:40px;height:40px;border-radius:12px;align-items:center;justify-content:center;background:#e3f4e8;color:var(--bs-ink);margin-bottom:8px}
.s4l-bs-know .is-watch .s4l-bs-ico{background:#fbe7c4;color:#8a5a00}
/* reviews */
.s4l-bs-revs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.s4l-bs-revs a{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:18px;background:var(--bs-ink);color:#fbfbf0;text-decoration:none}
.s4l-bs-revs span{color:var(--bs-mint);font-weight:700}
/* support */
.s4l-bs-support{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:start}
.s4l-bs-support p{line-height:1.6}
.s4l-bs-maker{padding:18px 20px;border-radius:20px;background:#fff;border:1px solid var(--bs-line)}
.s4l-bs-maker-h{margin:0 0 8px;font-weight:800}
.s4l-bs-maker ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.s4l-bs-maker li{display:flex;align-items:center;gap:10px;word-break:break-word}.s4l-bs-maker .s4l-bs-ico{margin:0;width:34px;height:34px;flex:none}
.s4l-bs-maker a{color:var(--bs-ink);font-weight:700}
.s4l-bs-serial{margin:12px 0 0;font-size:14.5px;color:var(--bs-muted)}
/* milestones: a line across on a computer, down on a phone */
.s4l-bs-tl{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);gap:14px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.s4l-bs-tl li{position:relative;padding:18px 16px 16px;border-radius:18px;background:#fff;border:1px solid var(--bs-line);scroll-snap-align:start}
.s4l-bs-tl li::before{content:"";position:absolute;top:-1px;left:16px;right:16px;height:4px;border-radius:0 0 4px 4px;background:var(--bs-mint2)}
.s4l-bs-tl b{display:block;font-size:22px}.s4l-bs-tl p{margin:6px 0 0;line-height:1.5}
.s4l-bs-news{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.s4l-bs-news article{padding:16px 18px;border-radius:18px;background:#fff;border:1px solid var(--bs-line)}
.s4l-bs-news h3{font-size:17px}.s4l-bs-news p{margin:0 0 6px;line-height:1.5}
.s4l-bs-date{font-size:13px;font-weight:800;color:var(--bs-muted)}.s4l-bs-src a{font-weight:700;color:var(--bs-ink)}
/* questions */
.s4l-bs-faq details{border-top:1px solid var(--bs-line);padding:0}
.s4l-bs-faq details:last-child{border-bottom:1px solid var(--bs-line)}
.s4l-bs-faq summary{cursor:pointer;list-style:none;padding:15px 36px 15px 0;font-weight:700;font-size:17px;position:relative}
.s4l-bs-faq summary::-webkit-details-marker{display:none}
.s4l-bs-faq summary::after{content:"+";position:absolute;right:6px;top:10px;font-size:24px;font-weight:400}
.s4l-bs-faq details[open] summary::after{content:"\2212"}
.s4l-bs-faq details p{margin:0 0 16px;line-height:1.6;max-width:62em}
.s4l-bs .s4lc-cta{border-radius:var(--bs-r)}
.s4l-bs-btn:focus-visible,.s4l-bs a:focus-visible,.s4l-bs-faq summary:focus-visible{outline:3px solid var(--bs-mint2);outline-offset:2px}
@media (max-width:900px){.s4l-bs-hero,.s4l-bs-why,.s4l-bs-flag,.s4l-bs-support{grid-template-columns:1fr}.s4l-bs-pics{min-height:0}.s4l-bs-pics img{max-height:200px}}
@media (max-width:600px){
.s4l-bs h2{font-size:24px}.s4l-bs h3{font-size:17px}
.s4l-bs-sec{margin-top:16px;padding:20px 16px;border-radius:22px}
.s4l-bs-hero{padding:24px 18px;border-radius:22px}.s4l-bs-name{font-size:40px}.s4l-bs-tag{font-size:17px}.s4l-bs-blurb{font-size:15px}
.s4l-bs-acts .s4l-bs-btn{flex:1 1 100%}
.s4l-bs-pics{grid-template-columns:repeat(3,minmax(0,1fr))}.s4l-bs-pics.n1{grid-template-columns:1fr}.s4l-bs-pics.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.s4l-bs-pics.n3 figure:first-child{grid-row:auto}.s4l-bs-pics figure{min-height:90px;padding:8px;border-radius:14px}.s4l-bs-pics img{max-height:110px}
.s4l-bs-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.s4l-bs-facts div{padding:11px 12px;border-radius:14px}.s4l-bs-facts dd{font-size:15px}
.s4l-bs-lead{font-size:16px}.s4l-bs-know{grid-template-columns:1fr}
.s4l-bs-pkgs{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.s4l-bs-pkg{scroll-snap-align:start}
.s4l-bs-tl{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible}.s4l-bs-flag-art .s4lc-art{min-height:190px}.s4l-bs-price b{font-size:24px}.s4l-bs-faq summary{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.s4l-bs-btn{transition:none}}
/* 5.16.1: a wide photo (a house, a banner) fills its tile instead of floating in white; long facts fold behind "More" */
.s4l-bs-pics figure.is-wide{padding:0;position:relative}
.s4l-bs-pics figure.is-wide img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.s4l-bs-flag-art .s4lc-art.is-wide{padding:0}
.s4l-bs-flag-art .s4lc-art.is-wide img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;mix-blend-mode:normal}
.s4l-bs-flag-art .s4lc-brandmark{z-index:3}
.s4l-bs-fmore{margin:6px 0 0;font-weight:600}
.s4l-bs-fmore summary{display:inline-flex;align-items:center;justify-content:flex-start;gap:4px;width:auto;padding:0;cursor:pointer;list-style:none;font-size:13.5px;font-weight:800;color:var(--bs-ink);text-decoration:underline;text-underline-offset:3px;min-height:28px}
.s4l-bs-fmore summary::-webkit-details-marker{display:none}
.s4l-bs-fmore summary::after{content:"\25BE";font-size:12px;text-decoration:none;margin:0;width:auto;position:static;transform:none}
.s4l-bs-fmore[open] summary{display:none}
.s4l-bs-fmore span{display:block;font-size:15px;line-height:1.45;font-weight:600}