@font-face{font-family:"Archivo";src:url("/static/fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Atkinson";src:url("/static/fonts/atkinson-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url("/static/fonts/atkinson-700.woff2") format("woff2");font-weight:700;font-display:swap}
:root{
  --ink:#111318; --ink-2:#2A2E38; --paper:#F6F5F1; --card:#FFFFFF; --line:#E3E1DA; --line-2:#D2CFC5; --muted:#5C6170; --faint:#868B97;
  --yellow:#FFD60A; --yellow-soft:#FFF4B8;
  --ok:#13803B; --ok-bg:#E3F5E9; --ok-dot:#22A355;
  --minor:#A85A00; --minor-bg:#FFF0D6; --minor-dot:#E58A00;
  --major:#B91C1C; --major-bg:#FDE4E4; --major-dot:#E0302F;
  --unknown:#5C6170; --unknown-bg:#EEEDE8; --unknown-dot:#A3A7B1;
  --display:"Archivo","Arial Black",system-ui,sans-serif; --body:"Atkinson",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:4px}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
svg.i{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.17em}

/* header */
.top{border-bottom:1px solid var(--line);background:var(--paper)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;font:800 1.32rem/1 var(--display);font-stretch:112%;letter-spacing:-.02em}
.logo svg{width:32px;height:32px;flex:none}
.logo b{color:var(--ink)}
.logo span{background:var(--yellow);padding:0 .12em;border-radius:3px}
.nav{display:flex;gap:1.4rem;font-weight:700;font-size:.95rem}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--ink)}
@media (max-width:640px){.nav .opt{display:none}}

/* load shedding strip */
.eskom{background:var(--ink);color:#fff;font-size:.95rem}
.eskom .wrap{display:flex;align-items:center;gap:.6rem;min-height:42px;flex-wrap:wrap;padding-block:.35rem}
.eskom a{color:#fff;text-decoration:none;display:flex;align-items:center;gap:.55rem;font-weight:700}
.eskom .st{background:var(--yellow);color:var(--ink);border-radius:999px;padding:.12rem .6rem;font-weight:700;font-size:.85rem}
.eskom.off .st{background:#2E3340;color:#C9CDD6}
.eskom small{color:#B7BCC7}

/* buttons, inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:46px;padding:0 1.2rem;border-radius:12px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font:700 1rem var(--body);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--ink);color:#fff}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-2)}
.btn-yellow{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.btn-yellow:hover{background:#FFE14D;color:var(--ink)}
.btn-sm{min-height:38px;padding:0 .9rem;font-size:.92rem;border-radius:10px}
.btn:disabled{opacity:.5;cursor:wait}
.input{width:100%;min-height:48px;border:2px solid var(--line-2);border-radius:12px;padding:0 .9rem;font:400 1rem var(--body);background:var(--card);color:var(--ink)}
.input:focus{outline:none;border-color:var(--ink)}
.msg{padding:.75rem .9rem;border-radius:10px;font-weight:700;font-size:.95rem}
.msg.ok{background:var(--ok-bg);color:var(--ok)}
.msg.err{background:var(--major-bg);color:var(--major)}

/* status atoms */
.dot{width:.7rem;height:.7rem;border-radius:50%;display:inline-block;flex:none;background:var(--unknown-dot)}
.dot.ok{background:var(--ok-dot)} .dot.minor{background:var(--minor-dot)} .dot.major{background:var(--major-dot)}
.dot.major,.dot.minor{box-shadow:0 0 0 0 currentColor;animation:ping 1.8s infinite}
.dot.major{color:rgba(224,48,47,.45)} .dot.minor{color:rgba(229,138,0,.45)}
@keyframes ping{0%{box-shadow:0 0 0 0 currentColor}80%,100%{box-shadow:0 0 0 .55rem transparent}}
.pill{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.18rem .65rem;font-weight:700;font-size:.84rem;white-space:nowrap;background:var(--unknown-bg);color:var(--unknown)}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.minor{background:var(--minor-bg);color:var(--minor)} .pill.major{background:var(--major-bg);color:var(--major)}

/* home hero */
.hero{padding-block:clamp(2.5rem,7vw,5rem) clamp(2rem,5vw,3.5rem)}
.hero h1{font:800 clamp(2.5rem,7vw,5.4rem)/.95 var(--display);font-stretch:118%;letter-spacing:-.035em;max-width:13ch}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--yellow) 62%)}
.hero p{color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.22rem);max-width:40rem;margin-top:1.1rem}
.search{position:relative;max-width:640px;margin-top:1.8rem}
.search .input{min-height:64px;font-size:1.15rem;padding-left:3.2rem;border-radius:16px;border-color:var(--ink);box-shadow:0 6px 0 var(--ink)}
.search svg.i{position:absolute;left:1.1rem;top:22px;width:1.35rem;height:1.35rem;color:var(--muted)}
.results{position:absolute;left:0;right:0;top:calc(100% + 12px);background:var(--card);border:2px solid var(--ink);border-radius:16px;overflow:hidden;z-index:20;box-shadow:0 18px 40px -20px rgba(17,19,24,.45)}
.results a{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;text-decoration:none;border-top:1px solid var(--line)}
.results a:first-child{border-top:0}
.results a:hover,.results a.sel{background:var(--yellow-soft)}
.results .nm{font-weight:700;flex:1}
.results .meta{color:var(--muted);font-size:.9rem}
.results .none{padding:1rem;color:var(--muted)}

/* sections */
section.blk{padding-block:clamp(2rem,5vw,3.5rem)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
h2{font:800 clamp(1.5rem,3vw,2.1rem)/1.1 var(--display);font-stretch:110%;letter-spacing:-.02em}
.sec-head small{color:var(--muted)}
.now-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.9rem}
.now-card{display:flex;flex-direction:column;gap:.45rem;padding:1.05rem 1.1rem;background:var(--card);border:2px solid var(--line);border-left-width:6px;border-radius:14px;text-decoration:none}
.now-card.major{border-left-color:var(--major-dot)} .now-card.minor{border-left-color:var(--minor-dot)}
.now-card:hover{border-color:var(--ink)}
.now-card .row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.now-card b{font-size:1.12rem}
.now-card p{color:var(--muted);font-size:.95rem}
.allclear{display:flex;gap:1rem;align-items:center;padding:1.2rem 1.3rem;background:var(--ok-bg);color:var(--ok);border-radius:14px;font-weight:700}
.allclear svg.i{width:1.8rem;height:1.8rem}
.cats{columns:3 300px;column-gap:1.1rem}
.cat{break-inside:avoid;background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:1.1rem;overflow:hidden}
.cat h3{font:800 .82rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.9rem 1rem .5rem}
.cat a{display:flex;align-items:center;gap:.7rem;padding:.62rem 1rem;text-decoration:none;border-top:1px solid var(--line)}
.cat a:hover{background:var(--paper)}
.cat a span.n{flex:1;font-weight:700}
.cat a small{color:var(--muted);font-size:.85rem}
.how{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
@media (max-width:980px){.how{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.how{grid-template-columns:1fr}}
.how div{border-top:3px solid var(--ink);padding-top:.9rem}
.how b{display:block;font-size:1.05rem;margin-bottom:.25rem}
.how p{color:var(--muted);font-size:.95rem}
.cta{background:var(--yellow);border-radius:20px;padding:clamp(1.5rem,4vw,2.5rem);display:grid;grid-template-columns:1.2fr 1fr;gap:1.5rem;align-items:center}
@media (max-width:820px){.cta{grid-template-columns:1fr}}
.cta h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.cta p{margin-top:.5rem;color:#3B3A2E}

/* service page */
.crumb{font-size:.92rem;color:var(--muted);padding-top:1.2rem}
.crumb a{color:var(--muted)}
.svc-head{display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-items:end;padding-block:1rem 1.6rem}
@media (max-width:760px){.svc-head{grid-template-columns:1fr}}
.svc-head h1{font:800 clamp(2rem,5.5vw,3.8rem)/1 var(--display);font-stretch:115%;letter-spacing:-.03em}
.verdict{display:flex;align-items:center;gap:.9rem;margin-top:1rem;flex-wrap:wrap}
.verdict .big{display:inline-flex;align-items:center;gap:.6rem;font:800 clamp(1.2rem,2.6vw,1.6rem)/1.1 var(--display);padding:.55rem 1rem;border-radius:14px;background:var(--unknown-bg);color:var(--unknown)}
.verdict .big.ok{background:var(--ok-bg);color:var(--ok)} .verdict .big.minor{background:var(--minor-bg);color:var(--minor)} .verdict .big.major{background:var(--major-bg);color:var(--major)}
.verdict .big .dot{width:.9rem;height:.9rem}
.verdict small{color:var(--muted)}
.svc-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:1.25rem;align-items:start;padding-bottom:3rem}
@media (max-width:960px){.svc-grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(1.1rem,2.5vw,1.5rem)}
.card+.card{margin-top:1.25rem}
.card h2{font-size:1.3rem;margin-bottom:.8rem}
.ai{border:2px solid var(--ink);box-shadow:0 6px 0 var(--ink)}
.ai .hl{font:800 clamp(1.25rem,2.6vw,1.6rem)/1.15 var(--display);font-stretch:108%;margin-bottom:1rem}
.ai dl{display:grid;gap:.9rem}
.ai dt{font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ai dd{font-size:1.05rem}
.ai .eta{display:inline-flex;gap:.4rem;align-items:center;background:var(--yellow-soft);border-radius:8px;padding:.3rem .6rem;font-weight:700}
.ai .src{margin-top:1rem;color:var(--faint);font-size:.85rem}
.reasons{list-style:none;display:grid;gap:.55rem}
.reasons li{display:flex;gap:.6rem;align-items:flex-start}
.reasons li .dot{margin-top:.45rem}
.report .probs{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin:.9rem 0}
.report .probs button{min-height:52px;border:2px solid var(--line-2);background:var(--card);border-radius:12px;font:700 .98rem var(--body);cursor:pointer;color:var(--ink);padding:.4rem .6rem}
.report .probs button:hover,.report .probs button[aria-pressed="true"]{border-color:var(--ink);background:var(--yellow-soft)}
.report .after{display:grid;gap:.6rem;margin-top:.9rem}
.tell{display:grid;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.tell p{color:var(--muted);font-size:.92rem}
.chart svg{width:100%;height:150px;display:block}
.chart .axis{display:flex;justify-content:space-between;color:var(--faint);font-size:.8rem;margin-top:.35rem}
.chart .legend{color:var(--muted);font-size:.9rem;margin-top:.6rem}
.top-probs{display:grid;gap:.4rem;margin-top:.9rem}
.top-probs div{display:grid;grid-template-columns:9rem 1fr 2.5rem;gap:.6rem;align-items:center;font-size:.92rem}
.top-probs .bar{height:10px;background:var(--line);border-radius:6px;overflow:hidden}
.top-probs .bar i{display:block;height:100%;background:var(--ink)}
.areas .find{margin-bottom:.8rem}
.areas ul{list-style:none;display:grid;gap:.5rem;max-height:420px;overflow:auto}
.areas li{border:1px solid var(--line);border-radius:10px;padding:.6rem .75rem}
.areas li b{display:block}
.areas li small{color:var(--muted)}
.timeline{list-style:none;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:7.2rem 1fr;gap:.9rem;padding:.8rem 0;border-top:1px solid var(--line)}
.timeline li:first-child{border-top:0}
@media (max-width:520px){.timeline li{grid-template-columns:1fr;gap:.2rem}}
.timeline time{color:var(--muted);font-size:.88rem}
.timeline .k{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.12rem .45rem;border-radius:6px;background:var(--paper);border:1px solid var(--line);margin-right:.4rem;vertical-align:.1em}
.timeline .k.official{background:var(--ink);color:#fff;border-color:var(--ink)} .timeline .k.x{background:#000;color:#fff;border-color:#000}
.timeline .k.team{background:var(--yellow);border-color:var(--yellow)}
.timeline b{font-weight:700}
.timeline p{color:var(--ink-2);font-size:.96rem;margin-top:.15rem;white-space:pre-line}
.timeline a{font-size:.88rem;color:var(--muted)}
.alerts .row{display:flex;gap:.5rem;flex-wrap:wrap}
.alerts .row .input{flex:1;min-width:200px}
.contact a{display:flex;align-items:center;gap:.6rem;padding:.6rem 0;border-top:1px solid var(--line);text-decoration:none;font-weight:700}
.contact a:first-of-type{border-top:0}
.contact a small{color:var(--muted);font-weight:400;margin-left:auto}
.updated{color:var(--faint);font-size:.85rem}

/* account / message / about */
.page{padding-block:clamp(2rem,6vw,4rem);max-width:820px}
.page h1{font:800 clamp(2rem,5vw,3rem)/1.05 var(--display);font-stretch:112%;letter-spacing:-.03em;margin-bottom:1rem}
.page p{color:var(--ink-2);margin-bottom:1rem;max-width:42rem}
.page h2{margin:2rem 0 .7rem;font-size:1.4rem}
.page ul{padding-left:1.2rem;margin-bottom:1rem}
.picks{display:grid;gap:1rem}
.picks fieldset{border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem;background:var(--card)}
.picks legend{font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 .3rem}
.picks label{display:inline-flex;align-items:center;gap:.4rem;margin:.25rem .9rem .25rem 0;font-size:.98rem;cursor:pointer}
.picks input{width:18px;height:18px;accent-color:var(--ink)}

footer{border-top:1px solid var(--line);padding-block:2rem 2.5rem;color:var(--muted);font-size:.92rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem}
footer nav{display:flex;gap:1.2rem;flex-wrap:wrap}
footer a{text-decoration:none;font-weight:700}
footer a:hover{color:var(--ink)}
#toast{position:fixed;left:50%;bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;padding:.75rem 1.1rem;border-radius:12px;font-weight:700;z-index:50;max-width:92vw}

#ai .card{margin-bottom:1.25rem}
@media (max-width:640px){.opt-m{display:none}}