.gf-devices { margin-top: 56px; color: #262d49; }
.gf-devices-header { display: flex; gap: 32px; align-items: center; justify-content: space-between; margin-bottom: 24px; }.gf-devices-header>div { max-width: 700px; }.gf-device-eyebrow { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: #858a9c; font-weight: 600; }.gf-devices-header h3 { font-size: clamp(25px,3vw,34px); letter-spacing: -.035em; margin: 9px 0 12px; }.gf-devices-header p { color: #7d8497; line-height: 1.7; font-size: 14px; margin: 0; }.gf-device-setup-link { white-space: nowrap; text-decoration: none; font-size: 12px; font-weight: 600; color: #38345c; }.gf-device-setup-link i { margin-left: 9px; }
.gf-device-toolbar { display: flex; gap: 15px; align-items: center; justify-content: space-between; margin-bottom: 22px; }.gf-device-filters { display: flex; gap: 7px; flex-wrap: wrap; }.gf-device-filters button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e3e6ee; border-radius: 25px; padding: 9px 15px; background: #fff; color: #85899b; font-size: 11px; cursor: pointer; }.gf-device-filters button[aria-pressed="true"] { background: #252551; color: #fff; border-color: #252551; }.gf-device-brand-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }.gf-device-brand-dot-zk { background: #76b541; }.gf-device-brand-dot-hik { background: #e04a52; }.gf-device-result-count { font-size: 10px; color: #9ba1af; }
.gf-device-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }.gf-device-card { --device-accent: #7eab52; border: 1px solid #e5e9ef; border-radius: 20px; background: #fff; overflow: hidden; transition: transform .3s ease,box-shadow .3s ease,border-color .3s ease; }.gf-device-card[hidden] { display: none; }.gf-device-card[data-device-brand="hikvision"] { --device-accent: #d54953; }.gf-device-card-top { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 10px; gap: 8px; }.gf-device-wordmark { font-size: 20px; font-weight: 800; letter-spacing: -.06em; }.gf-device-wordmark-zkteco { color: #79a644; }.gf-device-wordmark-hikvision { color: #cf3944; font-style: italic; text-transform: uppercase; font-size: 17px; letter-spacing: -.04em; }.gf-device-supported { color: #7e8b83; border: 1px solid #e3ece5; background: #f7fbf8; border-radius: 20px; padding: 4px 7px; font-size: 8px; white-space: nowrap; }
.gf-device-image-stage { position: relative; height: 225px; display: flex; align-items: center; justify-content: center; background: #fff; isolation: isolate; margin: 0 10px; }.gf-device-orbit { position: absolute; width: 175px; height: 175px; border: 1px dashed #dce3ea; border-radius: 50%; z-index: -1; }.gf-device-orbit::after { content: ''; position: absolute; top: 21px; left: 23px; width: 6px; height: 6px; border-radius: 50%; background: var(--device-accent); box-shadow: 0 0 0 5px color-mix(in srgb,var(--device-accent) 10%,transparent); }.gf-device-image-stage img { display: block; width: 200px; height: 190px; max-width: 85%; object-fit: contain; mix-blend-mode: multiply; transition: transform .45s ease;  }.gf-device-image-caption { position: absolute; bottom: 5px; color: #a6adba; font-size: 7px; letter-spacing: .02em; }
.gf-device-card-content { padding: 19px 22px 22px; }.gf-device-category { font-size: 9px; color: #929aab; }.gf-device-card h4 { font-size: 22px; font-weight: 600; letter-spacing: -.03em; margin: 5px 0 13px; }.gf-device-feature-tags { display: flex; flex-wrap: wrap; gap: 5px; min-height: 39px; align-content: start; }.gf-device-feature-tags>span { display: inline-block; border: 1px solid #ecedf3; border-radius: 5px; padding: 4px 6px; font-size: 8px; color: #848b9d; background: #fbfcfe; }.gf-device-card p { color: #8b92a3; font-size: 12px; line-height: 1.7; min-height: 61px; margin: 13px 0 17px; }.gf-device-enquiry { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid #eeeff5; font-size: 11px; font-weight: 600; color: #454162; text-decoration: none; }.gf-device-source { display: inline-block; margin-top: 12px; font-size: 9px; color: #a1a6b4; text-decoration: none; }
.gf-device-fit-check { display: flex; align-items: center; gap: 16px; margin-top: 22px; border: 1px solid #e5e7f1; border-radius: 14px; padding: 20px 24px; background: linear-gradient(110deg,#f7f7fd,#fbfcff); }.gf-device-fit-icon { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; background: #ecebf7; border-radius: 11px; color: #817aa4; font-size: 20px; }.gf-device-fit-check strong { font-size: 13px; }.gf-device-fit-check p { color: #9399aa; font-size: 11px; margin: 4px 0 0; line-height: 1.7; }.gf-device-fit-check>a { margin-left: auto; white-space: nowrap; text-decoration: none; font-size: 11px; color: #575173; font-weight: 600; }
.gf-device-more { margin-top: 20px; border-top: 1px solid #edf0f6; padding: 14px 0; color: #7c859a; font-size: 11px; }.gf-device-more summary { cursor: pointer; }.gf-device-more table { margin-top: 15px; font-size: 11px; }.gf-device-more caption { font-size: 10px; }.gf-device-note { color: #a1a7b4; font-size: 10px; line-height: 1.7; margin: 4px 0 0; }.gf-devices button:focus-visible,.gf-devices a:focus-visible { outline: 3px solid #b2a9d2; outline-offset: 4px; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .gf-device-card:hover,.gf-device-card:focus-within { transform: translateY(-5px); border-color: color-mix(in srgb,var(--device-accent) 40%,#e5e9ef); box-shadow: 0 18px 40px #292e4f0d; }.gf-device-card:hover img { transform: translateY(-7px) rotate(-3deg); }.gf-device-card:hover .gf-device-orbit { animation: gf-device-orbit 14s linear infinite; } }
@keyframes gf-device-orbit { to { transform: rotate(360deg); } }
@media (max-width:991px) { .gf-device-grid { gap: 12px; }.gf-device-card-top { padding: 15px 12px 8px; }.gf-device-wordmark { font-size: 17px; }.gf-device-wordmark-hikvision { font-size: 14px; }.gf-device-supported { font-size: 7px; padding: 3px 5px; }.gf-device-card-content { padding: 16px; }.gf-device-card h4 { font-size: 19px; }.gf-device-image-stage { height: 195px; }.gf-device-image-stage img { height: 165px; } }
@media (max-width:767px) { .gf-devices-header { flex-direction: column; align-items: start; gap: 14px; }.gf-device-grid { grid-template-columns: 1fr; }.gf-device-card-top { padding: 20px 22px 8px; }.gf-device-wordmark { font-size: 21px; }.gf-device-wordmark-hikvision { font-size: 18px; }.gf-device-card-content { padding: 19px 22px; }.gf-device-card p { min-height: 0; }.gf-device-feature-tags { min-height: 0; }.gf-device-result-count { display: none; }.gf-device-fit-check { flex-wrap: wrap; padding: 18px; }.gf-device-fit-check>div { flex: 1; }.gf-device-fit-check>a { margin-left: 56px; }.gf-device-image-stage { height: 210px; }.gf-device-image-stage img { height: 185px; } }
@media (prefers-reduced-motion:reduce) { .gf-devices * { animation:none !important; transition:none !important; } }