:where(.sdi-page) { color: var(--color-text); font-family: var(--font-family-body); background: var(--color-background) }
:where(.sdi-page) .container { width: calc(100% - var(--page-gutter)*2); max-width: var(--size-1320); margin-inline: auto }
:where(.sdi-page) section { scroll-margin-top: var(--size-160) }
:where(.sdi-page) .sdi-section { padding: var(--size-96) 0 }
:where(.sdi-page) h1 { font-family: var(--font-family-display); font-weight: var(--font-weight-display); color: var(--color-heading); letter-spacing: var(--letter-spacing-display); line-height: var(--line-height-display) }
:where(.sdi-page) h2 { font-family: var(--font-family-display); font-weight: var(--font-weight-display); color: var(--color-heading); letter-spacing: var(--letter-spacing-display); line-height: var(--line-height-display) }
:where(.sdi-page) h1 { font-size: clamp(var(--size-44),4.5vw,var(--size-68)); max-width: var(--size-660); margin: var(--size-25) 0 }
:where(.sdi-page) h1 em { color: var(--color-accent); font-weight: var(--font-weight-regular) }
:where(.sdi-page) h2 { font-size: var(--font-size-section); max-width: var(--size-860); margin: var(--size-14) 0 var(--size-28) }
:where(.sdi-page) h3 { font: var(--font-weight-bold) var(--font-size-card)/var(--line-height-1-4) var(--font-family-body); letter-spacing: var(--letter-spacing-heading); color: var(--color-heading); margin: 0 0 var(--size-12) }
:where(.sdi-page) p { font-size: var(--size-16); line-height: var(--line-height-relaxed); margin: 0 0 var(--size-18) }
:where(.sdi-page) p:last-child { margin-bottom: 0 }
:where(.sdi-page) .eyebrow { font: var(--size-11)/var(--line-height-1-5) var(--font-family-mono); letter-spacing: var(--letter-spacing-12em); color: var(--color-accent); text-transform: uppercase }
:where(.sdi-page) .sdi-mark { display: none }
:where(.sdi-page) .sdi-head { margin-bottom: var(--size-42) }
:where(.sdi-page) .sdi-head > .body { max-width: var(--size-920) }
:where(.sdi-page) .figure-note { font: var(--size-10)/var(--line-height-1-6) var(--font-family-mono); color: var(--color-text-muted); margin: var(--size-20) 0 0 }
:where(.sdi-page) .sdi-int-icon { display: inline-flex; width: var(--size-44); height: var(--size-44); border: var(--border-default); border-radius: var(--size-10); background: var(--color-surface-secondary); color: var(--color-primary); align-items: center; justify-content: center; flex-shrink: 0 }
:where(.sdi-page) .sdi-int-icon svg { width: var(--size-24); height: var(--size-24) }
:where(.sdi-page) .sdi-hero { padding: var(--size-70) 0 }
:where(.sdi-page) .sdi-hero__grid { display: grid; grid-template-columns: 1.16fr .84fr; gap: 7%; align-items: center }
:where(.sdi-page) .sdi-breadcrumb { font: var(--size-11)/var(--line-height-1-5) var(--font-family-mono); color: var(--color-accent); display: flex; gap: var(--size-12); flex-wrap: wrap }
:where(.sdi-page) .sdi-hero__lead p { font-size: var(--size-17) }
:where(.sdi-page) .sdi-hero__lead .body { font-size: var(--size-16); color: var(--color-text-muted) }
:where(.sdi-page) .sdi-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-24); margin: var(--size-28) 0 }
:where(.sdi-page) .sdi-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-24); margin: var(--size-28) 0 }
:where(.sdi-page) .sdi-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-24); margin: var(--size-28) 0 }
:where(.sdi-page) .sdi-hero__note { font-size: var(--size-13) !important; max-width: var(--size-560); color: var(--color-text-muted) }
:where(.sdi-page) .sdi-hero__meta { padding: 0; margin: var(--size-22) 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--size-10) var(--size-20); font-size: var(--size-11); color: var(--color-text-muted) }
:where(.sdi-page) .sdi-hero__meta li:before { content: '✓'; margin-right: var(--size-7); color: var(--color-accent) }
:where(.sdi-page) .sdi-connection-map { margin: 0; width: 100%; max-width: var(--size-450); justify-self: center; padding: var(--size-28); background: var(--color-surface-secondary); border: var(--size-1) var(--border-style) var(--color-border); border-radius: var(--size-18); box-shadow: var(--size-8) var(--size-8) 0 var(--color-surface-accent) }
:where(.sdi-page) .sdi-connection-map figcaption { font: var(--size-10)/var(--line-height-1-5) var(--font-family-mono); letter-spacing: var(--letter-spacing-1em); text-align: center; color: var(--color-primary); margin-bottom: var(--size-25) }
:where(.sdi-page) .sdi-map-top { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--size-14) }
:where(.sdi-page) .sdi-map-bottom { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--size-50); margin-inline: var(--size-20) }
:where(.sdi-page) .sdi-map-node { display: flex; align-items: center; flex-direction: column; gap: var(--size-10); background: var(--color-surface); border: var(--border-default); border-radius: var(--size-9); padding: var(--size-14) var(--size-8) }
:where(.sdi-page) .sdi-map-node .sdi-int-icon { width: var(--size-34); height: var(--size-34); border: 0; background: transparent }
:where(.sdi-page) .sdi-map-node b { font-size: var(--size-12); font-weight: var(--font-weight-medium); white-space: nowrap }
:where(.sdi-page) .sdi-map-hub { display: flex; gap: var(--size-15); align-items: center; justify-content: center; position: relative; padding: var(--size-22) var(--size-12); background: var(--color-primary); color: var(--color-white); border-radius: var(--size-10) }
:where(.sdi-page) .sdi-map-hub .sdi-int-icon { background: var(--color-illustration-185043); color: var(--color-highlight); border-color: var(--color-illustration-487769) }
:where(.sdi-page) .sdi-map-hub b { display: block; font: var(--size-26) var(--font-family-display) }
:where(.sdi-page) .sdi-map-hub small { display: block; font-size: var(--size-9); color: var(--color-on-primary-muted); margin-top: var(--size-5) }
:where(.sdi-page) .sdi-map-wires { height: var(--size-31); display: flex; justify-content: space-around; margin-inline: 12% }
:where(.sdi-page) .sdi-map-wires i { display: block; width: var(--size-1); background: var(--color-border-strong); position: relative }
:where(.sdi-page) .sdi-map-wires i:after { content: ''; position: absolute; top: 0; left: var(--length-px-negative-2); width: var(--size-5); height: var(--size-5); background: var(--color-accent); border-radius: 50%; animation: sdi-data-pulse 4s linear infinite }
:where(.sdi-page) .sdi-map-wires i:nth-child(2):after { animation-delay: 1.4s }
:where(.sdi-page) .sdi-map-wires i:nth-child(3):after { animation-delay: 2.8s }
:where(.sdi-page) .sdi-bottom-wires { margin-inline: 21% }
:where(.sdi-page) .sdi-connection-map .figure-note { text-align: center }
@keyframes sdi-data-pulse {
0% { transform: translateY(0); opacity: 0 }
15%,85% { opacity: 1 }
100% { transform: translateY(var(--size-27)); opacity: 0 }
}
:where(.sdi-page) .sdi-integration-nav { position: sticky; top: var(--header-height); z-index: 20; background: var(--color-illustration-f6f5eff2); border-block: var(--border-default); backdrop-filter: blur(var(--size-14)) }
:where(.sdi-page) .sdi-integration-nav > .container { display: flex; justify-content: space-between; align-items: center; gap: var(--size-25) }
:where(.sdi-page) .sdi-integration-nav > .container > span { font: var(--size-12) var(--font-family-mono); color: var(--color-primary) }
:where(.sdi-page) .sdi-integration-nav .container > div { display: flex; gap: var(--size-30); overflow: auto }
:where(.sdi-page) .sdi-integration-nav a { font-size: var(--size-12); padding: var(--size-19) 0; white-space: nowrap; border-bottom: var(--size-2) var(--border-style) transparent }
:where(.sdi-page) .sdi-integration-nav a[aria-current] { border-color: var(--color-accent); color: var(--color-accent) }
:where(.sdi-page) .sdi-speclist { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--size-30) var(--size-24); margin: var(--size-42) 0 0 }
:where(.sdi-page) .sdi-speclist li { border-top: var(--border-default); padding-top: var(--size-22); position: relative }
:where(.sdi-page) .sdi-speclist .sdi-ix { position: absolute; right: 0; top: var(--size-28); font: var(--size-11) var(--font-family-mono); color: var(--color-text-muted) }
:where(.sdi-page) .sdi-speclist .sdi-int-icon { margin-bottom: var(--size-18) }
:where(.sdi-page) .sdi-speclist p { font-size: var(--size-15); color: var(--color-text-muted); margin: 0 }
:where(.sdi-page) .sdi-speclist strong { display: block; font-size: var(--size-18); color: var(--color-heading); margin-bottom: var(--size-10) }
:where(.sdi-page) .sdi-speclist li:last-child { grid-column: span 2 }
:where(.sdi-page) .sdi-integration-player { background: var(--color-primary); border-radius: var(--size-18); padding: var(--size-32); color: var(--color-white); margin-top: var(--size-40) }
:where(.sdi-page) .sdi-player-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--size-30); margin-bottom: var(--size-25) }
:where(.sdi-page) .sdi-integration-player .eyebrow { color: var(--color-highlight) }
:where(.sdi-page) .sdi-player-heading h3 { color: var(--color-white); font: var(--size-30)/var(--line-height-1-2) var(--font-family-display); font-weight: var(--font-weight-regular); max-width: var(--size-650); margin: var(--size-13) 0 0 }
:where(.sdi-page) .sdi-player-controls { display: flex; flex-direction: column; align-items: flex-end; gap: var(--size-10); flex-shrink: 0 }
:where(.sdi-page) .sdi-player-count { font: var(--size-10) var(--font-family-mono); color: var(--color-surface-accent) }
:where(.sdi-page) .sdi-player-toggle { font: var(--size-12) var(--font-family-body); padding: var(--size-10) var(--size-14); border: var(--size-1) var(--border-style) var(--color-illustration-72998b); border-radius: var(--size-6); background: transparent; color: var(--color-white); cursor: pointer }
:where(.sdi-page) .sdi-player-tabs { display: flex; gap: var(--size-10); flex-wrap: wrap; margin-bottom: var(--size-22) }
:where(.sdi-page) .sdi-player-tabs button { background: var(--color-illustration-185043); border: var(--size-1) var(--border-style) var(--color-illustration-72998b); color: var(--color-white); font: var(--size-13) var(--font-family-body); padding: var(--size-13) var(--size-17); border-radius: var(--size-7); cursor: pointer }
:where(.sdi-page) .sdi-player-tabs small { font: var(--size-10) var(--font-family-mono); margin-right: var(--size-12) }
:where(.sdi-page) .sdi-player-tabs [aria-selected=true] { background: var(--color-highlight); color: var(--color-primary); border-color: var(--color-highlight) }
:where(.sdi-page) .sdi-player-progress { height: var(--size-3); background: var(--color-illustration-487769); border-radius: var(--size-4); overflow: hidden; margin-bottom: var(--size-25) }
:where(.sdi-page) .sdi-player-progress span { display: block; width: 0; height: 100%; background: var(--color-highlight) }
:where(.sdi-page) .sdi-scene-flow { list-style: none; margin: 0; padding: var(--size-26) var(--size-24); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--size-27); background: var(--color-surface); border-radius: var(--size-12) }
:where(.sdi-page) .sdi-scene-step { position: relative; padding: var(--size-20) var(--size-16); background: var(--color-surface-secondary); border-radius: var(--size-8); color: var(--color-primary); transition: background .3s,transform .3s }
:where(.sdi-page) .sdi-scene-step:not(:last-child):after { content: '→'; position: absolute; right: var(--length-px-negative-22); top: 46%; font-size: var(--size-17); color: var(--color-accent) }
:where(.sdi-page) .sdi-step-index { float: right; font: var(--size-10) var(--font-family-mono); color: var(--color-text-muted) }
:where(.sdi-page) .sdi-scene-step .sdi-int-icon { background: var(--color-surface); width: var(--size-36); height: var(--size-36); margin-bottom: var(--size-17) }
:where(.sdi-page) .sdi-scene-step svg { width: var(--size-21); height: var(--size-21) }
:where(.sdi-page) .sdi-scene-step strong { display: block; font-size: var(--size-16); line-height: var(--line-height-art-1-4); margin-bottom: var(--size-8) }
:where(.sdi-page) .sdi-scene-step > small { font: var(--size-11) var(--font-family-mono); color: var(--color-text-muted) }
:where(.sdi-page) .sdi-scene-step.is-active { background: var(--color-highlight); transform: translateY(var(--length-px-negative-3)) }
:where(.sdi-page) .sdi-scene-step.is-complete .sdi-int-icon { background: var(--color-primary); color: var(--color-highlight); border-color: var(--color-primary) }
:where(.sdi-page) .sdi-integration-player .sdi-scene-result { font-size: var(--size-15); line-height: var(--line-height-1-7); border: var(--size-1) var(--border-style) var(--color-illustration-72998b); border-radius: var(--size-7); padding: var(--size-16) var(--size-20); margin: var(--size-18) 0 }
:where(.sdi-page) .sdi-integration-player .sdi-player-note { font: var(--size-10)/var(--line-height-1-5) var(--font-family-mono); color: var(--color-on-primary-muted); margin: var(--size-20) 0 0 }
:where(.sdi-page) .sdi-scene { animation: sdi-scene-in .4s ease-out }
@keyframes sdi-scene-in {
from { opacity: .3; transform: translateY(var(--size-4)) }
to { opacity: 1; transform: none }
}
:where(.sdi-page) .sdi-connection-compare { display: grid; grid-template-columns: 1fr 1fr; border: var(--border-default); border-radius: var(--size-14); overflow: hidden; margin: var(--size-38) 0 }
:where(.sdi-page) .sdi-connection-compare > div { padding: var(--size-32); background: var(--color-surface) }
:where(.sdi-page) .sdi-connection-compare .sdi-connected-side { background: var(--color-surface-accent) }
:where(.sdi-page) .sdi-connection-compare h3 { font: var(--size-25)/var(--line-height-1-2) var(--font-family-display); font-weight: var(--font-weight-regular); margin: var(--size-16) 0 var(--size-25) }
:where(.sdi-page) .sdi-transfer-row { display: flex; align-items: center; gap: var(--size-10); justify-content: space-between; margin-bottom: var(--size-20) }
:where(.sdi-page) .sdi-transfer-row span { font-size: var(--size-12); border: var(--size-1) var(--border-style) var(--color-border); border-radius: var(--size-6); padding: var(--size-12); background: var(--color-surface); text-align: center }
:where(.sdi-page) .sdi-transfer-row b { color: var(--color-accent); font-weight: var(--font-weight-regular) }
:where(.sdi-page) .sdi-manual-side .sdi-transfer-row b { color: var(--color-text-muted) }
:where(.sdi-page) .sdi-connection-compare p { font-size: var(--size-12); color: var(--color-text-muted); margin: 0 }
:where(.sdi-page) .sdi-subhead { font-family: var(--font-family-mono); font-weight: var(--font-weight-medium); color: var(--color-primary); margin: var(--size-30) 0 var(--size-24) !important }
:where(.sdi-page) .sdi-symptoms { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 var(--size-28); margin: 0; padding: 0; list-style: none }
:where(.sdi-page) .sdi-symptoms li { display: flex; gap: var(--size-16); border-bottom: var(--border-default); padding: var(--size-23) 0; font-size: var(--size-15); line-height: var(--line-height-1-7) }
:where(.sdi-page) .sdi-symptoms .sdi-ix { font: var(--size-11) var(--font-family-mono); color: var(--color-accent); padding-top: var(--size-5) }
:where(.sdi-page) .sdi-cost-note { background: var(--color-surface-callout); border-left: var(--size-3) var(--border-style) var(--color-accent); padding: var(--size-25) var(--size-30); margin-top: var(--size-35) !important }
:where(.sdi-page) .sdi-resilience { margin: var(--size-35) 0 var(--size-40); display: grid; grid-template-columns: .75fr 1.25fr; gap: 6%; padding: var(--size-35); border-radius: var(--size-16); background: var(--color-surface-secondary); border: var(--border-default); align-items: center }
:where(.sdi-page) .sdi-resilience-copy h3 { font: var(--size-32)/var(--line-height-1-2) var(--font-family-display); font-weight: var(--font-weight-regular); margin: var(--size-18) 0 }
:where(.sdi-page) .sdi-resilience-copy p { font-size: var(--size-15) }
:where(.sdi-page) .sdi-resilience figcaption { font: var(--size-10) var(--font-family-mono); color: var(--color-text-muted) }
:where(.sdi-page) .sdi-tree-source { background: var(--color-primary); color: var(--color-white); border-radius: var(--size-8); padding: var(--size-17) var(--size-20); font-size: var(--size-14); text-align: center }
:where(.sdi-page) .sdi-tree-source span { color: var(--color-highlight); margin: 0 var(--size-20) }
:where(.sdi-page) .sdi-tree-branches { padding: var(--size-20) 0 0 var(--size-25); position: relative }
:where(.sdi-page) .sdi-tree-branches:before { content: ''; position: absolute; left: 0; top: 0; bottom: var(--size-45); border-left: var(--size-1) var(--border-style) var(--color-border-strong) }
:where(.sdi-page) .sdi-tree-branches > div { position: relative; padding: var(--size-15) var(--size-18); background: var(--color-surface); border: var(--border-default); border-radius: var(--size-7); margin-bottom: var(--size-10) }
:where(.sdi-page) .sdi-tree-branches > div:before { content: ''; position: absolute; left: var(--length-px-negative-26); top: 50%; width: var(--size-25); border-top: var(--size-1) var(--border-style) var(--color-border-strong) }
:where(.sdi-page) .sdi-branch-label { display: block; font: var(--size-10) var(--font-family-mono); color: var(--color-accent); margin-bottom: var(--size-5) }
:where(.sdi-page) .sdi-tree-branches b { font-size: var(--size-14); font-weight: var(--font-weight-bold) }
:where(.sdi-page) .sdi-tree-branches small { display: block; margin-top: var(--size-3); font-size: var(--size-12); color: var(--color-text-muted) }
:where(.sdi-page) .sdi-pillars { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--size-24) }
:where(.sdi-page) .sdi-pillar { padding: var(--size-27); border: var(--border-default); border-radius: var(--size-14); min-width: 0 }
:where(.sdi-page) .sdi-pillar .sdi-int-icon { display: flex; margin-bottom: var(--size-20) }
:where(.sdi-page) .sdi-pillar .sdi-k { display: block; font: var(--size-11)/var(--line-height-1-5) var(--font-family-mono); color: var(--color-accent); margin-bottom: var(--size-9) }
:where(.sdi-page) .sdi-pillar h3 { font-size: var(--size-18) }
:where(.sdi-page) .sdi-pillar p { font-size: var(--size-15); color: var(--color-text-muted) }
:where(.sdi-page) .sdi-outcomes-wrap { margin-top: var(--size-40); background: var(--color-primary); color: var(--color-white); border-radius: var(--size-14); padding: var(--size-32) }
:where(.sdi-page) .sdi-outcomes-wrap .sdi-subhead { color: var(--color-highlight); margin-top: 0 !important }
:where(.sdi-page) .sdi-check { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-20) var(--size-36); margin: 0 }
:where(.sdi-page) .sdi-check li { font-size: var(--size-15); line-height: var(--line-height-1-6); position: relative; padding-left: var(--size-26) }
:where(.sdi-page) .sdi-check li:before { content: '✓'; position: absolute; left: 0; color: var(--color-highlight) }
:where(.sdi-page) .sdi-compare { border: var(--border-default); border-radius: var(--size-14); overflow: hidden; width: 100%; border-collapse: separate; border-spacing: 0; background: var(--color-surface); font-size: var(--size-15); line-height: var(--line-height-1-7) }
:where(.sdi-page) .sdi-compare th { text-align: left; padding: var(--size-20) var(--size-24); vertical-align: top; border-bottom: var(--border-default) }
:where(.sdi-page) .sdi-compare td { text-align: left; padding: var(--size-20) var(--size-24); vertical-align: top; border-bottom: var(--border-default) }
:where(.sdi-page) .sdi-compare thead th { background: var(--color-surface-accent); font-size: var(--size-12); font-weight: var(--font-weight-medium) }
:where(.sdi-page) .sdi-compare thead th:last-child { background: var(--color-primary); color: var(--color-white) }
:where(.sdi-page) .sdi-compare td:last-child { background: var(--color-surface-secondary); color: var(--color-primary) }
:where(.sdi-page) .sdi-compare td:nth-child(2) { color: var(--color-text-muted) }
:where(.sdi-page) .sdi-compare tbody th { font-weight: var(--font-weight-medium); width: 23% }
:where(.sdi-page) .sdi-compare tr:last-child > * { border-bottom: 0 }
:where(.sdi-page) .sdi-featured { display: grid; grid-template-columns: 1.1fr .9fr; gap: 7%; padding: var(--size-38); border-radius: var(--size-16); border: var(--border-default); background: var(--color-surface-secondary); align-items: center }
:where(.sdi-page) .sdi-featured h3 { font: var(--size-30)/var(--line-height-1-2) var(--font-family-display); font-weight: var(--font-weight-regular); margin: var(--size-18) 0 }
:where(.sdi-page) .sdi-tags { display: flex; flex-wrap: wrap; gap: var(--size-8) }
:where(.sdi-page) .sdi-tag { font: var(--size-10) var(--font-family-mono); border: var(--border-default); padding: var(--size-7) var(--size-10); border-radius: var(--size-20); background: var(--color-surface) }
:where(.sdi-page) .sdi-featured-map { text-align: center }
:where(.sdi-page) .sdi-product-hub { background: var(--color-primary); color: var(--color-white); border-radius: var(--size-10); padding: var(--size-20); font: var(--size-28) var(--font-family-display); margin: var(--size-20) 0 var(--size-32) }
:where(.sdi-page) .sdi-product-spokes { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--size-12); position: relative }
:where(.sdi-page) .sdi-product-spokes:before { content: ''; position: absolute; left: 12%; right: 12%; height: var(--size-20); top: var(--length-px-negative-21); border: var(--size-1) var(--border-style) var(--color-border-strong); border-bottom: 0 }
:where(.sdi-page) .sdi-product-spokes > span { display: flex; flex-direction: column; align-items: center; gap: var(--size-10); font-size: var(--size-11) }
:where(.sdi-page) .sdi-product-spokes .sdi-int-icon { background: var(--color-surface) }
:where(.sdi-page) .sdi-featured-map > small { display: block; font: var(--size-10) var(--font-family-mono); margin-top: var(--size-25); color: var(--color-text-muted) }
:where(.sdi-page) .sdi-scenarios { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-24) }
:where(.sdi-page) .sdi-scenario { padding: var(--size-30); border: var(--border-default); border-radius: var(--size-14) }
:where(.sdi-page) .sdi-scenario > h3 { font: var(--size-27)/var(--line-height-1-25) var(--font-family-display); font-weight: var(--font-weight-regular); margin-bottom: var(--size-25) }
:where(.sdi-page) .sdi-case-flow { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--size-25); background: var(--color-surface-secondary); padding: var(--size-20) var(--size-15); border-radius: var(--size-8); margin-bottom: var(--size-25) }
:where(.sdi-page) .sdi-case-flow > div { position: relative; display: flex; align-items: center; flex-direction: column; gap: var(--size-10); font-size: var(--size-11); text-align: center }
:where(.sdi-page) .sdi-case-flow > div:not(:last-child):after { content: '↔'; position: absolute; right: var(--length-px-negative-20); top: var(--size-16); font-size: var(--size-15); color: var(--color-accent) }
:where(.sdi-page) .sdi-case-flow .sdi-int-icon { background: var(--color-surface) }
:where(.sdi-page) .sdi-scenario dl { margin: 0 }
:where(.sdi-page) .sdi-scenario dl > div { margin-top: var(--size-20) }
:where(.sdi-page) .sdi-scenario dt { font: var(--size-10) var(--font-family-mono); text-transform: uppercase; letter-spacing: var(--letter-spacing-08em); color: var(--color-accent); margin-bottom: var(--size-8) }
:where(.sdi-page) .sdi-scenario dd { margin: 0; font-size: var(--size-15); line-height: var(--line-height-relaxed); color: var(--color-text-muted) }
:where(.sdi-page) .sdi-scenario dl > div:last-child { border-top: var(--border-default); padding-top: var(--size-20) }
:where(.sdi-page) .sdi-scenario dl > div:last-child dd { color: var(--color-primary) }
:where(.sdi-page) .sdi-scope { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-24) }
:where(.sdi-page) .sdi-scope__group { padding: var(--size-32); background: var(--color-surface); border: var(--border-default); border-radius: var(--size-14) }
:where(.sdi-page) .sdi-scope__head { display: flex; align-items: center; gap: var(--size-18); margin-bottom: var(--size-22); position: relative; padding-right: var(--size-25) }
:where(.sdi-page) .sdi-scope__head h3 { margin: 0; font-size: var(--size-21) }
:where(.sdi-page) .sdi-scope__letter { position: absolute; right: 0; top: 0; font: var(--size-11) var(--font-family-mono); color: var(--color-accent) }
:where(.sdi-page) .sdi-scope__group > p { color: var(--color-text-muted) }
:where(.sdi-page) .sdi-scope__group ul { padding: var(--size-18) 0 0; list-style: none; border-top: var(--border-default); margin: var(--size-22) 0 0 }
:where(.sdi-page) .sdi-scope__group li { font-size: var(--size-14); line-height: var(--line-height-1-7); padding: var(--size-8) 0 var(--size-8) var(--size-22); position: relative }
:where(.sdi-page) .sdi-scope__group li:before { content: '✓'; position: absolute; left: 0; color: var(--color-accent) }
:where(.sdi-page) .sdi-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-50); margin-top: var(--size-25) }
:where(.sdi-page) .sdi-deliverables { padding: 0; list-style: none; margin: 0; counter-reset: deliverable }
:where(.sdi-page) .sdi-deliverables li { font-size: var(--size-14); border-bottom: var(--border-default); padding: var(--size-13) 0 var(--size-13) var(--size-35); position: relative; counter-increment: deliverable; line-height: var(--line-height-body) }
:where(.sdi-page) .sdi-deliverables li:before { content: counter(deliverable,decimal-leading-zero); position: absolute; left: 0; top: var(--size-16); font: var(--size-10) var(--font-family-mono); color: var(--color-accent) }
:where(.sdi-page) .sdi-methods { display: flex; flex-wrap: wrap; gap: var(--size-9); list-style: none; padding: 0; margin: var(--size-25) 0 }
:where(.sdi-page) .sdi-methods li { font: var(--size-11)/var(--line-height-1-5) var(--font-family-mono); background: var(--color-surface); border: var(--border-default); border-radius: var(--size-20); padding: var(--size-9) var(--size-13) }
:where(.sdi-page) .sdi-methods-note { font-size: var(--size-14) !important; color: var(--color-text-muted) }
:where(.sdi-page) .sdi-method-graphics { display: grid; gap: var(--size-14) }
:where(.sdi-page) .sdi-method-graphics > div { border: var(--border-default); border-radius: var(--size-8); padding: var(--size-18); background: var(--color-surface) }
:where(.sdi-page) .sdi-method-graphics h4 { font: var(--font-weight-medium) var(--size-14) var(--font-family-body); margin: 0 0 var(--size-13); color: var(--color-primary) }
:where(.sdi-page) .sdi-method-graphics p { font-size: var(--size-11); margin: var(--size-10) 0 0; color: var(--color-text-muted) }
:where(.sdi-page) .sdi-signal { display: flex; align-items: center; height: var(--size-24); gap: var(--size-8); border-bottom: var(--size-1) var(--border-style) var(--color-border) }
:where(.sdi-page) .sdi-signal i { height: var(--size-6); flex: 1; border-radius: var(--size-2); background: var(--color-border-strong) }
:where(.sdi-page) .sdi-signal.sdi-realtime i:nth-child(3n+1) { background: var(--color-primary); height: var(--size-22); width: var(--size-4); flex: .25 }
:where(.sdi-page) .sdi-signal.sdi-batch i { height: var(--size-20); background: var(--color-surface-accent) }
:where(.sdi-page) .sdi-signal.sdi-batch i:nth-child(3n) { background: var(--color-accent); margin-right: var(--size-10) }
:where(.sdi-page) .sdi-signal.sdi-queue i { height: var(--size-14); border: var(--size-1) var(--border-style) var(--color-accent); background: var(--color-surface-secondary) }
:where(.sdi-page) .sdi-signal.sdi-queue i:first-child { background: var(--color-primary) }
:where(.sdi-page) .sdi-process { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-24) }
:where(.sdi-page) .sdi-step { display: grid; grid-template-columns: var(--size-48) 1fr; gap: var(--size-22); padding: var(--size-28); border: var(--border-default); border-radius: var(--size-14); background: var(--color-background) }
:where(.sdi-page) .sdi-step > .sdi-no { display: grid; place-items: center; width: var(--size-48); height: var(--size-48); background: var(--color-primary); color: var(--color-highlight); border-radius: 50%; font: var(--size-12) var(--font-family-mono) }
:where(.sdi-page) .sdi-step p { font-size: var(--size-16); color: var(--color-text-muted); margin: 0 }
:where(.sdi-page) .sdi-step h3 { font-size: var(--size-19) }
:where(.sdi-page) .sdi-why { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--size-30); margin-top: var(--size-25) }
:where(.sdi-page) .sdi-why__item { border-top: var(--border-default); padding-top: var(--size-25) }
:where(.sdi-page) .sdi-why__item .sdi-int-icon { margin-bottom: var(--size-20) }
:where(.sdi-page) .sdi-why__item p { font-size: var(--size-15); color: var(--color-text-muted) }
:where(.sdi-page) .sdi-why__item:last-child { grid-column: span 2 }
:where(.sdi-page) .sdi-why__item h3 { font-size: var(--size-18) }
:where(.sdi-page) .sdi-cta { max-width: var(--size-940) }
:where(.sdi-page) .sdi-cta__note { font-size: var(--size-13) !important; color: var(--color-text-muted) }
:where(.sdi-page) #sss > .container { display: grid; grid-template-columns: .7fr 1.3fr; gap: 8% }
:where(.sdi-page) #sss .sdi-head { position: sticky; top: var(--size-170); align-self: start }
:where(.sdi-page) .sdi-faq-topics { display: grid; margin-top: var(--size-30) }
:where(.sdi-page) .sdi-faq-topics a { display: flex; justify-content: space-between; gap: var(--size-12); border-bottom: var(--border-default); padding: var(--size-14) 0; font-size: var(--size-13) }
:where(.sdi-page) .sdi-faq-topics span { color: var(--color-accent) }
:where(.sdi-page) .sdi-faq__group { scroll-margin-top: var(--size-170); margin-bottom: var(--size-35) }
:where(.sdi-page) .sdi-faq__group > h3 { font: var(--size-12) var(--font-family-mono); color: var(--color-accent); text-transform: uppercase; letter-spacing: var(--letter-spacing-05em); margin-bottom: var(--size-10) }
:where(.sdi-page) .sdi-qa { border-bottom: var(--border-default) }
:where(.sdi-page) .sdi-qa summary { display: flex; align-items: center; justify-content: space-between; gap: var(--size-22); list-style: none; cursor: pointer; font-size: var(--size-16); font-weight: var(--font-weight-medium); line-height: var(--line-height-label); padding: var(--size-22) 0; color: var(--color-heading) }
:where(.sdi-page) .sdi-qa summary::-webkit-details-marker { display: none }
:where(.sdi-page) .sdi-qa summary:after { content: '+'; font-size: var(--size-22); color: var(--color-accent); flex-shrink: 0 }
:where(.sdi-page) .sdi-qa[open] summary:after { content: '−' }
:where(.sdi-page) .sdi-qa__a { padding: 0 var(--size-24) var(--size-22) 0; color: var(--color-text-muted) }
:where(.sdi-page) .sdi-qa__a p { font-size: var(--size-15) }
:where(.sdi-page) .sdi-band { padding: var(--size-85) 0 }
:where(.sdi-page) .sdi-band h2 { color: var(--color-white); max-width: var(--size-800); font-size: var(--font-size-closing) }
:where(.sdi-page) .sdi-band .lead { max-width: var(--size-880); font-size: var(--size-17) }
:where(.sdi-page) .sdi-band__note { font-size: var(--size-13) !important; max-width: var(--size-800) }
:where(.sdi-page) [hidden] { display: none !important }
:where(.sdi-page) button:focus-visible { outline: var(--size-3) var(--border-style) var(--color-highlight); outline-offset: var(--size-4) }
@media(max-width:1100px) {
:where(.sdi-page) .sdi-pillars { grid-template-columns: repeat(2,1fr) }
:where(.sdi-page) .sdi-hero__grid { gap: 4% }
:where(.sdi-page) .sdi-connection-map { padding: var(--size-22) }
:where(.sdi-page) .sdi-map-top { gap: var(--size-9) }
:where(.sdi-page) .sdi-speclist { grid-template-columns: repeat(3,1fr) }
:where(.sdi-page) .sdi-speclist li:last-child { grid-column: auto }
:where(.sdi-page) .sdi-connection-compare > div { padding: var(--size-25) }
:where(.sdi-page) .sdi-transfer-row { gap: var(--size-6) }
:where(.sdi-page) .sdi-transfer-row span { padding: var(--size-10) var(--size-8); font-size: var(--size-11) }
:where(.sdi-page) .sdi-featured { padding: var(--size-30); gap: 5% }
:where(.sdi-page) .sdi-scene-step strong { font-size: var(--size-14) }
:where(.sdi-page) .sdi-scene-flow { gap: var(--size-23) }
:where(.sdi-page) .sdi-why { grid-template-columns: repeat(2,1fr) }
}
@media(max-width:800px) {
:where(.sdi-page) .sdi-section { padding: var(--size-70) 0 }
:where(.sdi-page) .sdi-hero__grid { grid-template-columns: 1fr }
:where(.sdi-page) .sdi-hero { padding: var(--size-45) 0 }
:where(.sdi-page) .sdi-connection-map { margin: var(--size-35) 0 0; max-width: var(--size-440); padding: var(--size-28) }
:where(.sdi-page) .sdi-integration-nav > .container > span { display: none }
:where(.sdi-page) .sdi-integration-nav .container > div { width: 100%; justify-content: space-between; gap: var(--size-20) }
:where(.sdi-page) .sdi-hero__lead p { max-width: var(--size-670) }
:where(.sdi-page) .sdi-speclist { grid-template-columns: repeat(2,1fr) }
:where(.sdi-page) .sdi-speclist li:last-child { grid-column: span 2 }
:where(.sdi-page) .sdi-connection-compare { grid-template-columns: 1fr }
:where(.sdi-page) .sdi-symptoms { grid-template-columns: 1fr 1fr }
:where(.sdi-page) .sdi-resilience { grid-template-columns: 1fr; gap: var(--size-30) }
:where(.sdi-page) .sdi-resilience-copy h3 br { display: none }
:where(.sdi-page) .sdi-featured { grid-template-columns: 1fr; gap: var(--size-35) }
:where(.sdi-page) .sdi-featured-map { max-width: var(--size-460); width: 100%; margin: auto }
:where(.sdi-page) .sdi-scenarios { grid-template-columns: 1fr }
:where(.sdi-page) .sdi-scope { grid-template-columns: 1fr }
:where(.sdi-page) .sdi-two { grid-template-columns: 1fr }
:where(.sdi-page) .sdi-process { grid-template-columns: 1fr }
:where(.sdi-page) .sdi-two { gap: var(--size-20) }
:where(.sdi-page) .sdi-check { grid-template-columns: 1fr }
:where(.sdi-page) .sdi-player-heading { align-items: flex-start }
:where(.sdi-page) .sdi-player-heading h3 { font-size: var(--size-27) }
:where(.sdi-page) .sdi-scene-flow { grid-template-columns: repeat(2,1fr) }
:where(.sdi-page) .sdi-scene-step:nth-child(2):after { display: none }
:where(.sdi-page) .sdi-scene-step strong { font-size: var(--size-16) }
:where(.sdi-page) .sdi-scene-step small { font-size: var(--size-11) }
:where(.sdi-page) #sss > .container { grid-template-columns: 1fr; gap: var(--size-15) }
:where(.sdi-page) #sss .sdi-head { position: static }
:where(.sdi-page) .sdi-faq-topics { display: flex; flex-wrap: wrap; gap: var(--size-10) }
:where(.sdi-page) .sdi-faq-topics a { border: var(--border-default); border-radius: var(--size-20); font-size: var(--size-11); padding: var(--size-9) var(--size-12) }
:where(.sdi-page) .sdi-faq-topics span { display: none }
:where(.sdi-page) .sdi-compare td { padding: var(--size-16) }
:where(.sdi-page) .sdi-compare th { padding: var(--size-16) }
}
@media(max-width:520px) {
:where(.sdi-page) .sdi-section { padding: var(--size-58) 0 }
:where(.sdi-page) h1 { font-size: var(--size-44) }
:where(.sdi-page) h2 { font-size: var(--size-34) }
:where(.sdi-page) .sdi-head { margin-bottom: var(--size-30) }
:where(.sdi-page) p { font-size: var(--size-16) }
:where(.sdi-page) .sdi-hero__lead p { font-size: var(--size-16) }
:where(.sdi-page) .sdi-hero__note { font-size: var(--size-12) !important }
:where(.sdi-page) .sdi-hero__actions { gap: var(--size-20) }
:where(.sdi-page) .sdi-hero__meta { font-size: var(--size-10) }
:where(.sdi-page) .sdi-connection-map { padding: var(--size-24) var(--size-20); box-shadow: var(--size-5) var(--size-5) 0 var(--color-surface-accent) }
:where(.sdi-page) .sdi-connection-map figcaption { font-size: var(--size-9) }
:where(.sdi-page) .sdi-map-node { padding: var(--size-12) var(--size-6) }
:where(.sdi-page) .sdi-map-node b { font-size: var(--size-11) }
:where(.sdi-page) .sdi-map-hub b { font-size: var(--size-24) }
:where(.sdi-page) .sdi-map-hub small { font-size: var(--size-8) }
:where(.sdi-page) .sdi-map-bottom { margin-inline: var(--size-12); gap: var(--size-35) }
:where(.sdi-page) .sdi-integration-nav .container > div { justify-content: flex-start; gap: var(--size-23) }
:where(.sdi-page) .sdi-integration-nav a { font-size: var(--size-11) }
:where(.sdi-page) .sdi-speclist { gap: var(--size-25) var(--size-20) }
:where(.sdi-page) .sdi-speclist strong { font-size: var(--size-17) }
:where(.sdi-page) .sdi-speclist p { font-size: var(--size-14) }
:where(.sdi-page) .sdi-integration-player { padding: var(--size-25) var(--size-18) }
:where(.sdi-page) .sdi-player-heading { display: block }
:where(.sdi-page) .sdi-player-heading h3 { font-size: var(--size-28) }
:where(.sdi-page) .sdi-player-controls { flex-direction: row; justify-content: space-between; align-items: center; margin-top: var(--size-24) }
:where(.sdi-page) .sdi-player-tabs { gap: var(--size-8) }
:where(.sdi-page) .sdi-player-tabs button { font-size: var(--size-11); padding: var(--size-11) var(--size-10) }
:where(.sdi-page) .sdi-player-tabs small { margin-right: var(--size-6); font-size: var(--size-9) }
:where(.sdi-page) .sdi-scene-flow { padding: var(--size-18) var(--size-12); gap: var(--size-18) }
:where(.sdi-page) .sdi-scene-step { padding: var(--size-15) var(--size-10) }
:where(.sdi-page) .sdi-scene-step:not(:last-child):after { right: var(--length-px-negative-16); font-size: var(--size-14) }
:where(.sdi-page) .sdi-scene-step strong { font-size: var(--size-14) }
:where(.sdi-page) .sdi-scene-step > small { font-size: var(--size-10) }
:where(.sdi-page) .sdi-scene-step .sdi-int-icon { width: var(--size-32); height: var(--size-32) }
:where(.sdi-page) .sdi-integration-player .sdi-scene-result { font-size: var(--size-14); padding: var(--size-15) }
:where(.sdi-page) .sdi-integration-player .sdi-player-note { font-size: var(--size-9) }
:where(.sdi-page) .sdi-symptoms { grid-template-columns: 1fr }
:where(.sdi-page) .sdi-symptoms li { padding: var(--size-18) 0 }
:where(.sdi-page) .sdi-connection-compare > div { padding: var(--size-25) var(--size-20) }
:where(.sdi-page) .sdi-connection-compare h3 { font-size: var(--size-25) }
:where(.sdi-page) .sdi-transfer-row span { font-size: var(--size-10); padding: var(--size-11) var(--size-7) }
:where(.sdi-page) .sdi-connection-compare p { font-size: var(--size-11) }
:where(.sdi-page) .sdi-cost-note { padding: var(--size-22) }
:where(.sdi-page) .sdi-resilience { padding: var(--size-25) var(--size-20) }
:where(.sdi-page) .sdi-resilience-copy h3 { font-size: var(--size-29) }
:where(.sdi-page) .sdi-tree-source { font-size: var(--size-12) }
:where(.sdi-page) .sdi-tree-source span { margin: 0 var(--size-13) }
:where(.sdi-page) .sdi-tree-branches b { font-size: var(--size-13) }
:where(.sdi-page) .sdi-pillars { grid-template-columns: 1fr }
:where(.sdi-page) .sdi-pillar { padding: var(--size-26) }
:where(.sdi-page) .sdi-pillar p { font-size: var(--size-16) }
:where(.sdi-page) .sdi-outcomes-wrap { padding: var(--size-26) var(--size-22) }
:where(.sdi-page) .sdi-check li { font-size: var(--size-14) }
:where(.sdi-page) .sdi-compare { display: block; width: 100% }
:where(.sdi-page) .sdi-compare tbody { display: block; width: 100% }
:where(.sdi-page) .sdi-compare tr { display: block; width: 100% }
:where(.sdi-page) .sdi-compare tbody th { display: block; width: 100% }
:where(.sdi-page) .sdi-compare td { display: block; width: 100% }
:where(.sdi-page) .sdi-compare thead { display: none }
:where(.sdi-page) .sdi-compare tbody th { background: var(--color-surface-accent); padding: var(--size-14) var(--size-18) }
:where(.sdi-page) .sdi-compare td { font-size: var(--size-14); padding: var(--size-17) var(--size-18) }
:where(.sdi-page) .sdi-compare td:before { content: attr(data-label); display: block; font: var(--size-10) var(--font-family-mono); color: var(--color-accent); margin-bottom: var(--size-8) }
:where(.sdi-page) .sdi-compare tr:last-child > * { border-bottom: var(--border-default) }
:where(.sdi-page) .sdi-featured { padding: var(--size-26) }
:where(.sdi-page) .sdi-featured h3 { font-size: var(--size-27) }
:where(.sdi-page) .sdi-product-spokes { gap: var(--size-7) }
:where(.sdi-page) .sdi-product-spokes .sdi-int-icon { width: var(--size-37); height: var(--size-37) }
:where(.sdi-page) .sdi-product-spokes > span { font-size: var(--size-10) }
:where(.sdi-page) .sdi-scenario { padding: var(--size-26) var(--size-22) }
:where(.sdi-page) .sdi-scenario > h3 { font-size: var(--size-26) }
:where(.sdi-page) .sdi-scenario dd { font-size: var(--size-15) }
:where(.sdi-page) .sdi-case-flow { gap: var(--size-15); padding: var(--size-20) var(--size-10) }
:where(.sdi-page) .sdi-case-flow > div { font-size: var(--size-10) }
:where(.sdi-page) .sdi-case-flow > div:not(:last-child):after { right: var(--length-px-negative-14) }
:where(.sdi-page) .sdi-scope__group { padding: var(--size-26) var(--size-22) }
:where(.sdi-page) .sdi-scope__head h3 { font-size: var(--size-19) }
:where(.sdi-page) .sdi-scope__head { gap: var(--size-14) }
:where(.sdi-page) .sdi-scope__group li { font-size: var(--size-14) }
:where(.sdi-page) .sdi-step { grid-template-columns: var(--size-39) 1fr; gap: var(--size-15); padding: var(--size-24) var(--size-18) }
:where(.sdi-page) .sdi-step > .sdi-no { width: var(--size-39); height: var(--size-39); font-size: var(--size-11) }
:where(.sdi-page) .sdi-step h3 { font-size: var(--size-18) }
:where(.sdi-page) .sdi-step p { font-size: var(--size-15) }
:where(.sdi-page) .sdi-why { gap: var(--size-25) var(--size-20) }
:where(.sdi-page) .sdi-why__item h3 { font-size: var(--size-17) }
:where(.sdi-page) .sdi-why__item p { font-size: var(--size-14) }
:where(.sdi-page) .sdi-qa summary { font-size: var(--size-15) }
:where(.sdi-page) .sdi-band { padding: var(--size-65) 0 }
:where(.sdi-page) .sdi-band h2 { font-size: var(--size-38) }
:where(.sdi-page) .sdi-band .lead { font-size: var(--size-16) }
}
@media(prefers-reduced-motion:reduce) {
:where(.sdi-page) .sdi-map-wires i:after { animation: none }
:where(.sdi-page) .sdi-scene { animation: none }
:where(.sdi-page) .sdi-scene-step { transition: none; transform: none !important }
}
@media print {
:where(.sdi-page) .sdi-integration-nav { display: none }
:where(.sdi-page) .site-header { display: none }
:where(.sdi-page) .sdi-player-controls { display: none }
:where(.sdi-page) .sdi-player-tabs { display: none }
:where(.sdi-page) .sdi-player-progress { display: none }
:where(.sdi-page) .sdi-section { padding: var(--size-25) 0 }
:where(.sdi-page) .container { width: 100% }
:where(.sdi-page) .sdi-scene[hidden] { display: block !important }
:where(.sdi-page) .sdi-qa__a { display: block !important }
:where(.sdi-page) .sdi-step { break-inside: avoid }
:where(.sdi-page) .sdi-pillar { break-inside: avoid }
:where(.sdi-page) .sdi-scope__group { break-inside: avoid }
}
:where(.sdi-page) .feature-grid { border: none; overflow: visible; }