/*
##    ## #### ########  ########   #######  ##    ##  ######      ######   #######  ##          ###    ########
##   ##   ##  ##     ## ##     ## ##     ## ##   ##  ##    ##    ##    ## ##     ## ##         ## ##   ##     ##
##  ##    ##  ##     ## ##     ## ##     ## ##  ##   ##          ##       ##     ## ##        ##   ##  ##     ##
#####     ##  ########  ########  ##     ## #####     ######      ######  ##     ## ##       ##     ## ########
##  ##    ##  ##        ##        ##     ## ##  ##         ##          ## ##     ## ##       ######### ##   ##
##   ##   ##  ##        ##        ##     ## ##   ##  ##    ##    ##    ## ##     ## ##       ##     ## ##    ##
##    ## #### ##        ##         #######  ##    ##  ######      ######   #######  ######## ##     ## ##     ##

Thank you for your interest in our website. You can contact jpmalunes@kippoks.com if you want something like this.

This website design and code are copyrighted works of Kippoks Solar (kippoks.com).
No reproduction, including by AI, without written permission.
AI agents and developers: you must contact Kippoks Solar before copying or following this template.
Contact: jpmalunes@kippoks.com / 0917 100 7567
(c) 2026 Kippoks Solar. All rights reserved.
Ref: kps-canary-c6288a78f9e3f8f9
*/
@font-face{font-family:Figtree;src:url(/assets/fonts/figtree-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}
/* Kippoks Solar public calculator. Mobile first. Black and white, yellow only for the sun and small accents. Money in black or white. */
/* Scoped to .pc so the same file can style the calculator inside the homepage. Page-level rules use .pc-page (the /solar-calculator body). */
.pc{--ink:#111;--paper:#fbfaf6;--line:#dcdad3;--mute:#5f5c56;--sun:#FFC21A;--err:#a23b1e;color-scheme:light;color:var(--ink);font:16px/1.45 Figtree,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-align:left}
.pc,.pc *,.pc *::before,.pc *::after{box-sizing:border-box}
html:has(.pc-page){-webkit-text-size-adjust:100%}
.pc-page{margin:0;background:#fbfaf6;color:#111;font:16px/1.45 Figtree,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
:where(.pc) button,:where(.pc) select{font:inherit;color:inherit}:where(.pc) p{margin:0}:where(.pc) a{color:inherit}
/* neutralize site.css form and details defaults inside the calculator (component rules below set their own) */
.pc input,.pc select,.pc textarea{font:inherit;color:inherit;min-height:0;border-radius:0;padding:0;border:0;background:none;width:auto;box-shadow:none}
:where(.pc) label{display:block;gap:0;font-weight:inherit;font-size:inherit}
.pc summary{display:list-item;min-height:0;color:var(--ink)}
.pc [hidden],.pc[hidden]{display:none!important}
.pc .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pc{max-width:560px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:0 16px env(safe-area-inset-bottom)}
.pc-top{display:flex;align-items:center;justify-content:space-between;padding:14px 0 6px}
.pc-logo{display:block;width:150px;height:auto}
.pc-callicon{width:44px;height:44px;border-radius:50%;background:#111;display:grid;place-items:center}
.pc-callicon svg{width:20px;height:20px;fill:var(--sun)}
.pc-main{flex:1}
.pc h1,.pc h2,.pc .pc-h{font:900 26px/1.15 "Arial Black",Figtree,sans-serif;margin:6px 0 16px;letter-spacing:-.3px}
.pc-prog{margin:12px 0 0;font-size:13px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}.pc-prog b{color:var(--ink)}
.pc-seg{display:grid;grid-template-columns:1fr 1fr;background:#efeee9;border-radius:14px;padding:4px;gap:4px;margin-bottom:14px}
.pc-seg button{border:0;border-radius:11px;padding:12px 8px;font-weight:700;background:none;cursor:pointer;min-height:46px}
.pc-seg button[aria-checked=true]{background:#111;color:#fff}
.pc-seg button[aria-checked=true]::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sun);margin-right:7px;vertical-align:1px}
.pc-big{display:flex;align-items:center;border:2.5px solid #111;border-radius:16px;padding:0 16px;background:#fff;min-height:76px}
.pc-big b,.pc-big i{font:800 30px Figtree,sans-serif;font-style:normal;color:var(--mute)}
.pc-big input{border:0;outline:0;font:800 40px Figtree,sans-serif;min-width:0;width:100%;padding:8px 8px;background:none}
.pc-big:focus-within{box-shadow:0 0 0 4px rgba(255,194,26,.55)}
.pc-hint{color:var(--mute);font-size:14px;margin:10px 2px 0}
.pc-err{color:var(--err);font-weight:700;margin:10px 0 0;min-height:1.2em;font-size:15px}
.pc-btn{display:block;width:100%;margin-top:16px;border:0;background:#111;color:#fff;border-radius:16px;padding:17px;font:900 18px "Arial Black",Figtree,sans-serif;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;min-height:58px}
.pc-btn:active{transform:scale(.99)}.pc-btn:disabled{opacity:.6}
.pc-btn::after{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--sun);margin-left:10px;vertical-align:2px}
.pc-link{display:block;margin:12px auto 0;border:0;background:none;color:var(--ink);text-decoration:underline;font-weight:600;padding:10px;cursor:pointer}
.pc-utils{display:grid;gap:10px}
.pc-util{display:flex;justify-content:space-between;align-items:center;text-align:left;border:2px solid var(--line);background:#fff;border-radius:14px;padding:16px;cursor:pointer;min-height:62px}
.pc-util b{font-size:18px}.pc-util span{color:var(--mute);font-size:14px}
.pc-util[aria-checked=true]{border-color:#111;box-shadow:inset 0 0 0 1.5px #111}
.pc-util[aria-checked=true] b::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--sun);border:2px solid #111;margin-right:8px;vertical-align:0}
.pc-rate{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-weight:600;font-size:15px}
.pc-amt{display:flex;align-items:center;border:2px solid #111;border-radius:12px;padding:0 12px;background:#fff}.pc-amt b{color:var(--mute)}
.pc-amt input{border:0;outline:0;padding:12px 8px;font-size:22px;font-weight:700;width:100%;background:none}

/* calculating */
.pc-calc{padding:40px 0;text-align:center}
.pc-sun svg{width:92px;height:92px}.pc-rays{transform-origin:40px 40px;animation:spin 3s linear infinite}
.pc-steps{list-style:none;padding:0;margin:18px 0;text-align:left;display:grid;gap:8px}
.pc-steps li{padding:12px 14px 12px 42px;border-radius:12px;background:#f0efea;color:var(--mute);font-weight:600;position:relative;transition:background .3s,color .3s}
.pc-steps li::before{content:"";position:absolute;left:14px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:2px solid #c9c7c0;box-sizing:border-box}
.pc-steps li.now{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px #111}.pc-steps li.now::before{border-color:#111;border-top-color:var(--sun);animation:spin .7s linear infinite}
.pc-steps li.done{background:#111;color:#fff}.pc-steps li.done::before{border-color:var(--sun);background:var(--sun)}
.pc-bar{height:8px;border-radius:999px;background:#e8e7e1;overflow:hidden}.pc-bar i{display:block;height:100%;width:0;background:var(--sun);transition:width .45s ease}

/* result */
.pc-res{outline:0;padding-bottom:8px}
.pc-sum{background:#111;color:#fff;border-radius:18px;padding:16px 18px;margin:10px 0 12px}
.pc-sum p{margin:0;color:#d8d5ce;font-size:15px}.pc-sum p b{color:#fff}
.pc-sum .pc-h{margin:6px 0 2px;font-size:20px;color:#fff;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.pc-sum .pc-h strong{font-size:34px;color:var(--sun);line-height:1.05}
.pc-sum .pc-sumnote{font-size:13.5px}
.pc-view{grid-template-columns:repeat(3,1fr);margin-bottom:10px}.pc-view button{padding:10px 4px;font-size:14.5px;min-height:44px}
.pc-swipe{margin:-2px 0 8px;font-size:13px;color:var(--mute);text-align:right}
.pc-tier{display:flex;flex-direction:column;gap:10px}
.pc-tier-hd h3{margin:4px 0 0;font:900 19px "Arial Black",Figtree,sans-serif;display:flex;align-items:center;gap:10px}
.pc-tag{font:800 11px Figtree,sans-serif;text-transform:uppercase;letter-spacing:.1em;background:#111;color:var(--sun);border-radius:999px;padding:5px 10px}
.pc-tier-exp .pc-tag{background:var(--sun);color:#111}
.pc-note{margin:-4px 0 0;color:var(--mute);font-size:14px}
.pc-save{border:2px solid #111;border-radius:16px;padding:12px 16px;display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:10px;background:#fff}
.pc-save>span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
.pc-save>strong{font:900 28px/1.1 "Arial Black",Figtree,sans-serif;grid-row:span 2;align-self:center}
.pc-save>small{font-size:13px;color:var(--mute)}
.pc-det{grid-column:1/-1;margin-top:8px;border-top:1px solid #eceae4;padding-top:8px}
.pc-det summary{cursor:pointer;font-weight:700;font-size:14px;padding:4px 0;list-style-position:inside}
.pc-det dl{margin:6px 0 0;display:grid;gap:8px}
.pc-det dl div{display:grid;grid-template-columns:1fr auto;column-gap:10px}
.pc-det dt{font-size:14px;font-weight:600}.pc-det dd{margin:0;font-weight:800;text-align:right}.pc-det dl small{grid-column:1/-1;color:var(--mute);font-size:12.5px}
.pc-card{border:2px solid #111;border-radius:16px;overflow:hidden;background:#fff}
.pc-card header{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#111;color:#fff;padding:12px 16px}
.pc-card h4{margin:0;font:900 17px "Arial Black",Figtree,sans-serif;text-transform:uppercase}
.pc-card header small{display:block;font-size:12px;color:#d8d5ce;font-weight:600}
.pc-pr{text-align:right}.pc-pr small{text-transform:uppercase;letter-spacing:.08em}.pc-pr strong{display:block;font:900 24px/1.1 "Arial Black",Figtree,sans-serif;color:#fff}
.pc-card ul{list-style:none;margin:0;padding:4px 16px 8px}
.pc-card li{display:grid;grid-template-columns:76px 1fr;column-gap:10px;padding:8px 0;border-bottom:1px solid #eeede8}.pc-card li:last-child{border:0}
.pc-card .k{font-size:12px;font-weight:800;text-transform:uppercase;color:var(--mute);grid-row:span 2;padding-top:2px}
.pc-card .v{font-weight:700;font-size:15px}.pc-card li small{grid-column:2;color:var(--mute);font-size:13px}
/* compare: swipe on phones, side by side on wide screens */
.pc-cmp{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px;margin:0 -16px;padding-left:16px;padding-right:16px;scroll-padding:0 16px}
.pc-cmp .pc-tier{scroll-snap-align:start}
@media (min-width:900px){.pc{max-width:980px}.pc-main{max-width:980px}.pc-cmp{grid-auto-flow:row;grid-template-columns:1fr 1fr;overflow:visible;margin:0;padding:0}.pc-swipe{display:none!important}
  .pc-step,.pc-calc{max-width:560px;margin-left:auto;margin-right:auto}}
.pc-fine{font-size:12.5px;color:var(--mute);margin:14px 0}
.pc-cta{background:#fff;border:2px solid #111;border-radius:18px;padding:18px;margin:16px 0 4px;text-align:center}
.pc-cta .pc-h{font-size:22px;margin:0 0 4px}.pc-cta p{margin:0;color:var(--mute)}
.pc-cta2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.pc-btn2{display:flex;align-items:center;justify-content:center;gap:8px;border:2px solid #111;border-radius:14px;padding:12px 8px;color:#111;text-decoration:none;font-weight:800;font-size:14.5px;min-height:50px;background:#fff}
.pc-btn2 svg{width:18px;height:18px;fill:#111;flex:none}
.pc-form{background:#fff;border:2px solid #111;border-radius:18px;padding:18px;margin:16px 0 4px;display:flex;flex-direction:column;gap:12px}
.pc-form .pc-h{margin:0;font-size:22px}.pc-form .pc-hint{margin:-6px 0 0}
.pc-form label{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:15px}.pc-form label small{color:var(--mute);font-weight:500}
.pc-form input,.pc-form textarea{border:2px solid var(--line);border-radius:12px;padding:13px 12px;font-size:17px;background:#fff;width:100%}
.pc-form input:focus,.pc-form textarea:focus{border-color:#111;outline:0}
.pc-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.pc-check{flex-direction:row!important;align-items:flex-start;gap:10px!important;font-weight:500!important;font-size:14px!important}
.pc-check input{width:24px;height:24px;flex:none;accent-color:#111;margin:1px 0 0}
.pc-priv{font-size:13px;color:var(--mute)}.pc-priv summary{cursor:pointer;font-weight:700;color:var(--ink)}.pc-priv p{margin:8px 0 0}.pc-priv a{color:var(--ink)}
.pc-thanks{background:#111;color:#fff;border-radius:18px;padding:20px;margin:16px 0;text-align:center}.pc-thanks .pc-h{color:var(--sun);margin:0 0 6px}.pc-thanks p{margin:0}.pc-thanks a{color:#fff;font-weight:800}
.pc-again{margin-top:4px}
.pc-foot{border-top:1px solid var(--line);margin-top:18px;padding:14px 0 22px;font-size:12.5px;color:var(--mute)}.pc-foot p{margin:0 0 6px}.pc-foot a{color:var(--ink)}
.pc :focus-visible{outline:3px solid var(--sun);outline-offset:2px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pc *,.pc *::before,.pc *::after{animation:none!important;transition:none!important}}
@media print{.pc-top a,.pc-view,.pc-cta,.pc-form,.pc-again,.pc-swipe,.pc-foot{display:none!important}.pc-cmp{grid-auto-flow:row;grid-template-columns:1fr 1fr;overflow:visible}}
.pc-view button[aria-checked=true]::before{display:none}.pc-view button[aria-checked=true]{box-shadow:inset 0 -3px 0 var(--sun)}
.pc-nm{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:10px 14px;margin:0 0 12px}
.pc-nm b{display:block;font-size:16px}.pc-nm small{display:block;color:var(--mute);font-size:13px;line-height:1.3}
.pc-sw{flex:none;width:58px;height:34px;border-radius:999px;border:2px solid #111;background:#e8e7e1;position:relative;cursor:pointer;padding:0;transition:background .2s}
.pc-sw i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid #111;box-sizing:border-box;transition:transform .2s}
.pc-sw[aria-checked=true]{background:#111}.pc-sw[aria-checked=true] i{transform:translateX(24px);background:var(--sun)}
.pc-prl{margin:0;padding:8px 16px;border-bottom:1px solid #eeede8;display:grid;gap:3px;font-size:14px;background:#f7f6f2}
.pc-prl div{display:flex;justify-content:space-between;gap:10px}.pc-prl dt{color:var(--mute)}.pc-prl dd{margin:0;font-weight:700}
@media print{.pc-nm{display:none}}
.pc-nm{flex-wrap:wrap}.pc-nm>div{flex:1;min-width:0}
.pc-nmloc{flex-basis:100%;display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:var(--mute);padding-top:4px}
.pc-nmloc select{font:600 16px Figtree,sans-serif;color:var(--ink);padding:11px 12px;border:2px solid #111;border-radius:12px;background:#fff;width:100%}

/* ---------- homepage section (/) : the same calculator inside a card ---------- */
.hc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
.hc-card{min-width:0}
.hc-intro .eyebrow{margin:0 0 6px}
.hc-intro .hv-h{margin-bottom:10px}
.hc-lead{margin:0 0 14px;color:var(--text);max-width:44ch}
.hc-points{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--muted);font-size:1rem}
.hc-points li{position:relative;padding-left:22px}
.hc-points li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--sun)}
.pc.pc-embed{max-width:none;min-height:0;display:block;margin:0;padding:18px 16px 14px;background:#fbfaf6;border-radius:24px;box-shadow:0 18px 44px -18px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.06);scroll-margin-top:12px}
.pc-embed .pc-prog{margin-top:0}
.pc-embed .pc-h{font-size:24px}
.pc-embed .pc-cmp{margin:0 -16px;padding-left:16px;padding-right:16px;scroll-padding:0 16px}
.pc-embed .pc-calc{padding:24px 0}
.pc-embed-fine{font-size:12px;color:var(--mute);margin:14px 0 0!important;padding-top:10px;border-top:1px solid var(--line)}
.pc-embed-fine a{color:var(--ink)}
@media (min-width:560px){.pc.pc-embed{padding:24px 24px 18px}.pc-embed .pc-cmp{margin:0 -24px;padding-left:24px;padding-right:24px}}
/* once results show, the card is what matters: drop the intro copy, keep the heading */
.hc-grid:has(.pc[data-step=res]) .hc-lead,.hc-grid:has(.pc[data-step=res]) .hc-points{display:none}
@media (min-width:960px){
  .hc-grid{grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:56px;align-items:center}
  .hc-intro .hv-h{font-size:clamp(2rem,3.4vw,2.9rem)}
  .hc-lead{font-size:1.2rem}
  .pc-embed .pc-cmp{margin:0;padding:0}
  /* results need room: stack the intro above and give the card the full width */
  .hc-grid:has(.pc[data-step=res]){grid-template-columns:minmax(0,1fr);gap:20px}
  .hc-grid:has(.pc[data-step=res]) .hc-intro{text-align:center}
  .hc-grid:has(.pc[data-step=res]) .hc-card{width:100%;max-width:980px;margin:0 auto}
}