/* DS Electrical wave 5: "Will my house cope?" home power check (.cp-)
   Used by ev-ready-checker.html only. Wave 1 visual language: #2f7bff on
   #08090c / #0d0f14, breaker-rail progress, tester-LCD readout.
   Without JS the checker is a plain form (every question visible, posts to
   /api/booking). w5-cope.js adds .cp-live to turn it into a stepper.
   Motion only under prefers-reduced-motion: no-preference. */
.cp-sec,.cp-hero{--y:#2f7bff;--y2:#5b9bff;--bg:#08090c;--bg2:#0d0f14;--deep:#0a0c11;--ink:#f4f6f8;--muted:#9aa3ad;--line:rgba(255,255,255,.10);--mono:'Archivo',system-ui,sans-serif;font-family:'Archivo','Archivo',system-ui,sans-serif;color:var(--ink)}
.cp-sec *,.cp-hero *,.cp-sec *::before,.cp-hero *::before,.cp-sec *::after,.cp-hero *::after{box-sizing:border-box}
.cp-wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.cp-eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--y);font-weight:700;margin:0 0 12px}
.cp-h2{font-size:clamp(26px,3vw,40px);line-height:1.08;letter-spacing:-.025em;font-weight:800;margin:0;color:var(--ink)}
.cp-lead{font-size:16px;line-height:1.6;color:var(--muted);margin:12px 0 0;max-width:62ch}
.cp-hero a,.cp-sec a{color:var(--y);text-decoration:underline;text-underline-offset:2px}
.cp-hero a:hover,.cp-sec a:hover{color:var(--y2)}
.cp-hero :focus-visible,.cp-sec :focus-visible{outline:2px solid var(--y);outline-offset:2px}

