@import "tokens.css?v=20260804g";
/* Sid- och artikellayout. Gemensamt nav, knappar och footer finns i site-shell.css. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{min-height:100vh;min-height:100svh;margin:0;display:flex;flex-direction:column;background:var(--bg);color:var(--body);font-family:var(--font-sans);font-size:var(--fs-reading);line-height:var(--lh-reading);-webkit-font-smoothing:antialiased}
body>main{flex:1 0 auto}
a{color:inherit}
img{display:block;max-width:100%}
.wrap,.site-container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:36px}
.category{display:block;margin-bottom:15px;color:var(--teal-dark);font-size:14px;font-weight:600}
h1,h2{color:var(--ink);letter-spacing:-.03em}
h3{color:var(--ink);letter-spacing:-.02em}
h1{max-width:860px;margin:0;font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:700}
.lead{max-width:760px;margin:24px 0 0;font-size:var(--fs-lead);line-height:1.55;color:#303941}
.meta{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.meta span+span::before{content:"·";margin-right:10px;color:#c3c8cc}
/* Artikelhuvud: kategorin bor i brödsmulan, så rubriken får luften i stället. */
.page-head--article .page-head-inner>.breadcrumb+h1{margin-top:38px}
.article-layout{display:grid;grid-template-columns:minmax(0,760px) 250px;gap:96px;align-items:start;padding-top:72px;padding-bottom:112px}
article h2{margin:64px 0 18px;font-size:34px;line-height:1.2}
article h2:first-of-type{margin-top:0}
article h3{margin:34px 0 10px;font-size:22px;line-height:1.3}
article p{margin:0 0 22px}
article a{color:#056f6c;text-decoration-thickness:1px;text-underline-offset:3px}
article ul{margin:0 0 26px;padding-left:22px}
article li{margin-bottom:10px;padding-left:5px}
.summary{margin:0 0 48px;padding:0 0 34px;border-bottom:1px solid var(--line);font-size:19px;line-height:1.65;color:#303941}
.comparison{width:100%;margin:28px 0 34px;border-collapse:collapse;border-top:1px solid var(--ink);font-size:15px}
.comparison th,.comparison td{padding:16px 12px;border:0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.comparison th{color:var(--ink);font-weight:600}
.comparison--concepts th:first-child,.comparison--concepts td:first-child{width:16%}
.comparison--concepts th:nth-child(2),.comparison--concepts td:nth-child(2){width:60%}
.comparison--methods th:first-child,.comparison--methods td:first-child{width:28%}
.note{margin:34px 0;padding:2px 0 2px 20px;border-left:2px solid var(--teal);font-size:15px}
.note strong{color:var(--ink)}
.article-figure{margin:34px 0 38px}
.article-figure img{width:100%;height:auto;border:1px solid var(--line);background:#fff}
.article-figure figcaption{margin-top:10px;color:var(--muted);font-size:13px;line-height:1.5}
/* Enkla visuella sammanfattningar som följer sajtens vanliga designspråk. */
.article-figure .infographic{border:0;border-radius:var(--r);background:var(--alt);color:var(--ink);font-family:var(--font-sans)}
.article-figure .fig-head{display:block;padding:26px 28px 0;border:0}
.article-figure .fig-head p{font-size:19px;font-weight:650;line-height:1.3;letter-spacing:-.02em}
.article-figure .fig-body{padding:22px 28px 28px}
.simple-steps,.simple-values,.simple-compare{display:grid;gap:12px}
.simple-steps,.simple-values{grid-template-columns:repeat(3,minmax(0,1fr))}
.simple-compare{grid-template-columns:repeat(2,minmax(0,1fr))}
.simple-step,.simple-values section,.simple-compare section{min-width:0;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.simple-step>span,.simple-compare section>span{display:block;margin-bottom:18px;color:var(--teal-dark);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.simple-step h3{margin:0 0 10px;font-size:17px;line-height:1.25;letter-spacing:-.01em}
.simple-step strong,.simple-values strong,.simple-compare strong{display:block;color:var(--ink);font-size:25px;font-weight:700;line-height:1.15;letter-spacing:-.03em}
.simple-step p,.simple-values p,.simple-compare p{margin:8px 0 0;color:var(--muted);font-size:13.5px;line-height:1.45}
.simple-values section{text-align:center}
/* --- Figurer: tekniska diagram (kunskapsartiklar) --------------------
   Plan yta, hårfina linjer, inga skuggor eller rundningar. Kvantitativa
   figurer ritas alltid mot en utsatt skala så att staplarna går att läsa
   av. Intervall ritas som intervall, inte som enskilda värden. */
.infographic{--mono:var(--font-mono);--grid:#e8ebec;--rule:#d5dade;--axis:#b4bcc1;--dim:#69747d;--steel:#4a5a65;border:1px solid var(--rule);background:#fff;color:var(--ink);font-family:var(--font-sans);line-height:1.35}
.fig-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 18px;border-bottom:1px solid var(--rule)}
.fig-head p{margin:0;font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.fig-head span{flex:none;color:var(--dim);font-family:var(--mono);font-size:11px}
.fig-body{padding:24px 18px}
.fig-foot{margin:0;padding:11px 18px;border-top:1px solid var(--rule);color:var(--dim);font-size:11.5px;line-height:1.55}
.flow-arrow{position:relative;width:100%;height:1px;align-self:center;background:var(--axis)}
.flow-arrow::after{content:"";position:absolute;top:-3px;right:0;width:6px;height:6px;border-top:1px solid var(--axis);border-right:1px solid var(--axis);transform:rotate(45deg)}

/* Fig: cell -> modul -> batteripaket */
.pack-flow{display:grid;grid-template-columns:minmax(0,.8fr) 28px minmax(0,1fr) 28px minmax(0,1.7fr);gap:14px}
.flow-step{min-width:0}
.flow-step>p{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:14px 0 0;padding-bottom:7px;border-bottom:1px solid var(--ink);font-size:14px;font-weight:600}
.flow-step>p span{color:var(--dim);font-family:var(--mono);font-size:10.5px;font-weight:400}
.flow-step dl{margin:0}
.flow-step dl div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--grid)}
.flow-step dt{color:var(--dim);font-size:11.5px}
.flow-step dd{margin:0;color:var(--ink);font-family:var(--mono);font-size:11.5px;text-align:right}
.glyph{display:flex;height:96px;align-items:flex-end}
.g-cell{position:relative;width:32px;height:64px;border:1.5px solid var(--ink);background:#eff2f3}
.g-cell::before{content:"";position:absolute;top:-5px;left:50%;width:14px;height:4px;transform:translateX(-50%);background:var(--ink)}
.g-module{display:flex;width:106px;height:78px;gap:4px;padding:8px;border:1.5px solid var(--ink);background:#eff2f3}
.g-module i{flex:1;border:1px solid var(--steel);background:#fff}
.g-pack{display:grid;width:100%;max-width:256px;height:96px;grid-template-columns:repeat(3,1fr) 40px;grid-template-rows:1fr 1fr 12px;gap:5px;padding:7px;border:1.5px solid var(--ink);background:#eff2f3}
.g-pack i{border:1px solid var(--steel);background:#fff}
.g-pack b{display:flex;grid-row:1/3;grid-column:4;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-family:var(--mono);font-size:10px;font-weight:400}
.g-pack em{grid-column:1/-1;background:repeating-linear-gradient(135deg,#c3ccd1 0 2px,#eff2f3 2px 6px)}

/* Fig: intervalldiagram (NMC/LFP) */
.range-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.range-chart{min-width:0}
.rc-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 16px;padding-bottom:7px;border-bottom:1px solid var(--ink);font-size:14px;font-weight:600}
.rc-title span{flex:none;color:var(--dim);font-family:var(--mono);font-size:10.5px;font-weight:400}
.rc-row{display:grid;grid-template-columns:58px minmax(0,1fr) 66px;gap:8px;align-items:center;margin-bottom:9px}
.rc-key{font-size:11.5px;font-weight:600}
.rc-track{position:relative;height:24px;background:repeating-linear-gradient(to right,var(--grid) 0 1px,transparent 1px 33.3333%);border-right:1px solid var(--grid)}
.rc-band{position:absolute;top:5px;display:block;height:14px}
.rc-band--a{background:var(--ink)}
.rc-band--b{background:var(--teal-dark)}
.rc-val{color:var(--ink);font-family:var(--mono);font-size:11px;text-align:right;white-space:nowrap}
.rc-ticks{display:flex;justify-content:space-between;padding-top:5px;border-top:1px solid var(--axis);color:var(--dim);font-family:var(--mono);font-size:10.5px}

/* Fig: BMS in- och utsignaler */
.bms-flow{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1.1fr) 26px minmax(0,1fr);gap:12px;align-items:stretch}
.bf-col{min-width:0;padding:15px 16px;border:1px solid var(--grid)}
.bf-col--core{border-color:var(--rule);background:#f4f6f7}
.bf-col>p{margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--ink);font-size:12px;font-weight:600}
.bf-col ul{margin:0;padding:0;list-style:none}
.bf-col li{margin:0;padding:7px 0;border-bottom:1px solid var(--grid);font-size:12px;line-height:1.4}
.bf-col li:last-child{padding-bottom:0;border-bottom:0}

/* Fig: SOC mot SOH på kWh-skala */
.kwh-chart{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px}
.kwh-axis{display:flex;height:210px;flex-direction:column;justify-content:space-between;color:var(--dim);font-family:var(--mono);font-size:10.5px;line-height:1;text-align:right}
.kwh-axis span{transform:translateY(-50%)}
.kwh-cols{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.kwh-col{min-width:0}
.kwh-plot{position:relative;height:210px;border-bottom:1px solid var(--axis);background:repeating-linear-gradient(to top,var(--grid) 0 1px,transparent 1px 25%)}
.kwh-cap{position:absolute;right:16%;bottom:0;left:16%;border:1.5px solid var(--ink);border-bottom:0;background:#fff}
.kwh-fill{position:absolute;right:0;bottom:0;left:0;background:var(--teal-dark)}
.kwh-fill em{position:absolute;top:7px;right:0;left:0;color:#fff;font-family:var(--mono);font-size:11.5px;font-style:normal;text-align:center}
.kwh-ref{position:absolute;right:0;left:0;border-top:1px dashed var(--dim)}
.kwh-ref b{position:absolute;top:-15px;right:0;color:var(--dim);font-family:var(--mono);font-size:10px;font-weight:400}
.kwh-col>p{margin:12px 0 0;padding-bottom:6px;border-bottom:1px solid var(--ink);font-size:13px;font-weight:600}
.kwh-col>small{display:block;margin-top:6px;color:var(--dim);font-family:var(--mono);font-size:10.5px}

/* Fig: kvarvarande kapacitet */
.deg-row{display:grid;grid-template-columns:172px minmax(0,1fr);gap:16px;align-items:center;margin-bottom:12px}
.deg-key strong{display:block;font-size:12.5px}
.deg-key small{display:block;margin-top:2px;color:var(--dim);font-family:var(--mono);font-size:10.5px}
.deg-track{position:relative;height:30px;background:repeating-linear-gradient(to right,var(--grid) 0 1px,transparent 1px 25%);border-right:1px solid var(--grid)}
.deg-track::after{content:"";position:absolute;top:-6px;bottom:-6px;left:70%;border-left:1px dashed var(--ink)}
.deg-track i{display:flex;height:100%;align-items:center;justify-content:flex-end;padding-right:10px;background:var(--steel);color:#fff;font-family:var(--mono);font-size:11.5px;font-style:normal}
.deg-row--avg .deg-track i{background:var(--ink)}
.deg-ticks{display:flex;justify-content:space-between;padding-top:5px;border-top:1px solid var(--axis);color:var(--dim);font-family:var(--mono);font-size:10.5px}
.deg-row--axis{margin-bottom:0}

/* Fig: tabelljämförelse */
.fig-table{width:100%;margin:0;border-collapse:collapse;font-size:13px}
.fig-table th,.fig-table td{padding:11px 18px;border-bottom:1px solid var(--grid);text-align:right;vertical-align:baseline}
.fig-table thead th{border-bottom:1px solid var(--ink);color:var(--ink);font-size:12px;font-weight:600}
.fig-table thead th:first-child{width:40%}
.fig-table tbody th{color:var(--dim);font-size:12px;font-weight:400;text-align:left}
.fig-table td{color:var(--ink);font-family:var(--mono)}
.fig-table .ft-lead th,.fig-table .ft-lead td{padding-top:14px;padding-bottom:14px}
.fig-table .ft-lead td{font-size:23px}
.fig-table tbody tr:last-child th,.fig-table tbody tr:last-child td{border-bottom:0}
.article-sources{margin-top:58px;padding-top:28px;border-top:1px solid var(--line)}
.article-sources h2{margin:0 0 12px;font-size:20px}
.article-sources p{font-size:14px;line-height:1.65;color:var(--muted)}
.author-box{margin-top:42px;padding:28px 30px;background:var(--alt);border-left:2px solid var(--teal)}
.author-box .author-label{margin:0 0 8px;color:var(--teal-dark);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.author-box h2{margin:0 0 8px;font-size:24px}
.author-box p:last-child{margin:0;font-size:15px}
.toc{position:sticky;top:100px;padding:0 0 0 20px;border-left:1px solid var(--line);font-size:14px}
.toc strong{display:block;margin-bottom:14px;color:var(--ink)}
.toc ol{margin:0;padding-left:18px}
.toc li{margin-bottom:9px}
.toc a{text-decoration:none;color:var(--body)}
.toc a:hover{color:var(--teal-dark)}
.faq-item{padding:22px 0;border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item h3{margin:0 0 8px;font-size:19px}
.faq-item p{margin:0;font-size:16px}
.article-cta{margin-top:72px;padding:42px 0 0;border-top:1px solid var(--line)}
.article-cta h2{margin:0 0 12px;color:var(--ink);font-size:28px}
.article-cta p{margin-bottom:24px;max-width:570px}
.article-cta .button{background:var(--teal);color:#08211f}
.knowledge-list{padding-top:56px;padding-bottom:112px}
.knowledge-item{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:34px;align-items:start;padding:30px 0;border-bottom:1px solid var(--line);text-decoration:none}
.knowledge-item:first-child{border-top:1px solid var(--ink)}
.knowledge-item .type{font-size:13px;font-weight:600;color:var(--teal-dark)}
.knowledge-item h2{margin:0 0 8px;font-size:25px;line-height:1.25}
.knowledge-item p{max-width:650px;margin:0;font-size:15.5px;color:var(--body)}
.knowledge-item .status{font-size:13px;color:var(--muted);white-space:nowrap}
.knowledge-item:hover h2{color:var(--teal-dark)}
.placeholder-body{max-width:1200px;padding-top:72px;padding-bottom:112px}
.placeholder-body .inner{max-width:760px}
.placeholder-body--wide .inner{max-width:none}
.placeholder-body h2{margin:52px 0 16px;font-size:32px;line-height:1.2}
.placeholder-body h2:first-child{margin-top:0}
.placeholder-body h3{margin:32px 0 10px;font-size:22px;line-height:1.3}
.placeholder-body p{margin:0 0 24px;font-size:18px}
.placeholder-body ul{margin:0 0 28px;padding-left:22px}
.placeholder-body li{margin-bottom:10px;padding-left:4px}
.placeholder-body a:not(.button):not(.btn){color:var(--teal-dark);text-underline-offset:3px}
.placeholder-body p.support-contact{margin-top:34px}
.legal-content{max-width:820px!important}
.legal-content .legal-meta{margin:0 0 22px;color:var(--muted);font-size:14px;font-weight:600}
.legal-content h2{padding-top:8px}
.legal-content h3{font-size:20px}
.legal-content p,.legal-content li{font-size:16px;line-height:1.75}
.legal-table-wrap{max-width:100%;margin:0 0 24px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.legal-table{width:100%;min-width:720px;border-collapse:collapse;background:#fff}
.legal-table th,.legal-table td{padding:15px 17px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:14px;line-height:1.55}
.legal-table th{background:var(--alt);color:var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.legal-table tr:last-child td{border-bottom:0}
.legal-table code{font-size:13px;white-space:nowrap}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:680px}
.form-grid .full{grid-column:1/-1}
.form-field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px}
.form-field input,.form-field textarea,.form-field select{width:100%;padding:13px 15px;border:1px solid #cfd4d7;border-radius:var(--r);background:#fff;color:var(--ink);font:inherit;font-size:16px;font-weight:500;line-height:1.4}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:var(--teal-dark);box-shadow:0 0 0 3px rgba(5,111,108,.16);outline:2px solid var(--teal-dark);outline-offset:1px}
.form-field textarea{min-height:130px;resize:vertical}
.form-note{font-size:13px;color:var(--muted);max-width:560px;margin-top:14px}
.demo-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(460px,1.18fr);gap:88px;align-items:start}
.demo-overview{grid-column:1;grid-row:1;padding-top:8px}
.demo-overview .category{margin-bottom:10px}
.demo-overview h2{max-width:470px;margin:0 0 18px;font-size:34px;line-height:1.18}
.demo-overview>p{max-width:500px;font-size:17px}
.demo-benefits{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line)}
.demo-benefits li{position:relative;padding:17px 0 17px 30px;border-bottom:1px solid var(--line);color:var(--ink);font-size:15.5px;font-weight:550}
.demo-benefits li::before{content:'✓';position:absolute;left:0;color:var(--teal-dark);font-weight:700}
.demo-contact-box{margin-top:34px;padding:24px 26px;background:var(--alt);border-left:2px solid var(--teal)}
.demo-contact-box h3{margin:0 0 7px;font-size:18px}
.demo-contact-box p{margin:0;font-size:15px}
.demo-form-card{grid-column:2;grid-row:1;padding:40px;background:var(--alt);border:1px solid var(--line);border-radius:var(--r)}
.demo-form-head{margin-bottom:28px;padding-bottom:26px;border-bottom:1px solid #dadddf}
.demo-form-head h2{margin:0 0 9px;font-size:28px;line-height:1.2}
.demo-form-head p{margin:0;font-size:15.5px;line-height:1.6}
.demo-form-card .form-grid{max-width:none}
.demo-form-card .form-field label span{color:var(--muted);font-weight:400}
.demo-form-card .button,.demo-form-card .btn{width:100%;padding:14px 22px}
.demo-form-card .form-note{margin:15px 0 0;font-size:12.5px;line-height:1.55}
.contact-cols{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:48px;align-items:start}
.contact-info h2{margin:0 0 14px;font-size:20px}
.contact-info p{margin:0 0 22px;font-size:16px}
.contact-info a{color:var(--teal-dark)}

/* Support och kontakt — samma ljusa, återhållsamma språk som övriga undersidor. */
.support-page,.contact-page{padding-top:72px}
.support-contact-row{display:grid;grid-template-columns:1fr 1fr;margin-bottom:44px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.support-contact-row>div{padding:28px 30px 28px 0}
.support-contact-row>div+div{padding-left:30px;border-left:1px solid var(--line)}
.placeholder-body .support-contact-row h2{margin:0 0 10px;font-size:20px}
.support-contact-row a{color:var(--teal-dark)!important;font-size:20px;font-weight:650;text-decoration:none}
.placeholder-body .support-contact-row p{margin:5px 0 0;color:var(--muted);font-size:14px}
.faq-section{padding:0 0 60px}
.placeholder-body .faq-section>h2{margin:0 0 20px;font-size:32px}
.faq-list{border-top:1px solid var(--ink)}
.faq-list .faq-item{padding:0;border-top:0;border-bottom:1px solid var(--line)}
.faq-list .faq-item summary{position:relative;padding:21px 48px 21px 0;color:var(--ink);font-size:17px;font-weight:650;line-height:1.4;list-style:none;cursor:pointer}
.faq-list .faq-item summary::-webkit-details-marker{display:none}
.faq-list .faq-item summary::before,.faq-list .faq-item summary::after{content:"";position:absolute;top:50%;right:8px;width:14px;height:1px;background:var(--teal-dark);transition:transform .2s ease}
.faq-list .faq-item summary::after{transform:rotate(90deg)}
.faq-list .faq-item[open] summary::after{transform:none}
.faq-list .faq-item div{padding:0 48px 20px 0}
.placeholder-body .faq-list .faq-item p{margin:0;font-size:15.5px;line-height:1.7}
.support-bottom{padding-top:38px;border-top:1px solid var(--line)}
.placeholder-body .support-bottom h2{margin:0 0 10px;font-size:28px}
.placeholder-body .support-bottom p{max-width:560px;margin:0 0 22px;font-size:16px}
.contact-info-panel{padding-top:6px}
.placeholder-body .contact-info-panel h2{margin:0 0 14px;font-size:30px}
.placeholder-body .contact-info-panel>p{font-size:16px;line-height:1.65}
.contact-details{margin:34px 0 0;border-top:1px solid var(--ink)}
.contact-details>div{display:grid;grid-template-columns:95px 1fr;gap:20px;padding:19px 0;border-bottom:1px solid var(--line)}
.contact-details dt{color:var(--muted);font-size:13px;font-weight:600}
.contact-details dd{margin:0;color:var(--ink);font-size:15px;line-height:1.6}
.contact-details a{color:var(--teal-dark)!important;font-size:17px;font-weight:650;text-decoration:none}
.contact-details small{display:block;margin-top:2px;color:var(--muted);font-size:13px}
.placeholder-body .contact-help-link{margin-top:24px;font-size:14px;font-weight:600}
.contact-form-card{padding:40px;border:1px solid var(--line);border-radius:var(--r);background:var(--alt)}
.contact-form-head{margin-bottom:28px;padding-bottom:26px;border-bottom:1px solid #dadddf}
.placeholder-body .contact-form-head h2{margin:0 0 9px;font-size:28px}
.placeholder-body .contact-form-head p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
.contact-form-card .form-grid{max-width:none}
.contact-form-card .form-field label span{color:var(--muted);font-weight:400}
.contact-form-card .form-field textarea{min-height:140px}
.contact-form-card .btn{width:100%;padding:14px 22px}
.contact-form-card .form-note{margin:15px 0 0;font-size:12.5px;line-height:1.55}
.form-status{margin:15px 0 0;padding:11px 13px;border-radius:6px;background:#e8f2f0;color:var(--ink);font-size:14px;line-height:1.5}
.form-status.is-error{background:#f8e9e7;color:#7f241c}
.contact-form-card button:disabled,.demo-form-card button:disabled{cursor:wait;opacity:.65}
.steps{counter-reset:step;list-style:none;margin:0;padding:0;max-width:760px}
.steps li{counter-increment:step;position:relative;padding:26px 0 26px 72px;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:24px;font-size:15px;font-weight:700;color:var(--teal-dark);border:1px solid var(--line);border-radius:var(--r);width:46px;height:46px;display:flex;align-items:center;justify-content:center}
.steps h3{margin:0 0 6px;font-size:20px}
.steps p{margin:0;font-size:16px}
.partner-showcase{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:38px 0 46px}
.partner-card{border:1px solid var(--line);border-radius:var(--r);padding:32px;background:var(--alt)}
.partner-card-logo{height:74px;display:flex;align-items:center;margin-bottom:24px}
.partner-card-logo img{width:auto;max-width:100%;max-height:58px;object-fit:contain}
.partner-card-logo--internal img{max-height:45px;height:auto}
.partner-card h2{font-size:24px;margin:0 0 12px}
.partner-card p{font-size:16px;margin-bottom:18px}
.partner-card a{font-size:14px;font-weight:600}
/* Kompakt desktop för skärmar som rapporterar 961–1280 CSS-pixlar. */
@media(min-width:961px) and (max-width:1280px),
       (min-width:1281px) and (max-width:1536px) and (max-resolution:1.75dppx){
  .article-layout{grid-template-columns:minmax(0,740px) 230px;gap:68px;padding-top:57px;padding-bottom:90px}
  article h2{margin-top:53px;font-size:30px}
  article h3{font-size:20px}
  article p{margin-bottom:20px}
  .summary{margin-bottom:44px;padding-bottom:31px;font-size:17.5px}
  .placeholder-body{padding-top:60px;padding-bottom:90px}
  .placeholder-body h2{font-size:28px}
  .demo-layout{gap:58px}
  .demo-overview h2{font-size:30px}
  .placeholder-body .faq-section>h2{font-size:28px}
  .placeholder-body .contact-info-panel h2{font-size:27px}
}
@media(max-width:1178px){
  .article-layout{grid-template-columns:minmax(0,760px);gap:0}
  .toc{display:none}
}
@media(max-width:1050px){
  .demo-layout{display:flex;flex-direction:column;gap:44px}
  .demo-form-card{max-width:680px}
}
@media(max-width:900px){.contact-cols{grid-template-columns:1fr;gap:44px}.form-grid{grid-template-columns:1fr}}
@media(max-width:900px){.partner-showcase{grid-template-columns:1fr}}
@media(max-width:900px){
  .wrap,.site-container{padding-inline:22px}
  .page-head{padding:52px 0}
  .article-layout{grid-template-columns:1fr;gap:44px;padding-top:52px;padding-bottom:80px}
  .toc{display:none}
  article h2{font-size:29px;margin-top:50px}
  .comparison{display:block;overflow-x:auto}
  .knowledge-list{padding-top:36px;padding-bottom:80px}
  .knowledge-item{grid-template-columns:1fr;gap:8px;padding:25px 0}
  .knowledge-item .status{margin-top:4px}
  .placeholder-body{padding-top:52px;padding-bottom:80px}
}
@media(max-width:600px){
  body{font-size:16px;line-height:1.66;overflow-wrap:break-word}
  .wrap,.site-container{padding-inline:20px}
  .breadcrumb{font-size:12px}
  .page-head{padding:38px 0 42px}
  .category{margin-bottom:12px;font-size:13px}
  h1{font-size:38px;line-height:1.08}
  .lead{margin:20px 0;font-size:18px;line-height:1.5}
  .meta{gap:8px;font-size:12.5px}
  .page-head--article .page-head-inner>.breadcrumb+h1{margin-top:26px}
  .article-layout{padding-top:42px;padding-bottom:70px}
  .summary{margin-bottom:38px;padding-bottom:28px;font-size:17px}
  .article-figure{margin:28px 0 32px}
  .article-figure .fig-head{padding:22px 20px 0}
  .article-figure .fig-head p{font-size:18px}
  .article-figure .fig-body{padding:18px 20px 22px}
  .simple-steps,.simple-values,.simple-compare{grid-template-columns:1fr;gap:10px}
  .simple-step,.simple-values section,.simple-compare section{padding:18px}
  .simple-step>span,.simple-compare section>span{margin-bottom:10px}
  .simple-step strong,.simple-values strong,.simple-compare strong{font-size:23px}
  .fig-head,.fig-foot{padding-inline:14px}
  .fig-body{padding:18px 14px}
  .flow-arrow{width:1px;height:20px;margin:0 auto}
  .flow-arrow::after{top:auto;right:-3px;bottom:0;transform:rotate(135deg)}
  .pack-flow{grid-template-columns:1fr;gap:10px}
  .glyph{height:auto;margin-bottom:2px}
  .g-pack{max-width:100%}
  .range-grid{grid-template-columns:1fr;gap:26px}
  .rc-row{grid-template-columns:56px minmax(0,1fr) 68px;gap:6px}
  .rc-key{font-size:11px}
  .rc-val,.rc-ticks{font-size:10px}
  .bms-flow{grid-template-columns:1fr}
  .kwh-chart{gap:9px}
  .kwh-cols{gap:16px}
  .kwh-axis,.kwh-plot{height:172px}
  .kwh-cap{right:10%;left:10%}
  .kwh-fill em{font-size:10.5px}
  .deg-row{grid-template-columns:1fr;gap:6px;margin-bottom:14px}
  .deg-track::after{top:0;bottom:0}
  .deg-row--axis{grid-template-columns:1fr}
  .deg-row--axis>div:first-child{display:none}
  .fig-table{font-size:12px}
  .fig-table th,.fig-table td{padding-inline:7px}
  .fig-table thead th{font-size:11px}
  .fig-table thead th:first-child{width:46%}
  .fig-table .ft-lead td{font-size:20px}
  .author-box{padding:24px 22px}
  article h2{margin-top:44px;font-size:28px}
  article h3{font-size:20px}
  .article-cta{margin-top:56px;padding-top:34px}
  .article-cta .button{width:100%}
  .knowledge-list{padding-top:26px;padding-bottom:70px}
  .knowledge-item{padding:22px 0}
  .knowledge-item h2{font-size:22px}
  .demo-form-card{padding:26px 22px}
  .demo-overview h2{font-size:29px}
  .support-page,.contact-page{padding-top:42px}
  .support-contact-row{grid-template-columns:1fr;margin-bottom:32px}
  .support-contact-row>div{padding:22px 0}
  .support-contact-row>div+div{padding-left:0;border-top:1px solid var(--line);border-left:0}
  .faq-section{padding-bottom:48px}
  .faq-list .faq-item summary{padding:20px 42px 20px 0;font-size:16px}
  .faq-list .faq-item div{padding-right:34px}
  .contact-form-card{padding:28px 22px}
  .placeholder-body .contact-info-panel h2{font-size:27px}
  .contact-details>div{grid-template-columns:78px 1fr;gap:14px}
  .placeholder-body .contact-form-head h2{font-size:27px}
}
/* ============================================================
   MOBILPOLERING (≤760px)
   ------------------------------------------------------------
   Ligger sist så den vinner på ordning, inte på specificitet.
   Rör inget över 760px.
   ============================================================ */
@media(max-width:760px){

  /* Låt mobilkolumnen krympa även när en dold tabellrubrik har långa ord. */
  .article-layout{grid-template-columns:minmax(0,1fr)}

  /* --- Jämförelsetabeller --------------------------------------
     Tabellerna var satta till vågrät scroll (display:block;
     overflow-x:auto) men behöll width:100%. Resultatet på telefon:
     kolumnerna klämdes ihop tills texten kapades vid högerkanten,
     utan synlig antydan om att raden gick att dra i sidled.
     På mobil staplas raderna i stället. Radens första cell blir
     rubrik; övriga celler bär sin kolumnrubrik via data-label,
     så ingen information går förlorad. thead göms visuellt men
     ligger kvar för uppläsare. */
  .comparison{
    display:block;
    width:100%;
    margin:24px 0 30px;
    border-top:1px solid var(--ink);
    overflow:visible;
    font-size:15px;
  }

  .comparison thead{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }

  .comparison tbody{display:block}

  .comparison tr{
    display:block;
    padding:15px 0 14px;
    border-bottom:1px solid var(--line);
  }

  .comparison th,
  .comparison td{
    display:block;
    padding:0;
    border:0;
  }

  /* Radrubriken — bär raden, som första kolumnen gör på desktop. */
  .comparison td:first-child{
    color:var(--ink);
    font-weight:600;
    line-height:1.35;
  }

  /* Värdecell med kolumnrubrik: etikett till vänster, värde till höger. */
  .comparison td[data-label]{
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    gap:14px;
    align-items:baseline;
    padding:7px 0 0;
    line-height:1.45;
  }

  .comparison td[data-label]::before{
    content:attr(data-label);
    color:var(--muted);
    font-size:13px;
    line-height:1.5;
  }

  /* Tvåkolumnstabeller saknar meningsbärande kolumnrubrik och får
     värdet direkt under radrubriken. */
  .comparison td:not([data-label])+td:not([data-label]){
    margin-top:5px;
  }

  /* --- Boka demo: formuläret först ------------------------------
     Formuläret ligger först i HTML så visuell ordning och tabbordning
     följs åt. På desktop placerar grid det i högerspalten; när
     spalterna staplas ligger översikten som stödinnehåll under. */
  .demo-layout{
    display:flex;
    flex-direction:column;
    gap:36px;
  }

  .demo-overview{padding-top:0}
  .demo-overview h2{font-size:26px;line-height:1.16}
  .demo-form-head{margin-bottom:24px;padding-bottom:22px}
  .demo-form-head h2{font-size:22px}
  .demo-contact-box{margin-top:28px}

  /* --- Artikelhuvudets metarad --------------------------------
     Separatorn satt som ::before på varje span. På desktop ryms raden
     på en rad; på mobil bröts den, och punkten hamnade då ensam först
     på nästa rad ("· 8 min läsning"). Punkterna utgår på mobil —
     luften mellan uppgifterna skiljer dem åt i stället. */
  .meta{gap:4px 15px}
  .meta span+span::before{content:none;margin:0}

  /* --- Etikettkolumnen i staplade tabeller ---------------------
     92px rymde inte längre kolumnrubriker som "Vad som händer med
     åldern" utan att bryta dem på tre rader mot en ojämn vänsterkant. */
  .comparison td[data-label]{grid-template-columns:104px minmax(0,1fr);gap:12px}
  .comparison td[data-label]::before{font-size:12.5px}

  /* Rutnätet i stapeldiagrammet var så ljust att staplarna såg ut att
     sväva fritt förbi skalstrecken. En snäppet mörkare linje ger dem
     en skala att läsas mot. */
  .deg-track{background:repeating-linear-gradient(to right,var(--rule) 0 1px,transparent 1px 25%)}

  /* --- Steg, FAQ och avslutande CTA ---------------------------- */
  .steps li{padding:22px 0 22px 60px}
  .steps li::before{top:21px;width:40px;height:40px;font-size:14px}
  .steps h3{font-size:18px;line-height:1.3}
  .steps p{font-size:15.5px}

  .faq-item{padding:18px 0}
  .faq-item h3{font-size:18px;line-height:1.32}
  .faq-item p{font-size:15.5px}

  .article-cta h2{font-size:26px;line-height:1.16}

  .partner-card{padding:24px 22px}
  .partner-card h2{font-size:21px;line-height:1.2}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}