@font-face { font-family: CerberusDisplay; src: url("/PromoPages/cerberus-expanded/assets/BebasNeueCyrillic.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: CerberusText; src: url("/PromoPages/cerberus-expanded/assets/Roboto-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: CerberusText; src: url("/PromoPages/cerberus-expanded/assets/Roboto-Black.woff") format("woff"); font-weight: 800; font-display: swap; }
#cerberus-landing{--paper: #f0f0f0; --white: #ffffff; --ink: #171717; --muted: #666666; --line: #d6d6d6; --red: #dc2029; --dark: #202020; --silver: #c7c7c7; --display: CerberusDisplay,'Arial Narrow',sans-serif; --body: CerberusText,Arial,sans-serif;}
#cerberus-landing,#cerberus-landing *{box-sizing: border-box;}
#cerberus-landing{scroll-behavior: smooth; scroll-padding-top: 90px;}
#cerberus-landing{margin: 0px; background: var(--white); color: var(--ink); font: 16px/1.65 var(--body); overflow-wrap: break-word;}
#cerberus-landing :where(*){font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;text-transform:none;letter-spacing:normal}
#cerberus-landing strong,#cerberus-landing b{font-weight:800}
#cerberus-landing img{display: block; max-width: 100%; height: auto;}
#cerberus-landing a{color: inherit; text-decoration: none;}
#cerberus-landing button{font: inherit; color: inherit; cursor: pointer;}
#cerberus-landing button,#cerberus-landing a{-webkit-tap-highlight-color: transparent;}
#cerberus-landing button:focus-visible,#cerberus-landing a:focus-visible,#cerberus-landing [tabindex]:focus-visible{outline: 3px solid var(--red); outline-offset: 5px;}
#cerberus-landing a,#cerberus-landing button{touch-action: manipulation;}
#cerberus-landing figure,#cerberus-landing p,#cerberus-landing h1,#cerberus-landing h2,#cerberus-landing h3,#cerberus-landing dl,#cerberus-landing dd{margin: 0px;}
#cerberus-landing h1,#cerberus-landing h2,#cerberus-landing h3{font-family: var(--display); font-weight: 400; line-height: 0.98; letter-spacing: -0.012em;}
#cerberus-landing h2{font-size: clamp(48px, 5.5vw, 82px); text-wrap: balance;}
#cerberus-landing h2 span{color: var(--muted);}
#cerberus-landing h3{font-size: 38px;}
#cerberus-landing p{max-width: 65ch;}
#cerberus-landing .shell{width: min(1240px, 100% - 112px); margin-inline: auto;}
#cerberus-landing .section{padding-block: 110px;}
#cerberus-landing .eyebrow{font: 800 11px/1.5 var(--body); letter-spacing: 0.15em; margin-bottom: 22px;}
#cerberus-landing .accent-red{color: var(--red);}
#cerberus-landing .small-label{font-size: 12px; color: var(--muted);}
#cerberus-landing .button{display: inline-flex; justify-content: space-between; align-items: center; gap: 35px; background: var(--red); color: rgb(255, 255, 255); padding: 17px 23px; font-size: 14px; font-weight: 800; transition: background 0.2s, transform 0.2s;}
#cerberus-landing .button:hover{background: rgb(183, 21, 32); transform: translateY(-2px);}
#cerberus-landing .button:active{transform: translateY(1px);}
#cerberus-landing .button span{font-size: 24px; line-height: 1;}
#cerberus-landing .under-link{display: inline-flex; align-items: center; gap: 30px; font-size: 13px; font-weight: 800; border-bottom: 1px solid; padding-bottom: 5px;}
#cerberus-landing .under-link:hover{color: var(--red);}
#cerberus-landing .skip{position: fixed; z-index: 10; top: 0px; left: 10px; padding: 12px; background: var(--red); color: white; transform: translateY(-150%);}
#cerberus-landing .skip:focus{transform: none;}
#cerberus-landing .global-header{height: 78px; display: flex; align-items: center; justify-content: space-between; padding-inline: 48px; background: rgb(255, 255, 255); gap: 30px; border-bottom: 1px solid rgb(231, 231, 231);}
#cerberus-landing .brand{display: flex; align-items: center; gap: 10px; white-space: nowrap;}
#cerberus-landing .brand svg{width: 32px; color: rgb(220, 32, 41);}
#cerberus-landing .brand > span{font-family: Arial, sans-serif; font-size: 23px; font-weight: 400; letter-spacing: 0.17em;}
#cerberus-landing .global-header nav{display: flex; gap: 30px; font-size: 12px; font-weight: 800;}
#cerberus-landing .global-header nav a{padding-block: 6px;}
#cerberus-landing .global-header nav a:hover,#cerberus-landing .global-header .active{color: var(--red);}
#cerberus-landing .header-action{font-size: 12px; font-weight: 800;}
#cerberus-landing .header-action span{margin-left: 20px;}
#cerberus-landing .hero{background: var(--paper); position: relative; overflow: hidden; padding-bottom: 25px;}
#cerberus-landing .hero-top{display: flex; align-items: center; justify-content: space-between; padding-top: 28px;}
#cerberus-landing .hero-top .eyebrow{margin: 0px;}
#cerberus-landing .hero-name{position: absolute; top: 55px; left: 50%; transform: translateX(-50%); font: 400 clamp(130px,24.4vw,390px)/1 var(--display); letter-spacing: 0.005em; white-space: nowrap; color: rgb(222, 222, 222); pointer-events: none;}
#cerberus-landing .hero-stage{position: relative; min-height: 720px; display: flex; align-items: center;}
#cerberus-landing .hero-copy{position: relative; z-index: 2; width: 43%; padding-top: 100px;}
#cerberus-landing .hero-copy h1{font-size: clamp(65px, 8.8vw, 134px); margin-bottom: 25px;}
#cerberus-landing .hero-copy h1 span{color: var(--red);}
#cerberus-landing .hero-copy > p:not(.eyebrow){font-size: 17px; max-width: 370px; line-height: 1.7; margin-bottom: 30px;}
#cerberus-landing .hero-copy .eyebrow{margin-bottom: 18px;}
#cerberus-landing .hero-copy .under-link{display: flex; width: max-content; border: 0px; margin-top: 20px; font-size: 12px;}
#cerberus-landing .hero-product{position: absolute; left: 40%; right: -11%; top: 130px; min-height: 500px;}
#cerberus-landing .hero-product > img{width: 100%; position: relative; z-index: 1; filter: drop-shadow(rgba(39, 39, 39, 0.19) 0px 32px 18px); transform: rotate(-8deg);}
#cerberus-landing .hero-product figcaption{position: relative; text-align: center; font-size: 9px; font-weight: 800; letter-spacing: 0.15em; margin-top: 10px; z-index: 2;}
#cerberus-landing .live-dot{display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-right: 8px;}
#cerberus-landing .hero-range{position: absolute; inset: -5% 8% 8%; transform: rotate(-25deg); border: 1px solid rgb(194, 194, 194); border-radius: 50%;}
#cerberus-landing .hero-range i{position: absolute; inset: 10%; border: 1px solid rgb(206, 206, 206); border-radius: 50%;}
#cerberus-landing .hero-range i:nth-child(2){inset: -10%;}
#cerberus-landing .hero-range i:nth-child(3){inset: 22%;}
#cerberus-landing .hero-range-label{position: absolute; right: 0px; bottom: 10px; text-align: right;}
#cerberus-landing .hero-range-label strong{display: block; font: 400 75px/.9 var(--display); color: var(--dark);}
#cerberus-landing .hero-range-label strong span{font-size: 30px; margin-left: 4px;}
#cerberus-landing .hero-range-label small{font-size: 10px; letter-spacing: 0.08em;}
#cerberus-landing .hero-bottom{display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 20px; font-size: 11px; color: var(--muted);}
#cerberus-landing .hero-bottom a{font-weight: 800;}
#cerberus-landing .hero-bottom a span{margin-left: 25px;}
#cerberus-landing .product-nav{position: sticky; top: 0px; z-index: 5; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);}
#cerberus-landing .product-nav .shell{display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 70px;}
#cerberus-landing .product-label{font-family: var(--display); font-size: 25px; white-space: nowrap;}
#cerberus-landing .product-label span{font-family: var(--body); font-size: 9px; color: var(--muted); margin-left: 9px; letter-spacing: 0.03em;}
#cerberus-landing .product-nav .shell > div{display: flex; gap: 25px; font-size: 11px;}
#cerberus-landing .product-nav a:hover{color: var(--red);}
#cerberus-landing .nav-buy{font-size: 12px; font-weight: 800; color: var(--red);}
#cerberus-landing .section-heading h2{max-width: 1050px;}
#cerberus-landing .overview-content{display: grid; grid-template-columns: 1.25fr 1fr; gap: 110px; margin-block: 55px 75px; padding-left: 20%;}
#cerberus-landing .overview-content p{font-size: 15px; color: var(--muted);}
#cerberus-landing .overview-content .large-copy{font-size: 22px; color: var(--ink); line-height: 1.6;}
#cerberus-landing .key-facts{display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); padding-top: 35px;}
#cerberus-landing .key-facts > div{padding-left: 35px; border-left: 1px solid var(--line);}
#cerberus-landing .key-facts > div:first-child{padding: 0px; border: 0px;}
#cerberus-landing .key-facts dt{font-size: 12px;}
#cerberus-landing .key-facts dd{font: 400 91px/1.1 var(--display); margin: 12px 0px 8px;}
#cerberus-landing .key-facts dd small{font-size: 35px; margin-left: 5px;}
#cerberus-landing .key-facts div > span{font-size: 11px; color: var(--muted);}
#cerberus-landing .split-heading{display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 60px;}
#cerberus-landing .split-heading > p{max-width: 325px; font-size: 15px; color: var(--muted); line-height: 1.8;}
#cerberus-landing .scenarios{background: rgb(234, 234, 234);}
#cerberus-landing .scenario-layout{display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 70px; align-items: center;}
#cerberus-landing .scenario-tabs{display: flex; flex-direction: column; border-top: 1px solid rgb(197, 197, 197); margin-bottom: 45px;}
#cerberus-landing .scenario-tabs button{background: transparent; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(197, 197, 197); border-image: none; display: flex; justify-content: space-between; text-align: left; padding: 17px 0px; font-size: 15px; min-height: 54px; color: rgb(103, 103, 103);}
#cerberus-landing .scenario-tabs button[aria-selected="true"]{color: var(--red); font-weight: 800;}
#cerberus-landing .scenario-tabs button span{font-size: 20px;}
#cerberus-landing .scenario-copy h3{font-size: 40px; margin-bottom: 20px;}
#cerberus-landing .scenario-copy #scenario-description{font-size: 14px; color: rgb(95, 95, 95); max-width: 370px; min-height: 95px;}
#cerberus-landing .diagram-note{font-size: 10px; color: rgb(109, 109, 109); margin-top: 25px; max-width: 310px;}
#cerberus-landing .field-map{position: relative; background: rgb(227, 227, 227); box-shadow: rgba(63, 63, 63, 0.05) 0px 20px 60px;}
#cerberus-landing .field-map svg{width: 100%; height: auto; display: block;}
#cerberus-landing .map-caption{display: block; font: 800 10px/1.5 var(--body); letter-spacing: 0.14em; border-top: 1px solid rgb(202, 202, 202); padding: 20px 25px;}
#cerberus-landing .map-legend{position: absolute; left: 25px; top: 20px; display: flex; gap: 25px; font-size: 10px; color: rgb(93, 93, 93);}
#cerberus-landing .map-legend i{display: inline-block; vertical-align: middle; margin-right: 6px; width: 10px; height: 10px;}
#cerberus-landing .legend-mine{background: var(--dark);}
#cerberus-landing .legend-route{border-top: 2px dashed var(--red); height: 0px !important;}
#cerberus-landing .field-map[data-map="route"] .map-route{d: path("M 105 465 C 225 465 250 380 270 330 S 430 335 450 250 S 490 140 555 110");}
#cerberus-landing .field-map[data-map="base"] .map-route{d: path("M 105 465 C 220 410 210 200 340 250 S 500 320 555 110");}
#cerberus-landing .field-map[data-map="route"] .map-effect{r: 85px;}
#cerberus-landing .field-map[data-map="base"] .map-effect{r: 125px;}
#cerberus-landing .inside-layout{display: grid; grid-template-columns: 1.25fr 0.8fr; gap: 80px; align-items: center;}
#cerberus-landing .inside-image{position: relative; background: var(--paper); padding: 70px 30px 25px; min-height: 480px; display: flex; flex-direction: column; justify-content: center;}
#cerberus-landing .image-coordinate{position: absolute; top: 25px; left: 28px; font-size: 9px; letter-spacing: 0.13em; color: var(--muted);}
#cerberus-landing .inside-image img{height: 330px; width: 100%; object-fit: contain; mix-blend-mode: multiply;}
#cerberus-landing .inside-image figcaption{font-size: 11px; color: var(--muted); margin: 20px 0px 0px; text-align: center;}
#cerberus-landing .detail-list{border-top: 1px solid var(--line);}
#cerberus-landing .detail-button{display: block; width: 100%; text-align: left; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--line); background: none; padding: 23px 0px 23px 24px; position: relative; color: var(--muted);}
#cerberus-landing .detail-button::before{position: absolute; content: "+"; left: 0px; top: 23px; font-size: 18px;}
#cerberus-landing .detail-button.is-active::before{content: "−"; color: var(--red);}
#cerberus-landing .detail-button > span{display: block; font-size: 10px; letter-spacing: 0.1em; margin-bottom: 10px;}
#cerberus-landing .detail-button strong{font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1.1; display: block;}
#cerberus-landing .detail-button small{display: none; font-size: 13px; line-height: 1.7; max-width: 320px; margin-top: 14px;}
#cerberus-landing .detail-button.is-active{color: var(--ink);}
#cerberus-landing .detail-button.is-active > span{color: var(--red);}
#cerberus-landing .detail-button.is-active small{display: block; color: var(--muted);}
#cerberus-landing .modes{background: var(--dark); color: rgb(246, 246, 246); overflow: hidden;}
#cerberus-landing .modes-layout{display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center;}
#cerberus-landing .modes h2 span{color: rgb(195, 195, 195);}
#cerberus-landing .mode-buttons{display: inline-flex; border: 1px solid rgb(134, 134, 134); margin-block: 32px;}
#cerberus-landing .mode-buttons button{border: 0px; padding: 12px 24px; background: none; color: rgb(229, 229, 229); font-size: 13px;}
#cerberus-landing .mode-buttons button[aria-pressed="true"]{background: rgb(227, 227, 227); color: rgb(50, 50, 50);}
#cerberus-landing .modes h3{font-size: 32px; max-width: 390px; margin-bottom: 20px;}
#cerberus-landing .modes-copy > div[aria-live] p{max-width: 420px; color: rgb(205, 205, 205); font-size: 14px; min-height: 100px;}
#cerberus-landing .muted-note{font-size: 10px; line-height: 1.7; color: var(--muted); max-width: 370px;}
#cerberus-landing .modes .muted-note{color: rgb(179, 179, 179);}
#cerberus-landing .mode-visual{position: relative; min-height: 530px; display: flex; align-items: center; justify-content: center;}
#cerberus-landing .mode-visual > img{width: 66%; position: relative; z-index: 1; filter: drop-shadow(rgba(0, 0, 0, 0.333) 0px 20px 22px);}
#cerberus-landing .effect-ring{position: absolute; inset: 15%; border: 1px solid rgba(161, 161, 161, 0.314); border-radius: 50%; aspect-ratio: 1 / 1;}
#cerberus-landing .ring-two{inset: 3%;}
#cerberus-landing .ring-three{inset: 26%; border-color: rgba(197, 197, 197, 0.44); background: rgba(143, 143, 143, 0.05);}
#cerberus-landing .player{position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;}
#cerberus-landing .player b{position: relative; width: 32px; height: 32px; border: 1px solid rgb(227, 227, 227); border-radius: 50%; background: rgba(206, 206, 206, 0.12);}
#cerberus-landing .player b::after{content: ""; position: absolute; inset: 10px; background: rgb(222, 222, 222); border-radius: 50%;}
#cerberus-landing .player span{font-size: 8px; letter-spacing: 0.1em;}
#cerberus-landing .player-a{top: 12%; left: 25%;}
#cerberus-landing .player-b{right: 4%; top: 42%;}
#cerberus-landing .player-c{bottom: 10%; left: 25%;}
#cerberus-landing .player-b b{border-color: rgb(255, 128, 136);}
#cerberus-landing .player-b b::after{background: rgb(255, 128, 136);}
#cerberus-landing .mode-visual[data-effect="team"] .player-a,#cerberus-landing .mode-visual[data-effect="team"] .player-c{opacity: 0.28;}
#cerberus-landing .mode-visual[data-effect="team"] .effect-ring{border-color: rgba(237, 52, 69, 0.18);}
#cerberus-landing .effect-label{position: absolute; bottom: -10px; font-size: 10px; letter-spacing: 0.15em; color: rgb(205, 205, 205);}
#cerberus-landing .trigger-rows{border-top: 1px solid var(--line);}
#cerberus-landing .trigger-rows article{display: grid; grid-template-columns: 90px 1fr 1fr; gap: 30px; align-items: center; border-bottom: 1px solid var(--line); padding: 30px 0px;}
#cerberus-landing .trigger-symbol{color: var(--red); font-size: 40px; font-family: Arial, sans-serif; line-height: 1;}
#cerberus-landing .trigger-rows h3{font-size: 33px;}
#cerberus-landing .trigger-rows p{font-size: 14px; color: var(--muted); max-width: 400px;}
#cerberus-landing .field-section{position: relative; background: rgb(30, 30, 30); color: rgb(239, 239, 239); padding-block: 115px; isolation: isolate; overflow: hidden;}
#cerberus-landing .field-background{position: absolute; inset: 0px; z-index: -1; background: linear-gradient(90deg, rgba(30, 30, 30, 0.8), rgba(30, 30, 30, 0.133)), url("/PromoPages/cerberus-expanded/assets/durability-bg.webp") center center / cover; opacity: 0.85;}
#cerberus-landing .field-content > h2{font-size: clamp(65px, 7vw, 105px); max-width: 700px;}
#cerberus-landing .field-content > h2 span{color: rgb(193, 193, 193);}
#cerberus-landing .field-content > p:not(.eyebrow){margin: 30px 0px 65px; max-width: 450px; color: rgb(205, 205, 205); font-size: 16px;}
#cerberus-landing .field-placement{display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center;}
#cerberus-landing .field-placement figure{padding: 12px; background: rgb(230, 230, 230);}
#cerberus-landing .field-placement figure img{width: 100%; aspect-ratio: 2 / 1; object-fit: cover;}
#cerberus-landing .field-placement figcaption{padding: 10px 6px 0px; font-size: 10px; color: rgb(76, 76, 76);}
#cerberus-landing .placement-copy h3{font-size: 44px; margin-bottom: 22px;}
#cerberus-landing .placement-copy p{font-size: 14px; color: rgb(205, 205, 205); max-width: 370px;}
#cerberus-landing .placement-copy .field-note{font-size: 11px; color: rgb(177, 177, 177); margin-top: 18px;}
#cerberus-landing .placement-copy .under-link{margin-top: 24px;}
#cerberus-landing .sound{display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 70px; align-items: center;}
#cerberus-landing .sound-copy > p:not(.eyebrow){font-size: 15px; color: var(--muted); margin: 25px 0px 30px;}
#cerberus-landing .sound-image{position: relative; padding: 45px 0px 0px;}
#cerberus-landing .sound-image > img{position: relative; z-index: 1; filter: drop-shadow(rgba(40, 40, 40, 0.125) 0px 25px 18px);}
#cerberus-landing .sound-image figcaption{text-align: center; font-size: 9px; letter-spacing: 0.15em; margin-top: 20px; color: var(--muted);}
#cerberus-landing .sound-wave{position: absolute; inset: 10% 0px; display: flex; align-items: center; justify-content: center; gap: 17px; opacity: 0.6;}
#cerberus-landing .sound-wave i{height: 25%; width: 1px; background: rgb(174, 174, 174);}
#cerberus-landing .sound-wave i:nth-child(3n){height: 70%;}
#cerberus-landing .sound-wave i:nth-child(4n){height: 100%;}
#cerberus-landing .sound-wave i:nth-child(5n){height: 45%;}
#cerberus-landing .gallery{background: rgb(241, 241, 241);}
#cerberus-landing .gallery-layout{display: grid; grid-template-columns: 1fr 200px; gap: 20px;}
#cerberus-landing .gallery-main{background: rgb(255, 255, 255); position: relative; padding: 40px; min-height: 540px; display: flex; flex-direction: column; justify-content: space-between;}
#cerberus-landing .gallery-main > img{height: 455px; width: 100%; object-fit: contain;}
#cerberus-landing .gallery-main figcaption{display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 18px; margin-top: 20px;}
#cerberus-landing .gallery-thumbs{display: grid; grid-template-rows: repeat(4, 1fr); gap: 12px;}
#cerberus-landing .gallery-thumbs button{background: rgb(255, 255, 255); border: 1px solid transparent; padding: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; min-width: 0px;}
#cerberus-landing .gallery-thumbs button.is-active{border-color: var(--red);}
#cerberus-landing .gallery-thumbs img{height: 83px; width: 100%; object-fit: contain;}
#cerberus-landing .gallery-thumbs span{font-size: 10px; color: var(--muted);}
#cerberus-landing .setup-grid{display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px;}
#cerberus-landing .setup-grid article{position: relative; overflow: hidden; padding: 40px; min-height: 440px;}
#cerberus-landing .setup-manual{background: rgb(235, 235, 235);}
#cerberus-landing .setup-grid h3{font-size: 44px; margin-bottom: 20px;}
#cerberus-landing .setup-manual > p{font-size: 14px; max-width: 300px; color: rgb(92, 92, 92);}
#cerberus-landing .setup-manual .under-link{margin-top: 30px; font-size: 12px;}
#cerberus-landing .setup-watermark{position: absolute; bottom: -24px; right: 15px; font: 400 130px/1 var(--display); color: rgb(220, 220, 220);}
#cerberus-landing .setup-remote{background: rgb(242, 242, 242); display: flex; align-items: flex-start;}
#cerberus-landing .setup-remote > div{position: relative; z-index: 1; width: 75%;}
#cerberus-landing .setup-remote > img{position: absolute; right: -35px; top: 130px; width: 40%; transform: rotate(-18deg);}
#cerberus-landing .setup-remote p:not(.eyebrow){font-size: 13px; max-width: 260px; color: var(--muted);}
#cerberus-landing .setup-remote dl{display: flex; gap: 40px; margin: 25px 0px 22px;}
#cerberus-landing .setup-remote dt{font-size: 10px; color: var(--muted);}
#cerberus-landing .setup-remote dd{font: 400 49px/1.3 var(--display);}
#cerberus-landing .setup-remote dd small{font-size: 23px;}
#cerberus-landing .setup-remote .muted-note{max-width: 290px; font-size: 9px !important;}
#cerberus-landing .specifications{background: var(--paper);}
#cerberus-landing .spec-layout{display: grid; grid-template-columns: 1fr 1fr; gap: 95px; align-items: center;}
#cerberus-landing .spec-image{width: 70%; height: 300px; object-fit: contain; margin-top: 25px; mix-blend-mode: multiply;}
#cerberus-landing .spec-table > div{display: flex; justify-content: space-between; gap: 25px; padding: 20px 0px; border-bottom: 1px solid rgb(208, 208, 208); align-items: baseline;}
#cerberus-landing .spec-table dt{font-size: 12px; color: var(--muted);}
#cerberus-landing .spec-table dd{font-size: 15px; text-align: right; font-weight: 800;}
#cerberus-landing .questions .split-heading > .under-link{flex-shrink: 0; margin-bottom: 8px;}
#cerberus-landing .questions-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 50px 100px;}
#cerberus-landing .questions-grid article{border-top: 1px solid var(--line); padding-top: 25px;}
#cerberus-landing .questions-grid h3{font-size: 29px; margin-bottom: 15px;}
#cerberus-landing .questions-grid p{font-size: 13px; color: var(--muted);}
#cerberus-landing .finale{position: relative; isolation: isolate; overflow: hidden; background: rgb(226, 226, 226); min-height: 920px; text-align: center; padding-top: 80px;}
#cerberus-landing .finale-content{position: relative; z-index: 2;}
#cerberus-landing .finale .eyebrow{font-size: 10px;}
#cerberus-landing .finale h2{font-size: clamp(80px, 9.5vw, 145px); line-height: 0.86;}
#cerberus-landing .finale h2 span{color: rgb(113, 113, 113);}
#cerberus-landing .finale p:not(.eyebrow){font-size: 14px; line-height: 1.7; margin: 28px auto 24px;}
#cerberus-landing .finale-secondary{display: block; width: max-content; max-width: 100%; font-size: 11px; margin: 15px auto 0px; border-bottom: 1px solid rgb(147, 147, 147);}
#cerberus-landing .finale-players{position: absolute; bottom: -85px; left: 50%; transform: translateX(-50%); width: min(1500px, 115%); max-width: none; z-index: 1; pointer-events: none;}
#cerberus-landing .finale-mine{position: absolute; width: 450px; max-width: 43%; left: 50%; bottom: -70px; transform: translateX(-50%) rotate(5deg); z-index: 2; filter: drop-shadow(rgba(46, 46, 46, 0.25) 0px 25px 18px);}
#cerberus-landing .finale-wordmark{position: absolute; bottom: 165px; left: 50%; transform: translateX(-50%); font: 400 min(19vw,290px)/1 var(--display); color: rgb(195, 195, 195); z-index: 0;}
#cerberus-landing .finale-lines{position: absolute; width: 1400px; height: 1400px; left: 50%; top: -80px; transform: translateX(-50%); border: 1px solid rgb(195, 195, 195); border-radius: 50%; z-index: 0;}
#cerberus-landing .finale-lines::before,#cerberus-landing .finale-lines::after{content: ""; position: absolute; inset: 80px; border: 1px solid rgb(202, 202, 202); border-radius: 50%;}
#cerberus-landing .finale-lines::after{inset: 160px;}
#cerberus-landing .footer{background: rgb(40, 40, 40); color: rgb(220, 220, 220); padding-block: 55px 25px;}
#cerberus-landing .footer-top,#cerberus-landing .footer-bottom{display: flex; justify-content: space-between; gap: 25px; align-items: center;}
#cerberus-landing .footer-top{padding-bottom: 50px;}
#cerberus-landing .footer-top .brand{font-size: 25px; color: rgb(244, 244, 244);}
#cerberus-landing .footer-top p{font-size: 14px; color: rgb(177, 177, 177); line-height: 1.6; margin-left: auto; margin-right: 90px;}
#cerberus-landing .footer-top > a:last-child{font-size: 13px;}
#cerberus-landing .footer-bottom{padding-top: 24px; border-top: 1px solid rgb(79, 79, 79); font-size: 10px; color: rgb(177, 177, 177);}
#cerberus-landing .footer-bottom nav{display: flex; gap: 25px;}
#cerberus-landing .footer a:hover{color: rgb(255, 255, 255);}
@media (min-width: 1700px){#cerberus-landing .hero-stage{min-height: 790px;}
#cerberus-landing .hero-product{top: 140px;}
#cerberus-landing .hero-name{font-size: 390px; top: 35px;}}
@media (max-width: 1150px){#cerberus-landing .shell{width: calc(100% - 64px);}
#cerberus-landing .global-header{padding-inline: 32px;}
#cerberus-landing .global-header nav{gap: 20px;}
#cerberus-landing .brand > span{font-size: 19px;}
#cerberus-landing .hero-copy{width: 45%;}
#cerberus-landing .hero-copy h1{font-size: 93px;}
#cerberus-landing .hero-product{top: 180px; left: 41%; right: -7%;}
#cerberus-landing .hero-stage{min-height: 680px;}
#cerberus-landing .hero-name{top: 60px;}
#cerberus-landing .hero-range-label strong{font-size: 65px;}
#cerberus-landing .product-label span{display: none;}
#cerberus-landing .product-nav .shell > div{gap: 18px;}
#cerberus-landing .overview-content{padding-left: 12%; gap: 50px;}
#cerberus-landing .scenario-layout{gap: 35px;}
#cerberus-landing .inside-layout{gap: 40px;}
#cerberus-landing .setup-grid article{padding: 30px;}
#cerberus-landing .spec-layout{gap: 50px;}
#cerberus-landing .footer-top p{margin-right: 30px;}
#cerberus-landing .finale{min-height: 870px;}
#cerberus-landing .finale-players{width: 1250px; max-width: 120%;}
#cerberus-landing .finale-mine{bottom: -45px; width: 360px;}}
@media (max-width: 800px){#cerberus-landing .section{padding-block: 75px;}
#cerberus-landing .global-header{height: 66px; padding-inline: 24px;}
#cerberus-landing .global-header nav{display: none;}
#cerberus-landing .shell{width: calc(100% - 48px);}
#cerberus-landing .hero-top{padding-top: 22px;}
#cerberus-landing .hero-top .small-label{display: none;}
#cerberus-landing .hero-name{top: 68px; font-size: 24.5vw;}
#cerberus-landing .hero-stage{min-height: 800px; display: block; padding-top: 115px;}
#cerberus-landing .hero-copy{width: 100%; padding: 0px; max-width: 400px;}
#cerberus-landing .hero-copy h1{font-size: 85px; line-height: 0.9;}
#cerberus-landing .hero-copy .eyebrow{font-size: 10px;}
#cerberus-landing .hero-copy > p:not(.eyebrow){font-size: 15px; max-width: 330px;}
#cerberus-landing .hero-product{left: 30%; right: -7%; top: 340px;}
#cerberus-landing .hero-product figcaption{font-size: 7px;}
#cerberus-landing .hero-range-label{left: 0px; right: auto; bottom: 65px; text-align: left;}
#cerberus-landing .hero-range-label strong{font-size: 60px;}
#cerberus-landing .hero-range-label small{font-size: 9px;}
#cerberus-landing .hero-bottom{font-size: 9px;}
#cerberus-landing .hero-bottom > a{display: none;}
#cerberus-landing .hero-range{inset: -10% 7% 7%;}
#cerberus-landing .product-nav .shell{min-height: 60px;}
#cerberus-landing .product-nav .shell > div{gap: 15px; font-size: 10px;}
#cerberus-landing .product-nav .shell > div a:first-child,#cerberus-landing .product-nav .shell > div a:nth-child(3){display: none;}
#cerberus-landing .product-label{font-size: 23px;}
#cerberus-landing .nav-buy{font-size: 11px;}
#cerberus-landing .split-heading{gap: 25px; align-items: flex-start; flex-direction: column; margin-bottom: 40px;}
#cerberus-landing .split-heading > p{max-width: 500px;}
#cerberus-landing .overview-content{padding-left: 0px; grid-template-columns: 1fr 1fr; margin-block: 35px 45px; gap: 30px;}
#cerberus-landing .overview-content .large-copy{font-size: 18px;}
#cerberus-landing .overview-content p{font-size: 13px;}
#cerberus-landing .key-facts dd{font-size: 66px;}
#cerberus-landing .key-facts dd small{font-size: 25px;}
#cerberus-landing .key-facts > div{padding-left: 20px;}
#cerberus-landing .key-facts dt{font-size: 10px;}
#cerberus-landing .key-facts div > span{font-size: 9px;}
#cerberus-landing .scenario-layout{grid-template-columns: 1fr; gap: 35px;}
#cerberus-landing .scenario-tabs{margin-bottom: 28px;}
#cerberus-landing .scenario-copy #scenario-description{min-height: 0px; max-width: 500px;}
#cerberus-landing .scenario-copy h3 br{display: none;}
#cerberus-landing .diagram-note{max-width: 500px;}
#cerberus-landing .field-map{max-width: 600px; width: 100%; margin: auto;}
#cerberus-landing .inside-layout{grid-template-columns: 1fr; gap: 20px;}
#cerberus-landing .inside-image{min-height: 400px; padding: 50px 25px 20px;}
#cerberus-landing .inside-image img{height: 290px;}
#cerberus-landing .detail-list{display: grid; grid-template-columns: repeat(3, 1fr);}
#cerberus-landing .detail-button{padding: 20px 12px 20px 0px;}
#cerberus-landing .detail-button::before{display: none;}
#cerberus-landing .detail-button strong{font-size: 27px;}
#cerberus-landing .detail-button small{font-size: 11px;}
#cerberus-landing .modes-layout{grid-template-columns: 1fr; gap: 20px;}
#cerberus-landing .modes-copy{max-width: 520px;}
#cerberus-landing .modes-copy > div[aria-live] p{min-height: 0px; max-width: 500px;}
#cerberus-landing .mode-visual{min-height: 500px; max-width: 550px; width: 100%; margin: auto;}
#cerberus-landing .trigger-rows article{grid-template-columns: 50px 1fr; gap: 12px 20px; padding-block: 25px;}
#cerberus-landing .trigger-rows p{grid-column: 2; max-width: 500px;}
#cerberus-landing .trigger-symbol{grid-row: span 2;}
#cerberus-landing .field-section{padding-block: 80px;}
#cerberus-landing .field-placement{grid-template-columns: 1fr; gap: 35px;}
#cerberus-landing .field-content > p:not(.eyebrow){margin-bottom: 40px;}
#cerberus-landing .field-placement figure{max-width: 650px;}
#cerberus-landing .placement-copy{max-width: 500px;}
#cerberus-landing .placement-copy h3 br{display: none;}
#cerberus-landing .sound{grid-template-columns: 1fr; gap: 20px;}
#cerberus-landing .sound-copy{max-width: 480px;}
#cerberus-landing .sound-image{max-width: 650px;}
#cerberus-landing .sound-wave{inset: 5% 0px 10%;}
#cerberus-landing .gallery-layout{grid-template-columns: 1fr;}
#cerberus-landing .gallery-main{padding: 25px; min-height: 420px;}
#cerberus-landing .gallery-main > img{height: 350px;}
#cerberus-landing .gallery-thumbs{grid-template-rows: none; grid-template-columns: repeat(4, 1fr); gap: 10px;}
#cerberus-landing .gallery-thumbs img{height: 70px;}
#cerberus-landing .setup-grid{grid-template-columns: 1fr;}
#cerberus-landing .setup-grid article{min-height: 350px; padding: 35px;}
#cerberus-landing .setup-manual > p{max-width: 400px;}
#cerberus-landing .setup-remote > div{width: 80%;}
#cerberus-landing .setup-remote > img{right: 0px; top: 75px; width: 35%;}
#cerberus-landing .setup-remote p:not(.eyebrow){max-width: 370px;}
#cerberus-landing .setup-remote .muted-note{max-width: 380px;}
#cerberus-landing .spec-layout{grid-template-columns: 1fr; gap: 25px;}
#cerberus-landing .spec-layout > div{display: grid; grid-template-columns: 1fr 1fr;}
#cerberus-landing .spec-layout > div .eyebrow{grid-column: span 2;}
#cerberus-landing .spec-image{grid-row: 2; margin: 0px; width: 100%; height: 210px;}
#cerberus-landing .spec-layout h2{grid-row: 2;}
#cerberus-landing .questions-grid{gap: 35px;}
#cerberus-landing .finale{padding-top: 65px; min-height: 830px;}
#cerberus-landing .finale h2{font-size: 105px;}
#cerberus-landing .finale-players{width: 1100px; max-width: none; bottom: -5px;}
#cerberus-landing .finale-mine{width: 340px; max-width: 50%; bottom: -45px;}
#cerberus-landing .finale-wordmark{font-size: 26vw; bottom: 160px;}
#cerberus-landing .footer-top{flex-wrap: wrap; justify-content: flex-start; gap: 25px;}
#cerberus-landing .footer-top p{margin: 0px 0px 0px auto;}
#cerberus-landing .footer-top > a:last-child{width: 100%;}
#cerberus-landing .footer-bottom{flex-wrap: wrap;}
#cerberus-landing .footer-bottom nav{gap: 18px;}}
@media (max-width: 500px){#cerberus-landing{scroll-padding-top: 75px;}
#cerberus-landing .shell{width: calc(100% - 40px);}
#cerberus-landing .global-header{padding-inline: 20px;}
#cerberus-landing .brand svg{width: 26px;}
#cerberus-landing .brand > span{font-size: 17px; letter-spacing: 0.14em;}
#cerberus-landing .header-action{font-size: 11px;}
#cerberus-landing .header-action span{margin-left: 10px;}
#cerberus-landing .eyebrow{font-size: 9px; letter-spacing: 0.12em; margin-bottom: 17px;}
#cerberus-landing h2{font-size: 51px;}
#cerberus-landing .hero-name{top: 62px; font-size: 25vw;}
#cerberus-landing .hero-stage{padding-top: 94px; min-height: 780px;}
#cerberus-landing .hero-copy h1{font-size: 78px; margin-bottom: 20px;}
#cerberus-landing .hero-copy > p:not(.eyebrow){font-size: 14px; max-width: 310px; margin-bottom: 25px;}
#cerberus-landing .hero-copy .eyebrow{font-size: 9px;}
#cerberus-landing .button{font-size: 12px; padding: 15px 18px; gap: 25px;}
#cerberus-landing .hero-product{top: 452px; left: 6%; right: -15%; min-height: 230px;}
#cerberus-landing .hero-product figcaption{font-size: 6px; margin-top: 0px;}
#cerberus-landing .hero-range-label{bottom: 15px; z-index: 2;}
#cerberus-landing .hero-range-label strong{font-size: 48px;}
#cerberus-landing .hero-range-label small{font-size: 8px;}
#cerberus-landing .hero-range i:nth-child(2){display: none;}
#cerberus-landing .hero-bottom{font-size: 8px; padding-top: 15px;}
#cerberus-landing .product-nav .shell{gap: 8px; width: calc(100% - 30px);}
#cerberus-landing .product-nav .shell > div{gap: 14px; font-size: 9px;}
#cerberus-landing .product-nav .shell > div a:last-child{display: none;}
#cerberus-landing .product-label{font-size: 22px;}
#cerberus-landing .nav-buy{font-size: 10px;}
#cerberus-landing .section{padding-block: 65px;}
#cerberus-landing .overview-content{grid-template-columns: 1fr; gap: 20px; margin-block: 30px 40px;}
#cerberus-landing .overview-content .large-copy{font-size: 19px;}
#cerberus-landing .overview-content p{font-size: 14px;}
#cerberus-landing .key-facts{grid-template-columns: repeat(2, 1fr); gap: 30px 15px; padding-top: 28px;}
#cerberus-landing .key-facts > div{padding: 0px; border: 0px;}
#cerberus-landing .key-facts > div:nth-child(2n){border-left: 1px solid var(--line); padding-left: 20px;}
#cerberus-landing .key-facts dd{font-size: 72px; margin-top: 8px;}
#cerberus-landing .key-facts dt{font-size: 11px;}
#cerberus-landing .key-facts div > span{font-size: 9px;}
#cerberus-landing .split-heading > p{font-size: 14px;}
#cerberus-landing .scenario-tabs button{font-size: 14px;}
#cerberus-landing .scenario-copy h3{font-size: 35px;}
#cerberus-landing .scenario-copy #scenario-description{font-size: 13px;}
#cerberus-landing .map-legend{left: 15px; top: 15px; font-size: 8px; gap: 15px;}
#cerberus-landing .map-caption{font-size: 8px; padding: 15px;}
#cerberus-landing .inside-image{min-height: 300px; padding: 45px 15px 20px;}
#cerberus-landing .inside-image img{height: 220px;}
#cerberus-landing .inside-image figcaption{font-size: 9px;}
#cerberus-landing .image-coordinate{left: 17px; top: 19px; font-size: 8px;}
#cerberus-landing .detail-list{display: block;}
#cerberus-landing .detail-button{padding: 20px 0px 20px 22px;}
#cerberus-landing .detail-button::before{display: block;}
#cerberus-landing .detail-button strong{font-size: 31px;}
#cerberus-landing .detail-button small{font-size: 12px; max-width: 100%;}
#cerberus-landing .mode-buttons{margin-block: 27px;}
#cerberus-landing .mode-buttons button{font-size: 12px; padding: 12px 25px;}
#cerberus-landing .modes h3{font-size: 31px;}
#cerberus-landing .modes-copy > div[aria-live] p{font-size: 13px; margin-bottom: 20px;}
#cerberus-landing .mode-visual{min-height: 350px;}
#cerberus-landing .effect-label{font-size: 8px; bottom: 0px;}
#cerberus-landing .player b{width: 25px; height: 25px;}
#cerberus-landing .player b::after{inset: 8px;}
#cerberus-landing .player span{font-size: 6px;}
#cerberus-landing .trigger-rows article{grid-template-columns: 35px 1fr; gap: 10px 15px;}
#cerberus-landing .trigger-rows h3{font-size: 30px;}
#cerberus-landing .trigger-rows p{font-size: 13px;}
#cerberus-landing .trigger-symbol{font-size: 31px;}
#cerberus-landing .field-section{padding-block: 65px;}
#cerberus-landing .field-content > h2{font-size: 67px;}
#cerberus-landing .field-content > p:not(.eyebrow){font-size: 14px;}
#cerberus-landing .field-placement{gap: 30px;}
#cerberus-landing .placement-copy h3{font-size: 39px;}
#cerberus-landing .field-placement figcaption{font-size: 9px;}
#cerberus-landing .sound-copy > p:not(.eyebrow){font-size: 14px;}
#cerberus-landing .sound-image{padding-top: 25px;}
#cerberus-landing .sound-wave{gap: 10px;}
#cerberus-landing .sound-image figcaption{font-size: 8px;}
#cerberus-landing .gallery-main{padding: 16px; min-height: 280px;}
#cerberus-landing .gallery-main > img{height: 245px;}
#cerberus-landing .gallery-main figcaption{font-size: 9px; gap: 15px;}
#cerberus-landing .gallery-thumbs{gap: 6px;}
#cerberus-landing .gallery-thumbs button{padding: 5px; gap: 3px;}
#cerberus-landing .gallery-thumbs img{height: 50px;}
#cerberus-landing .gallery-thumbs span{font-size: 8px;}
#cerberus-landing .setup-grid article{padding: 27px; min-height: 360px;}
#cerberus-landing .setup-grid h3{font-size: 41px;}
#cerberus-landing .setup-manual > p{font-size: 13px;}
#cerberus-landing .setup-manual .under-link{font-size: 11px;}
#cerberus-landing .setup-remote > div{width: 100%;}
#cerberus-landing .setup-remote p:not(.eyebrow){max-width: 230px; font-size: 12px;}
#cerberus-landing .setup-remote > img{right: -30px; top: 108px; width: 40%; opacity: 0.9;}
#cerberus-landing .setup-remote dl{gap: 30px;}
#cerberus-landing .setup-remote .muted-note{max-width: 90%;}
#cerberus-landing .spec-layout > div{display: block;}
#cerberus-landing .spec-image{margin: 25px auto 0px; width: 75%; height: 230px;}
#cerberus-landing .spec-table dt{font-size: 11px;}
#cerberus-landing .spec-table dd{font-size: 12px;}
#cerberus-landing .spec-table > div{padding: 16px 0px; gap: 15px;}
#cerberus-landing .questions-grid{grid-template-columns: 1fr; gap: 27px;}
#cerberus-landing .questions-grid h3{font-size: 29px;}
#cerberus-landing .questions-grid p{font-size: 13px;}
#cerberus-landing .questions .split-heading{gap: 25px;}
#cerberus-landing .finale{min-height: 800px; padding-top: 60px;}
#cerberus-landing .finale .eyebrow{font-size: 8px; max-width: 260px; margin-inline: auto;}
#cerberus-landing .finale h2{font-size: 87px;}
#cerberus-landing .finale p:not(.eyebrow){font-size: 12px; max-width: 290px; margin-top: 23px;}
#cerberus-landing .finale-players{width: 780px; bottom: 90px; left: 48%;}
#cerberus-landing .finale-mine{width: 310px; max-width: 78%; bottom: -20px;}
#cerberus-landing .finale-wordmark{font-size: 29vw; bottom: 255px;}
#cerberus-landing .finale-content .button{font-size: 12px;}
#cerberus-landing .finale-secondary{font-size: 10px;}
#cerberus-landing .finale-lines{width: 900px; height: 900px; top: 40px;}
#cerberus-landing .footer{padding-block: 40px 20px;}
#cerberus-landing .footer-top{align-items: flex-start; padding-bottom: 30px;}
#cerberus-landing .footer-top p{font-size: 11px;}
#cerberus-landing .footer-top .brand > span{font-size: 18px;}
#cerberus-landing .footer-top > a:last-child{font-size: 12px;}
#cerberus-landing .footer-bottom{font-size: 9px; gap: 20px;}
#cerberus-landing .footer-bottom nav{order: 3; width: 100%;}}
@media (prefers-reduced-motion: reduce){#cerberus-landing{scroll-behavior: auto;}
#cerberus-landing,#cerberus-landing *,#cerberus-landing ::before,#cerberus-landing ::after{animation: auto ease 0s 1 normal none running none !important; transition: none !important;}}
#cerberus-landing .brand-mark{width: 32px; height: 32px; flex-shrink: 0;}
#cerberus-landing .brand-type{width: 180px; height: auto;}
#cerberus-landing .footer-brand img{width: 200px; height: auto;}
@media (max-width: 500px){#cerberus-landing .brand-mark{width: 26px; height: 26px;}
#cerberus-landing .brand-type{width: 140px;}
#cerberus-landing .footer-brand img{width: 165px;}}
@media (min-width: 501px) and (max-width: 800px){#cerberus-landing .finale-players{width: 110%; left: 50%; bottom: -20px;}}
@media (max-width: 500px){#cerberus-landing .hero-stage{min-height: 810px;}
#cerberus-landing .hero-product{top: 480px;}
#cerberus-landing .finale-players{width: 112%; bottom: 145px; left: 50%;}
#cerberus-landing .finale-wordmark{bottom: 235px;}}
#cerberus-landing .modes h2 span{color: rgb(240, 240, 240);}
#cerberus-landing .finale{background: var(--red); color: rgb(255, 255, 255);}
#cerberus-landing .finale h2 span{color: rgb(23, 23, 23);}
#cerberus-landing .finale .button{background: rgb(23, 23, 23); color: rgb(255, 255, 255);}
#cerberus-landing .finale .button:hover{background: rgb(51, 51, 51);}
#cerberus-landing .finale-secondary{color: rgb(255, 255, 255); border-color: rgba(255, 255, 255, 0.6);}
#cerberus-landing .finale-wordmark{color: rgb(187, 23, 32);}
#cerberus-landing .finale-lines{border-color: rgb(189, 25, 35);}
#cerberus-landing .finale-lines::before,#cerberus-landing .finale-lines::after{border-color: rgb(197, 26, 36);}
#cerberus-landing .scenario-visual{box-shadow: rgba(0, 0, 0, 0.04) 0px 14px 40px; background: rgb(255, 255, 255); border: 1px solid rgb(216, 216, 216);}
#cerberus-landing .view-switcher{display: flex; gap: 0px; padding: 7px; background: rgb(255, 255, 255); border-bottom: 1px solid rgb(216, 216, 216);}
#cerberus-landing .view-switcher button{flex: 1 1 0%; padding: 12px 8px; border: 0px; background: transparent; color: rgb(96, 96, 96); font-size: 11px; font-weight: 800; line-height: 1.3; min-height: 40px; transition: background 0.2s, color 0.2s;}
#cerberus-landing .view-switcher button:hover{background: rgb(240, 240, 240); color: rgb(23, 23, 23);}
#cerberus-landing .view-switcher button[aria-selected="true"]{background: rgb(23, 23, 23); color: rgb(255, 255, 255);}
#cerberus-landing .scenario-scene{position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: rgb(229, 229, 229); isolation: isolate;}
#cerberus-landing .scene-background{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; z-index: -2;}
#cerberus-landing .field-map .scene-plan,#cerberus-landing .field-map .scene-route-overlay{position: absolute; inset: 0px; width: 100%; height: 100%; display: block;}
#cerberus-landing .field-map .scene-plan{display: none; z-index: -1;}
#cerberus-landing .scenario-visual[data-view="plan"] .scene-plan{display: block;}
#cerberus-landing .scenario-visual[data-view="plan"] .scene-background{display: none;}
#cerberus-landing .scene-route-overlay{pointer-events: none;}
#cerberus-landing .scene-route{fill: none; stroke: rgb(220, 32, 41); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 9, 9; filter: drop-shadow(rgba(255, 255, 255, 0.7) 0px 1px 2px);}
#cerberus-landing .scene-alternative{fill: none; stroke: rgb(255, 255, 255); stroke-width: 2.5; stroke-dasharray: 5, 7; stroke-linecap: round; filter: drop-shadow(rgba(0, 0, 0, 0.467) 0px 1px 2px);}
#cerberus-landing .scenario-visual[data-view="plan"] .scene-alternative{stroke: rgb(119, 119, 119); filter: none;}
#cerberus-landing .scene-start-dot{fill: rgb(23, 23, 23); stroke: rgb(255, 255, 255); stroke-width: 2.5;}
#cerberus-landing .scene-location-ring{fill: rgba(220, 32, 41, 0.035); stroke: rgb(220, 32, 41); stroke-width: 1.5; stroke-dasharray: 4, 5;}
#cerberus-landing .scene-mine{position: absolute; left: 49%; top: 54.7%; width: clamp(78px, 8vw, 116px); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0px; pointer-events: none; z-index: 2;}
#cerberus-landing .scene-mine img{width: 100%; height: auto; filter: drop-shadow(rgba(0, 0, 0, 0.533) 0px 6px 4px);}
#cerberus-landing .scene-mine span{display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.09em; line-height: 1.2; padding: 7px 10px; background: rgb(255, 255, 255); border-bottom: 2px solid rgb(220, 32, 41); box-shadow: rgba(0, 0, 0, 0.133) 0px 3px 8px; margin-top: 4px;}
#cerberus-landing .scenario-visual[data-view="field"] .scene-mine img{display: none;}
#cerberus-landing .scenario-visual[data-view="field"] .scene-mine span{margin-top: 25px;}
#cerberus-landing .scene-start-label{position: absolute; left: 15%; top: 89%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.93); padding: 4px 7px; font-size: 8px; line-height: 1.5; letter-spacing: 0.08em; font-weight: 800; box-shadow: rgba(0, 0, 0, 0.067) 0px 2px 10px;}
#cerberus-landing .scene-objective-label{position: absolute; left: 82%; top: 16%; display: flex; align-items: center; gap: 4px; transform: translate(-50%, -50%); white-space: nowrap;}
#cerberus-landing .scene-objective-label svg{width: 22px; height: 28px; filter: drop-shadow(rgba(255, 255, 255, 0.533) 0px 1px 3px);}
#cerberus-landing .scene-objective-label b{font-size: 8px; letter-spacing: 0.08em; padding: 4px 6px; background: rgba(255, 255, 255, 0.93); line-height: 1.4; color: rgb(23, 23, 23);}
#cerberus-landing .scene-status{position: absolute; left: 12px; bottom: 12px; font-size: 7px; letter-spacing: 0.1em; padding: 5px 7px; background: rgba(255, 255, 255, 0.875); color: rgb(68, 68, 68);}
#cerberus-landing .scenario-visual-footer{display: flex; flex-direction: column; gap: 5px; padding: 18px 22px 19px; background: rgb(255, 255, 255); border-top: 1px solid rgb(216, 216, 216);}
#cerberus-landing .scenario-visual-footer strong{font-size: 12px; font-weight: 800; line-height: 1.6; max-width: 48ch;}
#cerberus-landing .scenario-visual-footer > span{font-size: 9px; color: rgb(119, 119, 119); line-height: 1.5;}
@media (min-width: 801px){#cerberus-landing .scenario-layout{grid-template-columns: 0.84fr 1.36fr; gap: 60px;}}
@media (max-width: 1150px) and (min-width: 801px){#cerberus-landing .scenario-layout{gap: 30px;}
#cerberus-landing .view-switcher button{font-size: 10px;}
#cerberus-landing .scenario-visual-footer{padding: 16px;}}
@media (max-width: 800px){#cerberus-landing .scenario-visual{max-width: 650px;}
#cerberus-landing .scene-mine{width: 100px;}
#cerberus-landing .scenario-visual-footer strong{font-size: 12px;}}
@media (max-width: 500px){#cerberus-landing .view-switcher{padding: 5px;}
#cerberus-landing .view-switcher button{padding: 12px 5px; font-size: 10px;}
#cerberus-landing .scene-mine{width: 72px;}
#cerberus-landing .scene-mine span{font-size: 7px; padding: 5px 7px;}
#cerberus-landing .scene-start-label{font-size: 6px; padding: 3px 5px;}
#cerberus-landing .scene-objective-label b{font-size: 6px; padding: 3px 4px;}
#cerberus-landing .scene-objective-label svg{width: 16px; height: 20px;}
#cerberus-landing .scene-status{left: 7px; bottom: 7px; font-size: 5px; padding: 4px;}
#cerberus-landing .scenario-visual-footer{padding: 14px 15px;}
#cerberus-landing .scenario-visual-footer strong{font-size: 11px;}
#cerberus-landing .scenario-visual-footer > span{font-size: 8px;}
#cerberus-landing .scene-route{stroke-width: 4.5;}}
#cerberus-landing .field-map .scene-ir-overlay{position: absolute; inset: 0px; display: block; width: 100%; height: 100%; z-index: 3; pointer-events: none;}
#cerberus-landing .ir-beam-envelope,#cerberus-landing .ir-beam-trace,#cerberus-landing .ir-travelling-pulse,#cerberus-landing .ir-emitter-light,#cerberus-landing .ir-hit-ring,#cerberus-landing .ir-hit-label,#cerberus-landing .ir-sensor-light{opacity: 0;}
#cerberus-landing .ir-beam-envelope{fill: url("#cerberus-ir-energy");}
#cerberus-landing .ir-beam-trace{stroke: rgb(220, 32, 41); stroke-width: 1.8; stroke-linecap: round;}
#cerberus-landing .ir-beam-white{stroke: rgb(255, 255, 255); stroke-width: 0.65;}
#cerberus-landing .ir-travelling-pulse{fill: rgb(255, 255, 255); stroke: rgb(220, 32, 41); stroke-width: 2;}
#cerberus-landing .ir-emitter-light{fill: rgb(220, 32, 41); stroke: rgb(255, 255, 255); stroke-width: 1.3;}
#cerberus-landing .ir-emitter-outline{fill: none; stroke: rgb(220, 32, 41); stroke-width: 1; opacity: 0.45;}
#cerberus-landing .ir-player-body{fill: rgb(23, 23, 23); stroke: rgb(255, 255, 255); stroke-width: 1.2;}
#cerberus-landing .ir-player-head{fill: rgb(244, 244, 244); stroke: rgb(23, 23, 23); stroke-width: 1.6;}
#cerberus-landing .ir-sensor-base{fill: rgb(222, 222, 222); stroke: rgb(23, 23, 23); stroke-width: 1;}
#cerberus-landing .ir-sensor-light{fill: rgb(220, 32, 41); stroke: rgb(255, 255, 255); stroke-width: 1;}
#cerberus-landing .ir-hit-ring{fill: rgba(220, 32, 41, 0.03); stroke: rgb(220, 32, 41); stroke-width: 2;}
#cerberus-landing .ir-hit-label rect{fill: rgb(220, 32, 41); stroke: rgb(255, 255, 255); stroke-width: 1;}
#cerberus-landing .ir-hit-label text{fill: rgb(255, 255, 255); font-family: var(--body); font-size: 9px; font-weight: 800; letter-spacing: 0.8px; text-anchor: middle;}
#cerberus-landing .ir-target-number{fill: rgb(255, 255, 255); stroke: rgb(23, 23, 23); stroke-width: 0.3; paint-order: stroke; font-family: var(--body); font-size: 7px; font-weight: 700; text-anchor: middle;}
#cerberus-landing .scenario-visual[data-ir-motion="playing"] .scene-route-overlay{opacity: 0.3;}
#cerberus-landing .scenario-visual[data-ir-motion="playing"] .scene-start-label,#cerberus-landing .scenario-visual[data-ir-motion="playing"] .scene-objective-label{opacity: 0.6;}
#cerberus-landing .ir-controls{padding: 16px 20px 14px; background: rgb(23, 23, 23); color: rgb(255, 255, 255); display: flex; flex-wrap: wrap; align-items: center; gap: 13px 16px; border-top: 1px solid rgb(255, 255, 255);}
#cerberus-landing .ir-actions{display: flex; align-items: center; gap: 8px; flex-shrink: 0;}
#cerberus-landing .ir-toggle,#cerberus-landing .ir-replay{display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border: 1px solid rgb(117, 117, 117); background: transparent; color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; line-height: 1.3; padding: 9px 12px; cursor: pointer;}
#cerberus-landing .ir-toggle{background: rgb(220, 32, 41); border-color: rgb(220, 32, 41); min-width: 130px;}
#cerberus-landing .ir-toggle svg,#cerberus-landing .ir-replay svg{width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: currentcolor; stroke-width: 1.7;}
#cerberus-landing .ir-replay{width: 40px; padding: 10px;}
#cerberus-landing .ir-toggle:focus-visible,#cerberus-landing .ir-replay:focus-visible{outline: rgb(255, 255, 255) solid 2px; outline-offset: 3px;}
#cerberus-landing .ir-toggle:active,#cerberus-landing .ir-replay:active{transform: translateY(1px);}
#cerberus-landing .ir-steps{display: flex; align-items: center; gap: 12px; list-style: none; margin: 0px; padding: 0px; flex: 1 1 0%; justify-content: flex-end;}
#cerberus-landing .ir-steps li{display: flex; align-items: center; gap: 5px; font-size: 9px; line-height: 1.4; color: rgb(185, 185, 185); white-space: nowrap;}
#cerberus-landing .ir-steps i{display: block; width: 5px; height: 5px; border-radius: 50%; background: rgb(128, 128, 128); flex-shrink: 0;}
#cerberus-landing .ir-steps li[aria-current="step"]{color: rgb(255, 255, 255);}
#cerberus-landing .ir-steps li[aria-current="step"] i{background: rgb(220, 32, 41);}
#cerberus-landing .ir-note{width: 100%; margin: 0px; color: rgb(196, 196, 196); font-size: 9px; line-height: 1.6; max-width: none;}
#cerberus-landing .scenario-visual .scene-location-ring{opacity: 0.25;}
@media (hover: hover) and (pointer: fine){#cerberus-landing .ir-toggle:hover{background: rgb(184, 23, 32); border-color: rgb(184, 23, 32);}
#cerberus-landing .ir-replay:hover{background: rgb(51, 51, 51);}}
@media (max-width: 1150px) and (min-width: 801px){#cerberus-landing .ir-controls{padding: 13px;}
#cerberus-landing .ir-steps{justify-content: flex-start; gap: 10px;}
#cerberus-landing .ir-toggle{min-width: 120px;}
#cerberus-landing .ir-steps li{font-size: 8px;}}
@media (max-width: 500px){#cerberus-landing .ir-controls{padding: 12px; gap: 12px;}
#cerberus-landing .ir-toggle{font-size: 10px; min-width: 125px; min-height: 40px;}
#cerberus-landing .ir-steps{flex-basis: 100%; justify-content: space-between;}
#cerberus-landing .ir-steps li{font-size: 9px;}
#cerberus-landing .ir-note{font-size: 8px;}}
@media (prefers-reduced-motion: reduce){#cerberus-landing .ir-toggle:active,#cerberus-landing .ir-replay:active{transform: none;}}
#cerberus-landing .scenario-visual .scene-route-overlay,#cerberus-landing .scenario-visual .scene-start-label{display: none;}
#cerberus-landing .scenario-visual .scene-plan use[href="#venue-player"]{display: none;}
#cerberus-landing .scenario-visual .scene-mine{width: 34px; gap: 0px; z-index: 4;}
#cerberus-landing .scenario-visual .scene-mine::before{content: ""; position: absolute; z-index: -1; top: -10px; left: calc(50% - 3px); width: 6px; height: 49px; background: linear-gradient(90deg, rgb(119, 119, 119), rgb(197, 197, 197) 55%, rgb(119, 119, 119)); border: 1px solid rgb(92, 92, 92);}
#cerberus-landing .scenario-visual .scene-mine img{width: 100%; filter: drop-shadow(rgba(0, 0, 0, 0.467) 1px 3px 2px); transform: perspective(120px) rotateY(-18deg);}
#cerberus-landing .scenario-visual .scene-mine span{font-size: 6px; padding: 4px 5px; margin-top: 17px; letter-spacing: 0.04em; border-bottom-width: 1px; white-space: nowrap;}
#cerberus-landing .scenario-visual[data-view="field"] .scene-mine{width: 70px;}
#cerberus-landing .scenario-visual[data-view="field"] .scene-mine::before{display: none;}
#cerberus-landing .scenario-visual[data-view="field"] .scene-mine span{margin-top: 25px; font-size: 7px;}
#cerberus-landing .scenario-visual .scene-objective-label{opacity: 0.75;}
#cerberus-landing .ir-forward-zone{fill: rgb(220, 32, 41); fill-opacity: 0.065; stroke: rgb(220, 32, 41); stroke-opacity: 0.4; stroke-width: 1; stroke-dasharray: 4, 5;}
#cerberus-landing .ir-forward-energy{fill: url("#ir-forward-gradient"); opacity: 0;}
#cerberus-landing .ir-forward-ray{fill: none; stroke: rgb(220, 32, 41); stroke-width: 1.2; opacity: 0;}
#cerberus-landing .ir-forward-axis{fill: none; stroke: rgb(220, 32, 41); stroke-width: 1; stroke-opacity: 0.28; stroke-dasharray: 3, 6;}
#cerberus-landing .ir-run-path{fill: none; stroke: rgb(255, 255, 255); stroke-width: 2; stroke-dasharray: 4, 7; opacity: 0.65;}
#cerberus-landing .scenario-visual[data-view="plan"] .ir-run-path{stroke: rgb(119, 119, 119); opacity: 0.6;}
#cerberus-landing .ir-runner-shadow{fill: rgb(0, 0, 0); opacity: 0.18;}
#cerberus-landing .ir-runner-limb{fill: none; stroke: rgb(32, 32, 32); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;}
#cerberus-landing .ir-runner-outline{fill: none; stroke: rgb(255, 255, 255); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round;}
#cerberus-landing .ir-runner-torso{fill: rgb(32, 32, 32); stroke: rgb(255, 255, 255); stroke-width: 1;}
#cerberus-landing .ir-runner-vest{fill: rgb(112, 112, 112); stroke: rgb(51, 51, 51); stroke-width: 0.8;}
#cerberus-landing .ir-runner-head{fill: rgb(222, 222, 222); stroke: rgb(32, 32, 32); stroke-width: 1.2;}
#cerberus-landing .ir-runner-sensor{fill: rgb(238, 238, 238); stroke: rgb(32, 32, 32); stroke-width: 0.7;}
#cerberus-landing .ir-runner-tagger{fill: rgb(23, 23, 23); stroke: rgb(238, 238, 238); stroke-width: 0.7;}
#cerberus-landing .ir-clear-label rect{fill: rgb(255, 255, 255); stroke: rgb(119, 119, 119); stroke-width: 1;}
#cerberus-landing .ir-clear-label text{fill: rgb(51, 51, 51); font-family: var(--body); font-size: 8px; font-weight: 700; letter-spacing: 0.3px; text-anchor: middle;}
#cerberus-landing .ir-route-caption{fill: rgb(85, 85, 85); font-family: var(--body); font-size: 7px; font-weight: 700; letter-spacing: 0.5px; text-anchor: middle;}
#cerberus-landing .ir-origin-caption{fill: rgb(220, 32, 41); font-family: var(--body); font-size: 8px; font-weight: 700; letter-spacing: 0.3px;}
#cerberus-landing .ir-forward-overlay .ir-emitter-outline{opacity: 0.35; stroke-width: 0.8;}
#cerberus-landing .ir-forward-overlay .ir-emitter-light{r: 2; stroke-width: 0.8;}
#cerberus-landing .ir-forward-overlay .ir-hit-label text{font-size: 8px;}
#cerberus-landing .ir-forward-overlay .ir-hit-ring{stroke-width: 1.4;}
@media (max-width: 500px){#cerberus-landing .scenario-visual .scene-mine{width: 25px;}
#cerberus-landing .scenario-visual .scene-mine::before{height: 37px; top: -7px; width: 5px; left: calc(50% - 2.5px);}
#cerberus-landing .scenario-visual .scene-mine span{font-size: 5px; margin-top: 13px; padding: 3px 4px;}
#cerberus-landing .scenario-visual[data-view="field"] .scene-mine{width: 60px;}
#cerberus-landing .scenario-visual[data-view="field"] .scene-mine span{font-size: 6px;}}
#cerberus-landing .scenario-visual[data-view="spatial"] .scene-mine img,#cerberus-landing .scenario-visual[data-view="spatial"] .scene-mine::before{display: none;}
#cerberus-landing .scenario-visual[data-view="spatial"] .scene-mine{width: 48px;}
#cerberus-landing .scenario-visual[data-view="spatial"] .scene-mine span{margin-top: 0px; font-size: 6px; padding: 4px 6px;}
#cerberus-landing .scenario-visual[data-view="spatial"] .ir-emitter-light{r: 1.3; stroke-width: 0.55;}
@media (max-width: 500px){#cerberus-landing .scenario-visual[data-view="spatial"] .scene-mine{width: 42px;}
#cerberus-landing .scenario-visual[data-view="spatial"] .scene-mine span{font-size: 5px; padding: 3px 5px;}}
#cerberus-landing .ir-directional-runner .ir-runner-limb{stroke-width: 4.1;}
#cerberus-landing .ir-directional-runner .ir-runner-outline{stroke-width: 5.8;}
#cerberus-landing .ir-gait-shoe-outline{fill: none; stroke: rgb(255, 255, 255); stroke-linecap: round; stroke-linejoin: round;}
#cerberus-landing .ir-gait-shoe-outline{stroke-width: 5.3;}
#cerberus-landing .ir-gait-shoe{fill: none; stroke: rgb(23, 23, 23); stroke-width: 3.8; stroke-linecap: round;}
#cerberus-landing .ir-gait-backpack{fill: rgb(86, 86, 86); stroke: rgb(208, 208, 208); stroke-width: 0.8;}
#cerberus-landing .ir-gait-straps{fill: none; stroke: rgb(170, 170, 170); stroke-width: 0.7;}
#cerberus-landing .ir-gait-head-back{fill: rgb(119, 119, 119); stroke: rgb(23, 23, 23); stroke-width: 1.2;}
#cerberus-landing .ir-gait-hair{fill: rgb(32, 32, 32);}
#cerberus-landing .ir-gait-nose{fill: rgb(213, 213, 213); stroke: rgb(51, 51, 51); stroke-width: 0.6;}
#cerberus-landing .hero-bottom{display: block;}
#cerberus-landing .hero-bottom .cerberus-offer{color: var(--ink);}
#cerberus-landing .cerberus-offer .offer-value{display: flex; align-items: baseline; gap: 10px; line-height: 1.2;}
#cerberus-landing .cerberus-offer .offer-value strong{font:400 42px/1 var(--display);font-variant-numeric:tabular-nums}
#cerberus-landing .cerberus-offer .offer-currency{font-size: 13px; font-weight: 800;}
#cerberus-landing .cerberus-offer .offer-stock{margin-left: 10px; color: var(--red); font-size: 13px; font-weight: 800;}
#cerberus-landing .cerberus-offer .offer-scope{margin-top: 7px; font-size: 12px; color: var(--muted);}
#cerberus-landing .cerberus-offer .offer-checked{margin-top: 5px; font-size: 11px; line-height: 1.6; color: var(--muted);}
#cerberus-landing .cerberus-offer .offer-checked a{font-weight: 400; text-decoration: underline; text-underline-offset: 3px;}
#cerberus-landing .cerberus-offer .offer-checked a:hover{color: var(--red);}
#cerberus-landing .hero-bottom-notes{display: flex; max-width: 440px; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; text-align: left;}
@media (max-width: 800px){#cerberus-landing .hero-bottom-notes{font-size: 10px;}}
@media (max-width: 600px){#cerberus-landing .hero-bottom-notes{width: 100%; gap: 18px;}
#cerberus-landing .cerberus-offer .offer-checked{max-width: 310px;}
#cerberus-landing .hero-bottom-notes > a{white-space: nowrap;}}
/* Only this landing changes the portal scroll shell. */
body.page-product:has(#cerberus-landing) .maindiv{scroll-behavior:smooth;scroll-padding-top:90px}

/* On phones, let the product follow the copy instead of covering its links. */
@media (max-width: 500px) {
  #cerberus-landing .hero-stage {display:flex;flex-direction:column;min-height:0;padding-top:80px;}
  #cerberus-landing .hero-copy h1 {font-size:clamp(58px,16vw,72px);line-height:.96;}
  #cerberus-landing .hero-copy .under-link {min-height:44px;align-items:center;margin-top:10px;}
  #cerberus-landing .hero-product {position:relative;inset:auto;width:100%;min-height:0;margin:30px 0 40px;}
  #cerberus-landing .hero-product > img {max-width:100%;transform:none;}
  #cerberus-landing .hero-product figcaption {font-size:10px;line-height:1.4;margin-top:12px;}
  #cerberus-landing .hero-range-label {left:0;bottom:0;}
}
#cerberus-landing{display:block;isolation:isolate;position:relative;width:100%;font-size:16px;text-align:left}
#cerberus-landing .product-nav{top:76px}
#cerberus-landing .finale{margin-bottom:0}
@media(max-width:991px){#cerberus-landing .product-nav{top:64px}}
