/* Solar inverters — page styles (prefix: pi-) · loaded after styles.css */

/* Hero */
.pi-hero{margin:0 26px;max-width:1600px}
.pi-hero-panel{background:var(--mist);border-radius:var(--radius);display:grid;grid-template-columns:1.04fr .96fr;min-height:480px;overflow:hidden}
.pi-hero-copy{padding:clamp(40px,4.6vw,72px) clamp(26px,3.45vw,53px) clamp(36px,4vw,56px) clamp(30px,4vw,60px);align-self:center}
.pi-hero-copy h1{font-size:clamp(34px,3vw,46px);letter-spacing:-.04em;line-height:1.1}
.pi-hero-lead{font-size:clamp(17px,1.42vw,21px);line-height:1.45;margin-top:18px;color:var(--ink);max-width:44ch}
.pi-hero-copy>p:not(.pi-hero-lead){color:var(--muted);margin-top:14px;line-height:1.7;max-width:52ch;font-size:15px}
.pi-hero-actions{display:flex;align-items:center;gap:32px;margin-top:28px;flex-wrap:wrap}
.pi-hero-actions .button{min-height:54px;min-width:192px}
.pi-hero-media{display:grid;place-items:center;padding:clamp(28px,4vw,56px);min-width:0}
.pi-hero-media img{max-width:100%;height:auto;max-height:400px;object-fit:contain}

