/* pluginsolarcomparison.co.uk
   Not an affiliate table. A compliance checker.

   A device must be on the ENA Type Test Register and confirmed compliant before
   it can be sold, so the useful comparison is not kit against kit on price, it is
   any kit against the specification. The hero is a working checklist.

   Distinct from britain (Archivo, brick red), leads (Barlow, dark, green),
   info (Source Serif, indigo, docs shell) and news (Newsreader, magenta, board). */

:root{
  --paper:#EFF3F2;
  --card:#FFFFFF;
  --ink:#10201D;
  --body-ink:#2E403C;
  --dim:#5E6F6A;
  --rule:#CBD8D4;
  --accent:#0B5FA5;
  --accent-deep:#08477B;
  --pass:#0E7C5A;
  --pass-bg:#E6F4EE;
  --fail:#C0392B;
  --fail-bg:#FBEBE9;
  --unknown:#8A7A3F;
  --unknown-bg:#FAF4E3;
  --display:"Outfit","Helvetica Neue",Arial,sans-serif;
  --body:"Atkinson Hyperlegible","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body-ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.8rem}
@media(max-width:640px){.wrap{padding:0 1.15rem}}
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0;font-weight:600;letter-spacing:-0.015em}
p{margin:0 0 1.05rem;max-width:66ch}
a{color:var(--accent);font-weight:700;text-decoration:none}
a:hover{color:var(--ink)}
.ref{font-family:var(--mono);font-size:.85em;color:var(--accent-deep)}

header.mast{background:var(--card);border-bottom:1px solid var(--rule)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4.25rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);font-family:var(--display);font-weight:600;font-size:1.25rem}
.mast nav{display:flex;gap:1.35rem;font-size:.93rem;font-weight:700}
.mast nav a{color:var(--body-ink)}
.mast nav a:hover{color:var(--accent)}
@media(max-width:760px){.mast nav{display:none}}

.hero{padding:3.5rem 0 3rem}
h1{font-size:clamp(2.5rem,4.8vw,3.9rem);line-height:1.04;max-width:17ch}
h1 em{font-style:normal;color:var(--accent)}
.stand{font-size:1.15rem;color:var(--dim);max-width:56ch;margin:1.3rem 0 0}

/* the checker */
.checker{background:var(--card);border:1px solid var(--rule);margin-top:2.5rem}
.checker-head{padding:1.2rem 1.5rem;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.checker-head h2{font-size:1.45rem}
.checker-head p{margin:0;font-size:.9rem;color:var(--dim)}
.check-row{display:grid;grid-template-columns:1fr 13rem;gap:1.5rem;padding:1.2rem 1.5rem;border-bottom:1px solid var(--rule);align-items:start}
@media(max-width:760px){.check-row{grid-template-columns:1fr;gap:.8rem}}
.check-row:last-of-type{border-bottom:0}
.check-q{font-family:var(--display);font-weight:600;font-size:1.08rem;color:var(--ink);margin:0 0 .3rem}
.check-why{font-size:.92rem;margin:0;color:var(--dim);max-width:60ch}
.opts{display:flex;gap:.4rem;flex-wrap:wrap}
.opt{font:inherit;font-family:var(--display);font-size:.88rem;font-weight:600;padding:.4rem .75rem;border:1px solid var(--rule);background:var(--paper);color:var(--body-ink);cursor:pointer}
.opt:hover{border-color:var(--accent);color:var(--accent)}
.opt[aria-pressed=true][data-v=yes]{background:var(--pass-bg);border-color:var(--pass);color:var(--pass)}
.opt[aria-pressed=true][data-v=no]{background:var(--fail-bg);border-color:var(--fail);color:var(--fail)}
.opt[aria-pressed=true][data-v=idk]{background:var(--unknown-bg);border-color:var(--unknown);color:var(--unknown)}
.verdict{padding:1.4rem 1.5rem;background:var(--paper);border-top:1px solid var(--rule)}
.verdict h3{font-size:1.25rem;margin-bottom:.4rem}
.verdict p{margin:0;font-size:.96rem}
.verdict ul{margin:.7rem 0 0;padding-left:1.15rem;font-size:.94rem}
.verdict li{margin-bottom:.3rem}

section{padding:3.5rem 0}
section.alt{background:var(--card);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
h2{font-size:clamp(1.95rem,3.1vw,2.6rem);line-height:1.1;margin-bottom:.7rem}
.lede{font-size:1.08rem;color:var(--dim);max-width:58ch}

/* limits table */
table{width:100%;border-collapse:collapse;margin:1.8rem 0 0;font-size:.96rem;background:var(--card)}
th,td{text-align:left;padding:.75rem .9rem;border:1px solid var(--rule);vertical-align:top}
th{background:var(--paper);font-family:var(--display);font-weight:600;font-size:.85rem;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
td .ref{white-space:nowrap}
@media(max-width:560px){table{display:block;overflow-x:auto}}

/* register card */
.reg{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:1.8rem}
@media(max-width:760px){.reg{grid-template-columns:1fr}}
.reg div{background:var(--card);padding:1.2rem 1.3rem}
.reg dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:.3rem}
.reg dd{margin:0;font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink)}

.callout{border:1px solid var(--rule);background:var(--card);padding:1.2rem 1.35rem;margin-top:1.8rem;max-width:66ch}
.callout b{display:block;font-family:var(--display);font-weight:600;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:.4rem}
.callout p{margin:0;font-size:.95rem}

form{background:var(--card);border:1px solid var(--rule);padding:1.6rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
@media(max-width:880px){.form-grid{grid-template-columns:1fr;gap:1.75rem}}
label{display:block;font-family:var(--display);font-size:.88rem;font-weight:600;margin-bottom:.35rem;color:var(--ink)}
input,textarea{width:100%;font:inherit;font-size:1rem;padding:.7rem .8rem;border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:0}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.field{margin-bottom:1rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:520px){.row2{grid-template-columns:1fr}}
.btn{display:block;width:100%;background:var(--accent);color:#fff;font-family:var(--display);font-weight:600;font-size:1.05rem;padding:.8rem 1.3rem;border:0;cursor:pointer}
.btn:hover{background:var(--accent-deep)}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.note{font-size:.86rem;color:var(--dim);margin:.85rem 0 0}

footer{background:var(--ink);color:#A9BCB6;padding:2.75rem 0 3.25rem;font-size:.9rem}
footer .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem}
@media(max-width:820px){footer .wrap{grid-template-columns:1fr;gap:1.6rem}}
footer h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#7B8F89;margin:0 0 .7rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
footer a{color:#DCE8E4;font-weight:600}
footer a:hover{color:#fff}
.foot-note{grid-column:1/-1;border-top:1px solid #27403A;margin-top:2rem;padding-top:1.3rem;font-size:.82rem;color:#7B8F89}