/* Fonts are hosted with the site: no outside requests, and they work offline. latin-ext is needed for Maltese letters (ċ ġ ħ ż). */
/* Onest, one variable font for headings and text, weights 400 to 900. */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

[hidden]{display:none!important}body{margin:0}img{max-width:100%}:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* Layout: luzzu-stripe header, then a two-column workbench (appliances | live result), then plain guidance sections. */
:root{
  --bg:#f4f7fb; --surface:#ffffff; --surface-2:#eaf0f8; --ink:#0f1f33; --muted:#55667c; --line:#d8e0eb;
  --blue:#1a4f9c; --blue-soft:#dbe7f8; --yellow:#f2b705; --on-yellow:#1a1300; --red:#c8312b;
  --good:#1f7a4d; --warn:#a85407; --crit:#b42318; --warn-bg:#fff4e5; --crit-bg:#fdecea;
  --f-display:"Onest", "Segoe UI", system-ui, sans-serif;
  --f-body:"Onest", "Segoe UI", system-ui, sans-serif;
  --r:10px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0b1422; --surface:#121e30; --surface-2:#18273d; --ink:#e7eef8; --muted:#9caec4; --line:#24354e;
  --blue:#78a8f0; --blue-soft:#1c3150; --yellow:#f5c537; --on-yellow:#1a1300; --red:#ef6b63;
  --good:#53c690; --warn:#f2a65e; --crit:#f2867b; --warn-bg:#2d2112; --crit-bg:#341a1a; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0b1422; --surface:#121e30; --surface-2:#18273d; --ink:#e7eef8; --muted:#9caec4; --line:#24354e;
  --blue:#78a8f0; --blue-soft:#1c3150; --yellow:#f5c537; --on-yellow:#1a1300; --red:#ef6b63;
  --good:#53c690; --warn:#f2a65e; --crit:#f2867b; --warn-bg:#2d2112; --crit-bg:#341a1a; color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.1}
.num{font-variant-numeric:tabular-nums}

.stripe{height:6px;background:linear-gradient(90deg,var(--yellow) 0 33.3%,var(--blue) 33.3% 66.6%,var(--red) 66.6%)}
header .wrap{padding-block:28px 20px;display:grid;gap:8px}
header h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.02em}
header h1 span{color:var(--blue)}
header p{margin:0;color:var(--muted);max-width:62ch;font-size:1.05rem}

.bench{display:grid;gap:20px;grid-template-columns:1fr;padding-block:8px 32px}
@media (min-width:900px){ .bench{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start} .result{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px)} }

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.panel-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:16px 18px 6px}
.panel-h h2{font-size:1.25rem}
.eyebrow{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.linkbtn{background:none;border:0;color:var(--blue);font:inherit;font-size:.9rem;cursor:pointer;padding:4px;text-decoration:underline;text-underline-offset:3px}

.group{padding:10px 18px 4px}
.group h3{font-family:var(--f-body);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:4px;border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.group .row:last-child{border-bottom:0}
.row .name{font-weight:700}
.row .meta{font-size:.85rem;color:var(--muted)}
.ico{width:40px;height:40px;border-radius:10px;background:var(--surface-2);color:var(--blue);display:grid;place-items:center;transition:background .2s,color .2s}
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.row.on .ico{background:var(--yellow);color:var(--on-yellow)}
.tag{display:inline-block;font-size:.7rem;font-weight:700;padding:1px 7px;border-radius:99px;margin-left:6px;vertical-align:2px}
.tag.med{background:var(--blue-soft);color:var(--blue)}
.tag.heavy{background:var(--warn-bg);color:var(--warn)}

.step{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.step button{width:38px;height:38px;border:0;background:var(--surface-2);color:var(--ink);font-size:1.2rem;cursor:pointer}
.step button:hover{background:var(--blue-soft)}
.step output{min-width:34px;text-align:center;font-weight:700}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

.custom{padding:12px 18px 18px;display:grid;gap:8px}
.custom form{display:flex;gap:8px;flex-wrap:wrap}
.custom input{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);min-width:0}
.custom input[type=text]{flex:1 1 180px}
.custom input[type=number]{width:110px}
.btn{font:inherit;font-weight:700;padding:8px 14px;border-radius:8px;border:0;background:var(--blue);color:#fff;cursor:pointer}
:root[data-theme="dark"] .btn{color:#0b1422}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn{color:#0b1422} }

/* result */
.result .panel{overflow:hidden}
.hours{padding:6px 18px 14px;display:grid;gap:10px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:inherit;font-size:.9rem;padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow);font-weight:700}
.hours input[type=range]{width:100%;accent-color:var(--blue)}
.big{padding:16px 18px;background:var(--surface-2);border-block:1px solid var(--line);display:grid;gap:4px}
.big .val{font-family:var(--f-display);font-size:clamp(2.4rem,6vw,3.4rem);font-weight:800;letter-spacing:-.02em;line-height:1}
.big .val small{font-size:.45em;font-weight:700;color:var(--muted);margin-left:4px}
.big .sub{color:var(--muted);font-size:.9rem}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.stat{background:var(--surface);padding:12px 14px}
.stat b{display:block;font-size:1.25rem;font-family:var(--f-display)}
.stat span{font-size:.78rem;color:var(--muted)}

.rec{padding:16px 18px;display:grid;gap:8px;border-bottom:1px solid var(--line)}
.rec h3{font-size:1.35rem}
.rec .price{font-weight:700;color:var(--blue)}
.rec ul{margin:0;padding-left:1.1em;display:grid;gap:4px}
.rec .fine{font-size:.78rem;color:var(--muted)}

.runtime{padding:14px 18px 18px;display:grid;gap:8px}
.rt{display:grid;grid-template-columns:72px minmax(0,1fr) 118px;gap:10px;align-items:center;font-size:.9rem}
.bar{height:12px;border-radius:6px;background:var(--surface-2);overflow:hidden;position:relative}
.bar i{display:block;height:100%;background:var(--blue);border-radius:6px}
.bar i.fit{background:var(--good)}
.rt .h{text-align:right;font-weight:700}
.rt .h.no{color:var(--crit);font-weight:700;font-size:.8rem}
.target{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink)}

.alerts{padding:0 18px 18px;display:grid;gap:8px}
.alert{border-left:4px solid var(--warn);background:var(--warn-bg);padding:10px 12px;border-radius:0 8px 8px 0;font-size:.92rem}
.alert.crit{border-color:var(--crit);background:var(--crit-bg)}
.alert.info{border-color:var(--blue);background:var(--blue-soft)}
.alert b{display:block}

/* guidance */
.guide{padding-block:8px 48px;display:grid;gap:20px}
.guide-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.card{padding:20px;display:grid;gap:10px;align-content:start}
.card h2{font-size:1.3rem}
.card p,.card li{max-width:65ch}
.card ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
.card p{margin:0}
.foodtbl{width:100%;border-collapse:collapse;font-size:.92rem}
.foodtbl td{padding:8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.foodtbl td:last-child{text-align:right;font-weight:700;white-space:nowrap;padding-left:12px}
.card a{color:var(--blue)}
footer{color:var(--muted);font-size:.82rem;padding-block:0 40px}
footer p{max-width:80ch;margin:0}
@media (prefers-reduced-motion:no-preference){ .bar i{transition:width .3s ease} }

/* tabs and views */
header{border-bottom:1px solid var(--line);background:var(--surface)}
header .tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-block:0}
.tabs a{flex:none;padding:12px 14px;color:var(--muted);text-decoration:none;font-weight:700;border-bottom:3px solid transparent;font-size:.95rem}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--yellow)}
.tabs a:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.view{padding-block:20px 8px}
.intro{color:var(--muted);max-width:65ch;margin:0 0 16px;font-size:1.02rem}
.intro a,.disclosure a{color:var(--blue)}
.disclosure{font-size:.82rem;color:var(--muted);background:var(--surface-2);border-radius:8px;padding:8px 12px;margin:0 0 20px;max-width:none}

