/* Product-only technical narrative. The homepage keeps its existing treatment. */
.bt-page { --bt-ink: #2e4e6a; --bt-text: #4b6178; --bt-line: #ccdae5; --bt-blue: #5b9bd5; --bt-orange: #ffc000; color: var(--bt-ink); background: #fff; }
.bt-page p { color: var(--bt-text); font-size: 1rem; line-height: 1.75; }
.bt-page .eyebrow { color: #3a6f9a; font-size: .72rem; letter-spacing: .14em; font-weight: 600; }
main .bt-page h1, main .bt-page h2, main .bt-page h3 { color: var(--bt-ink); font-family: var(--font-display); }
main .bt-page h1 { max-width: 13ch; margin: 1.25rem 0 1.5rem; font-size: clamp(2.8rem, 4.8vw, 4.7rem); font-weight: 600; line-height: 1.04; letter-spacing: -.045em; }
main .bt-page h2 { margin: .8rem 0 0; font-size: clamp(1.85rem, 3vw, 2.8rem); font-weight: 500; line-height: 1.16; letter-spacing: -.035em; }
main .bt-page h3 { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.bt-hero { padding-block: .5rem 2rem; }
.bt-hero__layout { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); }
.bt-hero__copy > p { max-width: 34rem; font-size: 1.1rem; }
.bt-hero__image { min-width: 0; margin: 0; }
.bt-hero__image img { display: block; width: 100%; height: clamp(34rem, calc(100vh - 12rem), 46rem); object-fit: contain; object-position: center; border-radius: 0; }
.bt-hero__image figcaption { text-align: center; margin-top: 1rem; color: #6b8195; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
.bt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.bt-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; border-radius: .35rem; color: #fff; background: var(--bt-blue); font-size: .9rem; font-weight: 600; text-decoration: none; }
.bt-button:hover { background: #0764c8; color: #fff; }
.bt-link { display: inline-flex; align-items: center; gap: .8rem; padding-block: .4rem; color: var(--bt-ink); border-bottom: 1px solid #a2b8cb; font-size: .85rem; font-weight: 600; text-decoration: none; }
.bt-link:hover { color: var(--bt-blue); border-color: currentColor; }
.bt-page a:focus-visible, .bt-page button:focus-visible { outline: 2px solid var(--bt-blue); outline-offset: 5px; }
.bt-index { position: sticky; top: 4.25rem; z-index: 5; padding-block: 1.05rem; border-block: 1px solid var(--bt-line); background: rgba(255,255,255,.97); }
.bt-index > div { display: flex; justify-content: space-between; gap: 1.5rem; }
.bt-index a { color: var(--bt-ink); font-size: .85rem; text-decoration: none; white-space: nowrap; }
.bt-index a:hover { color: var(--bt-blue); }
.bt-index a > span { margin-right: .8rem; color: #7790a7; font-size: .65rem; }
.bt-section { padding-block: clamp(3.5rem, 6vw, 6rem); scroll-margin-top: 9rem; }
.bt-section__heading { display: block; margin-bottom: 3rem; }
.bt-section__heading > p { max-width: 46rem; margin: 1.25rem 0 0; }
.bt-components { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.bt-component { margin: 0; min-width: 0; }
.bt-component + .bt-component { border-left: 1px solid var(--bt-line); padding-left: 2.5rem; }
.bt-component__drawing { position: relative; border-bottom: 1px solid var(--bt-line); margin-bottom: 1.5rem; }
.bt-component__drawing .bt-drawing { height: 260px; }
.bt-component__index { position: absolute; left: 0; top: .5rem; font-family: var(--font-display); font-size: .75rem; color: #668099; }
.bt-drawing { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: #244d75; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bt-drawing text { fill: #244d75; stroke: none; font-family: var(--font-display); font-size: 13px; }
.bt-drawing .bt-drawing__body { fill: #fff; stroke-width: 1.8; }
.bt-drawing .bt-drawing__display { fill: #e8f2f8; }
.bt-drawing .bt-drawing__accent { stroke: var(--bt-blue); stroke-width: 3; }
.bt-drawing .bt-drawing__guide { stroke: #b5c9da; stroke-width: 1; stroke-dasharray: 3 5; }
.bt-drawing .bt-drawing__point { fill: var(--bt-orange); stroke: none; }
.bt-component__name { display: block; min-height: 2rem; margin-bottom: .5rem; color: #6b8195; font-size: .7rem; letter-spacing: .02em; }
.bt-component h3 { margin-bottom: .8rem; }
.bt-component p { margin: 0 0 1.1rem; font-size: .94rem; }
.bt-component small { color: #1a65a9; font-size: .78rem; font-weight: 500; }
.bt-page .bt-note { margin: 1.5rem 0 0; color: #647b90; font-size: .75rem; line-height: 1.65; }
.bt-process { background: #f5f9fd; }
.bt-process__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid #b6cada; }
.bt-process__tabs button { position: relative; display: flex; align-items: center; gap: .8rem; padding: 1rem .75rem 1.25rem; border: 0; background: transparent; color: #59718a; font-family: var(--font-display); font-size: .95rem; text-align: left; transition: color .2s ease; }
.bt-process__tabs button::after { position: absolute; inset: auto 0 -1px; height: 3px; content: ''; background: transparent; }
.bt-process__tabs button[aria-selected="true"] { color: var(--bt-ink); font-weight: 600; }
.bt-process__tabs button[aria-selected="true"]::after { background: var(--bt-orange); }
.bt-process__tabs button:hover { color: var(--bt-blue); }
.bt-process__tabs button > span { font-size: .7rem; }
.bt-process__layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 3rem; padding-block: 2.5rem 1rem; }
.bt-process__drawing { position: relative; min-width: 0; }
.bt-process__status { display: block; text-align: center; color: #6b8195; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.bt-process__phase { display: block; margin-bottom: 1rem; color: #7a92a8; font-family: var(--font-display); font-size: .75rem; letter-spacing: .15em; }
main .bt-process__panel h3 { margin-bottom: 1.2rem; font-size: clamp(1.65rem, 2.5vw, 2.25rem); font-weight: 500; line-height: 1.2; }
.bt-process[data-enhanced] .bt-process__panels { min-height: 19rem; display: grid; align-items: center; }
.bt-process__panel + .bt-process__panel { margin-top: 2rem; }
.bt-process[data-enhanced] .bt-process__panel { margin: 0; }
.bt-process__panel[hidden] { display: none; }
.bt-process__detail { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #c7d7e4; color: #266295; font-size: .8rem; }
.bt-process__sample, .bt-process__optics, .bt-process__result { opacity: 0; transition: opacity .3s ease; }
.bt-process[data-stage="1"] .bt-process__sample, .bt-process[data-stage="2"] .bt-process__optics, .bt-process[data-stage="3"] .bt-process__result { opacity: 1; }
.bt-process__drop { fill: #bf6b58; stroke: #bf6b58; }
.bt-process__optics { stroke: #5b9bd5; }
.bt-process__result { stroke: #5b9bd5; }
.bt-process[data-stage="0"] .bt-process__strip { stroke: #5b9bd5; }
.bt-principle { background: #172735; color: #fff; }
.bt-principle .eyebrow { color: #a8c6e2; }
main .bt-principle h2 { color: #fff; }
.bt-principle p { max-width: 35rem; margin: 1.5rem 0 0; color: #c2d4e5; }
.bt-principle__layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; gap: 5rem; }
.bt-principle__facts { margin: 1.5rem 0 0; }
.bt-principle__facts > div { padding-block: 1.5rem; border-top: 1px solid #466383; }
.bt-principle__facts dt { color: #fff; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.5vw, 2.3rem); letter-spacing: -.02em; }
.bt-principle__facts dt small { font-size: .9rem; color: #b7cfe3; }
.bt-principle__facts dd { margin: .5rem 0 0; font-size: .85rem; line-height: 1.7; color: #b7cfe3; }
.bt-principle__diagram { margin: 3rem 0 0; }
.bt-principle__scroll { overflow-x: auto; }
.bt-principle__scroll:focus-visible { outline: 2px solid #a8c6e2; outline-offset: 5px; }
.bt-principle__canvas { position: relative; min-width: 700px; }
.bt-principle__canvas > svg { display: block; width: 100%; height: auto; }
.bt-principle__line { fill: none; stroke: #a4bfd7; stroke-width: 2; }
.bt-principle__channel { fill: #284b70; }
.bt-principle__cells { fill: #bd837a; }
.bt-principle__filter { stroke: #ccdfed; stroke-width: 5; }
.bt-principle__plasma { fill: #ffc000; opacity: .7; }
.bt-principle__membrane { fill: #8ba9c3; }
.bt-principle__beam { fill: none; stroke: #ffc000; stroke-width: 2; }
.bt-principle__beam path:first-child { stroke-width: 17; opacity: .12; }
.bt-principle__sensor { fill: #31577e; stroke: #bfd7ea; stroke-width: 1.5; }
.bt-principle__guide { fill: none; stroke: #6c8caa; stroke-dasharray: 3 5; }
.bt-principle__callout { position: absolute; width: 22%; max-width: 210px; color: #d8e6f1; font-size: .82rem; line-height: 1.5; text-align: center; transform: translateX(-50%); }
.bt-principle__callout b { display: block; margin-bottom: .3rem; color: var(--bt-orange); font-size: .65rem; font-weight: 400; }
.bt-principle__callout--1 { left: 12.26%; top: 18%; }
.bt-principle__callout--2 { left: 32.45%; top: 75%; }
.bt-principle__callout--3 { left: 58.58%; top: 75%; }
.bt-principle__callout--4 { left: 85%; top: 9%; width: 15%; text-align: left; transform: none; }
.bt-principle__diagram figcaption { margin-top: 1.5rem; color: #9eb9d0; font-size: .7rem; }
.bt-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 3.5rem; padding-block: 1.5rem; border-block: 1px solid #b7cbdb; }
.bt-metrics > div { padding: .5rem 1.5rem; border-right: 1px solid var(--bt-line); }
.bt-metrics > div:first-child { padding-left: 0; }
.bt-metrics > div:last-child { border-right: 0; }
.bt-metrics dt { color: var(--bt-ink); font-family: var(--font-display); font-size: clamp(2rem, 3.8vw, 3.5rem); line-height: 1.2; font-weight: 400; letter-spacing: -.035em; }
.bt-metrics dt small { font-size: 1rem; letter-spacing: 0; }
.bt-metrics dd { margin: .75rem 0 0; color: #647b90; font-size: .8rem; }
.bt-specs__layout { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: start; gap: 4rem; }
.bt-specs__context h3 { margin-bottom: 1rem; }
.bt-specs__context p { font-size: .94rem; }
.bt-specs__table { width: 100%; border-collapse: collapse; text-align: left; }
.bt-specs__table caption { caption-side: top; padding: 0 0 1rem; color: #647b90; font-size: .75rem; }
.bt-specs__table thead th { padding: .85rem 1rem; border-bottom: 1px solid #7795af; color: var(--bt-ink); font-size: .75rem; font-weight: 600; }
.bt-specs__table tbody th, .bt-specs__table td { padding: 1rem; border-bottom: 1px solid #d8e3ec; color: var(--bt-text); font-size: .85rem; font-weight: 400; line-height: 1.6; vertical-align: top; }
.bt-specs__table tbody th { width: 40%; color: var(--bt-ink); }
.bt-specs__table tbody tr:nth-child(odd) { background: #f6f9fc; }
.bt-documents { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid #b7cbdb; }
.bt-documents > h3 { margin-bottom: 1.5rem; }
.bt-documents ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.bt-documents a { display: flex; justify-content: space-between; gap: 1rem; height: 100%; padding-block: 1rem; border-top: 1px solid var(--bt-line); color: var(--bt-ink); text-decoration: none; }
.bt-documents a:hover { border-color: var(--bt-blue); color: var(--bt-blue); }
.bt-documents strong { display: block; font-size: .9rem; font-weight: 500; }
.bt-documents small { display: block; margin-top: .5rem; color: #6b8195; font-size: .75rem; line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) {
  .bt-process[data-stage="1"] .bt-process__drop { animation: bt-sample-arrive .8s ease-out both; }
  @keyframes bt-sample-arrive { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 991.98px) {
  .bt-hero__layout { gap: 2rem; }
  .bt-components { gap: 1.5rem; }
  .bt-component + .bt-component { padding-left: 1.5rem; }
  .bt-principle__layout { gap: 2rem; }
  .bt-process__layout { gap: 2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bt-specs__layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .bt-specs__context { max-width: 42rem; }
}
@media (max-width: 767.98px) {
  .bt-hero__layout { grid-template-columns: 1fr; gap: 2rem; }
  main .bt-page h1 { max-width: 17ch; }
  .bt-hero__image img { height: 36rem; }
  .bt-index { top: 4rem; overflow-x: auto; }
  .bt-index > div { width: max-content; min-width: 100%; padding-inline: 1rem; justify-content: start; gap: 1.5rem; }
  .bt-index a { font-size: .75rem; }
  .bt-index a > span { margin-right: .4rem; }
  .bt-section { scroll-margin-top: 8.5rem; }
  .bt-section__heading { margin-bottom: 2rem; }
  .bt-components { grid-template-columns: 1fr; gap: 2.5rem; }
  .bt-component { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.25rem; align-items: center; }
  .bt-component + .bt-component { padding: 2rem 0 0; border-left: 0; border-top: 1px solid var(--bt-line); }
  .bt-component__drawing { overflow: hidden; border-bottom: 0; margin: 0; }
  .bt-component__drawing .bt-drawing { width: 160%; height: auto; max-width: none; margin-left: -30%; }
  .bt-component__index { z-index: 1; }
  .bt-component__name { min-height: 0; font-size: .65rem; }
  .bt-component p { font-size: .85rem; }
  .bt-component small { font-size: .7rem; }
  .bt-process__tabs button { flex-direction: column; align-items: start; gap: .5rem; padding: .75rem .25rem 1rem; font-size: .75rem; }
  .bt-process__tabs button > span { font-size: .65rem; }
  .bt-process__layout { grid-template-columns: 1fr; gap: 2rem; padding-top: 1.5rem; }
  .bt-process__drawing { max-width: 34rem; width: 100%; margin-inline: auto; }
  .bt-process[data-enhanced] .bt-process__panels { min-height: 16rem; }
  .bt-principle__layout { grid-template-columns: 1fr; gap: 1rem; }
  .bt-principle__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .bt-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0; }
  .bt-metrics > div:nth-child(2) { border-right: 0; }
  .bt-metrics > div:nth-child(3) { padding-left: 0; }
  .bt-metrics dt small { font-size: .85rem; }
  .bt-metrics dd { font-size: .75rem; }
  .bt-specs__table tbody th, .bt-specs__table td { padding: .85rem .6rem; font-size: .78rem; overflow-wrap: anywhere; }
  .bt-documents ul { grid-template-columns: 1fr; gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bt-process__sample, .bt-process__optics, .bt-process__result, .bt-process__tabs button { transition: none; }
}

/* Sequential motion describes flow and optical reading; annotations remain still. */
.bt-principle__diagram figcaption { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  [data-bt-motion][data-motion-ready] .bt-principle__cells { animation: bt-cells-flow 8s ease-in-out infinite; }
  [data-bt-motion][data-motion-ready] .bt-principle__filter { animation: bt-filter-read 8s ease-in-out infinite; }
  [data-bt-motion][data-motion-ready] .bt-principle__plasma { transform-box: fill-box; transform-origin: left center; animation: bt-plasma-flow 8s ease-in-out infinite; }
  [data-bt-motion][data-motion-ready] .bt-principle__beam { animation: bt-optical-read 8s ease-in-out infinite; }
  [data-bt-motion][data-motion-ready] .bt-principle__sensor { animation: bt-sensor-read 8s ease-in-out infinite; }
  [data-bt-motion][data-motion-ready] :is(.bt-principle__cells, .bt-principle__filter, .bt-principle__plasma, .bt-principle__beam, .bt-principle__sensor) { animation-play-state: paused; }
  [data-bt-motion].is-in-view :is(.bt-principle__cells, .bt-principle__filter, .bt-principle__plasma, .bt-principle__beam, .bt-principle__sensor) { animation-play-state: running; }
  @keyframes bt-cells-flow {
    0% { transform: translateX(0); opacity: .7; }
    30%, 85% { transform: translateX(26px); opacity: 1; }
    100% { transform: translateX(26px); opacity: .15; }
  }
  @keyframes bt-filter-read {
    0%, 15%, 55%, 100% { stroke: #ccdfed; }
    28%, 40% { stroke: #ffc000; }
  }
  @keyframes bt-plasma-flow {
    0%, 20% { transform: scaleX(.025); opacity: .15; }
    60%, 90% { transform: scaleX(1); opacity: .7; }
    100% { transform: scaleX(1); opacity: .15; }
  }
  @keyframes bt-optical-read {
    0%, 52%, 100% { opacity: .12; }
    65%, 83% { opacity: 1; }
    74% { opacity: .45; }
  }
  @keyframes bt-sensor-read {
    0%, 52%, 100% { fill: #31577e; stroke: #bfd7ea; }
    65%, 83% { fill: #4c6680; stroke: #ffc000; }
  }
}