/* Service-specific explanations, distinct from the shared feature layouts. */
.technical-panel{padding-block:88px;border-bottom:1px solid var(--line)}
.technical-panel-heading{display:grid;grid-template-columns:1.15fr 1fr;align-items:end;gap:70px;margin-bottom:44px}
.technical-panel-heading h2{font-size:43px;line-height:1.12;letter-spacing:-1.7px}
.technical-panel-heading>p{max-width:460px;font-size:18px;line-height:1.75;color:var(--muted)}
.route-decision{max-width:1080px;margin-inline:auto}
.route-origin{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding-bottom:31px;position:relative}
.route-origin:after{content:"";position:absolute;bottom:0;left:50%;height:23px;width:1px;background:#aebf9e}
.technical-node{display:block;width:11px;height:11px;background:var(--orange);border:3px solid var(--paper);outline:1px solid #b69b75;border-radius:50%;flex:none}
.route-origin strong{font-size:21px;font-weight:600;line-height:1.4}
.route-origin>span:last-child{font-size:15px;color:var(--muted);line-height:1.6}
.route-branches{--branch-gap:50px;display:grid;grid-template-columns:1fr 1fr;gap:var(--branch-gap);padding-block:31px 24px;position:relative}
.route-branches:before,.route-branches:after{content:"";position:absolute;left:calc((100% - var(--branch-gap))/4);right:calc((100% - var(--branch-gap))/4);height:1px;background:#aebf9e}
.route-branches:before{top:0}
.route-branches:after{bottom:0}
.route-option{position:relative;border:1px solid #cbd5bf;border-radius:5px;padding:25px 29px 24px;background:#f2f5eb}
.route-option:before{content:"";position:absolute;left:50%;top:-32px;height:31px;width:1px;background:#aebf9e}
.route-option:after{content:"";position:absolute;left:50%;bottom:-25px;height:24px;width:1px;background:#aebf9e}
.technical-route-icon{width:39px;height:39px;color:#72875f;margin-bottom:16px}
.route-option h3{font-size:25px;line-height:1.3;letter-spacing:-.7px;margin-bottom:16px}
.route-option ul{display:grid;gap:12px;margin:0}
.route-option li{padding-left:16px;position:relative;font-size:17px;line-height:1.7;color:var(--muted)}
.route-option li:before{content:"";position:absolute;width:4px;height:4px;left:0;top:12px;background:#8b9f77;border-radius:50%}
.route-conclusion{max-width:770px;margin:0 auto;padding-top:32px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;position:relative}
.route-conclusion:before{content:"";position:absolute;top:0;left:50%;height:23px;width:1px;background:#aebf9e}
.route-conclusion strong{font-size:22px;line-height:1.4;font-weight:600}
.route-conclusion p{font-size:17px;line-height:1.75;color:var(--muted)}
.technical-pon{background:#f3f5ec}
.technical-pon-layout{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:60px}
.technical-pon-copy h2{font-size:43px;line-height:1.12;letter-spacing:-1.7px;max-width:470px}
.technical-pon-copy>p:not(.eyebrow){font-size:18px;line-height:1.8;color:var(--muted);margin-top:24px;max-width:470px}
.pon-diagram{min-width:0}
.pon-diagram>svg{width:100%;height:auto}
.pon-node-labels{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;padding-inline:5px}
.pon-node-labels>span{display:flex;flex-direction:column;gap:7px;text-align:center;line-height:1.5}
.pon-node-labels strong{font-size:16px;font-weight:600}
.pon-node-labels small{font-size:13px;color:var(--muted)}
.pon-service-note{border-top:1px solid #d1dcc6;padding-top:20px;margin-top:24px;color:var(--muted);font-size:15px;line-height:1.7;text-align:center}

@media(max-width:1100px){
.technical-panel-heading{gap:40px}
.technical-pon-layout{gap:35px;grid-template-columns:.9fr 1.1fr}
.technical-pon-copy h2,.technical-panel-heading h2{font-size:37px}
.technical-pon-copy>p:not(.eyebrow){font-size:17px}
.pon-node-labels{gap:10px}
.pon-node-labels strong{font-size:14px}
}
@media(max-width:960px){
.technical-panel{padding-block:70px}
.technical-panel-heading{grid-template-columns:1fr 1fr;gap:30px}
.technical-panel-heading>p{font-size:17px}
.route-branches{--branch-gap:30px}
.route-option{padding:24px}
.route-option h3{font-size:23px}
.technical-pon-layout{grid-template-columns:1fr;gap:30px}
.technical-pon-copy{display:grid;grid-template-columns:1fr 1fr;gap:0 35px}
.technical-pon-copy>.section-kicker{grid-column:1 / -1}
.technical-pon-copy h2{grid-column:1;grid-row:2 / span 2}
.technical-pon-copy>p:not(.eyebrow){grid-column:2;margin-top:0}
.technical-pon-copy>p+p:not(.eyebrow){margin-top:16px}
.pon-diagram{max-width:710px;margin-inline:auto}
.pon-node-labels strong{font-size:16px}
.pon-service-note{max-width:710px;margin-inline:auto}
}
@media(max-width:680px){
.technical-panel{padding-block:58px}
.technical-panel-heading{grid-template-columns:1fr;gap:22px;margin-bottom:32px}
.technical-panel-heading h2,.technical-pon-copy h2{font-size:34px;letter-spacing:-1.2px;line-height:1.14}
.technical-panel-heading>p{font-size:17px}
.route-origin{padding-bottom:27px;align-items:flex-start;text-align:left;padding-left:23px}
.route-origin>.technical-node{position:absolute;left:-5px;top:10px}
.route-origin:after{left:0;top:20px;bottom:0;height:auto}
.route-origin strong{font-size:20px}
.route-origin>span:last-child{font-size:14px}
.route-branches{grid-template-columns:1fr;gap:20px;padding:0 0 0 23px;border-left:1px solid #aebf9e}
.route-branches:before,.route-branches:after,.route-option:after{display:none}
.route-option{padding:23px}
.route-option:before{left:-24px;top:34px;height:1px;width:23px}
.technical-route-icon{width:35px;height:35px;margin-bottom:14px}
.route-option h3{font-size:24px}
.route-option li{font-size:16px}
.route-conclusion{padding:26px 0 0 23px;text-align:left;align-items:flex-start;border-left:1px solid #aebf9e}
.route-conclusion:before{display:none}
.route-conclusion>.technical-node{position:absolute;left:-6px;top:33px}
.route-conclusion strong{font-size:21px}
.route-conclusion p{font-size:16px}
.technical-pon-copy{display:block}
.technical-pon-copy>p:not(.eyebrow){margin-top:22px;font-size:17px}
.technical-pon-copy>p+p:not(.eyebrow){margin-top:17px}
.technical-pon-layout{gap:27px}
.pon-node-labels{gap:9px;padding:0}
.pon-node-labels strong{font-size:13px;line-height:1.45}
.pon-node-labels small{font-size:12px;line-height:1.5}
.pon-service-note{margin-top:22px;padding-top:17px;text-align:left;font-size:14px}
}
@media(max-width:380px){
.route-option{padding:20px}
.route-option h3{font-size:22px}
.technical-panel-heading h2,.technical-pon-copy h2{font-size:32px}
.pon-node-labels{gap:7px}
.pon-node-labels small{font-size:11px}
}