/* System pages reuse the existing McDowell Energy light/dark palettes. */
.site-header nav{gap:clamp(12px,1.6vw,26px)}
.site-header nav a{white-space:nowrap}
html:not([data-theme="dark"]) .hero .hero-lede,
html:not([data-theme="dark"]) .hero .trust-row b,
html:not([data-theme="dark"]) .hero .trust-row span,
html:not([data-theme="dark"]) .hero .product-overview small,
html:not([data-theme="dark"]) .hero .duration-note,
html:not([data-theme="dark"]) .hero .duration-note b{color:#000!important}
.scroll-promo{top:112px;max-width:min(390px,calc(100vw - 32px))}
@media(max-width:850px){.scroll-promo{top:96px}}
.inquiry-form>.water-system-field{width:100%;min-width:0;justify-self:stretch!important}
.inquiry-form>.water-system-field select{width:100%;min-width:0;padding-left:12px;padding-right:32px;font-size:16px}
.component-list .component-card{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:20px 14px}
.component-list .component-card>span{width:100%;text-align:center}
.component-list .component-card b,.component-list .component-card small{text-align:center}
.component-list .component-card:hover,.component-list .component-card.is-active{background:#173e49}
.component-list .component-card:focus-visible{outline:2px solid #c8e84a;outline-offset:3px}
.component-list .component-card.is-active b{text-decoration:underline;text-underline-offset:5px;text-decoration-color:#c8e84a}
.product-viewer-section .system-flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.product-viewer-section .system-flow span,.product-viewer-section .system-flow i{font-size:clamp(18px,2vw,24px)!important;font-weight:800;line-height:1.4}
html:not([data-theme="dark"]) body main .system-notices>.note{color:#000!important}
.how-section.portable-details{grid-template-columns:minmax(0,1fr);gap:48px}
.portable-details>.how-copy{width:100%;max-width:none}
.portable-details>.how-copy h2,.portable-details>.how-copy p{max-width:none;width:100%}
.portable-details>.how-copy .eyebrow{justify-content:center}
.portable-details>.system-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;width:100%;align-items:start}
.portable-details>.system-features li{height:100%;padding:26px 12px;border-top:1px solid #8dbfb1}
@media(max-width:620px){.portable-details>.system-features{grid-template-columns:1fr;gap:16px}}
.overview-title{font-size:clamp(27px,3vw,40px);line-height:1.2;margin:22px 0}
.system-choice,.visualization-note,.system-notices{padding:64px clamp(24px,8vw,124px);background:var(--cream);color:var(--ink)}
.system-choice h2{font-size:clamp(30px,4vw,46px)}
.system-choice>p{max-width:760px;margin-left:auto;margin-right:auto}
.system-choice .eyebrow{justify-content:center}
.system-actions{justify-content:center;flex-wrap:wrap;margin:30px 0;gap:18px}
.system-choice .system-flow{max-width:760px;margin:40px auto 0;flex-wrap:wrap;gap:16px}
html .system-choice .system-flow span,html .system-choice .system-flow i,html[data-theme="dark"] .system-choice .system-flow span,html[data-theme="dark"] .system-choice .system-flow i{font-size:clamp(18px,2vw,24px)!important;font-weight:800;line-height:1.4}
html:not([data-theme="dark"]) .system-choice .system-flow span,html:not([data-theme="dark"]) .system-choice .system-flow i{color:#000}
html[data-theme="dark"] .system-choice .system-flow span{color:#edf5f2}
.system-hero h1{font-size:clamp(44px,6.5vw,88px);max-width:1000px;line-height:1.08}.system-hero .system-subtitle{font-size:clamp(22px,3vw,32px);font-weight:700;line-height:1.3;margin:0 auto 24px;max-width:850px}
.system-hero .hero-actions{max-width:850px;margin:32px auto 0}
.bpa-note{font-weight:700}
.visualization-note{padding-top:24px;padding-bottom:24px}
.visualization-note .viewer-disclaimer{max-width:1050px;margin:0 auto}
.system-notices .pressure-safety{margin-top:30px}
.system-notices>.note{border-left:0;padding-left:0}
#how{align-items:start}
.home-how-details{min-width:0;display:flex;flex-direction:column;align-self:stretch}
.home-steps li{display:block;text-align:center}
.home-steps li>div{width:100%}
.home-steps li:first-child{padding-top:0}
.home-steps h3{font-size:clamp(25px,2.5vw,32px);line-height:1.2}
.home-steps p{font-size:18px;line-height:1.6}
.home-how-details>.installation-notice{width:100%;margin:32px 0 0;padding:26px}
.home-how-details>.installation-notice h3{font-size:clamp(23px,2.4vw,31px);line-height:1.2}
.home-how-details>.installation-notice .note{border:0;padding:0;margin:0;font-size:18px;line-height:1.65}


.system-features li{display:block;padding:30px 0}
.system-features h3{font-size:clamp(26px,2.5vw,34px);line-height:1.2;margin:0 0 14px}
.system-features p{font-size:clamp(17px,1.5vw,20px);line-height:1.65}
.system-details .system-features{align-self:center}
html:not([data-theme="dark"]) .hero .overview-title{color:#0a2b24!important}
html:not([data-theme="dark"]) .hero .bpa-note{color:#294f45}
html:not([data-theme="dark"]) .hero .eyebrow{color:#fff!important}
html:not([data-theme="dark"]) main .system-hero h1,html:not([data-theme="dark"]) main .system-hero p,html:not([data-theme="dark"]) main .system-hero .eyebrow,html:not([data-theme="dark"]) main .system-hero .button{color:#000!important}
html[data-theme="dark"] .system-choice,html[data-theme="dark"] .visualization-note,html[data-theme="dark"] .system-notices{background:#102d25;color:#edf5f2}
html[data-theme="dark"] .system-choice .text-link{color:#79d3e5}
@media(min-width:851px) and (max-width:1150px){.site-header{display:grid;grid-template-columns:170px minmax(0,1fr) 82px;padding:12px 20px;height:auto;min-height:100px;gap:12px;align-items:center}.site-header>.brand{min-width:0}.site-header>.brand img{width:170px;height:auto}.site-header>nav{position:static;order:0;width:auto;margin:0;gap:12px;justify-content:center;align-items:center;flex-wrap:nowrap;font-size:12px}.site-header>.theme-toggle{margin:0;align-self:center}.site-header>.menu-button{display:none}}
@media(max-width:520px){.system-actions{align-items:stretch}.system-actions .button{width:100%;text-align:center}.system-choice .system-flow{gap:10px}.system-choice,.system-notices{padding-top:48px;padding-bottom:48px}}

/* Consistent black headings and section labels throughout light mode. */
html:not([data-theme="dark"]) body main h1,html:not([data-theme="dark"]) body main h1 em,html:not([data-theme="dark"]) body main h2,html:not([data-theme="dark"]) body main h3,html:not([data-theme="dark"]) body main h4,html:not([data-theme="dark"]) body main .eyebrow,html:not([data-theme="dark"]) body main .overview-kicker,html:not([data-theme="dark"]) body main .guide-label,html:not([data-theme="dark"]) body main .field-label,html:not([data-theme="dark"]) body main .system-subtitle{color:#000!important}