/* Solar4life Site — additions on top of catalogue.css (kept separate so the original stylesheet is never edited). */

/* Product art: the photo fills the tinted panel; the brand mark sits top right */
.s4lc-artwrap{position:relative}
.s4lc-art.has-photo{background:#f4f6f0}
.s4lc-art img{width:100%;height:100%;object-fit:contain;padding:22px 20px;box-sizing:border-box;display:block}
.s4lc-art.no-photo{background:linear-gradient(135deg,#e8eddf 0%,#dfe7d6 100%)}
.s4lc-art-word{font-size:15px;font-weight:600;color:#3f5546;text-align:center;padding:0 24px;line-height:1.35;max-width:26ch}
.s4lc-brandmark,.sd-product-photo .s4lc-brandmark{left:auto;right:12px;top:12px}
.sd-product-photo .s4lc-brandmark{right:16px;top:16px}
.s4lc-card .s4lc-brandmark{right:9px;top:9px}
.s4lc-card .s4lc-card-art{display:block;text-decoration:none;margin:2px 0 4px}
.s4lc-card .s4lc-art{height:190px;margin:0}
.s4lc-card .s4lc-art img{padding:16px}
.sd-product-photo .s4lc-art{height:410px;border-radius:120px 12px 12px 12px}

/* The catalogue's closing prompt: heading and text on the left, the buttons on the right */
.s4lc-cta h2{color:#fafaf0;margin:8px 0 14px}
.s4lc-cta .s4lc-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.s4lc-cta .s4lc-actions a:not(.button){color:#cfe6c8;text-decoration:underline;text-underline-offset:3px}

/* Package cards on the packages list: the way into a package is the first button */
.s4l-pkg-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.s4l-pkg-actions .s4l-pkg-openbtn{background:#173c30;color:#fafaf0}
.s4l-pkg-actions .s4l-pkg-openbtn:hover{background:#245244}
.s4l-pkg-actions .button.is-secondary{background:#e8f4e8;color:#173c30}
.s4l-pkg h2 a{color:inherit;text-decoration:none}
.s4l-pkg h2 a:hover{text-decoration:underline;text-underline-offset:4px}

/* Package hero: room for the inverter and EV charger tiles */
.s4l-pkgd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.s4l-pkgd-stats li{min-width:0}

/* Brand guide */
.s4lc-brandpage .s4lc-brand-hero .s4lc-brand-wordmark{border-bottom:0;padding-bottom:0}
.s4lc-brandpage .s4lc-brand-facts{margin:26px 0 0}
.s4lc-brandpage .s4lc-brand-typehead{margin-top:26px}

/* Header menus: brand and package entries carry a one-line description */
.wp-block-navigation-item__description{display:block;font-size:.8rem;opacity:.75;margin-top:2px}
.s4lc-art-caption{margin:8px 2px 0;font-size:11px;color:#6d7e65}

/* The tinted photo panel: portrait on cards, centred, the photo filling it, the brand mark inside its top-right corner */
.s4lc-card .s4lc-artwrap{width:min(100%,270px);margin:2px auto 6px}
.s4lc-card .s4lc-artwrap .s4lc-art{aspect-ratio:3/4!important;width:100%!important;height:auto!important;margin:0!important;border-radius:12px}
.s4lc-card .s4lc-artwrap .s4lc-art img{padding:12px}
.s4lc-card .s4lc-artwrap .s4lc-art.has-photo img{object-fit:contain}
.sd-product-photo .s4lc-artwrap{width:min(100%,380px);margin:0 auto}
.sd-product-photo .s4lc-artwrap .s4lc-art{aspect-ratio:3/4!important;width:100%!important;height:auto!important;margin:0!important;border-radius:120px 12px 12px 12px}
.sd-product-photo .s4lc-artwrap .s4lc-art img{padding:26px 22px}

.s4lc-brand-hero .s4lc-brand-makes{color:#cfe6c8;margin-top:10px}
.s4l-pkg-actions .button{font-size:13px;padding:13px 18px;line-height:1.2}

/* ---------- Tesla Powerwall 3 package pages: the system drawing as a wall scene (drawn by site.js) ---------- */
.s4l-pkgd-hero .s4l-pkgd-sys.is-pw{background:linear-gradient(180deg,#fbfbf3 0%,#f3f4ec 100%);padding:12px 12px 0;overflow:hidden}
.s4l-pkgd-sys.is-pw .s4l-pkgd-exist,.s4l-pkgd-sys.is-pw .s4l-pkgd-array{padding-top:14px;padding-bottom:10px;background:linear-gradient(180deg,#d6e6f3 0%,#e9f0ea 100%)}
.s4l-pkgd-sys .s4l-pkgd-asub{margin:2px 0 0;font-size:10px;font-weight:500;letter-spacing:0;text-transform:none;color:#566b4f}
.s4l-pkgd-exist .s4l-pkgd-exgrid{display:flex;justify-content:center;gap:2px;margin:0 auto 7px;transform:perspective(200px) rotateX(24deg);transform-origin:50% 100%;filter:drop-shadow(0 2px 2px rgba(23,60,48,.25))}
.s4l-pkgd-exist .s4l-pkgd-exgrid i{display:block;width:13px;height:20px;border-radius:1px;outline:1px solid #b7c3cf;background:linear-gradient(135deg,#1b2a47 0%,#28446f 55%,#1b2a47 100%);position:relative;overflow:hidden}
.s4l-pkgd-exist .s4l-pkgd-exgrid i::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.12) 3px 4px),repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.1) 4px 5px)}
.s4l-pkgd-sys.is-pw .s4l-pkgd-flow{height:16px;margin:4px auto 0}
.s4l-pkgd-sys.is-pw .s4l-pkgd-acinv{margin-top:2px;margin-bottom:0;background:linear-gradient(180deg,#fff,#eef1f3);border-color:rgba(23,60,48,.16);box-shadow:0 1px 0 #fff inset,0 3px 6px -3px rgba(10,30,22,.35)}
.s4l-pkgd-sys.is-pw .s4l-pkgd-acinv+.s4l-pkgd-flow{margin-top:4px}
.s4l-pkgd-sys.is-pw .s4l-pkgd-pwstack{margin:0 -12px;width:auto}
.s4l-tpw{position:relative}
.s4l-tpw-wall{position:relative;padding:0 12px}
/* The Backup Gateway on the wall, with its conduit running down behind the units */
.s4l-tpw-gw{position:relative;z-index:1;display:flex;align-items:center;gap:8px;margin:2px 0 0 2px;color:#173c30;font-size:10.5px;font-weight:700;line-height:1.15}
.s4l-tpw-gw i{position:relative;flex:none;width:22px;height:30px;border-radius:4px;background:linear-gradient(90deg,#dfe4e7 0%,#fbfcfc 18%,#fff 60%,#e6eaed 100%);border:1px solid rgba(23,60,48,.16);box-shadow:0 1px 0 #fff inset,0 4px 6px -3px rgba(10,30,22,.4)}
.s4l-tpw-gw i::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:#5fe0a8;box-shadow:0 0 4px 1px rgba(95,224,168,.9)}
.s4l-tpw-wall::before{content:"";position:absolute;left:25px;top:32px;bottom:32px;width:2px;background:linear-gradient(180deg,#c3ccd1,#d3d9dc);z-index:0}
/* The units stand on the floor, side by side */
.s4l-tpw-row{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;gap:12px;padding:16px 0 0}
/* The floor the units stand on: a band across the whole card, just under the units' feet */
.s4l-tpw-row::before{content:"";position:absolute;left:-12px;right:-12px;bottom:20px;height:12px;background:linear-gradient(180deg,#d6dcd2 0%,#c3cbbe 100%);box-shadow:0 -1px 0 rgba(255,255,255,.7) inset;z-index:0}
.s4l-tpw-grp{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px}
.s4l-tpw-stage{--n:0;position:relative;display:grid;padding-top:calc(var(--n) * 7px);margin-right:calc(var(--n) * 7px)}
.s4l-tpw-stage>*{grid-area:1/1}
.s4l-tpw-u{position:relative;box-sizing:border-box;width:var(--uw,64px);height:calc(var(--uw,64px) * 1.8);border-radius:calc(var(--uw,64px) * .13);
background:linear-gradient(90deg,#d5dadf 0%,#eef1f3 7%,#fdfdfd 30%,#ffffff 55%,#f5f7f8 84%,#cfd5da 100%);
border:1px solid rgba(23,60,48,.16);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 -3px 0 rgba(23,60,48,.05) inset,0 14px 18px -12px rgba(10,30,22,.55),0 1px 2px rgba(10,30,22,.12)}
.s4l-tpw-u::before{content:"";position:absolute;inset:7% 10% 8%;border-radius:calc(var(--uw,64px) * .09);background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 45%,rgba(23,60,48,.025) 100%);box-shadow:0 0 0 1px rgba(23,60,48,.04)}
.s4l-tpw-u::after{content:"";position:absolute;left:6%;right:6%;bottom:-9px;height:10px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(10,30,22,.32),rgba(10,30,22,0) 68%)}
.s4l-tpw-led{position:absolute;left:50%;top:9%;width:3px;height:30%;margin-left:-1.5px;border-radius:3px;background:linear-gradient(180deg,#d3fbea,#6fe3b6 55%,#47cf9b);box-shadow:0 0 6px 1px rgba(111,227,182,.9),0 0 16px rgba(111,227,182,.5);animation:s4ltpwled 2.8s ease-in-out infinite}
.s4l-tpw-vent{position:absolute;left:22%;right:22%;bottom:7%;height:2px;border-radius:2px;background:rgba(23,60,48,.1);box-shadow:0 1px 0 rgba(255,255,255,.9)}
.s4l-tpw-u.exp{background:linear-gradient(90deg,#cfd5da 0%,#e8ebee 7%,#f8f9fa 30%,#fbfcfc 55%,#f0f2f4 84%,#c9cfd4 100%)}
.s4l-tpw-u.exp .s4l-tpw-led{display:none}
.s4l-tpw-u.behind{transform:translate(calc(var(--o) * 7px),calc(var(--o) * -7px));z-index:calc(4 - var(--o));box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 6px 10px -8px rgba(10,30,22,.5)}
.s4l-tpw-u.behind::after{display:none}
.s4l-tpw-u.pw3{z-index:5}
.s4l-tpw-u.is-new{animation:s4ltpwin .42s cubic-bezier(.2,.8,.3,1) both}
.s4l-tpw-u.behind.is-new{animation:s4ltpwfade .42s ease both}
.s4l-tpw-lab{display:block;box-sizing:border-box;height:26px;text-align:center;font-size:10.5px;line-height:1.2;color:#173c30}
.s4l-tpw-lab b{display:block;font-weight:700}
.s4l-tpw-lab b.s,.s4l-tpw.is-tight .s4l-tpw-lab b.l{display:none}
.s4l-tpw.is-tight .s4l-tpw-lab b.s{display:block}
.s4l-tpw-lab small{display:block;margin-top:1px;font-size:9.5px;font-weight:500;color:#566b4f;white-space:nowrap}
.s4l-tpw.is-tight .s4l-tpw-lab small{font-size:8.5px}
/* Under the scene: what is stacked behind, and the button that adds an Expansion */
.s4l-tpw-floor{height:0}
.s4l-tpw-note{margin:6px 12px 0;text-align:center;font-size:10.5px;color:#566b4f}
.s4l-tpw-actions{margin:6px 12px 12px;text-align:center}
.s4l-tpw-note+.s4l-tpw-actions{margin-top:4px}
.s4l-tpw:not(:has(.s4l-tpw-note)):not(:has(.s4l-tpw-actions)) .s4l-tpw-floor{height:12px}
.s4l-tpw-add{display:inline-flex;align-items:center;gap:6px;margin:0;padding:4px 11px 4px 5px;border-radius:999px;border:1px solid #b9c8b0;background:#fff;color:#173c30;font:600 10.5px/1.2 inherit;font-family:inherit;cursor:pointer;box-shadow:0 1px 2px rgba(10,30,22,.08);transition:border-color .15s,background .15s}
.s4l-tpw-add::before{content:"+";flex:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#173c30;color:#fafaf0;font-size:13px;font-weight:700;line-height:1}
.s4l-tpw-add:hover,.s4l-tpw-add:focus-visible{border-color:#377c50;background:#eef6ee;outline:none}
@keyframes s4ltpwled{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes s4ltpwin{from{opacity:0;transform:translateY(-12px)}}
@keyframes s4ltpwfade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.s4l-tpw-led,.s4l-tpw-u.is-new,.s4l-tpw-u.behind.is-new{animation:none}}

/* Package page: the automatic "add more, save more" box */
.s4l-pkgd-offers .s4l-pkgd-offers-d{margin:2px 0 8px;font-size:13px;color:#566b4f}

/* ---------- Pricing screen switches on the website: sale bar, badges, price lock, rebates line ---------- */
.s4lc-salebar{margin:10px 0 0;padding:10px 16px;border-radius:10px;background:#fff3d6;border:1px solid #f2d27a;color:#4a3a00;font-size:14px;line-height:1.4}
.s4lc-salebar b{color:#173c30}
.s4lc-salebar a{color:#173c30;font-weight:600;white-space:nowrap}
.s4l-pkg,.s4l-hp-card{position:relative}
.s4l-pkg .s4l-pkg-badge,.s4l-hp-card .s4l-pkg-badge{position:absolute;top:14px;right:14px;background:#173c30;color:#fafaf0;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.s4l-pkgd-lock{margin:10px 0 0;font-size:13px;color:#cfe6c8}
.s4l-pkgd-lock b{color:#fbfbf0}
.s4l-pkgd-saleend{margin:6px 0 0;font-size:13px;color:#f5c542;font-weight:600}
.s4l-pkgd-gov{margin:6px 0 0;font-size:13px;color:#cfe6c8}
.s4l-pkgd-gov b{color:#9fe3b6}
.s4l-pkg .s4l-pkg-row.is-deal span:last-child{color:#8a6508;font-weight:600}

/* Product prices: the crossed-out price at the supplier's usual buy and the saving, on the product page and its cards */
.s4lc-prod-price s.s4lc-price-was,.s4lc-card-price s{font-weight:400;opacity:.65;margin-right:.35em}
.s4lc-prod-price .s4lc-price-save,.s4lc-card-price .s4lc-price-save,.s4lp-price .s4lp-save{display:inline-block;margin-left:.45em;padding:.12em .55em;border-radius:999px;background:#fbf1d6;color:#7a5a00;font-size:.78em;font-weight:700;vertical-align:middle}
.s4lp-price .s4lp-was{font-weight:400;opacity:.65;text-decoration:line-through;margin-right:.3em}

/* Solution pages: the headline is the page's one heading (the theme's hidden title is removed) */
.s4lc-sol-hero h1.s4lc-sol-h1{font-size:48px;font-weight:500;line-height:1.1;letter-spacing:-.02em;margin:6px 0 0;max-width:12em;color:#173c30}
@media (max-width:640px){.s4lc-sol-hero h1.s4lc-sol-h1{font-size:34px}}

/* Package page: questions answered from the package's own figures */
.s4l-pkgd-faq .s4l-pkgd-q{border-top:1px solid #dfe3d8;padding:10px 0}
.s4l-pkgd-faq .s4l-pkgd-q:last-of-type{border-bottom:1px solid #dfe3d8}
.s4l-pkgd-faq summary{cursor:pointer;font-weight:600;font-size:16px;line-height:1.4;list-style:none;display:flex;justify-content:space-between;gap:12px;color:#173c30}
.s4l-pkgd-faq summary::-webkit-details-marker{display:none}
.s4l-pkgd-faq summary::after{content:"+";font-weight:400;opacity:.6}
.s4l-pkgd-faq details[open] summary::after{content:"\2212"}
.s4l-pkgd-faq .s4l-pkgd-q p{margin:8px 0 2px;font-size:15px;line-height:1.6;max-width:62ch;opacity:.9}

/* The quote form: when it sits in a wide section (the home page), the empty half beside it explains what happens next */
.s4l-qf-outer{container-type:inline-size}
.s4l-qf-side{display:none}
@container (min-width:880px){
.s4l-qf-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.s4l-qf-side{display:block;padding:8px 0 0}
}
.s4l-qf-side-k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.7;margin:0 0 10px}
.s4l-qf-steps{list-style:none;margin:0 0 28px;padding:0;counter-reset:qf}
.s4l-qf-steps li{position:relative;padding:0 0 16px 44px;counter-increment:qf}
.s4l-qf-steps li::before{content:counter(qf,decimal-leading-zero);position:absolute;left:0;top:2px;width:30px;height:30px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:11px;font-weight:700;opacity:.8}
.s4l-qf-steps strong{display:block;font-size:16px;margin-bottom:2px}
.s4l-qf-steps span{font-size:14px;line-height:1.6;opacity:.85}
.s4l-qf-trust{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.s4l-qf-trust li{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(23,60,48,.12)}
.s4l-qf-side-c{font-size:14px;line-height:1.8;margin:0}
.s4l-qf-side-c a{font-weight:600}
.s4l-pkgd-faq summary::marker{content:""}
/* Home page: the quote section is a two-column grid with nothing in its second column; the form wrapper takes the full row */
.quote.section > .s4l-qf-outer{grid-column:1 / -1;width:100%}

/* Package page: the schedule-of-charges lines that apply to this package */
.s4l-pkgd-extras{margin:14px 0 0;padding:14px 16px;border:1px solid #dfe3d8;border-radius:10px;background:#fbfbf7}
.s4l-pkgd-extras-h{margin:0 0 8px;font-weight:700;font-size:14px}
.s4l-pkgd-extras ul{list-style:none;margin:0;padding:0}
.s4l-pkgd-extras li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-top:1px dashed #e4e8de;font-size:14px}
.s4l-pkgd-extras li:first-child{border-top:0}
.s4l-pkgd-extras li b{white-space:nowrap}
.s4l-pkgd-extras li b.is-q{font-weight:500;opacity:.7}
.s4l-pkgd-extras-f{margin:8px 0 0;font-size:13px;opacity:.85}
.s4l-pkgd-extras,.s4l-pkgd-extras li,.s4l-pkgd-extras li span,.s4l-pkgd-extras li b,.s4l-pkgd-extras-h,.s4l-pkgd-extras-f{color:#173c30}
.s4l-pkgd-extras-f a{color:#2f7a4f;font-weight:600}
.s4l-pkgd-extras{display:block;text-align:left}
.s4l-pkgd-extras ul,.s4l-pkgd-extras-h,.s4l-pkgd-extras-f{display:block;text-align:left;max-width:none}
.s4l-pkgd-sec .s4l-pkgd-extras,.s4l-pkgd-main .s4l-pkgd-extras{display:block;flex-direction:column}

/* Workmanship warranty: the block on package and product pages, the badge on cards */
.s4l-warr{margin:28px 0 0;padding:22px 24px;border-radius:14px;background:#173c30;color:#eef3ea}
.s4l-warr .s4lc-kicker{color:#9fdcc0}
.s4l-warr h2{color:#fff;margin:4px 0 10px;font-size:26px;line-height:1.2}
.s4l-warr p{color:#dfe8e0;max-width:64ch;margin:0 0 10px;font-size:15px;line-height:1.6}
.s4l-warr-pts{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 22px}
.s4l-warr-pts li{font-size:14px;line-height:1.55;color:#dfe8e0;padding-left:20px;position:relative}
.s4l-warr-pts li::before{content:"\2713";position:absolute;left:0;top:0;color:#7fd3a6;font-weight:700}
.s4l-warr-pts strong{color:#fff}
.s4l-warr a{color:#9fdcc0}
.s4l-warr-fine{font-size:12px!important;color:#9fb5a8!important;margin:14px 0 0!important}
.s4l-warr.is-compact{padding:18px 20px}
.s4l-warr.is-compact h2{font-size:21px}
.s4l-pkg-warr,.s4l-hp-warr{margin:6px 0 0;font-size:12.5px;font-weight:600;color:#2f7a4f}
.s4l-qf-trust li.is-warr{background:#173c30;color:#fff;border-color:#173c30}

/* Quote form: three packages to start from */
.s4l-qf-pkgs{margin:28px 0 0;padding:18px 0 0;border-top:1px solid rgba(23,60,48,.15)}
.s4l-qf-pkgs-h{margin:0 0 12px;font-weight:700;font-size:16px}
.s4l-qf-pkgs ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.s4l-qf-pkgs li a{display:block;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid rgba(23,60,48,.12);text-decoration:none;color:#173c30;height:100%}
.s4l-qf-pkgs li a:hover{border-color:#2f7a4f}
.s4l-qf-pkgs li strong{display:block;font-size:15px;line-height:1.3;margin-bottom:4px}
.s4l-qf-pkgs li span{display:block;font-size:13px;opacity:.75;margin-bottom:8px}
.s4l-qf-pkgs li b{font-size:18px}
.s4l-qf-pkgs li b small{font-size:11px;font-weight:500;opacity:.7}
.s4l-qf-pkgs-f{margin:12px 0 0;font-size:13px;opacity:.85}
.s4l-qf-pkgs-f a{font-weight:600}

/* Schedule of charges: sections by product, numbered lines, rate tables and questions */
.s4l-chg-nav{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}
.s4l-chg-nav a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid #dfe3d8;background:#fff;text-decoration:none;color:#173c30;font-weight:600;font-size:14px}
.s4l-chg-nav a b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#173c30;color:#fff;font-size:11px}
.s4l-chg-nav a small{opacity:.6;font-weight:500}
.s4l-chg-sec .s4lc-kicker{margin-bottom:2px}
ol.s4l-chg-list{list-style:none;margin:10px 0 0;padding:0}
.s4l-chg-item{padding:18px 0;border-top:1px solid #dfe3d8}
.s4l-chg-item:last-child{border-bottom:1px solid #dfe3d8}
.s4l-chg-head{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline}
.s4l-chg-n{font-size:12px;font-weight:700;color:#7a8a7e;letter-spacing:.04em}
.s4l-chg-head h3{margin:0;font-size:18px;line-height:1.3}
.s4l-chg-head .s4l-chg-amt{font-weight:700;font-size:17px;white-space:nowrap;color:#173c30}
.s4l-chg-head .s4l-chg-amt.is-quote{font-weight:500;font-size:14px;color:#7a8a7e}
.s4l-chg-why{margin:6px 0 0 0;padding-left:calc(2.6em + 12px);font-size:15px;line-height:1.55}
.s4l-chg-x{margin:6px 0 0 0;padding-left:calc(2.6em + 12px);font-size:14px;line-height:1.6;opacity:.85;max-width:70ch}
.s4l-chg-t{margin:10px 0 0 calc(2.6em + 12px);border-collapse:collapse;font-size:14px;max-width:520px;width:calc(100% - 2.6em - 12px)}
.s4l-chg-t td{padding:6px 10px;border-top:1px dashed #e4e8de}
.s4l-chg-t td:last-child{text-align:right;font-weight:600;white-space:nowrap}
.s4l-chg-faq{margin:10px 0 0 calc(2.6em + 12px);font-size:14px}
.s4l-chg-faq summary{cursor:pointer;font-weight:600;color:#2f7a4f}
.s4l-chg-faq p{margin:6px 0 0;line-height:1.6;max-width:70ch}
@media (max-width:640px){.s4l-chg-head{grid-template-columns:auto 1fr}.s4l-chg-head .s4l-chg-amt{grid-column:2;justify-self:start}.s4l-chg-why,.s4l-chg-x,.s4l-chg-t,.s4l-chg-faq{padding-left:0;margin-left:0;width:100%}}

/* rounded like the rest of the site: the package page's "priced for a standard installation" note and the product page's section bar */
.s4l-pkgd-std{border-radius:14px}
.sd-product .sd-product-nav{border:1px solid #dae2d8!important;border-radius:16px;padding-left:12px!important;padding-right:12px!important}

/* The home page's coloured sections ("Your home. Your kind of energy.", "From 'what if' to switched on.", "Your next chapter starts
   with the sun.") and the hero picture: rounded panels set in from the screen edges, like the reviews and awards, never square strips. */
main>.section.planner,main>.section.journey,main>.section.quote{width:min(calc(100% - 2*max(20px,5vw)),calc(var(--wp--style--global--wide-size,1200px) + 112px));margin-left:auto!important;margin-right:auto!important;margin-top:clamp(16px,2.5vw,28px)!important;margin-bottom:clamp(16px,2.5vw,28px)!important;border-radius:28px;padding-left:clamp(22px,4vw,56px);padding-right:clamp(22px,4vw,56px)}
main .hero .hero-art{border-radius:28px;margin:clamp(10px,1.4vw,16px) max(20px,5vw) clamp(10px,1.4vw,16px) 0}
@media (max-width:760px){main .hero .hero-art{margin:0 max(20px,5vw) 12px}main>.section.planner,main>.section.journey,main>.section.quote{border-radius:22px}}
/* the quote form's "What are you interested in?" cards follow the width of the form, not the screen: two across in a narrow column */
.s4lcrm-wiz{container-type:inline-size}
@container (max-width:520px){div.s4lcrm-wiz .s4lcrm-wiz-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Phones: one step down for the big headings (the theme's 62px and 35px are too large on a small screen) and one step up for the
   smallest words (9–13px is hard to read), so every page reads at a comfortable, even size. Our own sections set their sizes below. */
@media (max-width:600px){
html body h1{font-size:clamp(34px,10vw,42px);line-height:1.06;letter-spacing:-.025em}
html body h2,html body .planner h2,html body .quote h2,html body dialog h2{font-size:clamp(26px,7.4vw,30px);line-height:1.15;letter-spacing:-.02em}
html body .solution h3,html body .planner-box h3,html body .principles h3,html body .steps h3,html body .form-title h3{font-size:19px}
html body .eyebrow{font-size:11px;letter-spacing:.14em}
html body .hero-copy>p,html body .section-head>p,html body .solution p,html body .planner p,html body .principles p,html body .steps p,html body details p,html body .quote p,html body #plan-result p{font-size:14.5px;line-height:1.6}
html body .hero-note p{font-size:12.5px}html body footer p{font-size:13px}
}

/* the "Save $29 (20%)" pill beside a product's big price: a pill, not a second headline (it took 78% of the price's size) */
.s4lp-price .s4lp-save{font-size:clamp(12.5px,.42em,15px);padding:.3em .75em}
/* phones: prices one step smaller */
@media (max-width:600px){html body .s4lp-price{font-size:1.7rem}html body .s4lp-hero .s4lp-price{font-size:1.8rem}html body .s4lp-price .s4lp-was{font-size:.95rem}html body .s4l-pkgd-oop-hero{font-size:22px}}

/* ---------- package pages on phones (§ P3 "On phones, the price and the buttons come first"; modules/31-package-phone.php) ---------- */
/* a computer: the price panel back in its right-hand column, exactly as before */
@media (min-width:981px){.s4l-pkgd--tidy .s4l-pkgd-main>.s4l-pkgd-content{grid-column:1;grid-row:1}.s4l-pkgd--tidy .s4l-pkgd-main>.s4l-pkgd-side{grid-column:2;grid-row:1}.s4l-fold-btn,.s4l-optfold-btn{display:none!important}}
@media (max-width:980px){
.s4l-pkgd--tidy .s4l-pkgd-side{margin:0 0 26px}
/* the figures two by two, what you pay across the bottom */
.s4l-pkgd--tidy .s4l-pkgd-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:16px}
.s4l-pkgd--tidy .s4l-pkgd-stats li{padding:10px 12px}.s4l-pkgd--tidy .s4l-pkgd-stats strong{font-size:20px}
.s4l-pkgd--tidy .s4l-pkgd-stats li:last-child{grid-column:1/-1;background:rgba(185,240,170,.14);border-color:rgba(185,240,170,.45)}
.s4l-pkgd--tidy .s4l-pkgd-stats li:last-child strong{font-size:24px}
/* the main button books the free site check (it opens the quote form over the page); the second one opens the choices */
.s4l-pkgd--tidy .s4l-pkgd-cta{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.s4l-pkgd--tidy .s4l-pkgd-cta .s4l-pkgd-book{order:-1;display:block;text-align:center;padding:14px 18px;border-radius:999px;background:#b9f0aa;color:#173c30!important;font-weight:800;font-size:16px;text-decoration:none!important}
.s4l-pkgd--tidy .s4l-pkgd-cta .s4l-pkgd-btn{display:block;text-align:center;padding:12px 18px;border-radius:999px;background:transparent!important;color:#fbfbf0!important;border:1.5px solid rgba(251,251,240,.5)!important;font-weight:700;text-decoration:none!important}
.s4l-pkgd--tidy .s4l-pkg-actions{display:flex;flex-direction:column;gap:10px}
.s4l-pkgd--tidy .s4l-pkg-actions .s4l-pkgd-book{order:-1;display:block;text-align:center;padding:14px 18px;border-radius:999px;background:#173c30;color:#fff!important;font-weight:800;font-size:16px;text-decoration:none!important}
.s4l-pkgd--tidy .s4l-pkg-actions .s4l-sl-add{width:100%;justify-content:center}
/* the detail opens a little, with "Show more" (only where the script adds the button) */
.s4l-pkgd--tidy.s4l-js .s4l-pkgd-content>.s4l-pkgd-sec:not(.s4l-pkgd-faq):not(.is-open),.s4l-pkgd--tidy.s4l-js .s4l-pkgd-content>.s4l-warr:not(.is-open){max-height:260px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.s4l-fold-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:4px 0 24px;padding:12px 16px;border:1px solid #d7e0d0;border-radius:999px;background:#fffef9;color:#173c30;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.s4l-fold-btn i{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.s4l-fold-btn[aria-expanded=true] i{transform:translateY(2px) rotate(-135deg)}
.s4l-fold-btn:focus-visible,.s4l-optfold-btn:focus-visible{outline:3px solid #86df94;outline-offset:2px}
/* the choices one tap away */
.s4l-pkgd--tidy.s4l-js:not(.is-optopen) .s4l-pkgd-panel .s4l-pkgd-opt,.s4l-pkgd--tidy.s4l-js:not(.is-optopen) .s4l-pkgd-panel .s4l-pkgd-offers{display:none}
.s4l-optfold-btn{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;width:100%;margin:8px 0 16px;padding:14px 16px;border:1px solid #d7e0d0;border-radius:16px;background:#fff;color:#173c30;text-align:left;font:inherit;cursor:pointer}
.s4l-optfold-btn b{font-size:16px}.s4l-optfold-btn span{grid-column:1;font-size:13.5px;color:#5f6f66}.s4l-optfold-btn i{grid-row:1/span 2;grid-column:2;font-style:normal;font-size:26px;line-height:1;color:#245244}
.s4l-pkgd--tidy.is-optopen .s4l-optfold-btn{display:none}
/* the rebate step-down: the headline, the detail a tap away */
.s4l-pkgd--tidy.s4l-js .s4l-pkgd-step:not(.is-open)>:not(.s4l-pkgd-step-h){display:none}
.s4l-pkgd--tidy.s4l-js .s4l-pkgd-step .s4l-pkgd-step-h{cursor:pointer;position:relative;padding-right:30px;margin-bottom:0}
.s4l-pkgd--tidy.s4l-js .s4l-pkgd-step.is-open .s4l-pkgd-step-h{margin-bottom:10px}
.s4l-pkgd--tidy.s4l-js .s4l-pkgd-step .s4l-pkgd-step-h::after{content:"+";position:absolute;right:4px;top:-2px;font-size:22px;line-height:1.2;font-weight:400}
.s4l-pkgd--tidy.s4l-js .s4l-pkgd-step.is-open .s4l-pkgd-step-h::after{content:"\2212"}
/* "My quote" sits above the price bar at the bottom of the screen */
body:has(.s4l-pkgd-bar:not([hidden])) .s4l-sl-pill{bottom:calc(84px + env(safe-area-inset-bottom))!important}
}
/* a phone: the system drawing a little smaller, so the price panel comes sooner */
@media (max-width:600px){.s4l-pkgd--tidy .s4l-pkgd-visual{zoom:.74}}
/* ---------- product page: the link to our review (§ Y, modules/78-product-reviews.php) ---------- */
.s4l-pr-flag{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:18px 0;padding:14px 18px;border-radius:20px;background:#173c30;color:#fbfbf0}
.s4l-pr-flag span{padding:3px 10px;border-radius:999px;background:#b9f0aa;color:#173c30;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.s4l-pr-flag b{font-size:17px}.s4l-pr-flag a{margin-left:auto;color:#b9f0aa!important;font-weight:700}
@media (max-width:600px){.s4l-pr-flag{padding:12px 14px;border-radius:16px}.s4l-pr-flag b{font-size:15.5px}.s4l-pr-flag a{margin-left:0;flex-basis:100%}}