/* RKV visual explanations: semantic HTML, local vector icons, no live data. */
.visual-overview { grid-column:1/-1; margin:20px 0 32px; }
.visual-overview > figcaption { font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#00715d; margin-bottom:24px; }
.visual-overview .visual-process { margin-bottom:20px; }
.visual-guided { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px!important; counter-reset:none; }
.visual-guided > li { position:relative; display:flex!important; flex-direction:column; align-items:flex-start; gap:16px; border:0!important; border-radius:0!important; background:transparent!important; padding:0!important; min-width:0; }
.visual-guided > li > span { position:absolute; z-index:1; top:-8px; left:72px; width:30px!important; height:30px!important; display:grid!important; place-items:center; border-radius:50%!important; background:var(--rkv-green)!important; color:var(--rkv-navy)!important; font-size:.7rem!important; }
.visual-guided > li > svg { width:92px; height:92px; padding:26px; border-radius:26px; background:var(--rkv-navy); color:var(--rkv-green); fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.visual-guided > li:not(:last-child)::after { content:"→"; position:absolute; left:110px; right:-16px; top:28px; color:#00715d; text-align:center; font-size:1.6rem; border-bottom:1px solid #96cdb6; line-height:1; }
.visual-guided h3 { margin:8px 0!important; }
.visual-service-symbol { display:grid; place-items:center; width:72px; height:72px; border-radius:22px; background:#e6f3ec; margin-bottom:24px; color:var(--rkv-navy); }
.visual-service-symbol svg { width:40px; height:40px; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.visual-service-symbol.visual-mdi svg { fill:currentColor; stroke:none; }
.visual-product-photo { width:100%; aspect-ratio:3/2; height:auto; object-fit:cover; border-radius:18px; margin-bottom:24px; }
.visual-method-chain { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:24px 0; }
.visual-method-chain > span { padding:16px 20px; background:#e8f5ed; border-radius:14px; color:var(--rkv-navy); font-size:.9rem; font-weight:750; }
.visual-method-chain > b { color:#00715d; font-size:1.4rem; }
.visual-heading-symbol { display:grid; place-items:center; width:76px; height:76px; padding:20px; margin-bottom:24px; border-radius:24px; background:#e7f3ec; color:var(--rkv-navy); }
.visual-heading-symbol svg { width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.visual-comparison-keys { display:flex; gap:24px 48px; flex-wrap:wrap; margin:30px 0; }
.visual-comparison-keys > span { display:flex; align-items:center; gap:14px; }
.visual-comparison-keys svg { width:48px; height:48px; padding:10px; border-radius:14px; background:#e8f5ed; fill:none; stroke:var(--rkv-navy); stroke-width:1.4; }
.extension-feature .module-icon, .extension-ha-grid .module-icon { width:64px; height:64px; }
.visual-process { --steps:3; display:grid; grid-template-columns:repeat(var(--steps),minmax(0,1fr)); gap:36px; list-style:none; margin:28px 0 38px; padding:0; }
.visual-process li { position:relative; min-width:0; }
.visual-process-symbol { position:relative; display:grid; place-items:center; width:112px; height:112px; margin-bottom:24px; background:var(--rkv-navy); color:var(--rkv-green); border-radius:32px; }
.visual-process svg { width:48px; height:48px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.visual-process-symbol > span { position:absolute; top:-8px; right:-8px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--rkv-green); color:var(--rkv-navy-deep); font-size:.75rem; font-weight:800; }
.visual-process li:not(:last-child)::after { content:""; position:absolute; top:55px; left:130px; right:-18px; height:2px; background:linear-gradient(90deg,var(--rkv-green),rgba(47,184,123,.2)); }
.visual-process li:not(:last-child)::before { content:""; position:absolute; top:51px; right:-18px; width:10px; height:10px; border-top:2px solid var(--rkv-green); border-right:2px solid var(--rkv-green); transform:rotate(45deg); }
.visual-process strong { display:block; font:700 clamp(1.2rem,2vw,1.55rem)/1.3 var(--rkv-font-display); color:var(--rkv-navy); }
.visual-process small { display:block; margin-top:10px; font-size:.95rem; color:var(--rkv-text-soft); }
.visual-details { margin-top:22px; max-width:100%; }
.visual-details > summary { display:flex; align-items:center; gap:14px; width:fit-content; min-height:44px; padding:8px 0; color:var(--rkv-navy); font-weight:700; cursor:pointer; list-style:none; }
.visual-details > summary::-webkit-details-marker { display:none; }
.visual-details > summary::before { content:"+"; display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--rkv-border); border-radius:50%; font-size:1.2rem; }
.visual-details[open] > summary::before { content:"−"; }
.visual-details[open] > summary { margin-bottom:16px; }
.visual-details > summary:hover { color:#006b57; }
.visual-benefits { display:flex; flex-wrap:wrap; gap:14px 28px; margin:28px 0; }
.visual-benefits > span { display:flex; align-items:center; gap:10px; font-weight:700; }
.visual-benefits svg { width:40px; height:40px; fill:var(--rkv-navy); }
.visual-lead { font-size:1.25rem; max-width:42ch; }
.visual-partner-hero { grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr); gap:clamp(40px,6vw,88px); }
.visual-partner-hero .rel-lead { max-width:38ch; }
.visual-system { margin:0; padding:clamp(24px,4vw,48px); border-radius:28px; background:linear-gradient(145deg,#edf8f2,#edf2f6); color:var(--rkv-navy); }
.visual-system figcaption { font:700 clamp(1.15rem,1.8vw,1.5rem)/1.35 var(--rkv-font-display); margin-bottom:32px; max-width:22ch; }
.system-devices { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.system-device { display:flex; flex-direction:column; align-items:center; gap:12px; min-width:0; font-size:.8rem; font-weight:700; }
.system-device svg { width:40px; height:40px; fill:var(--rkv-navy); }
.system-connections { height:42px; margin:18px 10% 0; border:1.5px solid #439d81; border-top:0; border-radius:0 0 18px 18px; position:relative; }
.system-connections::after { content:""; position:absolute; left:50%; top:100%; height:28px; width:1.5px; background:#439d81; }
.system-core { display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:8px 12px; max-width:280px; margin:28px auto 0; padding:22px 16px; border-radius:20px; background:var(--rkv-navy); color:white; }
.system-core svg { width:28px; height:28px; stroke:var(--rkv-green); fill:none; stroke-width:1.5; }
.system-core strong { font:800 1.75rem var(--rkv-font-display); }
.system-core span { flex-basis:100%; text-align:center; font-size:.8rem; }
.system-link { text-align:center; font-size:2rem; color:#28755f; line-height:1.5; }
.system-result { display:flex; align-items:center; gap:14px; justify-content:center; padding:18px 0; }
.system-result svg { flex-shrink:0; width:42px; height:42px; fill:none; stroke:currentColor; stroke-width:1.3; }
.system-result strong { max-width:18ch; font-size:.95rem; }
.visual-system > p { margin:20px 0 0; font-size:.75rem; color:#425b6d; text-align:center; }
.visual-before-after { margin:24px 0 0; display:grid; grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr); align-items:start; gap:10px; }
.visual-before-after > div { display:flex; flex-direction:column; align-items:center; gap:20px; min-width:0; text-align:center; }
.visual-before-after > div > span { max-width:100%; overflow-wrap:anywhere; hyphens:auto; }
.visual-before-after svg { width:60px; height:60px; padding:10px; border-radius:18px; stroke:var(--rkv-navy); fill:none; stroke-width:1.4; background:#edf1f5; }
.visual-before-after > div:last-of-type svg { background:#e1f4e9; stroke:#006b57; }
.visual-before-after span { font:700 .95rem/1.4 var(--rkv-font-display); min-height:2.8em; }
.visual-before-after .visual-arrow { display:grid; place-items:center; height:60px; min-height:0; align-self:start; margin:0; color:#00715d; }
.visual-before-after .visual-arrow svg { display:block; width:24px; height:24px; padding:0; border-radius:0; background:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.visual-before-after figcaption { grid-column:1/-1; font-size:.85rem; margin-top:12px; color:var(--rkv-text-soft); }
.visual-pain .visual-details { font-size:.9rem; }
.visual-responsibilities { margin:14px 0 0; }
.visual-responsibilities > figcaption { font:700 clamp(1.4rem,3vw,2.2rem)/1.25 var(--rkv-font-display); margin-bottom:36px; }
.responsibility-lanes { display:grid; grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr); align-items:center; gap:24px; }
.responsibility-lanes > div { padding:clamp(24px,4vw,48px); background:#eef2f5; border-radius:26px; min-width:0; align-self:stretch; }
.responsibility-lanes > div:last-child { background:#e8f5ed; }
.responsibility-lanes > span { color:#00715d; font-size:2.5rem; text-align:center; }
.responsibility-lanes svg { width:58px; height:58px; fill:none; stroke:var(--rkv-navy); stroke-width:1.3; margin-bottom:24px; }
.responsibility-lanes h3 { margin:0 0 20px; font-size:1.4rem; }
.responsibility-lanes ul { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.responsibility-lanes li { display:flex; gap:10px; }
.responsibility-lanes li::before { content:"✓"; color:#00715d; font-weight:800; }
.visual-responsibilities > p { font-size:.9rem; color:var(--rkv-text-soft); max-width:90ch; margin-top:24px; }
.visual-local-section { display:block; }
.visual-local { display:grid; grid-template-columns:minmax(0,1.2fr) 50px minmax(0,1fr); gap:24px; align-items:center; margin:42px 0 24px; }
.visual-local > div:not(.local-connection) { display:flex; flex-direction:column; gap:12px; align-items:flex-start; padding:clamp(24px,4vw,48px); border-radius:26px; background:#edf4f0; }
.visual-local > .local-cloud { background:#eef2f5!important; }
.visual-local svg { width:60px; height:60px; fill:none; stroke:var(--rkv-navy); stroke-width:1.3; margin-bottom:16px; }
.visual-local strong { font:700 1.3rem/1.35 var(--rkv-font-display); color:var(--rkv-navy); }
.visual-local span { font-size:.9rem; }
.local-connection { color:#00715d; text-align:center; font-size:2rem; }
.visual-local figcaption { grid-column:1/-1; font-size:.85rem; color:var(--rkv-text-soft); max-width:90ch; }
@media(max-width:900px) { .visual-partner-hero { grid-template-columns:1fr; } .visual-partner-hero .rel-hero-copy { max-width:650px; } .visual-system { max-width:680px; width:100%; } .visual-process { gap:28px; } }
@media(max-width:600px) {
 .visual-guided { grid-template-columns:1fr!important; gap:40px!important; }
 .visual-guided > li { display:grid!important; grid-template-columns:72px minmax(0,1fr); gap:20px; }
 .visual-guided > li > svg { width:72px; height:72px; padding:20px; }
 .visual-guided > li > span { left:52px; }
 .visual-guided > li:not(:last-child)::after { content:"↓"; left:20px; right:auto; top:auto; bottom:-30px; border:0; }
 .visual-method-chain { gap:10px; }
 .visual-method-chain > span { max-width:100%; font-size:.8rem; padding:12px; }
 .visual-process { grid-template-columns:1fr; gap:32px; }
 .visual-process li { display:grid; grid-template-columns:76px minmax(0,1fr); gap:4px 22px; }
 .visual-process-symbol { grid-column:1; grid-row:1/3; width:76px; height:76px; border-radius:24px; margin:0; }
 .visual-process svg { width:36px; height:36px; }
 .visual-process strong { grid-column:2; padding-top:8px; }
 .visual-process small { grid-column:2; margin:0; }
 .visual-process li:not(:last-child)::after { top:88px; bottom:-20px; left:37px; right:auto; height:auto; width:2px; }
 .visual-process li:not(:last-child)::before { top:auto; bottom:-20px; left:33px; right:auto; transform:rotate(135deg); }
 .system-devices { gap:6px; } .system-device svg { width:32px; height:32px; } .system-device { font-size:.7rem; }
 .visual-before-after { grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr); gap:18px; }
 .responsibility-lanes, .visual-local { grid-template-columns:1fr; gap:16px; }
 .responsibility-lanes > span, .local-connection { line-height:1; }
 .local-connection { transform:rotate(90deg); }
 .visual-local figcaption { grid-column:1; }
}

/* Premium explainers: visual first, full evidence one disclosure away. */
.premium-explainer .section-heading h1,.premium-comparison .section-heading h1 { max-width:16ch; font-size:clamp(2.5rem,5vw,4.8rem); line-height:1.08; letter-spacing:-.045em; }
.premium-journey { margin:28px 0 44px; padding:clamp(24px,4vw,52px); border-radius:28px; background:linear-gradient(130deg,#071d30,#103f58); color:#fff; }
.premium-journey ol { display:flex; list-style:none; margin:0; padding:0; gap:30px; }
.premium-journey li { position:relative; flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0; }
.premium-journey li:not(:last-child)::after { content:"→"; position:absolute; top:18px; right:-22px; color:#65e8ac; }
.premium-journey svg { width:48px; height:48px; padding:9px; box-sizing:border-box; border-radius:14px; background:rgba(101,232,172,.12); stroke:#65e8ac; fill:none; stroke-width:1.5; }
.premium-journey strong { font:700 clamp(.95rem,1.5vw,1.2rem)/1.25 var(--rkv-font-display); }
.premium-journey span { font-size:.8rem; line-height:1.5; color:#c4d9e3; }
.premium-explainer section.reading-block { margin:0; padding-block:52px; border-bottom:1px solid rgba(11,51,86,.1); }
.premium-explainer section.reading-block h2 { max-width:26ch; font-size:clamp(1.8rem,3vw,2.7rem); line-height:1.15; letter-spacing:-.035em; }
.premium-section-lead { max-width:55ch; font-size:1.05rem; color:#4c6578; }
.premium-explainer .tech-viz { margin:26px 0; padding:clamp(20px,3vw,38px); background:#fff; box-shadow:0 12px 40px rgba(9,42,66,.04); border-radius:24px; }
.premium-detail-body { padding:12px 0; }
.premium-detail-body p { font-size:.9rem; line-height:1.75; }
.premium-details { margin:20px 0; }
.premium-comparison .visual-comparison-keys { display:none; }
.premium-comparison .matrix-legend { font-size:.75rem; max-width:80ch; }
.premium-comparison #energy-hub-upgrade { margin-block:30px; padding-block:28px; }
@media(max-width:660px) {
 .premium-journey { border-radius:22px; padding:26px 22px; }
 .premium-journey ol { flex-direction:column; gap:30px; }
 .premium-journey li { display:grid; grid-template-columns:48px 1fr; column-gap:16px; row-gap:4px; align-items:center; }
 .premium-journey svg { grid-row:1/3; }
 .premium-journey span { grid-column:2; }
 .premium-journey li:not(:last-child)::after { content:"↓"; top:auto; bottom:-24px; left:20px; right:auto; }
 .premium-explainer section.reading-block { padding-block:32px; }
}

#rkv-methode .premium-journey li::after { display:none; }

/* Connect the icon centres, rather than placing arrows beside the next icon. */
.premium-journey li:not(:last-child)::after { top:20px; left:66px; right:-14px; height:8px; background:linear-gradient(90deg,rgba(101,232,172,.15),#65e8ac); clip-path:polygon(0 35%,calc(100% - 7px) 35%,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,calc(100% - 7px) 65%,0 65%); content:""; }
.optimizer-teaser { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px; margin-block:40px 70px; padding:clamp(28px,4vw,52px); border-radius:26px; background:linear-gradient(130deg,#071d30,#103f58); color:#fff; }
.optimizer-teaser h2 { color:#fff; margin:8px 0 0; font-size:clamp(2rem,3vw,3rem); line-height:1.15; letter-spacing:-.035em; }
.optimizer-teaser p { color:#d4e4ed; }.optimizer-teaser .eyebrow { color:#65e8ac; }
.optimizer-teaser .text-link { display:block; color:#d4e4ed; margin-top:20px; }
.technology-page .optimizer-section { padding-inline:0; width:100%; }
@media(max-width:660px) { .optimizer-teaser { grid-template-columns:1fr; }.premium-journey li:not(:last-child)::after { top:auto; bottom:-24px; left:20px; right:auto; width:8px; height:18px; background:#65e8ac; clip-path:polygon(35% 0,65% 0,65% calc(100% - 6px),100% calc(100% - 6px),50% 100%,0 calc(100% - 6px),35% calc(100% - 6px)); content:""; } }