/* Editable labels for the two supplied illustrations; no text is baked into assets. */
.illustrated-figure{margin:0;min-width:0}
.diagram-frame{position:relative;isolation:isolate;width:100%;aspect-ratio:3/2}
.diagram-frame picture,.diagram-frame img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:contain}
.diagram-leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:#087b87;stroke-width:2.5}
.diagram-labels{list-style:none;padding:0;margin:0;position:absolute;inset:0;pointer-events:none}
.diagram-labels li{position:absolute;left:var(--x);top:var(--y);width:var(--label-width,30%);transform:translateX(-50%);display:flex;align-items:flex-start;gap:5px;padding:5px 7px;background:#fffdf7f5;border:1px solid #b9d5d1;border-radius:5px;color:var(--ink);font:600 12px/1.25 Arial,sans-serif;text-align:left;box-shadow:0 2px 6px #12343b0c}
.diagram-labels li:before{content:attr(data-number);display:grid;place-items:center;flex:0 0 19px;height:19px;border-radius:50%;background:var(--deep);color:white;font:600 11px/1 Arial,sans-serif}
.diagram-legend{list-style:none;padding:0;margin:0;counter-reset:diagram}
.diagram-legend li{counter-increment:diagram;position:relative;padding:13px 0 13px 36px;border-top:1px solid var(--line);font-size:15px;line-height:1.55}
.diagram-legend li:before{content:counter(diagram);position:absolute;left:0;top:15px;display:grid;place-items:center;width:23px;height:23px;background:var(--deep);color:white;border-radius:50%;font:600 12px/1 Arial,sans-serif}
.diagram-legend strong{display:block;font-size:15px;line-height:1.4;margin-bottom:5px}
.diagram-legend p{font-size:14px;line-height:1.6;color:var(--muted)}
.coverage-section{background:#faf8f2}
.coverage-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:26px 48px;align-items:start}
.coverage-heading{grid-column:2;grid-row:1}
.coverage-heading h2{font-size:clamp(32px,3.2vw,46px);margin-bottom:24px}
.coverage-heading>p:not(.eyebrow){font-size:16px;color:var(--muted)}
.coverage-layout>.illustrated-figure{grid-column:1;grid-row:1/3;align-self:center}
.coverage-layout>.diagram-legend{grid-column:2;grid-row:2}
.coverage-layout>.caption{grid-column:1/-1;margin-top:0}
.alert-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;align-items:center}
.alert-layout>.alert-grid{display:block;min-width:0}
.alert-layout .alert-grid article{display:grid;grid-template-columns:32px 1fr;gap:0 16px;padding:18px 0}
.alert-layout .alert-grid svg{width:30px;height:30px;grid-row:1/3;margin:0}
.alert-layout .alert-grid h3{font-size:22px;line-height:1.15}
.alert-layout .alert-grid p{grid-column:2;margin-top:8px;font-size:14px}
.alert-illustration .diagram-legend{display:none}
@media(min-width:768px) and (max-width:1099px){
 .coverage-layout{grid-template-columns:1fr 1fr;gap:30px}
 .coverage-heading{grid-column:1/-1;grid-row:1}
 .coverage-layout>.illustrated-figure{grid-column:1/-1;grid-row:2;width:100%}
 .coverage-layout>.diagram-legend{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:1fr 1fr;column-gap:30px}
 .alert-layout{grid-template-columns:1fr;gap:30px}
 .alert-layout>.alert-illustration{grid-row:1}
 .diagram-labels li{font-size:14px}
}
@media(max-width:767px){
 .coverage-section{padding-block:50px}
 .coverage-layout,.alert-layout{display:flex;flex-direction:column;gap:28px}
 .coverage-heading,.coverage-layout>.illustrated-figure,.coverage-layout>.diagram-legend,.alert-layout>.alert-grid,.alert-illustration{width:100%}
 .coverage-heading h2{font-size:36px}
 .coverage-layout>.caption{margin-top:0}
 .alert-layout>.alert-illustration{order:-1}
 .diagram-leaders{display:none}
 .diagram-labels li{left:var(--point-x);top:var(--point-y);transform:translate(-50%,-50%);width:22px;height:22px;padding:0;display:block;border:0;border-radius:50%;box-shadow:0 0 0 2px #fff}
 .diagram-labels li:before{width:22px;height:22px;font-size:11px}
 .diagram-labels span{display:none}
 .alert-illustration .diagram-legend{display:block;margin-top:22px}
 .alert-illustration .diagram-legend li{font-size:14px;padding-block:10px;min-height:42px}
 .alert-illustration .diagram-legend li:before{top:10px}
 .alert-layout .alert-grid article:last-child{max-width:none}
}

.diagram-labels li.diagram-center{justify-content:center;text-align:center}
.diagram-labels li.diagram-center:before,.diagram-legend li.diagram-center-legend:before{display:none}
.diagram-legend li.diagram-center-legend{padding-left:0;counter-increment:none;text-align:center}
@media(max-width:767px){.diagram-labels li.diagram-center{display:none}}

/* Residential example reuses the same room illustration and label component. */
.residencial-page .device-explainer .split{display:flex;flex-direction:column;gap:36px}
.residencial-page .device-explainer .split>div,.residential-coverage{width:100%;min-width:0}
.residential-coverage h3{font-size:clamp(25px,3vw,36px);line-height:1.2;margin-bottom:16px}
.room-home-intro{color:var(--muted);margin-bottom:28px}
.residential-coverage .diagram-legend{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin-top:28px}
.residential-coverage>.caption{margin-top:24px}
@media(max-width:767px){.residential-coverage .diagram-legend{grid-template-columns:1fr}}
.residencial-page .device-explainer .plain-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.residencial-page .device-explainer .plain-benefits article{min-width:0;padding:20px 0 0;margin:0;border-top:1px solid var(--line);border-bottom:0}
.residencial-page .device-explainer .plain-benefits h3{font-size:20px;line-height:1.3;margin-bottom:12px}
.residencial-page .device-explainer .plain-benefits>.caption{grid-column:1/-1;max-width:none;margin:0}
@media(max-width:767px){.residencial-page .device-explainer .plain-benefits{grid-template-columns:1fr;gap:24px}}