.pill{justify-self:start;display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:99px}
.pill.now{background:var(--yellow);color:var(--on-yellow)}
.pill.before{background:var(--blue-soft);color:var(--blue)}
.pill.after{background:var(--surface-2);color:var(--good)}
.phase{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:20px;display:grid;gap:14px}
.phase-h{display:grid;gap:8px}
.phase-h h2{font-size:1.6rem}
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.steps li{counter-increment:s;position:relative;padding-left:44px;min-height:32px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--blue);color:var(--surface);font-weight:700;display:grid;place-items:center;font-family:var(--f-display)}
.steps b{display:block}
.tel{font-weight:700;white-space:nowrap}
.big-tel{font-family:var(--f-display);font-size:2rem;letter-spacing:.01em}
.contact{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.links{list-style:none;padding:0 !important}
.sel{user-select:all;font-weight:700}

/* kit */
/* header: brand + illustration */
@media (min-width:760px){ header .wrap.top{grid-template-columns:minmax(0,1fr) 230px;align-items:end;gap:24px} }
.brand{display:grid;gap:10px;min-width:0}
.brandrow{display:flex;justify-content:space-between;align-items:center;gap:12px}
.art{width:230px;max-width:100%;display:none;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.art .pane{fill:var(--surface-2);stroke-width:1.5}
.art .moonart{fill:var(--yellow);stroke:none}
@media (min-width:760px){ .art{display:block} }
.themebtn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.85rem;font-weight:700;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:6px 12px;cursor:pointer}
.themebtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.themebtn .sun{display:none}
.themebtn.isdark .sun{display:inline}
.themebtn.isdark .moon{display:none}
.sos{justify-self:start;display:flex;align-items:center;gap:14px;margin-top:6px;padding:14px 20px 14px 16px;border-radius:14px;background:var(--yellow);color:var(--on-yellow);text-decoration:none;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.sos svg{width:34px;height:34px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sos b{display:block;font-family:var(--f-display);font-size:1.3rem;line-height:1.15}
.sos small{display:block;font-size:.85rem;opacity:.85}
.sos:hover{filter:brightness(1.05)}
.sos:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* outage mode: a deliberate single dark look, readable in a dark room */
body.outage-on{background:#070d16}
body.outage-on header,body.outage-on footer,body.outage-on .stripe{display:none}
.outage{--o-bg:#070d16;--o-card:#111b2a;--o-ink:#f3f6fb;--o-muted:#a9b6c8;--o-line:#22314a;--o-yellow:#f5c537;
  color:var(--o-ink);font-size:1.15rem;padding-block:16px 40px;display:grid;gap:18px;max-width:760px;margin:0 auto;color-scheme:dark}
#outage{display:grid;gap:14px}
.obar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.oback{color:var(--o-yellow);font-weight:700;text-decoration:none;padding:8px 0}
.lang{display:flex;border:1px solid var(--o-line);border-radius:99px;overflow:hidden}
.lang button{font:inherit;font-size:.9rem;padding:8px 16px;border:0;background:transparent;color:var(--o-muted);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--o-yellow);color:#1a1300;font-weight:700}
.outage h2{font-size:clamp(2rem,7vw,2.8rem);color:var(--o-ink)}
.ocall{background:var(--o-card);border:1px solid var(--o-line);border-radius:14px;padding:18px;display:grid;gap:10px}
.ocall .lbl{color:var(--o-muted);font-size:.95rem}
.ocall .n{font-family:var(--f-display);font-size:clamp(2.4rem,9vw,3.2rem);font-weight:800;color:var(--o-yellow);letter-spacing:.01em;line-height:1}
.obtns{display:flex;gap:10px;flex-wrap:wrap}
.obtns a,.obtns button{font:inherit;font-weight:700;font-size:1rem;padding:12px 18px;border-radius:10px;border:0;cursor:pointer;text-decoration:none;min-height:48px;display:inline-flex;align-items:center}
.obtns .primary{background:var(--o-yellow);color:#1a1300}
.obtns .ghost{background:transparent;color:var(--o-ink);border:1px solid var(--o-line)}
.osteps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:o}
.osteps li{counter-increment:o;background:var(--o-card);border:1px solid var(--o-line);border-radius:12px;padding:14px 16px 14px 62px;position:relative;line-height:1.4}
.osteps li::before{content:counter(o);position:absolute;left:14px;top:14px;width:34px;height:34px;border-radius:50%;background:var(--o-yellow);color:#1a1300;font-weight:800;display:grid;place-items:center;font-family:var(--f-display)}
.osteps b{display:block;font-size:1.2rem;margin-bottom:2px}
.osteps span{color:var(--o-muted);font-size:1rem}
.olinks{display:grid;gap:8px}
.olinks a{color:var(--o-yellow);font-weight:700}
.onote{color:var(--o-muted);font-size:.85rem;margin:0}
.danger{border-color:#7a2a24 !important}
.danger::before{background:#f2867b !important}

.help-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.kitgroup{margin-bottom:24px}
.kitgroup h2{font-size:1.25rem;margin-bottom:12px}
.kitgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.kititem{padding:16px;display:grid;gap:8px;grid-template-rows:auto auto 1fr auto}
.kititem .top{display:flex;gap:12px;align-items:center}
.kititem h3{font-size:1.05rem;font-family:var(--f-body)}
.kititem p{margin:0;font-size:.92rem;color:var(--muted)}
.kititem .price{font-weight:700;font-size:.9rem}
.shop{display:inline-block;text-align:center;font-weight:700;padding:8px 12px;border-radius:8px;text-decoration:none;background:var(--blue);color:var(--surface)}
.shop[aria-disabled="true"]{background:var(--surface-2);color:var(--muted);cursor:default}
.kititem .ico{width:44px;height:44px;flex:none}

/* call links */
a.tel{color:inherit}
.card a.callbtn{display:inline-flex;align-items:center;min-height:48px;padding:10px 18px;border-radius:10px;font-weight:700;text-decoration:none;background:var(--blue);color:var(--surface)}
.card a.callbtn:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.obtns a.primary{color:#1a1300}
.contact{align-items:center}

/* compensation */
.foodtbl th{text-align:left;font-size:.78rem;color:var(--muted);font-weight:700;padding:0 0 6px;border-bottom:1px solid var(--line)}
.foodtbl th:last-child{text-align:right}
.checked{font-size:.85rem;color:var(--muted);margin:0 0 20px}

/* privacy and affiliate pages */
.legal-lead{margin:0;max-width:65ch;font-size:1.1rem}
.legal-links{margin-top:10px !important}
.legal-links a{color:inherit}
.todo{background:var(--warn-bg);color:var(--warn);font-weight:700;padding:0 4px;border-radius:4px}

/* kit photos */
.kititem{grid-template-rows:auto auto auto 1fr auto}
.kitphoto{margin:0;display:grid;gap:4px}
.kitphoto img{display:block;width:100%;height:auto;border-radius:8px;background:var(--surface-2)}
.kitphoto figcaption{font-size:.72rem;color:var(--muted)}

/* two-tone icons */
.dt{width:1.25em;height:1.25em;flex:none;display:block}
.chip-ico{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--pg-soft);color:var(--pg);font-size:1.15rem}
.ico-h{display:flex;align-items:center;gap:12px}
.ico-h .chip-ico{width:38px;height:38px;font-size:1rem}
.ico svg > :first-child{fill:currentColor;fill-opacity:.18}

/* header: shorter on inner pages, so the content starts sooner */
header .wrap.top{padding-block:18px 14px}
body:not(.home) header .brand > p,body:not(.home) header .art{display:none}
body:not(.home) header .sos{padding-block:10px;margin-top:0}
body:not(.home) header .sos small{display:none}
body:not(.home) header .wrap.top{grid-template-columns:minmax(0,1fr)}

/* menu: all five fit on a phone */
header .tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;overflow:visible;padding-block:0 8px}
.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;padding:6px 2px;border:0;border-radius:10px;color:var(--muted);font-size:.8rem;text-align:center}
.tabs a .dt{color:var(--pg);width:24px;height:24px}
.tabs a:hover{background:var(--pg-soft);color:var(--ink)}
.tabs a[aria-current="page"]{background:var(--pg-soft);color:var(--pg);box-shadow:inset 0 -3px 0 var(--pg)}
@media (min-width:760px){ .tabs a{flex-direction:row;gap:8px;font-size:.95rem;min-height:48px} }

/* coloured top box and buttons */
.hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;background:var(--pg-soft);border-radius:16px;padding:20px;margin:4px 0 20px}
.hero-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:var(--pg-btn);color:var(--pg-on);font-size:1.5rem}
.hero-body{display:grid;gap:8px;min-width:0}
.hero .eyebrow{color:var(--pg)}
.hero h2{font-size:clamp(1.6rem,5vw,2.2rem);font-weight:800;letter-spacing:-.01em}
.hero p{margin:0;max-width:62ch}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 18px;border-radius:12px;font-weight:700;text-decoration:none;background:var(--pg-btn);color:var(--pg-on);border:2px solid var(--pg-btn)}
.cta.ghost{background:transparent;color:var(--pg);border-color:var(--pg)}
.cta:hover{filter:brightness(1.08)}
.cta:focus-visible,.tile:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (max-width:520px){ .hero{grid-template-columns:minmax(0,1fr)} .cta{flex:1 1 100%} }

/* shortcut tiles */
.hub,.nextup{margin:8px 0 24px;display:grid;gap:12px}
.hub h2,.nextup h2{font-size:1.3rem}
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.tile{display:flex;gap:12px;padding:14px;border-radius:14px;background:var(--pg-soft);color:var(--ink);text-decoration:none;border:1px solid transparent;align-items:flex-start}
.tile:hover{border-color:var(--pg)}
.tile .chip-ico{background:var(--pg-btn);color:var(--pg-on)}
.tile-body{display:grid;gap:3px;min-width:0}
.tile-body b{font-family:var(--f-display);font-size:1.05rem}
.tile-body > span:not(.tile-go){font-size:.92rem;color:var(--ink)}
.tile-go{display:inline-flex;align-items:center;gap:6px;margin-top:3px;font-weight:700;color:var(--pg);font-size:.92rem}

/* cards and steps pick up the colour */
.card.t-planner,.card.t-guide,.card.t-kit,.card.t-help,.card.t-compensation,.card.t-danger{border-top:4px solid var(--pg)}
.card a,.intro a,.disclosure a{color:var(--pg)}
.card a.callbtn{background:var(--pg-btn);color:var(--pg-on)}
.phase{border-top:4px solid var(--pg)}
.phase-h{justify-items:start}
.steps li::before{background:var(--pg-btn);color:var(--pg-on)}
.shop{background:var(--pg-btn);color:var(--pg-on);min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.shop[aria-disabled="true"]{background:var(--surface-2);color:var(--muted)}
.rec .price{color:var(--pg)}
.kitgroup h2{margin-bottom:12px}


/* App-style home page mockup: mostly white, one strong colour, big simple actions. */
:root{--a-bg:#ffffff;--a-card:#f4f5f7;--a-ink:#14263f;--a-muted:#55657a;--a-line:#dfe3e9;--a-strong:#14263f;--a-on-strong:#ffffff;--a-yellow:#f2b705;--a-on-yellow:#1a1300;--a-done:#1f7a4d}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--a-bg:#0d1520;--a-card:#172231;--a-ink:#eef2f7;--a-muted:#a7b4c5;--a-line:#2a384a;--a-strong:#eef2f7;--a-on-strong:#0d1520;--a-yellow:#f5c537;--a-on-yellow:#1a1300;--a-done:#5fd39c}}
:root[data-theme="dark"]{--a-bg:#0d1520;--a-card:#172231;--a-ink:#eef2f7;--a-muted:#a7b4c5;--a-line:#2a384a;--a-strong:#eef2f7;--a-on-strong:#0d1520;--a-yellow:#f5c537;--a-on-yellow:#1a1300;--a-done:#5fd39c}

body.app{background:var(--a-bg);color:var(--a-ink);padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
.app h1,.app h2{font-family:var(--f-display)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.app-top,.app-main,.app-foot{max-width:1040px;margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left,0px))}

/* top bar */
.app-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:0}
.logo img{width:40px;height:40px;border-radius:10px;flex:none}
.logo b{display:block;font-family:var(--f-display);font-size:1.25rem;line-height:1.05;font-weight:800}
.logo small{display:block;color:var(--a-muted);font-size:.78rem}
.mode{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid var(--a-line);border-radius:50%;background:var(--a-bg);color:var(--a-ink);cursor:pointer}
.mode svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mode .sun{display:none}.mode.isdark .sun{display:block}.mode.isdark .moon{display:none}
.mode:focus-visible,.app a:focus-visible,.checks input:focus-visible+span{outline:3px solid var(--a-yellow);outline-offset:2px}
.desk-nav{display:none}

.app-main{display:grid;gap:18px;padding-block:4px 16px}
.col-a,.col-b{display:grid;gap:18px;align-content:start;min-width:0}
.sec{font-size:1.1rem;font-weight:700;margin:0 0 10px}

/* emergency card */
.sos-card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 112px;align-items:end;gap:4px;background:var(--a-yellow);color:var(--a-on-yellow);border-radius:20px;padding:20px 12px 20px 20px;min-height:204px}
.sos-kicker{margin:0 0 4px;font-size:.9rem;font-weight:700}
.sos-card h1{margin:0 0 16px;font-size:clamp(1.8rem,8vw,2.5rem);line-height:1.04;font-weight:800;letter-spacing:-.02em}
.sos-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 18px;border-radius:12px;background:#14263f;color:#fff;font-weight:700;text-decoration:none}
.lantern{width:100%;height:auto;align-self:center}
.lantern .glow{fill:#fff;opacity:.34}
.lantern .handle{fill:none;stroke:#14263f;stroke-width:7;stroke-linecap:round}
.lantern .metal{fill:#14263f}
.lantern .glass{fill:#fff6d6;stroke:#14263f;stroke-width:5}
.lantern .flame{fill:#ffffff}
.lantern .bar{stroke:#14263f;stroke-width:3;opacity:.45}
.lantern .knob{fill:#f2b705}

/* quick actions */
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.quick a{display:grid;justify-items:center;align-content:start;gap:7px;min-height:98px;padding:10px 3px;border-radius:14px;background:var(--a-card);color:var(--a-ink);text-decoration:none;text-align:center}
.quick a:hover{outline:2px solid var(--a-strong)}
.quick b{font-size:.82rem;line-height:1.18}
.qi{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--a-bg);color:var(--a-ink);flex:none}
.qi .dt{width:24px;height:24px}

/* planner */
.plan-card{display:flex;align-items:center;gap:14px;padding:18px;border-radius:18px;background:var(--a-strong);color:var(--a-on-strong);text-decoration:none}
.plan-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--a-yellow);color:#1a1300;flex:none}
.plan-ico .dt{width:28px;height:28px}
.plan-body{display:grid;gap:3px;min-width:0}
.plan-body b{font-family:var(--f-display);font-size:1.15rem;line-height:1.15}
.plan-body span{font-size:.9rem;opacity:.85}
.plan-go,.arrow{margin-left:auto;font-size:1.4rem;line-height:1}

/* readiness */
.ready{border:1px solid var(--a-line);border-radius:18px;padding:18px}
.ready-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ready h2{margin:0;font-size:1.35rem;font-weight:800}
.ready-h p{margin:2px 0 0;color:var(--a-muted);font-size:.92rem}
.ready-pc{font-family:var(--f-display);font-size:1.7rem;font-weight:800;line-height:1}
.meter{height:12px;border-radius:99px;background:var(--a-card);margin:12px 0 6px;overflow:hidden}
.meter i{display:block;height:100%;width:0;border-radius:99px;background:var(--a-yellow);transition:width .25s ease}
.meter i.full{background:var(--a-done)}
@media (prefers-reduced-motion:reduce){.meter i{transition:none}}
.checks{list-style:none;margin:0;padding:0}
.checks li{border-bottom:1px solid var(--a-line)}
.checks li:last-child{border-bottom:0}
.check{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;min-height:52px;padding:7px 0;cursor:pointer}
.check input{position:absolute;opacity:0;width:28px;height:28px;margin:0;cursor:pointer}
.check .box{display:grid;place-items:center;width:26px;height:26px;border:2px solid var(--a-muted);border-radius:7px;color:transparent}
.check .box svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.check input:checked+.box{background:var(--a-done);border-color:var(--a-done);color:var(--a-bg)}
.check input:checked~.lbl{color:var(--a-muted)}
.check .lbl{line-height:1.25}
.tip{display:inline-flex;align-items:center;min-height:32px;margin:-4px 0 8px 38px;font-size:.88rem;font-weight:700;color:var(--a-ink)}
.ready-note{margin:8px 0 0;font-size:.8rem;color:var(--a-muted)}

/* claim and emergency */
.claim{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--a-card);color:var(--a-ink);text-decoration:none}
.claim b,.claim span span{display:block}
.claim span span{font-size:.88rem;color:var(--a-muted)}
.emerg{margin:0;text-align:center;font-weight:700}
.emerg a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-underline-offset:3px}
.app-foot{padding-block:4px 16px;font-size:.82rem;color:var(--a-muted);text-align:center}
.app-foot a{display:inline-block;color:inherit;padding:8px 2px}

/* bottom menu */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--a-bg);border-top:1px solid var(--a-line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar a{display:grid;justify-items:center;align-content:center;gap:2px;min-height:64px;color:var(--a-muted);text-decoration:none;font-size:.78rem;font-weight:700}
.tabbar .dt{width:25px;height:25px}
.tabbar a[aria-current="page"]{color:var(--a-ink);box-shadow:inset 0 3px 0 var(--a-yellow)}

/* desktop: two columns, menu moves to the top */
@media (min-width:860px){
  body.app{padding-bottom:0}
  .tabbar{display:none}
  .desk-nav{display:flex;gap:4px;margin-left:auto}
  .desk-nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;color:var(--a-muted);font-weight:700;text-decoration:none}
  .desk-nav a:hover{background:var(--a-card);color:var(--a-ink)}
  .desk-nav a[aria-current="page"]{color:var(--a-ink);box-shadow:inset 0 -3px 0 var(--a-yellow)}
  .app-main{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;padding-block:12px 24px}
  .sos-card{grid-template-columns:minmax(0,1fr) 170px;padding:30px;min-height:290px}
  .sos-card h1{font-size:3.2rem}
  .quick a{min-height:112px;padding-block:14px}
  .quick b{font-size:.92rem}
}

/* fixes after seeing it on screen */
header.app-top{background:none;border-bottom:0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--a-strong:#233349;--a-on-strong:#eef2f7}}
:root[data-theme="dark"]{--a-strong:#233349;--a-on-strong:#eef2f7}
.quick a:hover{outline-color:var(--a-ink)}

/* ==== Lantern light ====
   Light mode stays clean and white. Dark mode is a warm room lit by one lantern. */
:root{
  --accent:#14263f; --sos-bg:#f2b705; --sos-ink:#1a1300; --sos-kick:#1a1300; --sos-border:transparent; --sos-shadow:none;
  --sos-btn:#14263f; --sos-btn-ink:#ffffff;
  --lan-line:#14263f; --lan-metal:#14263f; --lan-glass:#e9eef5; --lan-flame:#cfd8e3; --lan-core:#b3bfce; --lan-beam:0; --lan-glow:0; --lan-knob:#f2b705; --lan-halo:rgba(255,190,70,.62); --lan-halo-end:rgba(255,170,40,0);
  --check-on:#f2b705; --check-tick:#1a1300; --plan-ico:#f2b705;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --a-bg:#14100b; --a-card:#231b12; --a-ink:#f7efe1; --a-muted:#c4b59e; --a-line:#3b3024; --a-strong:#2b2116; --a-on-strong:#f7efe1; --a-yellow:#f4b73a; --a-on-yellow:#1d1300; --a-done:#8ad6a4;
  --accent:#f4b73a; --sos-bg:#1f160c; --sos-ink:#fbf3e4; --sos-kick:#f4b73a; --sos-border:#6b4d1e; --sos-shadow:0 0 44px rgba(244,183,58,.14);
  --sos-btn:#f4b73a; --sos-btn-ink:#1d1300;
  --lan-line:#c9a56a; --lan-metal:#8a6a38; --lan-glass:#ffd877; --lan-flame:#fffbe9; --lan-core:#f4a31a; --lan-beam:.75; --lan-glow:1; --lan-knob:#f4b73a; --lan-halo:rgba(255,190,70,.62); --lan-halo-end:rgba(255,170,40,0);
  --check-on:#f4b73a; --check-tick:#1d1300; --plan-ico:#f4b73a;
  color-scheme:dark }}
:root[data-theme="dark"]{
  --a-bg:#14100b; --a-card:#231b12; --a-ink:#f7efe1; --a-muted:#c4b59e; --a-line:#3b3024; --a-strong:#2b2116; --a-on-strong:#f7efe1; --a-yellow:#f4b73a; --a-on-yellow:#1d1300; --a-done:#8ad6a4;
  --accent:#f4b73a; --sos-bg:#1f160c; --sos-ink:#fbf3e4; --sos-kick:#f4b73a; --sos-border:#6b4d1e; --sos-shadow:0 0 44px rgba(244,183,58,.14);
  --sos-btn:#f4b73a; --sos-btn-ink:#1d1300;
  --lan-line:#c9a56a; --lan-metal:#8a6a38; --lan-glass:#ffd877; --lan-flame:#fffbe9; --lan-core:#f4a31a; --lan-beam:.75; --lan-glow:1; --lan-knob:#f4b73a; --lan-halo:rgba(255,190,70,.62); --lan-halo-end:rgba(255,170,40,0);
  --check-on:#f4b73a; --check-tick:#1d1300; --plan-ico:#f4b73a;
  color-scheme:dark }

.sos-card{background:var(--sos-bg);color:var(--sos-ink);border:1px solid var(--sos-border);box-shadow:var(--sos-shadow);isolation:isolate}
.sos-kicker{color:var(--sos-kick)}
.sos-btn{background:var(--sos-btn);color:var(--sos-btn-ink)}
/* the glow sits behind the lantern only, never behind the text */
.sos-card::after{content:"";position:absolute;z-index:-1;right:-46px;top:50%;width:230px;height:230px;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,var(--lan-halo) 0%,var(--lan-halo-end) 68%)}
.lantern .glow{display:none}
.lantern .handle{stroke:var(--lan-line)}
.lantern .metal{fill:var(--lan-metal)}
.lantern .glass{fill:var(--lan-glass);stroke:var(--lan-metal)}
.lantern .flame{fill:var(--lan-flame)}
.lantern .bar{stroke:var(--lan-metal)}
.lantern .knob{fill:var(--lan-knob)}
.qi,.claim .qi{color:var(--accent)}
.tip{color:var(--accent)}
.plan-ico{background:var(--plan-ico)}
.plan-go{color:var(--plan-ico)}
.ready-pc{color:var(--accent)}
.check input:checked+.box{background:var(--check-on);border-color:var(--check-on);color:var(--check-tick)}
.tabbar a[aria-current="page"]{color:var(--accent)}
.desk-nav a[aria-current="page"]{color:var(--accent)}
.emerg a{color:var(--accent)}
@media (min-width:860px){ .sos-card::after{width:340px;height:340px;right:-60px} }

/* ==== Inner pages use the same design as the home page ==== */
:root{--danger:#b42318;--danger-on:#ffffff;--soft-line:#dfe3e9}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--danger:#f2867b;--danger-on:#2a0e0b}}
:root[data-theme="dark"]{--danger:#f2867b;--danger-on:#2a0e0b}
body.app{
  --bg:var(--a-bg);--surface:var(--a-bg);--surface-2:var(--a-card);--ink:var(--a-ink);--muted:var(--a-muted);--line:var(--a-line);
  --blue:var(--accent);--blue-soft:var(--a-card);--yellow:var(--a-yellow);--on-yellow:var(--a-on-yellow);--good:var(--a-done);
  --pg:var(--accent);--pg-soft:var(--a-card);--pg-btn:var(--sos-btn);--pg-on:var(--sos-btn-ink);--r:16px}
.t-danger{--pg:var(--danger);--pg-btn:var(--danger);--pg-on:var(--danger-on)}
.app .wrap{max-width:1040px}
.app .btn{background:var(--sos-btn);color:var(--sos-btn-ink)}
.app .shop:not([aria-disabled="true"]){background:var(--sos-btn);color:var(--sos-btn-ink)}
.app .chip[aria-pressed="true"]{background:var(--a-yellow);border-color:var(--a-yellow);color:var(--a-on-yellow)}
.app .bar i{background:var(--accent)}
.app .tag.med{background:var(--a-card);color:var(--a-ink)}
/* emergency link at the top of inner pages */
.sos-strip-wrap{max-width:1040px;margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left,0px))}
.sos-strip{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:10px 16px;border-radius:14px;background:var(--a-yellow);color:var(--a-on-yellow);text-decoration:none;font-family:var(--f-display);font-size:1.05rem}
.sos-strip:focus-visible{outline:3px solid var(--a-ink);outline-offset:2px}
/* calmer boxes: the colour is saved for what matters */
.app .card.t-planner,.app .card.t-guide,.app .card.t-kit,.app .card.t-help,.app .card.t-compensation{border-top:1px solid var(--a-line)}
.app .card.t-danger{border-top:4px solid var(--danger)}
.app .phase{border-top:1px solid var(--a-line);border-radius:18px}
.app .panel{border-radius:18px}
.app .hero{background:var(--a-card);border-radius:18px;margin-top:14px}
.app .hero .eyebrow{color:var(--a-muted)}
.app .tile{background:var(--a-card);border-radius:16px}
.app .tile .chip-ico{background:var(--a-bg);color:var(--accent)}
.app .chip-ico{background:var(--a-card);color:var(--accent)}
.app .tile-go{color:var(--accent)}
.app .pill.before,.app .pill.after{background:var(--a-card);color:var(--a-ink)}
.app .pill.now{background:var(--a-yellow);color:var(--a-on-yellow)}
.app .row.on .ico{background:var(--a-yellow);color:var(--a-on-yellow)}
.app footer{padding-top:8px}
/* outage mode: same warm night as the rest of the site */
body.outage-on{background:#14100b}
.outage{--o-bg:#14100b;--o-card:#231b12;--o-ink:#f7efe1;--o-muted:#c4b59e;--o-line:#3b3024;--o-yellow:#f4b73a}
.danger{border-color:#7a2a24 !important}

.name-note{margin:0 0 4px}

/* ==== Guide steps: one rounded colour box per step. Step 8 is red because it is the danger step. ==== */
.steps li:nth-child(1){--s-bg:#dbe7f8;--s-c:#1a4f9c;--s-on:#ffffff}
.steps li:nth-child(2){--s-bg:#fff1bf;--s-c:#f2b705;--s-on:#1a1300}
.steps li:nth-child(3){--s-bg:#d5f1f1;--s-c:#0b6e75;--s-on:#ffffff}
.steps li:nth-child(4){--s-bg:#ece2f8;--s-c:#6a3aa0;--s-on:#ffffff}
.steps li:nth-child(5){--s-bg:#ffe8d6;--s-c:#a84e08;--s-on:#ffffff}
.steps li:nth-child(6){--s-bg:#d9f0fb;--s-c:#0b6a93;--s-on:#ffffff}
.steps li:nth-child(7){--s-bg:#d9f2e5;--s-c:#1f7a4d;--s-on:#ffffff}
.steps li:nth-child(8){--s-bg:#fdecea;--s-c:#b42318;--s-on:#ffffff}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .steps li:nth-child(1){--s-bg:#1c2a3f;--s-c:#8fb8f4;--s-on:#0b1422}
  :root:not([data-theme="light"]) .steps li:nth-child(2){--s-bg:#33290c;--s-c:#f5c537;--s-on:#1a1300}
  :root:not([data-theme="light"]) .steps li:nth-child(3){--s-bg:#0f3236;--s-c:#5fd0d3;--s-on:#06262a}
  :root:not([data-theme="light"]) .steps li:nth-child(4){--s-bg:#2b2040;--s-c:#c3a2ee;--s-on:#1b1030}
  :root:not([data-theme="light"]) .steps li:nth-child(5){--s-bg:#3a2212;--s-c:#f2a65e;--s-on:#2a1503}
  :root:not([data-theme="light"]) .steps li:nth-child(6){--s-bg:#0f2f3d;--s-c:#6cc7ec;--s-on:#06222e}
  :root:not([data-theme="light"]) .steps li:nth-child(7){--s-bg:#12301f;--s-c:#53c690;--s-on:#07231a}
  :root:not([data-theme="light"]) .steps li:nth-child(8){--s-bg:#341a1a;--s-c:#f2867b;--s-on:#2a0e0b}
}
:root[data-theme="dark"] .steps li:nth-child(1){--s-bg:#1c2a3f;--s-c:#8fb8f4;--s-on:#0b1422}
:root[data-theme="dark"] .steps li:nth-child(2){--s-bg:#33290c;--s-c:#f5c537;--s-on:#1a1300}
:root[data-theme="dark"] .steps li:nth-child(3){--s-bg:#0f3236;--s-c:#5fd0d3;--s-on:#06262a}
:root[data-theme="dark"] .steps li:nth-child(4){--s-bg:#2b2040;--s-c:#c3a2ee;--s-on:#1b1030}
:root[data-theme="dark"] .steps li:nth-child(5){--s-bg:#3a2212;--s-c:#f2a65e;--s-on:#2a1503}
:root[data-theme="dark"] .steps li:nth-child(6){--s-bg:#0f2f3d;--s-c:#6cc7ec;--s-on:#06222e}
:root[data-theme="dark"] .steps li:nth-child(7){--s-bg:#12301f;--s-c:#53c690;--s-on:#07231a}
:root[data-theme="dark"] .steps li:nth-child(8){--s-bg:#341a1a;--s-c:#f2867b;--s-on:#2a0e0b}
.app .steps{gap:12px}
.app .steps li{background:var(--s-bg);color:var(--a-ink);border-radius:16px;padding:14px 14px 14px 58px;min-height:0}
.app .steps li::before{left:14px;top:14px;background:var(--s-c);color:var(--s-on)}
.app .steps li a.tel{color:inherit;font-weight:700}
.app .steps b{margin-bottom:3px;line-height:1.25}

/* ==== Guide cards: Before is blue, After is green, Stuck in a lift is yellow ==== */
body.t-guide .card.t-planner{--c-bg:#dbe7f8;--c-c:#1a4f9c;--c-on:#ffffff}
body.t-guide .card.t-compensation{--c-bg:#d9f2e5;--c-c:#1f7a4d;--c-on:#ffffff}
body.t-guide .card.t-guide{--c-bg:#fff1bf;--c-c:#7a5600;--c-on:#ffffff}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body.t-guide .card.t-planner{--c-bg:#1c2a3f;--c-c:#8fb8f4;--c-on:#0b1422}
  :root:not([data-theme="light"]) body.t-guide .card.t-compensation{--c-bg:#12301f;--c-c:#53c690;--c-on:#07231a}
  :root:not([data-theme="light"]) body.t-guide .card.t-guide{--c-bg:#33290c;--c-c:#f5c537;--c-on:#1a1300}
}
:root[data-theme="dark"] body.t-guide .card.t-planner{--c-bg:#1c2a3f;--c-c:#8fb8f4;--c-on:#0b1422}
:root[data-theme="dark"] body.t-guide .card.t-compensation{--c-bg:#12301f;--c-c:#53c690;--c-on:#07231a}
:root[data-theme="dark"] body.t-guide .card.t-guide{--c-bg:#33290c;--c-c:#f5c537;--c-on:#1a1300}
.app.t-guide .guide-grid .card{background:var(--c-bg);border:0;color:var(--a-ink)}
.app.t-guide .guide-grid .card .chip-ico{background:var(--c-c);color:var(--c-on)}
.app.t-guide .guide-grid .card .pill{background:var(--c-c);color:var(--c-on)}
.app.t-guide .guide-grid .card a{color:inherit;font-weight:700}

/* ==== Real units in the planner results ==== */
.units{padding:16px 18px;display:grid;gap:10px;border-bottom:1px solid var(--line)}
.units-note{margin:0;font-size:.92rem}
.unit-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.unit{display:grid;gap:3px;background:var(--a-card);border-radius:14px;padding:14px}
.unit-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.unit-top b{font-family:var(--f-display);font-size:1.05rem}
.unit-price{font-weight:700;color:var(--a-ink);white-space:nowrap}
.unit-price s{font-weight:400;color:var(--a-muted);font-size:.88rem}
.unit-spec,.unit-malta{font-size:.88rem;color:var(--a-muted)}
.unit-lasts{font-weight:700}
.unit-link{display:inline-flex;align-items:center;gap:6px;justify-self:start;min-height:44px;margin-top:4px;font-weight:700;color:var(--accent);text-underline-offset:3px}
.units-fine{margin:0;font-size:.78rem;color:var(--a-muted)}

/* ==== Food rescue ==== */
.t-food{--pg:var(--a-done);--pg-soft:var(--a-card);--pg-btn:var(--sos-btn);--pg-on:var(--sos-btn-ink)}
.deals{margin:4px 0 22px;display:grid;gap:12px}
.deals-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.deals-h h2{font-size:1.4rem}
.deals-upd{font-size:.85rem;color:var(--a-muted)}
.deals-empty{margin:0;padding:18px;border:1px dashed var(--a-line);border-radius:16px;color:var(--a-muted)}
.deals-warn{margin:0;padding:10px 14px;border-radius:12px;background:var(--a-card);font-weight:700}
.deal-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.deal{display:grid;gap:5px;align-content:start;padding:16px;border-radius:16px;background:var(--a-card);border-left:5px solid var(--a-done)}
.deal-example{justify-self:start;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:var(--a-yellow);color:var(--a-on-yellow)}
.deal-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
.deal-top b{font-family:var(--f-display);font-size:1.15rem}
.deal-where,.deal-addr,.deal-cold,.deal-note{font-size:.9rem;color:var(--a-muted)}
.deal-items{margin:0;font-weight:700}
.deal-price .now{font-family:var(--f-display);font-size:1.5rem;font-weight:800}
.deal-price small{font-family:var(--f-body);font-size:.8rem;font-weight:700;color:var(--a-muted)}
.deal-price s{color:var(--a-muted)}
.deal-left{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:99px;background:var(--a-yellow);color:var(--a-on-yellow);font-size:.78rem;font-weight:700}
.deal-call{justify-self:start;margin-top:6px}
.post-steps{margin:0;padding-left:1.2em;display:grid;gap:6px}
.card .fine{font-size:.85rem;color:var(--a-muted)}
.food-rules{border-left:5px solid var(--a-done)}

/* ==== Seasons: data-season on <html> is set in each page's head ==== */
[data-season="summer"] .only-winter,[data-season="winter"] .only-summer{display:none !important}

/* ==== Home supplies calculator ==== */
.sup-days{border-top:1px solid var(--line);padding-top:14px}
.sup-days .meta{margin:0;font-size:.85rem;color:var(--a-muted)}
.sup-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sup-list li{display:grid;grid-template-columns:minmax(84px,auto) minmax(0,1fr);gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--a-line)}
.sup-list li:last-child{border-bottom:0}
.sup-list b{font-family:var(--f-display);font-size:1.05rem}
.sup-list span{font-weight:700}
.sup-list small{display:block;font-weight:400;font-size:.88rem;color:var(--a-muted);margin-top:2px}
.sup-actions{margin-top:8px}
.sup-actions .cta{border:0;font:inherit;font-weight:700;cursor:pointer}
@media print{
  .app-top,.sos-strip-wrap,.tabbar,footer,.hero,#sup > .panel,.sup-actions{display:none !important}
  body.app{background:#fff;color:#000;padding:0}
  .bench{display:block}
  .result .panel{border:0}
}

/* ==== Why we exist ==== */
.mission{max-width:1040px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left,0px)) 8px;color:var(--a-muted);font-size:.95rem}
.mission a{color:var(--accent);font-weight:700;text-underline-offset:3px;margin-left:4px}
.about-hero p{font-size:1.05rem}
.about-h{font-size:1.4rem;margin:8px 0 12px}
.about-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.belief{background:var(--a-card);border:0}
.belief h2{font-size:1.2rem}
.about-close{margin:26px 0 30px;padding:22px;border-radius:18px;background:var(--a-strong);color:var(--a-on-strong);display:grid;gap:8px}
.about-close h2{font-size:1.8rem}
.about-close p{margin:0;max-width:60ch}
.about-close .cta.ghost{color:var(--a-on-strong);border-color:var(--a-on-strong)}

/* home: supplies card under the battery card */
.plan-card.plan-blue{--pb-bg:#1a4f9c;--pb-ink:#ffffff;--pb-chip:#dbe7f8;--pb-chip-ink:#1a4f9c;background:var(--pb-bg);color:var(--pb-ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .plan-card.plan-blue{--pb-bg:#1c2f4a;--pb-ink:#eef2f7;--pb-chip:#8fb8f4;--pb-chip-ink:#0b1422}}
:root[data-theme="dark"] .plan-card.plan-blue{--pb-bg:#1c2f4a;--pb-ink:#eef2f7;--pb-chip:#8fb8f4;--pb-chip-ink:#0b1422}
.plan-card.plan-blue .plan-ico{background:var(--pb-chip);color:var(--pb-chip-ink)}
.plan-card.plan-blue .plan-go{color:var(--pb-ink)}

/* Why we exist: donation card */
.donate-card{margin-top:22px;background:var(--a-card);border:0}

/* buttons inside cards keep their own colours */
.card a.cta{color:var(--pg-on)}
.card a.cta.ghost{color:var(--pg)}

/* ==== One big number, with a plain word under it ==== */
.ready-big{display:grid;justify-items:end;gap:2px}
.ready .ready-pc{font-size:2.6rem;line-height:1}
.ready-word{font-size:.82rem;font-weight:700;padding:2px 10px;border-radius:99px;background:var(--a-card);color:var(--a-ink)}
.ready-word[data-state="mid"]{background:var(--a-yellow);color:var(--a-on-yellow)}
.ready-word[data-state="done"]{background:var(--a-done);color:var(--a-bg)}
.tier-word{font-family:var(--f-display);font-size:1.15rem;font-weight:700;color:var(--a-ink)}
.app .big-tel{font-size:2.4rem;font-weight:800}
.ready-word{white-space:nowrap}

/* checklist hints and medical toggle */
.check .lbl small{display:block;margin-top:2px;font-size:.84rem;color:var(--a-muted);line-height:1.3}
.med-toggle{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:6px;padding-top:8px;border-top:1px solid var(--a-line);font-size:.92rem;font-weight:700;cursor:pointer}
.med-toggle input{width:22px;height:22px;accent-color:var(--accent);flex:none}

/* ==== One main heading per page (SEO) ==== */
.hero h1{font-size:clamp(1.6rem,5vw,2.2rem);font-weight:800;letter-spacing:-.01em;margin:0}
.phase-h h1{font-size:1.6rem;margin:0}
.outage h1{font-size:clamp(2rem,7vw,2.8rem);color:var(--o-ink);margin:0}
.sos-card h2{margin:0 0 16px;font-size:clamp(1.8rem,8vw,2.5rem);line-height:1.04;font-weight:800;letter-spacing:-.02em}
@media (min-width:860px){ .sos-card h2{font-size:3.2rem} }
.mission h1{display:inline;font-family:var(--f-body);font-size:inherit;font-weight:400;color:inherit;margin:0;letter-spacing:0}

/* ==== Emergency card: whole card opens outage mode, lantern looks lit ==== */
/* The button's link stretches over the whole card, so a tap anywhere works. */
.sos-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.sos-card{cursor:pointer}
.sos-card:hover .sos-btn{filter:brightness(1.12)}
.sos-btn:focus-visible{outline:3px solid var(--sos-ink);outline-offset:3px}
.sos-text{display:flex;flex-direction:column;align-items:flex-start}
.sos-kicker{font-size:1rem}
/* Lit lantern in light mode: warm glass and a flame, navy only on the metal */
.lantern .core{fill:var(--lan-core)}
.lantern .bar{opacity:.35}

/* Home: donation card (warm, never red, so it can't be mistaken for danger) */
.plan-card.plan-give{--pg-bg:#fff1c7;--pg-ink:#2a1d00;--pg-chip:#f2b705;--pg-chip-ink:#2a1d00;background:var(--pg-bg);color:var(--pg-ink);border:2px solid #f2b705}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .plan-card.plan-give{--pg-bg:#2b2116;--pg-ink:#f7efe1;--pg-chip:#f4b73a;--pg-chip-ink:#1d1300}}
:root[data-theme="dark"] .plan-card.plan-give{--pg-bg:#2b2116;--pg-ink:#f7efe1;--pg-chip:#f4b73a;--pg-chip-ink:#1d1300}
.plan-card.plan-give .plan-ico{background:var(--pg-chip);color:var(--pg-chip-ink)}
.plan-card.plan-give .plan-go{color:var(--pg-ink)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==== Flat circle icons (f-* in icons.svg) in the page chips ==== */
:root{--fi-navy:#14263f}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--fi-navy:#2c4466}}
:root[data-theme="dark"]{--fi-navy:#2c4466}
.fi{display:block;width:100%;height:100%}
.qi:has(.fi),.plan-ico:has(.fi),.hero-ico:has(.fi),.chip-ico:has(.fi){background:none !important;border-radius:50%;padding:0}
.quick .qi{width:52px;height:52px}
.plan-ico:has(.fi){width:54px;height:54px}
.hero-ico:has(.fi){width:60px;height:60px}
.claim .qi{width:48px;height:48px}

/* ==== Modern lantern: off by day, lit at night ==== */
.lantern .handle{fill:none;stroke:var(--lan-metal);stroke-width:10;stroke-linecap:round}
.lantern .glass{stroke:none}
.lantern .beam{fill:#fff2b8;opacity:var(--lan-beam)}
.lantern .flame,.lantern .core,.lantern .glass,.lantern .metal,.lantern .beam{transition:fill .8s ease,opacity .8s ease}
.sos-card::after{opacity:var(--lan-glow);transition:opacity .9s ease}

/* ==== Lights out: a gentle fade when the home page switches to dark ==== */
@media (prefers-reduced-motion:no-preference){
  html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after{transition:background-color .8s ease,color .8s ease,border-color .8s ease,fill .8s ease,stroke .8s ease,opacity .8s ease !important}
  .mode.blink{animation:lights-blink .7s ease-in-out 3}
}
@keyframes lights-blink{0%,100%{box-shadow:0 0 0 0 rgba(244,183,58,0)}50%{background:#f4b73a;color:#1d1300;border-color:#f4b73a;box-shadow:0 0 0 6px rgba(244,183,58,.3),0 0 24px rgba(244,183,58,.75)}}
.mode-hint{position:fixed;top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));z-index:60;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:8px 16px 8px 12px;border:0;border-radius:999px;background:#f4b73a;color:#1d1300;font:inherit;font-size:.95rem;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.4);opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease}
.mode-hint svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mode-hint.show{opacity:1;transform:none}
.mode-hint:focus-visible{outline:3px solid #fbf3e4;outline-offset:3px}
@media (prefers-reduced-motion:no-preference){ .mode-hint.blink{animation:hint-blink .7s ease-in-out 3} }
@keyframes hint-blink{0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.4)}50%{background:#ffe08a;box-shadow:0 0 0 8px rgba(244,183,58,.35),0 0 30px rgba(244,183,58,.9)}}