/* ---------- Hero: copy + checker card ---------- */
.cp-hero{background:radial-gradient(1200px 500px at 85% -10%,rgba(47,123,255,.07),transparent 60%),var(--bg);padding:56px 0 72px}
.cp-hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:start}
.cp-hero-copy{min-width:0;padding-top:12px}
.cp-hero h1{font-size:clamp(40px,5.4vw,72px);line-height:1;letter-spacing:-.035em;font-weight:900;margin:0 0 20px;color:#fff}
.cp-hero h1 em{font-style:normal;color:var(--y)}
.cp-hero-p{font-size:17px;line-height:1.65;color:#cbd2db;margin:0 0 14px;max-width:56ch}
.cp-hero-note{font-size:14px;line-height:1.55;color:var(--muted);margin:0 0 22px;max-width:56ch}
.cp-looks{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:52ch}
.cp-looks li{position:relative;padding-left:30px;font-size:15px;line-height:1.45;color:var(--ink)}
.cp-looks li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:4px;background:#1f242e;box-shadow:inset 0 0 0 1px var(--line)}
.cp-looks li::after{content:"";position:absolute;left:4px;top:5px;width:8px;height:6px;border-radius:2px;background:var(--y)}

/* ---------- Checker card ---------- */
.cp{position:relative;min-width:0;background:var(--bg2);border:1px solid rgba(47,123,255,.26);border-radius:20px;padding:22px;box-shadow:0 30px 80px -40px rgba(0,0,0,.9);color:var(--ink);font-family:'Archivo','Archivo',system-ui,sans-serif;margin:0}
.cp [hidden]{display:none!important}
#cope,.cp-result,#main-fuse{scroll-margin-top:88px}
.cp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 18px;min-height:30px}
.cp-title{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--y);margin:0}
.cp-bar{display:flex;align-items:center;gap:10px;margin-left:auto}
.cp-count{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--muted);margin:0;white-space:nowrap}
/* progress = a row of breakers switching on */
.cp-rail{display:flex;gap:4px;padding:4px 5px;border-radius:6px;background:var(--deep);border:1px solid var(--line)}
.cp-brk{position:relative;display:block;width:12px;height:20px;border-radius:3px;background:#1f242e;overflow:hidden}
.cp-brk::after{content:"";position:absolute;left:2px;right:2px;height:8px;border-radius:2px;background:#64748b;top:10px;transition:top .25s ease,background .25s ease}
.cp-brk.on::after{top:2px;background:var(--y)}

.cp-step{border:0;margin:0 0 26px;padding:0;min-width:0}
.cp-q{display:block;width:100%;padding:0;font-size:clamp(20px,2vw,24px);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0 0 6px;color:var(--ink);outline:none}
.cp-q-n{display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--y);font-weight:500;margin-bottom:6px}
.cp-sub{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 14px}
.cp-opts{display:grid;gap:8px}
.cp-opts.cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.cp-opt{display:flex;align-items:center;gap:12px;min-height:54px;padding:11px 14px;background:rgba(15,23,42,.6);border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .2s,background .2s;min-width:0}
.cp-opt:hover{border-color:rgba(47,123,255,.6)}
.cp-opt:has(input:checked){border-color:var(--y);background:rgba(47,123,255,.11)}
.cp-opt:has(input:focus-visible){outline:2px solid var(--y);outline-offset:2px}
.cp-opt input{flex:none;width:20px;height:20px;margin:0;accent-color:#2f7bff;cursor:pointer}
.cp-opt-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.cp-opt-t{font-size:15.5px;font-weight:650;line-height:1.3;color:var(--ink)}
.cp-opt-d{font-size:12.5px;line-height:1.4;color:var(--muted)}
.cp-ico{flex:none;width:46px;height:34px;margin-left:auto}
.cp-help{margin:12px 0 0;border:1px dashed rgba(255,255,255,.2);border-radius:12px;padding:0 14px;font-size:14px;line-height:1.55;color:#cbd2db}
.cp-help summary{cursor:pointer;padding:11px 0;font-weight:700;color:var(--y);list-style-position:inside}
.cp-help ol{margin:0 0 12px;padding-left:20px;display:grid;gap:6px}
.cp-help p{margin:0 0 12px}

.cp-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px}
.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:40px;font:700 15px/1 'Archivo',system-ui,sans-serif;cursor:pointer;border:1px solid transparent;transition:background .2s,border-color .2s,color .2s;text-decoration:none}
.cp-btn-y{background:var(--y);color:#f4f6f8}
.cp-btn-y:hover{background:var(--y2);color:#f4f6f8}
.cp-btn-o{background:none;border-color:var(--line);color:var(--ink)}
.cp-btn-o:hover{border-color:var(--y);color:var(--y)}
.cp-btn[disabled]{opacity:.6;cursor:progress}
.cp-next{margin-left:auto}
.cp-err{margin:10px 0 0;font-size:13.5px;color:var(--y);min-height:1.2em}

/* ---------- Result: tester LCD readout ---------- */
.cp-result{outline:none;margin:0 0 24px}
.cp-lcd{padding:10px 14px 12px;border-radius:12px;background:linear-gradient(180deg,#c9d3b0,#b3bf96);border:3px solid #111827;box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.08);color:#0d150e;font-family:var(--mono)}
.cp-lcd-top{display:flex;justify-content:space-between;font-size:.75rem;letter-spacing:.14em;opacity:.75;margin-bottom:6px}
.cp-lcd-mode{border:1px solid currentColor;border-radius:2px;padding:0 4px;letter-spacing:.08em}
.cp-lcd-main{font-size:clamp(20px,3.4vw,28px);font-weight:600;letter-spacing:.04em;line-height:1.1;margin:0 0 8px;text-transform:uppercase;overflow-wrap:anywhere}
.cp-lcd-rows{list-style:none;margin:0;padding:8px 0 0;border-top:1px dashed rgba(13,21,14,.35);display:grid;gap:3px}
.cp-lcd-rows li{display:flex;align-items:baseline;gap:8px;font-size:12.5px;line-height:1.5}
.cp-lcd-rows .k{text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.cp-lcd-rows .dots{flex:1;min-width:12px;border-bottom:1px dotted rgba(13,21,14,.45);transform:translateY(-3px)}
.cp-lcd-rows .v{font-weight:700;letter-spacing:.04em;white-space:nowrap;text-transform:uppercase}
.cp-lcd-rows .v.warn::before{content:"! "}
.cp-lcd-rows .v.bad::before{content:"!! "}
@media (prefers-reduced-motion:no-preference){
 .cp-result.is-in .cp-lcd-main,.cp-result.is-in .cp-lcd-rows li{animation:cp-lcd-on .34s steps(2,end) both;animation-delay:calc(var(--i,0) * 110ms)}
 .cp-step.is-on{animation:cp-in .28s ease both}
}
@keyframes cp-lcd-on{0%{opacity:0}50%{opacity:.35}100%{opacity:1}}
@keyframes cp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.cp-tag{display:inline-flex;align-items:center;gap:8px;margin:18px 0 10px;padding:6px 12px;border-radius:30px;font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;border:1px solid currentColor}
.cp-tag.t-ready{color:#86efac}
.cp-tag.t-checks{color:var(--y)}
.cp-tag.t-board{color:#fdba74}
.cp-tag.t-supply,.cp-tag.t-park{color:#ff9d85}
.cp-rh{font-size:clamp(21px,2.2vw,26px);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0 0 10px;color:var(--ink);outline:none}
.cp-rlead{font-size:15.5px;line-height:1.6;color:#cbd2db;margin:0 0 16px}
.cp-r4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--y);font-weight:700;margin:18px 0 8px}
.cp-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.cp-list li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.55;color:#cbd2db}
.cp-list li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--y)}
.cp-disclaim{margin:18px 0 0;padding:12px 14px;border-left:3px solid var(--y);background:rgba(47,123,255,.07);border-radius:6px;font-size:13.5px;line-height:1.55;color:#cbd2db}
.cp-restart{margin-top:14px;background:none;border:0;padding:6px 0;font:700 14px/1 'Archivo',system-ui,sans-serif;color:var(--muted);cursor:pointer}
.cp-restart:hover{color:var(--y)}

/* ---------- Contact (lead form) ---------- */
.cp-contact{border:0;margin:0;padding:20px 0 0;border-top:1px solid var(--line);min-width:0}
.cp-contact-intro{font-size:14.5px;line-height:1.55;color:#cbd2db;margin:0 0 14px}
.cp-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cp-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.cp-f.full{grid-column:1/-1}
.cp-f label{font-size:13px;font-weight:700;color:var(--ink)}
.cp-f label small{font-weight:500;color:var(--muted)}
.cp-f input,.cp-f textarea{width:100%;background:var(--deep);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:12px;color:var(--ink);font:400 16px/1.3 'Archivo',system-ui,sans-serif;resize:vertical}
.cp-f input:focus,.cp-f textarea:focus{outline:none;border-color:var(--y);box-shadow:0 0 0 3px rgba(47,123,255,.22)}
.cp-f input[aria-invalid="true"]{border-color:#ff9d85}
.cp-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.cp-submit{width:100%;margin-top:16px;min-height:54px;font-size:16px}
.cp-small{font-size:12.5px;line-height:1.5;color:var(--muted);margin:10px 0 0}
.cp-nojs{font-size:13.5px;line-height:1.5;color:var(--y);margin:0 0 12px}
.cp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* stepper mode (JS on) */
.cp-live .cp-step{display:none}
.cp-live .cp-step.is-on{display:block}
.cp-live .cp-contact{display:none}
.cp-live.is-result .cp-contact{display:block}
.cp-live.is-result .cp-next{display:none}
/* the head shows the count; the legend keeps it for screen readers */
.cp-live .cp-q-n{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Main fuse explainer ---------- */
.cp-sec{background:var(--bg2);padding:72px 0}
.cp-sec.alt{background:var(--bg)}
.cp-fuse-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:start;margin-top:32px}
.cp-intake{background:var(--deep);border:1px solid var(--line);border-radius:18px;padding:18px}
.cp-intake svg{display:block;width:100%;height:auto}
.cp-key{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.cp-key li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;font-size:14px;line-height:1.5;color:#cbd2db}
.cp-key b{color:var(--ink)}
.cp-key .n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#2468e3;color:#f4f6f8;font:700 12px/1 var(--mono)}
.cp-steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:16px}
.cp-steps li{counter-increment:s;position:relative;padding-left:44px;font-size:15.5px;line-height:1.6;color:#cbd2db}
.cp-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:8px;background:#1f242e;color:var(--y);display:flex;align-items:center;justify-content:center;font:600 13px/1 var(--mono)}
.cp-steps b{color:var(--ink)}
.cp-warn{margin:22px 0 0;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,157,133,.45);background:rgba(255,122,92,.08);font-size:14.5px;line-height:1.55;color:#ffd2c7}
.cp-warn b{color:#fff}

/* ---------- Supply facts + FAQ ---------- */
.cp-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:32px}
.cp-fact{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:20px}
.cp-sec.alt .cp-fact{background:var(--bg2)}
.cp-fact h3{font-size:18px;font-weight:800;letter-spacing:-.01em;margin:0 0 8px;color:var(--ink)}
.cp-fact p{font-size:14.5px;line-height:1.6;color:#cbd2db;margin:0}
.cp-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px;margin-top:32px}
.cp-faq-i{border-top:1px solid var(--line);padding-top:16px}
.cp-faq-i h3{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.3;margin:0 0 8px;color:var(--ink)}
.cp-faq-i p{font-size:14.5px;line-height:1.65;color:#cbd2db;margin:0}

@media (max-width:980px){
 .cp-hero-grid,.cp-fuse-grid{grid-template-columns:1fr;gap:32px}
 /* phones/tablets: headline, then straight into the checker, then the detail */
 .cp-hero-grid{row-gap:0}
 .cp-hero-copy{display:contents}
 .cp-hero-copy>.cp-eyebrow,.cp-hero h1,.cp-hero-p{order:1}
 .cp-hero h1{margin-bottom:14px}
 #cope{order:2;margin:6px 0 28px}
 .cp-hero-note,.cp-looks{order:3}
 .cp-facts{grid-template-columns:1fr}
 .cp-faq{grid-template-columns:1fr}
}
@media (max-width:600px){
 .cp-wrap{padding:0 16px}
 .cp-hero{padding:32px 0 48px}
 .cp-sec{padding:48px 0}
 .cp{padding:16px;border-radius:16px}
 .cp-opts.cols,.cp-fields{grid-template-columns:1fr}
 .cp-intake{padding:12px}
 .cp-ico{width:38px;height:28px}
 .cp-btn{padding:0 18px}
}
@media (max-width:360px){
 .cp-head{gap:8px}
 .cp-title{display:none}
 .cp-lcd-rows li{font-size:.75rem;gap:6px}
}
@media print{.cp-hero *,.cp-sec *{color:#f4f6f8!important;background:transparent!important;text-shadow:none!important}
 .cp-hero,.cp-sec{background:#0d0f14!important;color:#f4f6f8!important}
 .cp,.cp-fact,.cp-intake{background:#0d0f14!important;border-color:#ccc!important;box-shadow:none!important}
 .cp-nav,.cp-restart,.cp-contact,.cp-bar{display:none!important}
 .cp-hero h1,.cp-h2,.cp-q,.cp-rh,.cp-fact h3,.cp-faq-i h3{color:#f4f6f8!important}
 .cp-hero-p,.cp-lead,.cp-list li,.cp-faq-i p,.cp-fact p,.cp-steps li{color:#f4f6f8!important}
}

/* 25-10-2026: homepage look. No breaker tiles, no LCD readout: slim progress bars and a plain result card. */
.cp-rail{gap:6px;padding:0;background:none;border:0}
.cp-brk{width:30px;height:4px;border-radius:4px;background:rgba(255,255,255,.12)}
.cp-brk::after{display:none}
.cp-brk.on{background:linear-gradient(100deg,#2f7bff,#38d6ff)}
/* 375px phones: the 7-step rail was 343px in a 309px header and widened the page; let it shrink */
.cp-bar{max-width:100%;min-width:0}.cp-rail{min-width:0}.cp-brk{flex:0 1 auto;min-width:10px}
.cp-btn-y{background:linear-gradient(100deg,#2f7bff,#38d6ff);color:#04122b;border-radius:40px}
.cp-btn-y:hover{background:linear-gradient(100deg,#2f7bff,#38d6ff);filter:brightness(1.08);color:#04122b}
.cp-lcd{padding:22px 24px;border-radius:18px;background:#0d0f14;border:1px solid var(--line);box-shadow:0 24px 50px -20px rgba(0,0,0,.8);color:var(--ink);font-family:'Archivo',system-ui,sans-serif}
.cp-lcd-top{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);opacity:1}
.cp-lcd-mode{border-color:rgba(47,123,255,.5);color:#5b9bff;border-radius:6px;padding:1px 8px}
.cp-lcd-main{font-size:clamp(22px,3.4vw,32px);font-weight:800;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.cp-lcd-rows{border-top:1px solid var(--line)}
.cp-lcd-rows li{font-size:14.5px;color:var(--muted)}
.cp-lcd-rows .k{text-transform:none;letter-spacing:0}
.cp-lcd-rows .dots{border-bottom:1px dotted rgba(255,255,255,.18)}
.cp-lcd-rows .v{text-transform:none;letter-spacing:0;color:var(--ink)}
.cp-lcd-rows .v.warn{color:#fdba74}
.cp-lcd-rows .v.bad{color:#fca5a5}
.cp-result.is-in .cp-lcd-main,.cp-result.is-in .cp-lcd-rows li{animation:none}
/* HIG 2026-11-01 phones: the first question is taller than the screen, so its Next
   button sat under the #ds-mob bar. Keep the Back/Next row pinned just above the bar
   while the answers scroll. */
@media(max-width:768px){
  .cp-live .cp-nav{position:sticky;bottom:calc(84px + env(safe-area-inset-bottom));z-index:2;background:var(--bg2);padding:10px 0;margin-top:0;box-shadow:0 -14px 16px -14px rgba(0,0,0,.7)}
}