/* Services and technology reuse the existing native-radio clock component. */
#services.service-clock-section, #technology.service-clock-section { display: block; }
.service-clock-section > .express-section-heading { margin-bottom: 40px; }
.service-clock-section > .express-section-heading > a { justify-self: start; }
.service-clock-browser .feature-clock label { width: 32%; font-size: 14px; }
.service-clock-browser .feature-clock-icon > img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.feature-pair-service { --pair-columns: 1.505882353fr .45fr; --pair-width: min(117.35svh, 1017px); }
.service-clock-browser .feature-stage > figcaption { min-height: 136px; }
@media (max-width: 1100px) {
 .service-clock-section > .express-section-heading { margin-bottom: 28px; }
 .service-clock-browser .feature-clock label { width: 32px; }
 .service-clock-browser .feature-stage > figcaption { min-height: 0; }
}

.feature-clock label[for="services-feature-city"] { left: 50.000%; top: 10.000%; }
#services-feature-city:checked ~ .feature-clock label[for="services-feature-city"] { color: var(--px-blue); }
#services-feature-city:checked ~ .feature-clock label[for="services-feature-city"] .feature-clock-icon { background: var(--px-blue); color: #fff; border-color: var(--px-blue); box-shadow: 0 0 0 var(--clock-active-ring, 6px) #e5f0fc, 0 8px 18px #2270c428; }
#services-feature-city:checked ~ .feature-clock [data-clock-ray="city"] { stroke: #4b92e1; stroke-width: 2; }
#services-feature-city:focus-visible ~ .feature-clock label[for="services-feature-city"] .feature-clock-icon { outline: 3px solid var(--px-blue); outline-offset: var(--clock-focus-offset, 8px); }
#services-feature-city:checked ~ .feature-panels > #services-panel-city { display: contents; }
#services-feature-city:checked ~ .feature-clock-title > [data-feature="city"] { display: block; }
@media (max-width: 1100px) {
 .service-clock-browser:has(> #services-feature-city:checked):has(#services-panel-city .feature-platforms[data-preview="windows"]) > .feature-clock { margin-right: 10px; }
}

.feature-clock label[for="services-feature-pair"] { left: 88.000%; top: 48.000%; }
#services-feature-pair:checked ~ .feature-clock label[for="services-feature-pair"] { color: var(--px-blue); }
#services-feature-pair:checked ~ .feature-clock label[for="services-feature-pair"] .feature-clock-icon { background: var(--px-blue); color: #fff; border-color: var(--px-blue); box-shadow: 0 0 0 var(--clock-active-ring, 6px) #e5f0fc, 0 8px 18px #2270c428; }
#services-feature-pair:checked ~ .feature-clock [data-clock-ray="pair"] { stroke: #4b92e1; stroke-width: 2; }
#services-feature-pair:focus-visible ~ .feature-clock label[for="services-feature-pair"] .feature-clock-icon { outline: 3px solid var(--px-blue); outline-offset: var(--clock-focus-offset, 8px); }
#services-feature-pair:checked ~ .feature-panels > #services-panel-pair { display: contents; }
#services-feature-pair:checked ~ .feature-clock-title > [data-feature="pair"] { display: block; }
@media (max-width: 1100px) {
 .service-clock-browser:has(> #services-feature-pair:checked):has(#services-panel-pair .feature-platforms[data-preview="windows"]) > .feature-clock { margin-right: 10px; }
}

.feature-clock label[for="services-feature-business"] { left: 50.000%; top: 86.000%; }
#services-feature-business:checked ~ .feature-clock label[for="services-feature-business"] { color: var(--px-blue); }
#services-feature-business:checked ~ .feature-clock label[for="services-feature-business"] .feature-clock-icon { background: var(--px-blue); color: #fff; border-color: var(--px-blue); box-shadow: 0 0 0 var(--clock-active-ring, 6px) #e5f0fc, 0 8px 18px #2270c428; }
#services-feature-business:checked ~ .feature-clock [data-clock-ray="business"] { stroke: #4b92e1; stroke-width: 2; }
#services-feature-business:focus-visible ~ .feature-clock label[for="services-feature-business"] .feature-clock-icon { outline: 3px solid var(--px-blue); outline-offset: var(--clock-focus-offset, 8px); }
#services-feature-business:checked ~ .feature-panels > #services-panel-business { display: contents; }
#services-feature-business:checked ~ .feature-clock-title > [data-feature="business"] { display: block; }
@media (max-width: 1100px) {
 .service-clock-browser:has(> #services-feature-business:checked):has(#services-panel-business .feature-platforms[data-preview="windows"]) > .feature-clock { margin-right: 10px; }
}

.feature-clock label[for="services-feature-profile"] { left: 12.000%; top: 48.000%; }
#services-feature-profile:checked ~ .feature-clock label[for="services-feature-profile"] { color: var(--px-blue); }
#services-feature-profile:checked ~ .feature-clock label[for="services-feature-profile"] .feature-clock-icon { background: var(--px-blue); color: #fff; border-color: var(--px-blue); box-shadow: 0 0 0 var(--clock-active-ring, 6px) #e5f0fc, 0 8px 18px #2270c428; }
#services-feature-profile:checked ~ .feature-clock [data-clock-ray="profile"] { stroke: #4b92e1; stroke-width: 2; }
#services-feature-profile:focus-visible ~ .feature-clock label[for="services-feature-profile"] .feature-clock-icon { outline: 3px solid var(--px-blue); outline-offset: var(--clock-focus-offset, 8px); }
#services-feature-profile:checked ~ .feature-panels > #services-panel-profile { display: contents; }
#services-feature-profile:checked ~ .feature-clock-title > [data-feature="profile"] { display: block; }
@media (max-width: 1100px) {
 .service-clock-browser:has(> #services-feature-profile:checked):has(#services-panel-profile .feature-platforms[data-preview="windows"]) > .feature-clock { margin-right: 10px; }
}

.feature-clock label[for="technology-feature-history"] { left: 50.000%; top: 10.000%; }
#technology-feature-history:checked ~ .feature-clock label[for="technology-feature-history"] { color: var(--px-blue); }
#technology-feature-history:checked ~ .feature-clock label[for="technology-feature-history"] .feature-clock-icon { background: var(--px-blue); color: #fff; border-color: var(--px-blue); box-shadow: 0 0 0 var(--clock-active-ring, 6px) #e5f0fc, 0 8px 18px #2270c428; }
#technology-feature-history:checked ~ .feature-clock [data-clock-ray="history"] { stroke: #4b92e1; stroke-width: 2; }
#technology-feature-history:focus-visible ~ .feature-clock label[for="technology-feature-history"] .feature-clock-icon { outline: 3px solid var(--px-blue); outline-offset: var(--clock-focus-offset, 8px); }
#technology-feature-history:checked ~ .feature-panels > #technology-panel-history { display: contents; }
#technology-feature-history:checked ~ .feature-clock-title > [data-feature="history"] { display: block; }
@media (max-width: 1100px) {
 .service-clock-browser:has(> #technology-feature-history:checked):has(#technology-panel-history .feature-platforms[data-preview="windows"]) > .feature-clock { margin-right: 10px; }
}

.feature-clock label[for="technology-feature-protection"] { left: 88.000%; top: 48.000%; }
#technology-feature-protection:checked ~ .feature-clock label[for="technology-feature-protection"] { color: var(--px-blue); }
#technology-feature-protection:checked ~ .feature-clock label[for="technology-feature-protection"] .feature-clock-icon { background: var(--px-blue); color: #fff; border-color: var(--px-blue); box-shadow: 0 0 0 var(--clock-active-ring, 6px) #e5f0fc, 0 8px 18px #2270c428; }
#technology-feature-protection:checked ~ .feature-clock [data-clock-ray="protection"] { stroke: #4b92e1; stroke-width: 2; }
#technology-feature-protection:focus-visible ~ .feature-clock label[for="technology-feature-protection"] .feature-clock-icon { outline: 3px solid var(--px-blue); outline-offset: var(--clock-focus-offset, 8px); }
#technology-feature-protection:checked ~ .feature-panels > #technology-panel-protection { display: contents; }
#technology-feature-protection:checked ~ .feature-clock-title > [data-feature="protection"] { display: block; }
@media (max-width: 1100px) {
 .service-clock-browser:has(> #technology-feature-protection:checked):has(#technology-panel-protection .feature-platforms[data-preview="windows"]) > .feature-clock { margin-right: 10px; }
}

.feature-clock label[for="technology-feature-data"] { left: 50.000%; top: 86.000%; }
#technology-feature-data:checked ~ .feature-clock label[for="technology-feature-data"] { color: var(--px-blue); }
#technology-feature-data:checked ~ .feature-clock label[for="technology-feature-data"] .feature-clock-icon { background: var(--px-blue); color: #fff; border-color: var(--px-blue); box-shadow: 0 0 0 var(--clock-active-ring, 6px) #e5f0fc, 0 8px 18px #2270c428; }
#technology-feature-data:checked ~ .feature-clock [data-clock-ray="data"] { stroke: #4b92e1; stroke-width: 2; }
#technology-feature-data:focus-visible ~ .feature-clock label[for="technology-feature-data"] .feature-clock-icon { outline: 3px solid var(--px-blue); outline-offset: var(--clock-focus-offset, 8px); }
#technology-feature-data:checked ~ .feature-panels > #technology-panel-data { display: contents; }
#technology-feature-data:checked ~ .feature-clock-title > [data-feature="data"] { display: block; }
@media (max-width: 1100px) {
 .service-clock-browser:has(> #technology-feature-data:checked):has(#technology-panel-data .feature-platforms[data-preview="windows"]) > .feature-clock { margin-right: 10px; }
}

.feature-clock label[for="technology-feature-protocols"] { left: 12.000%; top: 48.000%; }
#technology-feature-protocols:checked ~ .feature-clock label[for="technology-feature-protocols"] { color: var(--px-blue); }
#technology-feature-protocols:checked ~ .feature-clock label[for="technology-feature-protocols"] .feature-clock-icon { background: var(--px-blue); color: #fff; border-color: var(--px-blue); box-shadow: 0 0 0 var(--clock-active-ring, 6px) #e5f0fc, 0 8px 18px #2270c428; }
#technology-feature-protocols:checked ~ .feature-clock [data-clock-ray="protocols"] { stroke: #4b92e1; stroke-width: 2; }
#technology-feature-protocols:focus-visible ~ .feature-clock label[for="technology-feature-protocols"] .feature-clock-icon { outline: 3px solid var(--px-blue); outline-offset: var(--clock-focus-offset, 8px); }
#technology-feature-protocols:checked ~ .feature-panels > #technology-panel-protocols { display: contents; }
#technology-feature-protocols:checked ~ .feature-clock-title > [data-feature="protocols"] { display: block; }
@media (max-width: 1100px) {
 .service-clock-browser:has(> #technology-feature-protocols:checked):has(#technology-panel-protocols .feature-platforms[data-preview="windows"]) > .feature-clock { margin-right: 10px; }
}
