/* Both rails move with page scrolling, without pinning a section. */
.detector-carousel, .scenario-track { overflow-x: auto; scroll-snap-type: none; scroll-behavior: auto; cursor: grab; touch-action: pan-x pan-y; }
.detector-card { scroll-snap-align: none; flex-shrink: 0; }
.detector-total strong { color: #1c1c1c; -webkit-text-stroke-width: 2px; paint-order: stroke fill; letter-spacing: -.075em; }
.detector-total strong span { -webkit-text-stroke-width: 2px; }
.detector-carousel, .scenario-track { overflow-anchor: none; overscroll-behavior-x: contain; }
@media (max-width: 700px) {
  .detector-card { height: min(450px, calc(100svh - var(--header-height) - 36px)); }
  .carousel-controls button, .scenario-actions button, .brand-controls button { min-width: 44px; min-height: 44px; }
}
.scenario-track img { -webkit-user-drag: none; }
.scenario-track.is-dragging, .scenario-track.is-dragging * { cursor: grabbing; user-select: none; }
.scenario-section { height: auto; padding: 105px 0 95px; overflow: hidden; }

/* Use cases use the actual copy from the old site. */
.use-cases-section { background: #132128; color: #f2f8f8; padding: 100px 0 115px; }
.use-cases-heading h2 { font-size: clamp(44px,4.9vw,72px); font-weight: 600; line-height: 1.04; letter-spacing: -.06em; margin: 22px 0; }
.use-cases-heading > p { color: #a1b3ba; margin: 0 0 45px; font-size: 16px; }
.use-cases-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid #354b53; border-left: 1px solid #354b53; }
.use-cases-grid > a { padding: 28px 30px; border-right: 1px solid #354b53; border-bottom: 1px solid #354b53; transition: background .2s; }
.use-cases-grid > a:hover { background: #1c333b; }
.use-cases-grid > a > span { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .08em; color: #81bfc5; }
.use-cases-grid i { font-size: 18px; font-style: normal; line-height: .8; }
.use-cases-grid h3 { font-size: 23px; font-weight: 550; letter-spacing: -.035em; line-height: 1.2; margin: 45px 0 15px; }
.use-cases-grid p { margin: 0; color: #a4b7be; font-size: 14px; line-height: 1.7; }
@media (max-width: 1100px) { .use-cases-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) {
  .scenario-section, .use-cases-section { padding: 72px 0; }
  .use-cases-grid { grid-template-columns: 1fr; }
  .use-cases-grid > a { padding: 25px; }
  .use-cases-grid h3 { margin-top: 30px; }
}

/* Hero copy and the application frame. */
.workspace-mobile-note { display: none; }
@media (max-width: 960px) {
  .workspace-mobile-note { display: block; margin-block: 16px 0; padding-inline: 12px; color: #9eb1bb; font-size: 12px; line-height: 1.6; text-align: center; }
}
.hero h1 { color: #fff; }
.hero-copy > p { max-width: 760px; }
.stage-top { position: relative; display: flex; justify-content: center; }
.stage-dots { position: absolute; left: 14px; }
.stage-top > span:nth-child(2) { display: block; }

/* Integration overview: systems, brands and interfaces. */
.compat-section { padding: 110px 0 85px; background: #f0f3f1; color: #17282e; }
.compat-section h2 { max-width: 1180px; font-size: clamp(45px,5.3vw,78px); font-weight: 600; line-height: 1.06; letter-spacing: -.063em; margin: 24px 0 32px; }
.compat-intro { display: flex; justify-content: space-between; align-items: end; gap: 45px; margin-bottom: 60px; }
.compat-intro p { max-width: 760px; margin: 0; font-size: 17px; line-height: 1.7; color: #687d83; }
.compat-intro .text-link { flex: none; margin-bottom: 5px; }
.integration-brands { padding: 25px 0 30px; border-block: 1px solid #d1deda; }
.integration-brands-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; }
.integration-brands-heading > span { font-size: 13px; color: #607e87; }
.brand-controls { display: flex; gap: 7px; align-items: center; }
.brand-controls button { width: 36px; height: 36px; border: 1px solid #b4c8c9; border-radius: 50%; background: transparent; color: #466d77; font-size: 17px; }
.brand-controls button:hover { background: #dae8e5; }
.brand-controls #brands-pause { width: auto; border-radius: 20px; padding: 0 14px; font-size: 11px; }
.brand-viewport { overflow-x: auto; scrollbar-width: none; cursor: grab; mask-image: linear-gradient(to right,transparent,#000 3%,#000 97%,transparent); }
.brand-viewport::-webkit-scrollbar { display: none; }
.integration-brand-track { display: flex; width: max-content; }
.integration-brand-group { display: flex; gap: 16px; padding-right: 16px; }
.integration-brand { display: grid; place-items: center; flex: 0 0 220px; width: 220px; height: 104px; padding: 20px 27px; background: #fcfdfb; border: 1px solid #dae3df; border-radius: 10px; }
.integration-brand img { width: 160px; max-height: 45px; object-fit: contain; filter: grayscale(1); opacity: .82; -webkit-user-drag: none; }
.integration-technologies-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 55px 0 25px; }
.integration-technologies-heading p { font-size: 13px; color: #7a9298; margin: 0; }
.integration-technologies { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid #c7d8d4; border-left: 1px solid #c7d8d4; }
.integration-technologies article { display: flex; flex-direction: column; padding: 27px; border-right: 1px solid #c7d8d4; border-bottom: 1px solid #c7d8d4; }
.technology-index { font-size: 9px; font-weight: 650; letter-spacing: .085em; color: #75959a; }
.integration-technologies h3 { margin: 38px 0 15px; font-size: 27px; font-weight: 550; letter-spacing: -.04em; }
.integration-technologies p { margin: 0 0 28px; font-size: 13px; line-height: 1.75; color: #6f858b; }
.technology-tag { display: block; font-size: 10px; color: #57838e; margin-top: auto; }
.compat-protocols { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 25px; align-items: center; margin-top: 26px; font-size: 11px; color: #789298; }
.compat-protocols strong { font-size: 12px; color: #527c88; }
@media (max-width: 1100px) {
  .compat-intro { flex-direction: column; align-items: start; gap: 22px; }
  .integration-technologies { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .compat-protocols { grid-template-columns: auto 1fr; }
  .compat-protocols > span:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .compat-section { padding: 72px 0; }
  .compat-section h2 { font-size: clamp(36px,8.9vw,55px); line-height: 1.1; }
  .compat-intro p { font-size: 15px; }
  .compat-intro { margin-bottom: 35px; }
  .integration-brands-heading { align-items: start; }
  .integration-brands-heading > span { max-width: 180px; font-size: 11px; line-height: 1.6; }
  .integration-brand { width: 170px; flex-basis: 170px; height: 85px; padding-inline: 22px; }
  .integration-brand-group { gap: 12px; padding-right: 12px; }
  .integration-technologies-heading { align-items: start; flex-direction: column; gap: 12px; margin-top: 38px; }
  .integration-technologies { grid-template-columns: 1fr; }
  .integration-technologies article { padding: 25px; }
  .integration-technologies h3 { margin-top: 26px; }
  .compat-protocols { grid-template-columns: 1fr; gap: 10px; line-height: 1.6; }
  .stage-dots { left: 9px; }
  .stage-top > span:nth-child(2) { font-size: 7px; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: clamp(36px,11vw,42px); }
  .compat-section h2 { font-size: clamp(32px,9.9vw,36px); }
}
@media (max-height: 600px) {
  .detector-card { height: min(450px, calc(100svh - var(--header-height) - 36px)); }
  .scenario-card { height: min(250px, calc(100svh - var(--header-height) - 36px)); }
}