/* Explainer flow */
.pi-flow{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0}
.pi-flow>li{border-left:1px solid var(--line);padding:6px 26px 2px}
.pi-flow>li:first-child{border-left:0;padding-left:0}
.pi-flow-top{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.pi-flow .icon-disc{background:var(--mist)}
.pi-flow .row-arrow{width:20px;color:var(--muted)}
.pi-flow h3{font-size:17px;letter-spacing:-.015em}
.pi-flow p{font-size:14px;line-height:1.65;color:var(--muted);margin-top:9px;max-width:30ch}
.pi-hybrid{display:flex;align-items:center;gap:22px;border-top:1px solid var(--line);margin-top:52px;padding-top:30px}
.pi-hybrid .icon-disc{background:var(--mist);color:var(--focus)}
.pi-hybrid p{font-size:15px;line-height:1.7;color:var(--muted);max-width:62ch}
.pi-hybrid p strong{color:var(--ink);font-weight:500}
.pi-hybrid .text-link{margin-left:auto;font-size:14px;white-space:nowrap}

/* Phase chooser */
.pi-phase-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pi-phase-card{background:var(--mist);border-radius:var(--radius);padding:32px 30px 24px}
.pi-phase-card .icon-disc{margin-bottom:22px}
.pi-phase-card h3{font-size:22px}
.pi-phase-card>p{font-size:15px;color:var(--muted);line-height:1.7;margin:10px 0 14px;max-width:40ch}
.pi-phase-card ul{list-style:none;margin:0;padding:0}
.pi-phase-card li a{display:flex;align-items:center;gap:14px;border-top:1px solid #adc2be;padding:12px 0;min-height:56px;text-decoration:none;font-size:16px;transition:color .2s}
.pi-phase-card li a:hover{color:var(--focus)}
.pi-phase-card li a:hover .row-arrow{transform:translateX(3px)}
.pi-range{margin-left:auto;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pi-phase-card .row-arrow{margin-left:0;width:18px}
.pi-phase-note{margin-top:26px;font-size:14px;color:var(--muted);max-width:70ch}

/* Product sheets */
.pi-group+.pi-group{margin-top:clamp(56px,6vw,88px)}
.pi-product{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:clamp(28px,4vw,56px);background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,40px)}
.pi-product+.pi-product{margin-top:26px}
.pi-media{background:var(--mist);border-radius:var(--radius);display:grid;place-items:center;padding:28px;min-height:320px}
.pi-media img{max-width:100%;height:auto;max-height:330px;object-fit:contain}
.pi-product h3{font-size:24px}
.pi-tagline{font-size:14px;color:var(--muted);margin-top:7px}
.pi-product-intro{font-size:15px;line-height:1.7;color:var(--muted);margin-top:16px;max-width:64ch}
.pi-specs{margin:22px 0 0}
.pi-specs>div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid var(--line);padding:11px 0;font-size:15px}
.pi-specs dt{color:var(--muted);font-size:14px;flex-shrink:0}
.pi-specs dd{margin:0;text-align:right;font-weight:500;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pi-product details{border-top:1px solid var(--line)}
.pi-product summary{font-size:14px;min-height:52px}
.pi-product summary svg{width:17px;height:17px;color:var(--muted)}
.pi-product details>p{font-size:14px;max-width:62ch}
.pi-pairs{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line);padding-top:16px;margin-top:0;font-size:14px}
.pi-product details+.pi-pairs{margin-top:0}
.pi-pairs svg{width:19px;height:19px;color:var(--focus)}
.pi-pairs a{font-weight:500}

/* Breakpoints */
@media(max-width:1200px){
.pi-hero{margin-inline:18px}
.pi-hero-panel{grid-template-columns:1.1fr .9fr;min-height:440px}
.pi-hero-media img{max-height:330px}
.pi-flow>li{padding:4px 18px 0}
.pi-flow p{max-width:none}
.pi-phase-grid{gap:18px}
.pi-phase-card{padding:26px 22px 20px}
.pi-phase-card li a{font-size:15px}
.pi-product{grid-template-columns:minmax(200px,260px) 1fr;gap:28px}
.pi-media{min-height:260px;padding:22px}
.pi-media img{max-height:260px}
.pi-product h3{font-size:22px}
}
@media(max-width:900px){
.pi-flow{grid-template-columns:1fr 1fr;gap:26px 0}
.pi-flow>li:nth-child(3){border-left:0;padding-left:0}
.pi-hybrid{flex-wrap:wrap;gap:18px}
.pi-hybrid .text-link{margin-left:62px}
.pi-product{grid-template-columns:200px 1fr}
.pi-specs>div{font-size:14px}
}
@media(max-width:650px){
.pi-hero{margin-inline:12px}
.pi-hero-panel{display:flex;flex-direction:column;min-height:0}
.pi-hero-copy{padding:30px 26px 4px}
.pi-hero-copy h1{font-size:clamp(32px,8.4vw,42px);line-height:1.13}
.pi-hero-lead{font-size:17px}
.pi-hero-actions{gap:22px;margin-top:24px}
.pi-hero-actions .button{min-height:48px;min-width:0}
.pi-hero-media{padding:26px 26px 34px}
.pi-hero-media img{max-height:250px}
.pi-flow{grid-template-columns:1fr;gap:0}
.pi-flow>li{border-left:0;border-top:1px solid var(--line);padding:16px 0}
.pi-flow>li:first-child{border-top:0;padding-top:0}
.pi-flow-top{margin-bottom:10px}
.pi-flow .icon-disc{width:38px;height:38px}
.pi-flow .icon-disc svg{width:24px;height:24px}
.pi-flow p{max-width:none;margin-top:6px}
.pi-hybrid{margin-top:36px;padding-top:24px;align-items:flex-start}
.pi-hybrid .text-link{margin-left:0}
.pi-phase-grid{grid-template-columns:1fr;gap:14px}
.pi-phase-note{margin-top:20px;font-size:13px}
.pi-product{display:flex;flex-direction:column;gap:22px;padding:22px 20px}
.pi-media{min-height:0;padding:24px}
.pi-media img{max-height:220px}
.pi-product h3{font-size:21px}
.pi-specs>div{gap:14px;padding:12px 0}
.pi-specs dd{max-width:60%}
.pi-pairs{flex-wrap:wrap;gap:10px}
}