/* Halpisenergia.fi 2026-11: uusi ulkoasu (M-taulu). Ladataan styles.css:n JÄLKEEN. */
:root{--sp:#0b4a3b;--deep:#07382c;--grn:#1fd07c;--grn-d:#17a561;--mint:#b4f2d3;--light:#f2f5f1;--txt:#0b2f26;--mut:#5d7a70;--line:#dfe6e1;--coral:#ff7a6b;--amber:#ffc247}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html body.hp{background:#fff;color:var(--txt);font-family:'Plus Jakarta Sans',system-ui,sans-serif;margin:0;display:block;min-height:100vh}
.hp [id]{scroll-margin-top:96px}
.hp a{text-underline-offset:3px}
.hp :focus-visible{outline:3px solid var(--grn);outline-offset:2px;border-radius:6px}
.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}
.hp-wrap{max-width:1360px;margin:0 auto;padding:0 clamp(16px,4.4vw,64px);width:100%;box-sizing:border-box}
.hp-skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--sp);padding:10px 16px;z-index:100;border-radius:0 0 10px 0;font-weight:700}
.hp-skip:focus{left:0}

/* ---------- Yläpalkki ---------- */
.hp-top{position:sticky;top:0;z-index:40;box-shadow:0 1px 0 rgba(7,56,44,.06)}
.hp-util{background:var(--deep);color:#fff}
.hp-util .hp-wrap{display:flex;align-items:center;justify-content:space-between;height:44px}
.hp-tabs{display:flex;height:44px}
.hp-tab{display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;font-size:15px;font-weight:700;color:#fff;text-decoration:none;opacity:.92}
.hp-tab:hover{background:rgba(255,255,255,.08)}
.hp-tab[aria-current=page]{background:var(--sp);opacity:1}
.hp-tab svg{flex:none}
.hp-util-oikea{display:flex;gap:28px;font-size:14px;font-weight:600}
.hp-util-oikea a,.hp-util-oikea button{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;padding:0;height:44px}
.hp-util-oikea a:hover,.hp-util-oikea button:hover{text-decoration:underline}
.hp-nav{background:#fff;border-bottom:1px solid var(--line)}
.hp-nav .hp-wrap{display:flex;align-items:center;gap:44px;height:68px}
.hp-logo{font-weight:800;font-size:26px;letter-spacing:-.03em;color:var(--sp);text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:10px}
.hp-logo em{font-style:normal;color:var(--grn-d)}
.hp-logo svg{flex:none}
.hp-sub{display:flex;gap:30px;font-size:15px;font-weight:600;overflow-x:auto;scrollbar-width:none}
.hp-sub::-webkit-scrollbar{display:none}
.hp-sub a{color:var(--txt);text-decoration:none;white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
.hp-sub a:hover{border-color:var(--grn)}
.hp-pilleri{margin-left:auto;display:flex;align-items:center;gap:10px;border-radius:999px;padding:9px 18px;font-weight:700;font-size:15px;white-space:nowrap;background:#e4f8ee;color:#0b5b3a;text-decoration:none}
.hp-pilleri i{width:10px;height:10px;border-radius:50%;background:var(--grn);flex:none}
.hp-pilleri[data-taso=normaali]{background:#fff1cf;color:#6b4a00}.hp-pilleri[data-taso=normaali] i{background:var(--amber)}
.hp-pilleri[data-taso=kallis]{background:#ffe3df;color:#9a2a1d}.hp-pilleri[data-taso=kallis] i{background:var(--coral)}
.hp-pilleri[data-taso=""]{background:var(--light);color:var(--mut)}.hp-pilleri[data-taso=""] i{background:#c5d1cb}
.hp-pilleri b{font-size:17px}

/* ---------- Hero ---------- */
.hp-hero{position:relative;background:var(--sp);color:#fff;overflow:hidden}
.hp-hero-sis{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}
.hp-hero-teksti{padding:80px 48px 72px 0;display:flex;flex-direction:column;justify-content:center}
.hp-h1{font-weight:800;font-size:clamp(32px,4.6vw,56px);line-height:1.05;letter-spacing:-.02em;color:var(--mint);text-transform:uppercase;margin:0;overflow-wrap:anywhere}
.hp-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55;margin:24px 0 0;font-weight:500;max-width:34em;min-height:3.1em}
.hp-lead b{color:#fff}
.hp-btns{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}
.hp-hero-tiedot{display:flex;gap:40px;margin-top:48px;flex-wrap:wrap}
.hp-hero-tiedot div{display:flex;flex-direction:column;gap:2px}
.hp-hero-tiedot span{font-size:14px;opacity:.75}
.hp-hero-tiedot b{font-weight:800;font-size:26px;letter-spacing:-.01em}
.hp-panel{--ext:calc(clamp(16px,4.4vw,64px) + max(0px,(100vw - 1360px)/2));position:relative;background:linear-gradient(135deg,#0a3f32 0%,var(--deep) 100%);clip-path:polygon(110px 0,100% 0,100% 100%,0 100%);margin-right:calc(-1 * var(--ext));padding:44px var(--ext) 36px 170px}
.hp-panel-yla{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.hp-panel-yla h2{margin:0;font-weight:800;font-size:20px;color:#fff}
.hp-seg{display:flex;gap:4px;background:rgba(255,255,255,.12);border-radius:999px;padding:4px}
.hp-panel .hp-pill{background:transparent;color:#fff;border:0;min-height:32px;padding:0 14px;font-size:13px}
.hp-panel .hp-pill-on{background:#fff;color:var(--sp)}
.hp-panel .hp-pill:hover:not(.hp-pill-on){background:rgba(255,255,255,.14)}
.hp-panel .text-white,.hp-panel b{color:#fff}
.hp-panel-ala{display:flex;justify-content:flex-end;margin-top:12px}
.hp-panel-ala .hp-pill{background:rgba(255,255,255,.12);border:0;color:#fff}
.hp-panel-ala .hp-pill-on{background:#fff;color:var(--sp)}
.hp-kayra-sailio{position:relative}
.hp-kayra{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.hp-kayra-lataa{height:300px;border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04));background-size:200% 100%;animation:hpLataa 1.6s infinite linear}
@keyframes hpLataa{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.hp-kayra-lataa{animation:none}}
.hp-vihje{position:absolute;transform:translate(-50%,-135%);background:#fff;color:var(--sp);border-radius:12px;padding:6px 12px;display:flex;flex-direction:column;align-items:center;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.3);white-space:nowrap;line-height:1.25;z-index:2}
.hp-vihje[hidden]{display:none}
.hp-vihje b{font-size:15px;color:var(--sp)}
.hp-vihje span{font-size:12px;color:var(--mut)}
.hp-valinta{font-size:13px;color:#a9d3c3;min-height:20px;margin-top:6px}
.hp-valinta .text-white{color:#fff}
.hp-tilastot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.hp-tilasto{background:rgba(255,255,255,.08);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;gap:1px;min-width:0}
.hp-tilasto-o{font-size:12px;color:#a9d3c3}
.hp-tilasto-a{font-size:22px;font-weight:800;letter-spacing:-.01em}
.hp-tilasto-a small{font-size:12px;font-weight:600;opacity:.8}
.hp-tilasto-t{font-size:12px;color:#a9d3c3}
.hp-legenda{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:#a9d3c3;margin-top:12px}
.hp-legenda span{display:inline-flex;align-items:center;gap:6px}
.hp-legenda i{width:10px;height:10px;border-radius:50%;display:inline-block}
.hp-legenda i.hp-katko{background:none;border-top:2px dashed rgba(255,255,255,.5);border-radius:0;width:16px;height:0}

/* ---------- Sivuotsikko (Ennuste, Sopimus, Opi) ---------- */
.hp-sivuhero{background:var(--sp);color:#fff;padding:56px 0 52px;position:relative;overflow:hidden}
.hp-sivuhero::after{content:"";position:absolute;right:0;top:0;bottom:0;width:38%;background:linear-gradient(135deg,#0a3f32,var(--deep));clip-path:polygon(90px 0,100% 0,100% 100%,0 100%)}
.hp-sivuhero .hp-wrap{position:relative;z-index:1}
.hp-sivuhero .hp-h1{font-size:clamp(30px,4vw,48px)}
.hp-sivuhero p{font-size:clamp(16px,1.4vw,19px);line-height:1.55;max-width:38em;margin:18px 0 0;font-weight:500}
.hp-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hp-chips a{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;border:2px solid rgba(255,255,255,.7);color:#fff;font-weight:700;font-size:14px;text-decoration:none}
.hp-chips a:hover{background:#fff;color:var(--sp)}

/* ---------- Napit ---------- */
.hp-nappi{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;cursor:pointer;text-align:center;box-sizing:border-box}
.hp-nappi-vihrea{background:var(--grn);color:var(--deep)}
.hp-nappi-vihrea:hover{background:#3be08f}
.hp-nappi-aari{background:#fff;color:var(--sp);border-color:var(--sp)}
.hp-nappi-aari:hover{background:var(--light)}
.hp-nappi-valk{border-color:#fff;color:#fff;background:transparent}
.hp-nappi-valk:hover{background:#fff;color:var(--sp)}
.hp-pill{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:700;border:1px solid var(--line);background:#fff;color:var(--txt);cursor:pointer;font-family:inherit}
.hp-pill:hover{border-color:var(--sp)}
.hp-pill-on{background:var(--sp);color:#fff;border-color:var(--sp)}

/* ---------- Kaistat ---------- */
.hp-band{padding:72px 0 80px;background:#fff}
.hp-band-alt{background:var(--light)}
.hp-otsikko{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:40px}
.hp-h2{font-weight:800;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.02em;color:var(--sp);margin:0;line-height:1.1}
.hp-h2-sub{font-size:clamp(16px,1.4vw,18px);color:#4d6b60;max-width:42em;line-height:1.5;margin:0}
.hp-grid{display:grid;gap:28px;align-items:start}
.hp-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hp-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hp-span2{grid-column:1/-1}
.hp-venyta{align-items:stretch}
.hp-pieni{font-size:12px;color:var(--mut);line-height:1.5}

/* ---------- Kortit (vanhat osiot uusilla vaatteilla) ---------- */
.hp-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:0 2px 10px rgba(7,56,44,.07);min-width:0}
.hp-card.hidden{display:none}
html[data-theme] .hp-card :is(h2,h3){color:var(--sp);letter-spacing:-.01em}
html[data-theme] .hp-card h2{font-size:22px;font-weight:800}
html[data-theme] .hp-card h3{font-weight:800}
html[data-theme] .hp-band .bg-card2,html[data-theme] .hp-card .bg-card2{background-color:var(--light)}
html[data-theme] .border-line{border-color:var(--line)}
html[data-theme] .text-slate-300{color:#35564b}
html[data-theme] .text-slate-400{color:#4d6b60}
html[data-theme] .text-slate-500{color:var(--mut)}
html[data-theme] :is(.text-emerald-300,.text-emerald-400,.text-teal-300,.text-teal-400){color:#0b7a4f}
html[data-theme] :is(.text-orange-300,.text-orange-400,.text-orange-500){color:#b8400f}
html[data-theme] :is(.text-rose-300,.text-rose-400,.text-red-300){color:#b3261e}
html[data-theme] :is(.text-sky-300,.text-sky-400,.text-cyan-300,.text-cyan-400){color:#0a6c8f}
html[data-theme] :is(.text-violet-300,.text-violet-400){color:#5b3fb5}
html[data-theme] .hp-panel :is(.text-teal-300,.text-slate-300,.text-slate-400){color:#a9d3c3}
.hp-card .accent-emerald-500{accent-color:var(--grn-d)}
.hp-auto:has(>.hidden)>:not(.hidden){grid-column:1/-1}

/* Halvin jakso & taulukko */
.hp-jakso-tulos{background:#e4f8ee;border:1px solid #a9e6c7;border-radius:14px;padding:16px 18px}
.hp-jakso-aika{font-size:30px;font-weight:800;color:var(--sp);letter-spacing:-.01em;line-height:1.2}
.hp-asteikko{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--mut)}
.hp-taulukko{border:1px solid var(--line);border-radius:12px;background:var(--light);padding:12px 16px;font-size:13px}
.hp-taulukko summary{cursor:pointer;font-weight:700;color:var(--sp)}
.hp-taulukko table{width:100%;margin-top:10px;border-collapse:collapse}
.hp-taulukko th{text-align:left;font-weight:600;color:var(--mut);padding:4px 8px}
.hp-taulukko td{padding:5px 8px;border-top:1px solid var(--line)}
.hp-taulukko .hp-oikea,.hp-oikea{text-align:right}
.hp-taulukko td.hp-oikea{font-weight:700}
.hp-rivi-halpa{background:#e4f8ee}.hp-rivi-kallis{background:#ffe8e4}
.hp-huom{font-size:12px;font-weight:700}.hp-huom-halpa{color:#0b7a4f}.hp-huom-kallis{color:#b8400f}
.hp-halytys-kortti{background:#fff;border-radius:14px;border:1px solid var(--line);padding:0;box-shadow:0 2px 10px rgba(7,56,44,.07)}
.hp-halytys-kortti #halytys-osio{margin:0;border:0;background:transparent;padding:28px}
.hp-halytys-kortti #halytys-osio h3{font-size:22px;font-weight:800;color:var(--sp)}
.hp-halytys-kortti #halytys-osio p,.hp-halytys-kortti #halytys-osio label{font-size:14px}
.hp-halytys-kortti #halytys-osio :is(select,input[type=number]){min-height:44px;font-size:15px;border-radius:10px;background:#fff;color:var(--txt)}
.hp-halytys-kortti #halytys-tilaa-btn{transition:none;background:var(--grn);color:var(--deep)!important;border:0;border-radius:999px;min-height:48px;padding:0 26px;font-size:15px;font-weight:700}
.hp-halytys-kortti #halytys-tilaa-btn:hover{background:#3be08f}
.hp-halytys-kortti #halytys-nyt-tayttyy{color:#0b7a4f}

/* Sopimuskortit (poiminta) */
.hp-sop-kortti{background:#fff;color:var(--txt);border:1px solid var(--line);border-radius:14px;padding:32px 30px 30px;display:flex;flex-direction:column;gap:14px;box-shadow:0 2px 10px rgba(7,56,44,.08);position:relative}
.hp-sop-eka{background:var(--sp);color:#fff;border-color:var(--sp)}
.hp-merkki{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grn);color:var(--deep);font-weight:800;font-size:12px;border-radius:999px;padding:4px 14px}
.hp-sop-nimi{font-weight:800;font-size:22px;text-align:center;line-height:1.2}
.hp-sop-eka .hp-sop-nimi{color:var(--mint)}
.hp-sop-tuote{text-align:center;font-size:14px;opacity:.75;margin-top:-8px}
.hp-sop-kortti ul{list-style:none;margin:6px 0 8px;padding:0;display:flex;flex-direction:column;gap:12px;flex:1}
.hp-sop-kortti li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45}
.hp-sop-kortti li svg{flex:none;margin-top:2px;color:var(--grn-d)}
.hp-sop-eka li svg{color:var(--grn)}
.hp-sop-kortti .hp-nappi{width:100%}
.hp-sop-eka .hp-nappi-aari{background:var(--grn);color:var(--deep);border-color:var(--grn)}

/* Vertailu (Sopimus-sivu): ohjaimet vasemmalla, lista oikealla */
.hp-vert{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:36px;align-items:start}
.hp-vert-ohjaus{position:sticky;top:132px}
#vertailu .asunto-btn{border-radius:14px}
#tarjous-lista>div{border-radius:14px}
#tarjous-lista .shadow-lg{box-shadow:none}
#tarjous-lista a.bg-emerald-500{background:var(--grn);color:var(--deep);border-radius:999px}
#tarjous-lista a.bg-emerald-700{background:var(--sp);color:#fff;border-radius:999px}
html[data-theme] #tarjous-lista .bg-emerald-400{background:var(--grn);color:var(--deep)}

/* Linkkikortit / laatat */
.hp-laatta{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--txt);box-shadow:0 2px 10px rgba(7,56,44,.05);transition:border-color .15s,box-shadow .15s}
.hp-laatta:hover{border-color:var(--sp);box-shadow:0 6px 18px rgba(7,56,44,.12)}
.hp-laatta-ikoni{width:48px;height:48px;border-radius:12px;background:var(--light);color:var(--sp);display:flex;align-items:center;justify-content:center}
.hp-laatta b{font-size:19px;font-weight:800;color:var(--sp)}
.hp-laatta span.hp-t{font-size:14px;color:#4d6b60;line-height:1.5}
.hp-laatta-nuoli{margin-top:auto;font-weight:700;font-size:14px;color:var(--sp)}

/* Mainokset */
.hp-mainos{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);margin:0 auto;max-width:980px}
.hp-mainos img{display:block;width:100%;height:auto}
.hp-mainos-nimi{display:block;text-align:center;font-size:11px;color:var(--mut);margin-bottom:6px}
.hp-ladattu{max-width:980px;margin:0 auto}

/* UKK */
.hp-ukk{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 28px}
.hp-ukk details{border-top:1px solid var(--line);padding:16px 0}
.hp-ukk details:first-child{border-top:0}
.hp-ukk summary{cursor:pointer;font-weight:700;font-size:17px;color:var(--sp);list-style:none;display:flex;justify-content:space-between;gap:16px}
.hp-ukk summary::-webkit-details-marker{display:none}
.hp-ukk summary::after{content:"+";font-size:22px;line-height:1;color:var(--grn-d)}
.hp-ukk details[open] summary::after{content:"–"}
.hp-ukk p{margin:10px 0 0;font-size:15px;line-height:1.6;color:#35564b}

/* ---------- Alapalkki ---------- */
.hp-foot{background:var(--deep);color:#fff;padding:56px 0 40px}
.hp-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.hp-foot .hp-logo{color:#fff;font-size:26px}
.hp-foot .hp-logo em{color:var(--grn)}
.hp-foot p{font-size:14px;line-height:1.6;opacity:.8;margin:14px 0 0;max-width:30em}
.hp-foot h2{font-size:15px;margin:0 0 14px;color:#fff;font-weight:800}
.hp-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px}
.hp-foot a{color:#fff;opacity:.82;text-decoration:none}
.hp-foot a:hover{opacity:1;text-decoration:underline}
.hp-foot-ala{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;opacity:.7}

/* ---------- Vanhat opas- ja laskurisivut uudella kuorella ---------- */
.hp-artikkeli{max-width:820px;margin:0 auto;padding:48px clamp(16px,4vw,24px) 72px}
.hp-artikkeli h1{font-weight:800;font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;color:var(--sp);line-height:1.15}
html[data-theme] .hp-artikkeli :is(.text-white,.text-slate-100,.text-slate-200){color:var(--txt)}

/* ---------- Puhelin ja kapeat ruudut ---------- */
@media (max-width:1100px){
  .hp-sub{display:none}
  .hp-g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-vert{grid-template-columns:minmax(0,1fr)}
  .hp-vert-ohjaus{position:static}
}
@media (max-width:1000px){
  .hp-hero-sis{grid-template-columns:minmax(0,1fr)}
  .hp-hero-teksti{padding:44px 0 28px}
  .hp-panel{clip-path:none;margin:0 calc(-1 * var(--ext));padding:28px var(--ext) 32px;border-radius:24px 24px 0 0}
  .hp-sivuhero::after{display:none}
  .hp-g2,.hp-g3{grid-template-columns:minmax(0,1fr)}
  .hp-band{padding:48px 0 56px}
  .hp-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-sop-kortti{padding:28px 22px}
}
@media (max-width:640px){
  .hp-util-oikea{display:none}
  .hp-tabs{width:100%}
  .hp-tab{flex:1;justify-content:center;padding:0 6px;font-size:13px;gap:6px}
  .hp-tab svg{width:16px;height:16px}
  .hp-nav .hp-wrap{height:60px;gap:12px}
  .hp-logo{font-size:21px}
  .hp-logo svg{display:none}
  .hp-pilleri{padding:7px 12px;font-size:13px}
  .hp-pilleri b{font-size:15px}
  .hp-g4{grid-template-columns:minmax(0,1fr)}
  .hp-tilastot{gap:6px}
  .hp-tilasto{padding:8px 10px}
  .hp-tilasto-a{font-size:18px}
  .hp-hero-tiedot{gap:20px 28px}
  .hp-card,.hp-halytys-kortti #halytys-osio{padding:20px}
  .hp-btns .hp-nappi{width:100%}
  .hp-foot-grid{grid-template-columns:minmax(0,1fr)}
  .hp-ukk{padding:6px 18px}
}

/* Kaaviot eivät veny rumasti leveissä korteissa; Opi-sivun laskuriruudukko kahteen sarakkeeseen */
.hp-card svg.w-full{max-width:760px;margin-left:auto;margin-right:auto;display:block}
#laskurit .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
html body.hp[data-sivu=opas]{background:var(--light)}
.hp-artikkeli{max-width:880px}

/* ---------- Puhelin: tiivis versio ---------- */
@media (max-width:640px){
  .hp-hero-teksti{padding:28px 0 20px}
  .hp-h1{font-size:28px}
  .hp-lead{font-size:16px;margin-top:14px;min-height:0}
  .hp-btns{flex-wrap:nowrap;gap:10px;margin-top:20px}
  .hp-btns .hp-nappi{width:auto;flex:1;min-height:46px;padding:0 10px;font-size:14px}
  .hp-hero-tiedot{margin-top:22px;gap:10px 20px;flex-wrap:nowrap;justify-content:space-between}
  .hp-hero-tiedot span{font-size:11px}
  .hp-hero-tiedot b{font-size:19px}
  .hp-panel{padding:20px var(--ext) 22px}
  .hp-panel-yla h2{font-size:17px}
  .hp-legenda{margin-top:8px}
  .hp-panel-ala{margin-top:8px}
  .hp-tilastot{margin-top:8px}
  .hp-valinta{display:none}
  .hp-band{padding:32px 0 36px}
  .hp-otsikko{margin-bottom:18px;gap:6px}
  .hp-otsikko .hp-h2-sub{display:none}
  .hp-h2{font-size:26px}
  .hp-card,.hp-halytys-kortti #halytys-osio{padding:16px}
  html[data-theme] .hp-card h2{font-size:19px}
  .hp-grid{gap:16px}
  #sopimus-teaser{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(-1 * var(--ext));padding:22px var(--ext) 8px;scrollbar-width:none}
  #sopimus-teaser::-webkit-scrollbar{display:none}
  #sopimus-teaser .hp-sop-kortti{flex:0 0 80%;scroll-snap-align:center;padding:24px 18px 20px;gap:10px}
  #sopimus-teaser .hp-merkki{top:10px}
  #sopimus-teaser .hp-sop-eka{padding-top:44px}
  .hp-sop-nimi{font-size:19px}
  .hp-sop-kortti li{font-size:14px}
  #sopimukset .hp-nappi{min-height:46px}
  #sopimukset > .hp-wrap > div[style*="margin-top:40px"]{margin-top:16px!important}
  .hp-g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hp-laatta{padding:14px;gap:8px}
  .hp-laatta .hp-t{display:none}
  .hp-laatta-ikoni{width:38px;height:38px}
  .hp-laatta b{font-size:16px}
  .hp-laatta-nuoli{font-size:13px}
  .hp-foot{padding:28px 0 24px}
  .hp-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .hp-foot-grid > div:first-child{grid-column:1/-1}
  .hp-foot p{display:none}
  .hp-foot h2{margin-bottom:8px}
  .hp-foot ul{gap:6px;font-size:14px}
  .hp-foot-ala{margin-top:20px;padding-top:14px;font-size:11px}
  .hp-sivuhero{padding:28px 0 24px}
  .hp-sivuhero p{font-size:15px;margin-top:10px}
  .hp-chips{flex-wrap:nowrap;overflow-x:auto;margin-top:16px;scrollbar-width:none;gap:8px}
  .hp-chips::-webkit-scrollbar{display:none}
  .hp-chips a{flex:none;height:36px;padding:0 14px}
  .hp-vert{gap:16px}
}

/* Laskurikentät opassivuilla: valkoinen kenttä, selvä reuna (ennen sama sinertävä tausta kuin ympäröivä laatikko) */
html[data-theme] .hp-artikkeli :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){background-color:#fff;border:1px solid #9fb3a9;color:var(--txt);border-radius:12px}
html[data-theme] .hp-artikkeli :is(input,select,textarea):focus{border-color:var(--grn-d);outline:2px solid rgba(31,208,124,.35);outline-offset:0}
html[data-theme] .hp-artikkeli .bg-card2{background-color:var(--light);border-color:var(--line)}
html[data-theme] .hp-artikkeli ::placeholder{color:#7f968c}

/* Tarkistuksen löydökset: tummalle teemalle tehdyt sivukohtaiset värit */
.hp-artikkeli a.block.rounded-xl{color:var(--txt)!important}
.hp-artikkeli a.nappi,.hp-artikkeli a.nappi:hover{color:#fff!important}
#laske{color:#fff!important}
html[data-theme] .hp-artikkeli .text-slate-500{color:#4a6a5e}
html[data-theme] .hp-artikkeli .text-\[11px\]{font-size:12px}
.hp-logo em{color:#0f8a52}
.hp-foot .hp-logo em{color:var(--grn)}
.hp-artikkeli a:not(.nappi):not(.block){color:#047857}
.hp-artikkeli .vl-jakso-btn[class*=emerald],.hp-artikkeli .vl-jakso-btn.aktiivinen{color:#fff}

/* Virheviesti hero-paneelissa luettavaksi */
.hp-panel .bg-card2,.hp-panel [class*="bg-card"]{background:rgba(255,255,255,.1)!important;color:#fff!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:12px}
.hp-panel .bg-card2 *{color:inherit}