/* Shared feature stage. Only transform and opacity animate; artwork stays vector. */
@font-face { font-family: boxicons; font-weight: 400; font-style: normal; font-display: swap; src: url('../../theme/v6/vendor/boxicons/fonts/boxicons.woff2') format('woff2'); }
.kf-hero { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 55% 70% at 12% 5%, rgba(39,133,88,.15), transparent 72%), #0b0d0e; padding: 150px 0 80px; margin-bottom: 32px; color: #fff; }
.kf-layout { display: grid; grid-template-columns: 47% 53%; align-items: center; }
.kf-copy { position: relative; z-index: 2; max-width: 570px; }
.kf-copy h1 { color: #f7f9fa; font-size: clamp(2.5rem, 3.8vw, 3.7rem); font-weight: 400; line-height: 1.12; letter-spacing: -.04em; margin: 25px 0; overflow-wrap: anywhere; }
.kf-copy p { color: #a7aeae; font-size: 1.05rem; line-height: 1.75; margin: 0; }
.kf-copy .btn { margin-top: 32px; }
.kf-breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin: 0; padding: 0; list-style: none; color: #91a49b; font-size: .76rem; line-height: 1.65; }
.kf-breadcrumbs li { display: flex; gap: 9px; align-items: center; }
.kf-breadcrumbs li+li::before { content: '/'; color: #53615c; }
.kf-breadcrumbs a { color: #a7bbb1; text-decoration: none; }
.kf-breadcrumbs a:hover { color: #fff; }
.kf-stage { position: relative; max-width: none; width: clamp(108%, calc(100vw - 760px), 125%); margin: 0 0 0 4%; aspect-ratio: 1440 / 1400; font-family: "Source Sans Pro", sans-serif; }
.kf-stage::before { content: ''; position: absolute; inset: 20% 4% 5%; background: radial-gradient(ellipse, rgba(116,215,173,.055), transparent 67%); pointer-events: none; }
.kf-admin { position: absolute; left: 5.555556%; top: 14.285714%; width: 78.472222%; aspect-ratio: 1000 / 865; mask-image: linear-gradient(90deg, #000 0%, #000 48%, rgba(0,0,0,.4) 66%, transparent 79%); }
.kf-config-state, .kf-connector-options { position: absolute; inset: 0; }
.kf-config-svg { display: block; width: 100%; height: 100%; font-family: "Source Sans Pro", sans-serif; }
.kf-config-svg--mobile { display: none; }
.kf-phone { position: absolute; left: 53.472222%; top: 4.642857%; width: 40.044444%; aspect-ratio: 424 / 910; }
.kf-shell, .kf-hardware, .kf-status-dark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kf-hardware, .kf-status-dark { pointer-events: none; }
.kf-screen { position: absolute; inset: 0; overflow: hidden; border-radius: 12.264151% / 5.714286%; isolation: isolate; background: #050608; }
.kf-app-state { position: absolute; inset: 0; will-change: transform; }
.kf-app-state>svg { display: block; width: 100%; height: 100%; }
@media (max-width:1199.98px) {
 .kf-stage { width: 108%; }
 .kf-copy h1 { font-size: 2.75rem; }
 .kf-hero { padding-top: 135px; }
}
@media (max-width:991.98px) {
 .kf-hero { padding: 120px 0 36px; }
 .kf-layout { grid-template-columns: minmax(0,1fr); }
 .kf-copy { max-width: 680px; margin: auto; text-align: center; }
 .kf-breadcrumbs { justify-content: center; }
 .kf-stage { width: min(100%,760px); margin: 24px auto 0; }
}
@media (max-width:575.98px) {
 .kf-hero { padding-top: 105px; }
 .kf-copy h1 { font-size: 2.25rem; margin: 20px 0; }
 .kf-copy p { font-size: .98rem; }
 .kf-breadcrumbs { font-size: .7rem; }
 .kf-stage { width: calc(100% + 32px); max-width: none; margin-left: -16px; aspect-ratio: 1000 / 1800; }
 .kf-admin { left: 3.5%; top: 2%; width: 93%; aspect-ratio: 1000 / 500; mask-image: linear-gradient(#000 70%, rgba(0,0,0,.75) 92%, transparent); }
 .kf-config-svg--desktop { display: none; }
 .kf-config-svg--mobile { display: block; }
 .kf-phone { left: 20.32%; top: 28%; width: 59.36%; }
}

/* One independent control per setting: only the operator's current field gets focus. */
.kf-control { position: absolute; left:42%; top:calc((272 + var(--field) * 91) / 865 * 100%); width:39%; height:calc(45 / 865 * 100%); }
.kf-control-value { position:absolute; inset:0; }
.kf-field-focus { position:absolute; inset:-3px; border:1px solid rgba(151,211,184,.65); border-radius:8px; background:rgba(134,204,168,.07); }
.kf-control--toggle .kf-field-focus { inset:auto; left:-3px; top:calc(11 / 45 * 100% - 3px); width:calc(40 / 390 * 100% + 6px); height:calc(23 / 45 * 100% + 6px); border-radius:20px; }
@media(max-width:575.98px) {
 .kf-control { left:54%; top:calc((121 + var(--field) * 64) / 500 * 100%); width:42.1%; height:8.6%; }
 .kf-control--toggle .kf-field-focus { top:calc(11 / 43 * 100% - 3px); width:calc(40 / 421 * 100% + 6px); height:calc(23 / 43 * 100% + 6px); }
}

/* The homepage capability-list treatment, scoped to each feature's actual scope. */
.kf-hero-points { display:flex; flex-wrap:wrap; gap:13px 24px; border-top:1px solid #ffffff26; margin:28px 0 0; padding:23px 0 0; list-style:none; color:#a7aeae; font-size:1rem; line-height:1.6; }
.kf-hero-points li { display:flex; align-items:baseline; gap:11px; max-width:100%; }
.kf-hero-points li::before { content:''; display:block; flex:0 0 8px; height:8px; border:1px solid #56d3a2; border-radius:50%; }
@media(max-width:991.98px) { .kf-hero-points { justify-content:center; } }
@media(max-width:575.98px) { .kf-hero-points { gap:11px 19px; margin-top:24px; padding-top:20px; font-size:.91rem; }.kf-hero-points li { gap:9px; } }