.detector-intro {background: #fbfbfd; color: #1d1d1f}
.detector-intro .eyebrow {color: #008566}
.detector-intro .button.primary {background: #0071e3; color: #fff; border: 0; border-radius: 14px}
.detector-intro .button.secondary {background: #f0f0f3; color: #1d1d1f; border: 0; border-radius: 14px; box-shadow: none}
.detector-hero {display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .8fr); gap: 64px; align-items: center; padding: 92px clamp(24px, 7vw, 112px); background: radial-gradient(ellipse at 80% 20%, #eaf0fb 0%, transparent 62%)}
.detector-hero h1 {font-size: clamp(40px, 5vw, 72px); line-height: 1.13; letter-spacing: -.045em; margin: 18px 0 24px}
.detector-hero h1 span {display: block}
.detector-hero .lead {max-width: 650px; color: #6e6e73; font-size: 19px; line-height: 1.85}
.detector-brand {margin: 0; text-align: center}
.detector-brand img {width: min(100%, 340px); height: auto; border-radius: 32px; box-shadow: 0 18px 48px #142c5410}
.detector-brand figcaption {color: #6e6e73; margin-top: 24px; font-size: 14px}
.detector-note {font-size: 13px; color: #6e6e73; margin-top: 20px}
.detector-intro .section {padding-top: 72px; padding-bottom: 72px}
.detector-intro h2 {font-size: clamp(28px, 3.4vw, 42px); line-height: 1.25; letter-spacing: -.025em}
.detector-feature-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 36px}
.detector-feature-grid article {border-top: 1px solid #dedee2; padding-top: 24px}
.detector-feature-grid article > span {color: #008566; font-size: 13px}
.detector-feature-grid h3 {font-size: 22px; margin: 24px 0 14px}
.detector-intro p {line-height: 1.85}
.detector-feature-grid p, .detector-process p, .detector-model p {color: #6e6e73}
.detector-process {background: #f5f5f7}
.detector-process ol {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; list-style: none; padding: 0; margin: 36px 0 0}
.detector-process li > span {display: inline-grid; place-items: center; width: 40px; height: 40px; background: #e8efed; color: #008566; border-radius: 12px}
.detector-process h3 {font-size: 20px; margin: 22px 0 12px}
.detector-facts {display: grid; grid-template-columns: 1fr 1fr; gap: 72px}
.detector-facts dl {margin: 28px 0 0}
.detector-facts dl > div {display: grid; grid-template-columns: 100px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid #e6e6e9; font-size: 15px}
.detector-facts dt {color: #6e6e73}
.detector-facts dd {margin: 0}
.detector-model h2 {font-size: 28px; margin-bottom: 24px}
.detector-model p {margin: 16px 0 24px}
.detector-faq {border-top: 1px solid #e6e6e9}
.detector-faq details {max-width: 960px; border-bottom: 1px solid #e6e6e9; padding: 4px 0}
.detector-faq summary {cursor: pointer; padding: 22px 0; font-size: 18px; font-weight: 600}
.detector-faq details p {margin: 0 0 24px; color: #6e6e73}
.detector-more {display: inline-flex; min-height: 44px; align-items: center; gap: 12px; margin-top: 24px}
.detector-cta {background: #f5f5f7}
@media (max-width: 900px) {
  .detector-hero {gap: 32px; grid-template-columns: 1.25fr .75fr; padding-top: 64px; padding-bottom: 64px}
  .detector-facts {gap: 32px}
  .detector-feature-grid, .detector-process ol {gap: 24px}
}
@media (max-width: 680px) {
  .detector-hero {grid-template-columns: 1fr; padding: 44px 24px 56px}
  .detector-brand {text-align: left}
  .detector-brand img {max-width: 180px; border-radius: 24px}
  .detector-brand figcaption {margin-top: 14px}
  .detector-feature-grid, .detector-process ol, .detector-facts {grid-template-columns: 1fr}
  .detector-process li {display: grid; grid-template-columns: 40px 1fr; gap: 18px}
  .detector-process h3 {margin-top: 3px}
  .detector-intro .section {padding-top: 44px; padding-bottom: 44px}
  .detector-facts dl > div {grid-template-columns: 90px 1fr; gap: 12px}
}
