#home-bottom .clinical-capability-viewport { --capability-action: #13786e; --capability-ink: #191c1c; --capability-muted: #596361; --capability-rule: #d6dfdc; position: relative; background: #fff; margin-top: 100px; scroll-margin-top: 100px; container-type: inline-size; } #home-bottom .capability-heading { position: relative; top: auto; z-index: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding: 24px 0 36px; border-top: 1px solid var(--capability-ink); } #home-bottom .capability-heading .clinical-eyebrow { margin: 0 0 20px; font-size: 12px; line-height: 1.4; letter-spacing: .08em; } #home-bottom .capability-heading h3 { margin: 0; color: var(--capability-ink); font-size: clamp(40px, 4.4vw, 64px); font-weight: 500; line-height: 1.03; letter-spacing: -.06em; } #home-bottom .capability-heading > p { max-width: 28ch; margin: 0 0 4px; color: var(--capability-muted); font-size: 16px; line-height: 1.6; } #home-bottom .capability-rail-window { min-height: 0; position: relative; } #home-bottom .capability-rail-window:focus-visible { outline: 2px solid var(--capability-action); outline-offset: 5px; } #home-bottom .clinical-capability-index { position: relative; margin: 0; padding: 0; list-style: none; } #home-bottom .clinical-capability { --capability-signal: 1; position: relative; display: block; margin: 0; padding: 36px 0; border-top: 1px solid var(--capability-rule); scroll-margin-top: 100px; } #home-bottom .clinical-capability::before { content: ''; position: absolute; top: -1px; left: 0; width: 64px; height: 1px; background: var(--capability-action); transform: scaleX(var(--capability-signal)); transform-origin: left; } #home-bottom .clinical-capability::after { content: ''; position: absolute; top: -1px; right: 0; width: 28px; height: 28px; border-top: 1px solid var(--capability-action); border-right: 1px solid var(--capability-action); pointer-events: none; } #home-bottom .capability-detail { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 40px; min-width: 0; } #home-bottom .capability-detail-copy { min-width: 0; } #home-bottom .clinical-index-number { display: block; color: var(--capability-action); font-size: 15px; line-height: 1.4; margin-bottom: 22px; font-variant-numeric: tabular-nums; } #home-bottom .clinical-capability h4 { max-width: 20ch; margin: 0 0 22px; color: var(--capability-ink); font-size: clamp(28px, 3vw, 44px); line-height: 1.1; font-weight: 500; letter-spacing: -.045em; } #home-bottom .clinical-capability-copy { margin: 0; } #home-bottom .clinical-capability-copy > p { max-width: 49ch; margin: 0; font-size: 16px; line-height: 1.65; color: var(--capability-muted); } #home-bottom .clinical-capability-copy .feature-output-label { margin-top: 20px; font-size: 13px; line-height: 1.5; letter-spacing: .05em; color: var(--capability-ink); } #home-bottom .feature-outputs { margin: 10px 0 0; padding-left: 20px; font-size: 16px; line-height: 1.5; color: var(--capability-muted); } #home-bottom .feature-outputs li { padding: 4px 0 4px 6px; } #home-bottom .feature-outputs li::marker { color: var(--capability-action); font-size: 12px; } #home-bottom .capability-explainer { max-width: 480px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--capability-rule); } #home-bottom .capability-explainer svg { display: block; width: 100%; height: 26px; overflow: visible; } #home-bottom .capability-explainer path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; } #home-bottom .capability-explainer-base { stroke: #bad9d5; } #home-bottom .capability-explainer-route { stroke: #08bdb2; stroke-dasharray: 304; } #home-bottom .capability-explainer circle { fill: #08bdb2; } #home-bottom .capability-explainer .capability-explainer-pulse { fill: #1bd7c9; opacity: 0; filter: drop-shadow(0 0 5px #19d4c7); } #home-bottom .capability-explainer-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; color: #176d68; font-size: 14px; line-height: 1.35; } #home-bottom .capability-explainer-labels span:nth-child(2) { text-align: center; } #home-bottom .capability-explainer-labels span:nth-child(3) { text-align: right; } #home-bottom .capability-live-visual, #home-bottom .capability-detail .clinical-product-visual { min-width: 0; width: 100%; margin: 0; } #home-bottom .capability-live-panel, #home-bottom .capability-detail .clinical-product-frame { position: relative; min-width: 0; aspect-ratio: 16 / 10; background: #fff; } #home-bottom .capability-live-panel { display: grid; grid-template-rows: auto auto 48px minmax(0, 1fr) auto; gap: 8px; padding: clamp(14px, 2cqw, 24px); color: #172222; } #home-bottom .capability-live-top, #home-bottom .capability-live-heading, #home-bottom .capability-live-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } #home-bottom .capability-live-top { padding-bottom: 10px; border-bottom: 1px solid #d8e7e4; } #home-bottom .capability-live-brand { font-size: 15px; font-weight: 700; letter-spacing: -.035em; } #home-bottom .capability-live-badge, #home-bottom .capability-live-heading > span, #home-bottom .capability-live-bottom { color: #44736e; font-size: 10px; font-weight: 600; letter-spacing: .09em; } #home-bottom .capability-live-badge { padding: 5px 8px; background: #e5f8f5; white-space: nowrap; } #home-bottom .capability-live-heading h5 { margin: 0; color: #142020; font-size: clamp(24px, 2.5cqw, 34px); line-height: 1.05; font-weight: 600; letter-spacing: -.055em; } #home-bottom .capability-live-heading > span { white-space: nowrap; } #home-bottom .capability-live-route { width: 100%; height: 48px; overflow: visible; } #home-bottom .capability-live-route path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; } #home-bottom .capability-live-route-base { stroke: #cee7e2; } #home-bottom .capability-live-route-signal { stroke: #00bbac; } #home-bottom .capability-live-route-node { fill: #00bbac; } #home-bottom .capability-live-route-pulse { fill: #18d9ca; filter: drop-shadow(0 0 5px #18d9ca); } #home-bottom .capability-live-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; min-height: 0; } #home-bottom .capability-live-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 12px; border: 1px solid #d8e7e4; border-top: 2px solid #19c7b9; background: #f9fcfb; } #home-bottom .capability-live-card-index { color: #0a8b80; font-size: 11px; font-variant-numeric: tabular-nums; } #home-bottom .capability-live-card-label { margin-top: auto; color: #4d756f; font-size: 11px; line-height: 1.25; } #home-bottom .capability-live-card strong { margin-top: 3px; color: #172222; font-size: clamp(14px, 1.35cqw, 18px); line-height: 1.18; font-weight: 600; letter-spacing: -.025em; } #home-bottom .capability-live-card-detail { margin-top: 6px; color: #58706c; font-size: 11px; line-height: 1.35; } #home-bottom .capability-live-detail-lines { display: grid; gap: 7px; width: min(100%, 220px); margin-top: 16px; } #home-bottom .capability-live-detail-lines i { display: block; height: 4px; background: #d8e9e6; } #home-bottom .capability-live-detail-lines i:nth-child(2) { width: 82%; } #home-bottom .capability-live-detail-lines i:nth-child(3) { width: 62%; } #home-bottom .capability-live-waveform { display: block; width: min(100%, 150px); height: 38px; margin-top: 10px; fill: none; stroke: #00bbac; stroke-width: 1.5; vector-effect: non-scaling-stroke; } #home-bottom .capability-live-shield { display: block; width: 34px; height: 38px; margin-top: 8px; fill: none; stroke: #00bbac; stroke-width: 1.5; } #home-bottom .capability-live-panel[data-live-layout="document"] .capability-live-cards { grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); } #home-bottom .capability-live-panel[data-live-layout="document"] .capability-live-card:first-child { grid-row: span 2; } #home-bottom .capability-live-panel[data-live-layout="resolution"] .capability-live-cards, #home-bottom .capability-live-panel[data-live-layout="scribe"] .capability-live-cards { grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 60px; } #home-bottom .capability-live-panel[data-live-layout="resolution"] .capability-live-card:last-child, #home-bottom .capability-live-panel[data-live-layout="scribe"] .capability-live-card:last-child { grid-column: 1 / -1; } #home-bottom .capability-live-panel[data-live-layout="resolution"] .capability-live-card:last-child, #home-bottom .capability-live-panel[data-live-layout="scribe"] .capability-live-card:last-child, #home-bottom .capability-live-panel[data-live-layout="navigation"] .capability-live-card { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; column-gap: 10px; } #home-bottom .capability-live-panel[data-live-layout="resolution"] .capability-live-card:last-child .capability-live-card-label, #home-bottom .capability-live-panel[data-live-layout="scribe"] .capability-live-card:last-child .capability-live-card-label, #home-bottom .capability-live-panel[data-live-layout="navigation"] .capability-live-card-label { display: none; } #home-bottom .capability-live-panel[data-live-layout="resolution"] .capability-live-card:last-child strong, #home-bottom .capability-live-panel[data-live-layout="scribe"] .capability-live-card:last-child strong, #home-bottom .capability-live-panel[data-live-layout="navigation"] .capability-live-card strong { margin: 0; } #home-bottom .capability-live-panel[data-live-layout="resolution"] .capability-live-card:last-child .capability-live-card-detail, #home-bottom .capability-live-panel[data-live-layout="scribe"] .capability-live-card:last-child .capability-live-card-detail, #home-bottom .capability-live-panel[data-live-layout="navigation"] .capability-live-card-detail { margin: 0; text-align: right; } #home-bottom .capability-live-panel[data-live-layout="navigation"] .capability-live-cards { grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); } #home-bottom .capability-live-panel[data-live-layout="library"] .capability-live-cards { grid-template-rows: 54px minmax(0, 1fr); } #home-bottom .capability-live-panel[data-live-layout="library"] .capability-live-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; column-gap: 10px; background: #f0f9f7; } #home-bottom .capability-live-panel[data-live-layout="library"] .capability-live-card:first-child .capability-live-card-label { display: none; } #home-bottom .capability-live-panel[data-live-layout="library"] .capability-live-card:first-child strong, #home-bottom .capability-live-panel[data-live-layout="library"] .capability-live-card:first-child .capability-live-card-detail { margin: 0; } #home-bottom .capability-live-panel[data-live-layout="six"] .capability-live-cards { grid-template-rows: repeat(2, minmax(0, 1fr)); } #home-bottom .capability-live-panel[data-live-layout="six"] .capability-live-card { padding: 8px 10px; } #home-bottom .capability-live-bottom { padding-top: 9px; border-top: 1px solid #d8e7e4; } #home-bottom .capability-detail .clinical-product-visual img { display: block; width: 100%; height: 100%; object-fit: contain; } #home-bottom .capability-live-visual figcaption, #home-bottom .capability-detail .clinical-product-visual figcaption { margin-top: 12px; color: var(--capability-muted); font-size: 12px; line-height: 1.6; } #home-bottom .capability-progress { height: 1px; background: var(--capability-rule); } #home-bottom .capability-progress span { display: block; width: 100%; height: 1px; background: var(--capability-action); transform: scaleX(.1); transform-origin: left; } #home-bottom .capability-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; padding: 18px 0 0; } #home-bottom .capability-status { flex: 1; min-width: 180px; margin: 0; color: var(--capability-muted); font-size: 13px; line-height: 1.5; } #home-bottom .capability-tools { display: flex; gap: 8px; } #home-bottom .capability-tools button { min-height: 44px; min-width: 44px; padding: 10px 14px; background: transparent; border: 1px solid var(--capability-rule); border-radius: 0; color: var(--capability-ink); font: inherit; font-size: 13px; cursor: pointer; } #home-bottom .capability-tools button[hidden] { display: none; } #home-bottom .capability-tools button:hover { border-color: var(--capability-action); color: var(--capability-action); } #home-bottom .capability-tools button:focus-visible { outline: 2px solid var(--capability-action); outline-offset: 4px; } #home-bottom .capability-footer > a { margin-left: 16px; font-size: 13px; } #home-bottom .clinical-capability-viewport[data-layout="pinned"] { height: calc(100svh - 84px); display: flex; flex-direction: column; padding-bottom: 18px; } #home-bottom [data-layout="pinned"] .capability-rail-window { flex: 1; overflow: hidden; } #home-bottom [data-layout="pinned"] .clinical-capability-index { display: block; width: 100%; height: 100%; } #home-bottom [data-layout="pinned"] .clinical-capability { position: absolute; left: calc(var(--path-x) * (100cqw + 64px)); top: calc(var(--path-y) * (100% + 48px)); width: 100cqw; height: 100%; padding: 24px 32px 24px 0; border-right: 1px solid var(--capability-rule); } #home-bottom [data-layout="pinned"] .capability-detail { height: 100%; } #home-bottom [data-layout="pinned"] .capability-detail-copy { max-height: 100%; overflow-y: auto; scrollbar-width: thin; } #home-bottom [data-layout="pinned"] .capability-live-panel, #home-bottom [data-layout="pinned"] .clinical-product-frame { max-height: 43svh; } #home-bottom [data-layout="native"] .capability-rail-window { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; } #home-bottom [data-layout="native"] .clinical-capability-index { display: flex; align-items: flex-start; gap: 28px; width: max-content; } #home-bottom [data-layout="native"] .clinical-capability { flex: 0 0 min(100cqw, 800px); width: min(100cqw, 800px); scroll-snap-align: start; } @media (max-width: 1000px) { #home-bottom .clinical-capability-viewport { margin-top: 64px; } #home-bottom .capability-heading { align-items: flex-start; flex-direction: column; gap: 24px; padding-bottom: 32px; } #home-bottom .capability-heading h3 { font-size: clamp(36px, 6.7vw, 56px); } #home-bottom .capability-heading > p { max-width: none; } #home-bottom .capability-detail { display: flex; flex-direction: column; align-items: stretch; gap: 28px; } #home-bottom .capability-live-visual, #home-bottom .capability-detail .clinical-product-visual { order: -1; } #home-bottom .capability-live-panel { min-height: 340px; aspect-ratio: auto; grid-template-rows: auto auto 40px minmax(0, 1fr) auto; padding: 16px; } #home-bottom .capability-live-heading h5 { font-size: clamp(23px, 4vw, 30px); } #home-bottom .capability-live-route { height: 40px; } #home-bottom .capability-live-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } #home-bottom .capability-live-panel[data-live-layout="six"] .capability-live-cards { grid-template-rows: repeat(3, minmax(0, 1fr)); } #home-bottom .capability-live-panel[data-live-layout="six"] { min-height: 420px; } #home-bottom .capability-live-panel[data-live-layout="document"] .capability-live-cards, #home-bottom .capability-live-panel[data-live-layout="resolution"] .capability-live-cards, #home-bottom .capability-live-panel[data-live-layout="scribe"] .capability-live-cards { grid-template-columns: 1.2fr 1fr; } #home-bottom .capability-live-panel[data-live-layout="library"] .capability-live-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } #home-bottom .capability-live-heading > span { display: none; } #home-bottom .clinical-capability h4 { font-size: 30px; } #home-bottom .clinical-index-number { margin-bottom: 16px; } #home-bottom .capability-footer { gap: 16px; } #home-bottom .capability-status { flex-basis: 100%; } #home-bottom .capability-footer > a { margin-left: auto; } } @media (prefers-reduced-motion: reduce) { #home-bottom .clinical-capability-viewport *, #home-bottom .clinical-capability-viewport *::before { transition: none; } }