/* PAGE-SPECIFIC ILLUSTRATIONS ONLY. Shared UI lives in the CSS files. */
:where(.sdp-page) .sdp-website-service .sdp-hero-visual { min-width: 0; position: relative; height: var(--size-610); display: grid; place-items: center; }
:where(.sdp-page) .sdp-website-service .sdp-hero-visual::before { content: ""; position: absolute; width: 104%; aspect-ratio: 1; border-radius: var(--radius-circle); background: var(--gradient-glow); z-index: var(--z-base); opacity: .8; }
:where(.sdp-page) .sdp-website-service .sdp-orbit { position: absolute; width: 92%; aspect-ratio: 1; border: var(--size-1) var(--border-style) var(--color-border); border-radius: var(--radius-circle); }
:where(.sdp-page) .sdp-website-service .sdp-orbit--inner { width: 70%; border-style: dashed; opacity: .7; }
:where(.sdp-page) .sdp-website-service .sdp-visual-caption { position: absolute; top: var(--size-5); left: 8%; font: var(--size-10) var(--font-family-mono); letter-spacing: var(--tracking-art--12); color: var(--color-text-muted); }
:where(.sdp-page) .sdp-website-service .sdp-visual-caption::before { content: ""; display: inline-block; width: var(--size-6); height: var(--size-6); border-radius: var(--radius-circle); background: var(--color-accent); margin-right: var(--size-8); }
:where(.sdp-page) .sdp-website-service .sdp-hero-browser { position: relative; width: 94%; border: var(--size-1) var(--border-style) var(--color-border); border-radius: var(--size-12); background: var(--color-surface); box-shadow: var(--shadow-raised); transform: perspective(var(--size-1000)) rotateY(-5deg); z-index: var(--z-illustration); }
:where(.sdp-page) .sdp-website-service .sdp-preview-nav { display: flex; align-items: center; justify-content: space-between; padding: var(--size-18) var(--size-22); border-bottom: var(--size-1) var(--border-style) var(--color-border); }
:where(.sdp-page) .sdp-website-service .sdp-preview-nav b { font-family: var(--font-family-display); font-size: var(--size-19); letter-spacing: var(--tracking-art-n-05); font-weight: var(--font-weight-medium); }
:where(.sdp-page) .sdp-website-service .sdp-skeleton-nav { display: flex; gap: var(--size-12); }
:where(.sdp-page) .sdp-website-service .sdp-skeleton-nav i { width: var(--size-25); height: var(--size-3); background: var(--color-surface-accent); }
:where(.sdp-page) .sdp-website-service .sdp-preview-layout { display: grid; grid-template-columns: 1.1fr .9fr; min-height: var(--size-270); }
:where(.sdp-page) .sdp-website-service .sdp-preview-copy { padding: var(--size-34) var(--size-8) var(--size-26) var(--size-27); position: relative; z-index: var(--z-content); }
:where(.sdp-page) .sdp-website-service .sdp-preview-copy .sdp-tiny { font: var(--size-9) var(--font-family-mono); color: var(--color-accent); letter-spacing: var(--tracking-art--07); }
:where(.sdp-page) .sdp-website-service .sdp-preview-copy strong { display: block; font: var(--font-weight-regular) var(--size-32)/var(--line-height-art-1-03) var(--font-family-display); letter-spacing: var(--tracking-art-n-035); margin: var(--size-16) 0; }
:where(.sdp-page) .sdp-website-service .sdp-preview-copy>p { font-size: var(--size-10); line-height: var(--line-height-art-1-55); max-width: var(--size-170); }
:where(.sdp-page) .sdp-website-service .sdp-faux-button { display: inline-flex; align-items: center; gap: var(--size-14); padding: var(--size-10) var(--size-12); border-radius: var(--size-3); background: var(--color-primary); color: var(--color-surface); font-size: var(--size-10); line-height: var(--line-height-art-1-3); margin-top: var(--size-18); }
:where(.sdp-page) .sdp-website-service .sdp-faux-button .icon { width: var(--size-12); height: var(--size-12); }
:where(.sdp-page) .sdp-website-service .sdp-architecture { overflow: hidden; position: relative; background: var(--color-surface-accent); margin: var(--size-20) var(--size-19) var(--size-20) 0; border-radius: var(--size-80) var(--size-80) var(--size-4) var(--size-4); min-width: 0; }
:where(.sdp-page) .sdp-website-service .sdp-architecture::before { content: ""; position: absolute; inset: var(--size-23) var(--size-23) calc(-1 * var(--size-1)); border: var(--size-1) var(--border-style) var(--color-border-strong); border-radius: var(--size-65) var(--size-65) 0 0; background: var(--gradient-accent); }
:where(.sdp-page) .sdp-website-service .sdp-architecture::after { content: ""; position: absolute; width: 100%; height: var(--size-150); left: 35%; bottom: calc(-1 * var(--size-50)); background: var(--color-accent); border-radius: var(--border-radius-70-0-0-0); transform: rotate(-12deg); }
:where(.sdp-page) .sdp-website-service .sdp-architecture i { position: absolute; bottom: var(--size-19); left: var(--size-14); width: var(--size-50); height: var(--size-70); border-radius: var(--size-40) var(--size-40) 0 0; background: var(--color-diagram-muted); z-index: var(--z-content); box-shadow: var(--shadow-md); }
:where(.sdp-page) .sdp-website-service .sdp-preview-base { display: flex; justify-content: space-between; padding: var(--size-16) var(--size-24); background: var(--color-primary); color: var(--color-on-primary-muted); border-radius: 0 0 var(--size-11) var(--size-11); font: var(--size-9) var(--font-family-mono); }
:where(.sdp-page) .sdp-website-service .sdp-floating-card { position: absolute; display: flex; align-items: center; gap: var(--size-13); background: var(--color-surface); border: var(--size-1) var(--border-style) var(--color-border); padding: var(--size-14) var(--size-16); border-radius: var(--size-9); box-shadow: var(--shadow-lg); z-index: var(--z-floating); font-size: var(--size-12); line-height: var(--line-height-art-1-4); }
:where(.sdp-page) .sdp-website-service .sdp-floating-card .icon { color: var(--color-accent); width: var(--size-23); height: var(--size-23); }
:where(.sdp-page) .sdp-website-service .sdp-floating-card strong { font-weight: var(--font-weight-semibold); display: block; }
:where(.sdp-page) .sdp-website-service .sdp-floating-card small { color: var(--color-text-muted); font-size: var(--size-10); }
:where(.sdp-page) .sdp-website-service .sdp-float-brand { left: 0; top: var(--size-78); transform: rotate(-4deg); }
:where(.sdp-page) .sdp-website-service .sdp-float-search { right: -3%; top: var(--size-118); transform: rotate(5deg); }
:where(.sdp-page) .sdp-website-service .sdp-float-flow { right: 0; bottom: var(--size-41); background: var(--color-primary); color: var(--color-on-primary-muted); padding: var(--size-18) var(--size-21); }
:where(.sdp-page) .sdp-website-service .sdp-float-flow .icon { color: var(--color-highlight); }
:where(.sdp-page) .sdp-website-service .sdp-float-flow small { color: var(--color-on-primary-muted); }
:where(.sdp-page) .sdp-website-service .sdp-phone-preview { position: absolute; bottom: var(--size-9); left: 10%; width: var(--size-111); height: var(--size-191); background: var(--color-surface); border: var(--size-5) var(--border-style) var(--color-primary); border-radius: var(--size-19); z-index: var(--z-overlay); box-shadow: var(--shadow-md); transform: rotate(-5deg); padding: var(--size-20) var(--size-12) var(--size-10); }
:where(.sdp-page) .sdp-website-service .sdp-phone-preview::before { content: ""; position: absolute; top: var(--size-4); left: 36%; width: 29%; height: var(--size-4); background: var(--color-primary); border-radius: var(--size-5); }
:where(.sdp-page) .sdp-website-service .sdp-phone-preview strong { display: block; font: var(--font-weight-medium) var(--size-18)/var(--line-height-art-1-1) var(--font-family-display); color: var(--color-primary); }
:where(.sdp-page) .sdp-website-service .sdp-phone-preview .sdp-phone-image { height: var(--size-57); background: var(--color-surface-accent); margin: var(--size-10) 0; border-radius: var(--size-25) var(--size-25) var(--size-3) var(--size-3); position: relative; overflow: hidden; }
:where(.sdp-page) .sdp-website-service .sdp-phone-image::after { content: ""; position: absolute; width: var(--size-45); height: var(--size-70); background: var(--color-accent); left: var(--size-35); top: var(--size-16); transform: rotate(28deg); }
:where(.sdp-page) .sdp-website-service .sdp-phone-line { height: var(--size-3); background: var(--color-diagram-muted); width: 75%; margin: var(--size-5) 0; }
:where(.sdp-page) .sdp-website-service .sdp-phone-cta { height: var(--size-12); width: var(--size-54); background: var(--color-accent); border-radius: var(--size-2); margin-top: var(--size-8); }
:where(.sdp-page) .sdp-website-service .sdp-mini-visual { height: var(--size-170); position: relative; display: grid; place-items: center; background: var(--color-surface-accent); border: var(--size-1) var(--border-style) var(--color-border); border-radius: var(--size-12); overflow: hidden; }
:where(.sdp-page) .sdp-website-service .sdp-mini-window { width: var(--size-150); height: var(--size-102); background: var(--color-surface); border: var(--size-1) var(--border-style) var(--color-border); border-radius: var(--size-6); padding: var(--size-14); box-shadow: var(--shadow-offset); }
:where(.sdp-page) .sdp-website-service .sdp-mini-window::before { content: ""; display: block; width: 50%; height: var(--size-6); background: var(--color-diagram-muted); margin-bottom: var(--size-14); border-radius: var(--size-3); }
:where(.sdp-page) .sdp-website-service .sdp-mini-window .sdp-line { height: var(--size-4); background: var(--color-surface-accent); margin: var(--size-7) 0; }
:where(.sdp-page) .sdp-website-service .sdp-mini-window .sdp-line:last-child { width: 60%; }
:where(.sdp-page) .sdp-website-service .sdp-mini-seal { position: absolute; bottom: var(--size-31); right: calc(50% - var(--size-98)); width: var(--size-47); height: var(--size-47); display: grid; place-items: center; border-radius: var(--radius-circle); background: var(--color-primary); color: var(--color-on-primary-muted); border: var(--size-4) var(--border-style) var(--color-border); }
:where(.sdp-page) .sdp-website-service .sdp-type-card { display: flex; align-items: center; gap: var(--size-16); background: var(--color-surface); padding: var(--size-15) var(--size-18); border: var(--size-1) var(--border-style) var(--color-border); border-radius: var(--size-6); transform: rotate(-5deg); }
:where(.sdp-page) .sdp-website-service .sdp-type-card b { font: var(--font-weight-medium) var(--size-67)/var(--line-height-art-1) var(--font-family-display); color: var(--color-primary); }
:where(.sdp-page) .sdp-website-service .sdp-swatches { display: flex; gap: var(--size-4); flex-direction: column; }
:where(.sdp-page) .sdp-website-service .sdp-swatches i { width: var(--size-31); height: var(--size-18); background: var(--color-accent); border-radius: var(--size-2); }
:where(.sdp-page) .sdp-website-service .sdp-swatches i:nth-child(2) { background: var(--color-diagram-muted); }
:where(.sdp-page) .sdp-website-service .sdp-swatches i:nth-child(3) { background: var(--color-diagram-muted); }
:where(.sdp-page) .sdp-website-service .sdp-mini-search { background: var(--color-surface); width: var(--size-175); border: var(--size-1) var(--border-style) var(--color-border); border-radius: var(--size-7); padding: var(--size-13); }
:where(.sdp-page) .sdp-website-service .sdp-search-field { display: flex; align-items: center; gap: var(--size-8); padding-bottom: var(--size-10); border-bottom: var(--size-1) var(--border-style) var(--color-border); font-size: var(--size-10); color: var(--color-text-muted); }
:where(.sdp-page) .sdp-website-service .sdp-search-field .icon { width: var(--size-14); height: var(--size-14); }
:where(.sdp-page) .sdp-website-service .sdp-search-result { display: flex; gap: var(--size-8); margin-top: var(--size-10); }
:where(.sdp-page) .sdp-website-service .sdp-search-result i { width: var(--size-21); height: var(--size-21); background: var(--color-surface-accent); border-radius: var(--size-4); }
:where(.sdp-page) .sdp-website-service .sdp-search-result b { display: block; width: var(--size-92); height: var(--size-4); margin: var(--size-4) 0; background: var(--color-diagram-muted); }
:where(.sdp-page) .sdp-website-service .sdp-search-result b+b { width: var(--size-60); background: var(--color-surface-accent); }
:where(.sdp-page) .sdp-website-service .sdp-search-spark { position: absolute; right: 20%; top: var(--size-30); width: var(--size-30); height: var(--size-30); background: var(--color-primary); color: var(--color-on-primary-muted); display: grid; place-items: center; border-radius: var(--radius-circle); }
:where(.sdp-page) .sdp-website-service .sdp-mini-route { display: flex; align-items: center; gap: var(--size-9); }
:where(.sdp-page) .sdp-website-service .sdp-mini-route>span { background: var(--color-surface); border: var(--size-1) var(--border-style) var(--color-border); padding: var(--size-14) var(--size-11); border-radius: var(--size-7); }
:where(.sdp-page) .sdp-website-service .sdp-mini-route .icon { width: var(--size-20); height: var(--size-20); color: var(--color-accent); }
:where(.sdp-page) .sdp-website-service .sdp-mini-route>span:last-child { background: var(--color-primary); color: var(--color-surface); }
:where(.sdp-page) .sdp-website-service .sdp-mini-route>span:last-child .icon { color: var(--color-on-primary-muted); }
:where(.sdp-page) .sdp-website-service .sdp-mini-route>i { font-style: normal; color: var(--color-text-muted); }
:where(.sdp-page) .sdp-website-service .sdp-signal-bars { display: flex; align-items: center; justify-content: center; gap: var(--size-5); }
:where(.sdp-page) .sdp-website-service .sdp-signal-bars i { width: var(--size-7); height: var(--size-30); background: var(--color-diagram-muted); border-radius: var(--size-4); }
:where(.sdp-page) .sdp-website-service .sdp-signal-bars i:nth-child(2) { height: var(--size-46); background: var(--color-accent); }
:where(.sdp-page) .sdp-website-service .sdp-signal-bars i:nth-child(3) { height: var(--size-57); background: var(--color-primary); }
:where(.sdp-page) .sdp-website-service .sdp-signal-bars i:nth-child(4) { height: var(--size-38); background: var(--color-diagram-strong); }
:where(.sdp-page) .sdp-website-service .sdp-journey-screen .sdp-faux-button { margin-top: var(--size-20); font-size: var(--size-11); }
:where(.sdp-page) .sdp-website-service .sdp-approach-visual { height: var(--size-142); padding: var(--size-18) var(--size-24); background: var(--color-surface-accent); border-radius: var(--size-7); display: grid; place-items: center; position: relative; overflow: hidden; }
:where(.sdp-page) .sdp-website-service .sdp-approach-visual .sdp-wire-window { width: 100%; border: var(--size-1) var(--border-style) var(--color-border); background: var(--color-surface); padding: var(--size-10); border-radius: var(--size-4); }
:where(.sdp-page) .sdp-website-service .sdp-wire-window .sdp-wire-nav { height: var(--size-4); background: var(--color-diagram-muted); width: 40%; margin-bottom: var(--size-12); }
:where(.sdp-page) .sdp-website-service .sdp-wire-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--size-5); }
:where(.sdp-page) .sdp-website-service .sdp-wire-grid i { height: var(--size-42); background: var(--color-surface-accent); border-radius: var(--size-2); }
:where(.sdp-page) .sdp-website-service .sdp-approach-visual--bespoke .sdp-wire-grid { grid-template-columns: 1.2fr 1fr; }
:where(.sdp-page) .sdp-website-service .sdp-approach-visual--bespoke .sdp-wire-grid i:first-child { background: repeating-linear-gradient(0deg,var(--color-surface) 0 var(--size-7),var(--color-diagram-strong) var(--size-7) var(--size-10)); }
:where(.sdp-page) .sdp-website-service .sdp-approach-visual--bespoke .sdp-wire-grid i:nth-child(2) { border-radius: var(--size-30) var(--size-30) var(--size-2) var(--size-2); background: var(--color-diagram-strong); }
:where(.sdp-page) .sdp-website-service .sdp-approach-visual--system { background: var(--color-primary); gap: var(--size-7); display: flex; align-items: center; padding: var(--size-18); }
:where(.sdp-page) .sdp-website-service .sdp-system-mini-node { width: var(--size-33); height: var(--size-33); background: var(--color-surface-accent); color: var(--color-primary); border-radius: var(--size-5); display: grid; place-items: center; }
:where(.sdp-page) .sdp-website-service .sdp-system-mini-node .icon { width: var(--size-16); height: var(--size-16); }
:where(.sdp-page) .sdp-website-service .sdp-approach-visual--system .sdp-wire-window { width: 50%; background: var(--color-surface); border-color: var(--color-border-strong); }
:where(.sdp-page) .sdp-website-service .sdp-approach-visual--system>i { font-style: normal; font-size: var(--size-12); color: var(--color-text-muted); }
:where(.sdp-page) .sdp-website-service .sdp-project-art { height: var(--size-265); background: var(--color-surface-accent); border-radius: var(--size-9); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: var(--size-35); color: var(--color-primary); border: var(--size-1) var(--border-style) var(--color-border); }
:where(.sdp-page) .sdp-website-service .sdp-project-art::after { content: ""; position: absolute; width: var(--size-170); height: var(--size-230); right: calc(-1 * var(--size-50)); top: var(--size-30); border: var(--size-1) var(--border-style) var(--color-border-strong); border-radius: var(--size-90) var(--size-90) 0 0; transform: rotate(15deg); }
:where(.sdp-page) .sdp-website-service .sdp-project-art>span { position: absolute; top: var(--size-19); left: var(--size-24); font: var(--size-9) var(--font-family-mono); letter-spacing: var(--tracking-art--11); }
:where(.sdp-page) .sdp-website-service .sdp-project-art>h3 { font: var(--font-weight-regular) var(--size-38)/var(--line-height-art-1-06) var(--font-family-display); letter-spacing: var(--tracking-art-n-04); position: relative; z-index: var(--z-content); max-width: var(--size-245); }
:where(.sdp-page) .sdp-website-service .sdp-project-art>small { position: absolute; bottom: var(--size-21); left: var(--size-24); font: var(--size-9) var(--font-family-mono); letter-spacing: var(--tracking-art--06); }
:where(.sdp-page) .sdp-website-service .sdp-project-art--olive { background: var(--color-surface-accent); color: var(--color-primary); border-color: var(--color-border); }
:where(.sdp-page) .sdp-website-service .sdp-project-art--olive::after { border: var(--size-1) var(--border-style) var(--color-border-strong); width: var(--size-185); height: var(--size-185); top: var(--size-41); right: calc(-1 * var(--size-25)); border-radius: var(--radius-circle); }
:where(.sdp-page) .sdp-website-service .sdp-project-art--olive::before { content: ""; width: var(--size-140); height: var(--size-140); border-radius: var(--radius-circle); position: absolute; top: var(--size-65); right: calc(-1 * var(--size-3)); border: var(--size-1) var(--border-style) var(--color-border-strong); }
:where(.sdp-page) .sdp-website-service .sdp-project-art--wine { background: var(--color-surface-accent); color: var(--color-text-muted); border-color: var(--color-border); }
:where(.sdp-page) .sdp-website-service .sdp-project-art--wine::after { border-color: var(--color-border-strong); border-radius: 0; width: var(--size-155); height: var(--size-180); right: calc(-1 * var(--size-62)); top: var(--size-43); transform: rotate(35deg); }
:where(.sdp-page) .sdp-website-service .sdp-project-art--wine>strong { font-size: var(--size-31); }
:where(.sdp-page) .sdp-website-service .sdp-brief-card { position: relative; background: var(--color-surface); border: var(--size-1) var(--border-style) var(--color-border); border-radius: var(--size-9); padding: var(--size-29); box-shadow: var(--shadow-offset); transform: rotate(3deg); }
:where(.sdp-page) .sdp-website-service .sdp-brief-card .sdp-card-label { font: var(--size-10) var(--font-family-mono); letter-spacing: var(--tracking-art--1); color: var(--color-accent); margin-bottom: var(--size-20); }
:where(.sdp-page) .sdp-website-service .sdp-brief-card strong { font: var(--font-weight-regular) var(--size-28) var(--font-family-display); letter-spacing: var(--tracking-art-n-03); }
:where(.sdp-page) .sdp-website-service .sdp-brief-field { border-bottom: var(--size-1) var(--border-style) var(--color-border); padding: var(--size-17) 0; font-size: var(--size-12); color: var(--color-text-muted); display: flex; align-items: center; gap: var(--size-13); }
:where(.sdp-page) .sdp-website-service .sdp-brief-field .icon { width: var(--size-18); height: var(--size-18); color: var(--color-accent); }
:where(.sdp-page) .sdp-website-service .sdp-brief-card>p { font-size: var(--size-11) !important; margin-top: var(--size-22) !important; line-height: var(--line-height-art-1-65); }
@media (min-width:1600px) {
:where(.sdp-page) .sdp-website-service .sdp-hero-visual { height: var(--size-630); }
}
@media (max-width:1200px) {
:where(.sdp-page) .sdp-website-service .sdp-hero-visual { height: var(--size-550); }
:where(.sdp-page) .sdp-website-service .sdp-float-search { right: -1%; }
:where(.sdp-page) .sdp-website-service .sdp-floating-card { padding: var(--size-11) var(--size-12); }
:where(.sdp-page) .sdp-website-service .sdp-preview-copy strong { font-size: var(--size-29); }
:where(.sdp-page) .sdp-website-service .sdp-mini-route { gap: var(--size-5); }
:where(.sdp-page) .sdp-website-service .sdp-mini-route>span { padding: var(--size-12) var(--size-8); }
:where(.sdp-page) .sdp-website-service .sdp-project-art { padding: var(--size-25); }
}
@media (max-width:1000px) {
:where(.sdp-page) .sdp-website-service .sdp-hero-visual { height: var(--size-535); }
:where(.sdp-page) .sdp-website-service .sdp-float-brand { top: var(--size-59); }
:where(.sdp-page) .sdp-website-service .sdp-float-search { top: var(--size-119); right: -2%; }
:where(.sdp-page) .sdp-website-service .sdp-float-search small { display: none; }
:where(.sdp-page) .sdp-website-service .sdp-preview-copy { padding-left: var(--size-19); }
:where(.sdp-page) .sdp-website-service .sdp-preview-copy strong { font-size: var(--size-27); }
:where(.sdp-page) .sdp-website-service .sdp-preview-copy>p { font-size: var(--size-9); }
:where(.sdp-page) .sdp-website-service .sdp-preview-base { padding: var(--size-14) var(--size-15); font-size: var(--size-8); }
:where(.sdp-page) .sdp-website-service .sdp-preview-layout { min-height: var(--size-251); }
:where(.sdp-page) .sdp-website-service .sdp-phone-preview { left: 5%; bottom: var(--size-17); }
:where(.sdp-page) .sdp-website-service .sdp-float-flow { bottom: var(--size-45); font-size: var(--size-11); }
:where(.sdp-page) .sdp-website-service .sdp-mini-visual { height: var(--size-190); }
:where(.sdp-page) .sdp-website-service .sdp-project-art>h3 { font-size: var(--size-32); }
:where(.sdp-page) .sdp-website-service .sdp-project-art--wine>strong { font-size: var(--size-28); }
:where(.sdp-page) .sdp-website-service .sdp-brief-card { padding: var(--size-22); }
}
@media (max-width:800px) {
:where(.sdp-page) .sdp-website-service .sdp-hero-visual { height: var(--size-580); width: 100%; max-width: var(--size-570); margin: var(--size-26) auto 0; }
:where(.sdp-page) .sdp-website-service .sdp-preview-copy strong { font-size: var(--size-33); }
:where(.sdp-page) .sdp-website-service .sdp-preview-copy>p { font-size: var(--size-11); }
:where(.sdp-page) .sdp-website-service .sdp-preview-layout { min-height: var(--size-287); }
:where(.sdp-page) .sdp-website-service .sdp-preview-copy { padding: var(--size-31) var(--size-9) var(--size-25) var(--size-26); }
:where(.sdp-page) .sdp-website-service .sdp-preview-base { font-size: var(--size-9); }
:where(.sdp-page) .sdp-website-service .sdp-float-brand { top: var(--size-64); }
:where(.sdp-page) .sdp-website-service .sdp-float-search { top: var(--size-100); right: 0; }
:where(.sdp-page) .sdp-website-service .sdp-float-search small { display: block; }
:where(.sdp-page) .sdp-website-service .sdp-float-flow { bottom: var(--size-36); font-size: var(--size-12); right: 0; }
:where(.sdp-page) .sdp-website-service .sdp-phone-preview { left: 10%; bottom: var(--size-5); }
:where(.sdp-page) .sdp-website-service .sdp-journey-screen .sdp-faux-button { font-size: var(--size-12); }
:where(.sdp-page) .sdp-website-service .sdp-compare-card .sdp-approach-visual { grid-column: 1; grid-row: 2/5; height: var(--size-180); margin-top: var(--size-6); }
:where(.sdp-page) .sdp-website-service .sdp-project-art { height: var(--size-295); }
:where(.sdp-page) .sdp-website-service .sdp-brief-card { max-width: var(--size-390); width: 100%; margin: auto; padding: var(--size-29); transform: rotate(2deg); }
}
@media (max-width:520px) {
:where(.sdp-page) .sdp-website-service .sdp-hero-visual { height: var(--size-440); margin-top: var(--size-32); max-width: var(--size-385); }
:where(.sdp-page) .sdp-website-service .sdp-visual-caption { font-size: var(--size-8); left: 3%; top: calc(-1 * var(--size-6)); }
:where(.sdp-page) .sdp-website-service .sdp-hero-browser { width: 96%; transform: none; margin-top: var(--size-10); }
:where(.sdp-page) .sdp-website-service .sdp-preview-nav { padding: var(--size-13) var(--size-16); }
:where(.sdp-page) .sdp-website-service .sdp-preview-nav b { font-size: var(--size-16); }
:where(.sdp-page) .sdp-website-service .sdp-skeleton-nav { gap: var(--size-8); }
:where(.sdp-page) .sdp-website-service .sdp-skeleton-nav i { width: var(--size-20); }
:where(.sdp-page) .sdp-website-service .sdp-preview-layout { min-height: var(--size-235); }
:where(.sdp-page) .sdp-website-service .sdp-preview-copy { padding: var(--size-25) var(--size-5) var(--size-23) var(--size-16); }
:where(.sdp-page) .sdp-website-service .sdp-preview-copy strong { font-size: var(--size-27); margin: var(--size-13) 0; }
:where(.sdp-page) .sdp-website-service .sdp-preview-copy .sdp-tiny { font-size: var(--size-7); }
:where(.sdp-page) .sdp-website-service .sdp-preview-copy>p { font-size: var(--size-9); }
:where(.sdp-page) .sdp-website-service .sdp-preview-copy .sdp-faux-button { font-size: var(--size-8); padding: var(--size-8) var(--size-9); gap: var(--size-7); margin-top: var(--size-14); }
:where(.sdp-page) .sdp-website-service .sdp-architecture { margin: var(--size-17) var(--size-14) var(--size-17) 0; border-radius: var(--size-62) var(--size-62) var(--size-3) var(--size-3); }
:where(.sdp-page) .sdp-website-service .sdp-architecture::before { inset: var(--size-15) var(--size-15) 0; border-radius: var(--size-45) var(--size-45) 0 0; }
:where(.sdp-page) .sdp-website-service .sdp-architecture i { width: var(--size-35); height: var(--size-55); left: var(--size-5); bottom: var(--size-15); }
:where(.sdp-page) .sdp-website-service .sdp-preview-base { font-size: var(--size-7); padding: var(--size-12) var(--size-15); }
:where(.sdp-page) .sdp-website-service .sdp-floating-card { padding: var(--size-10) var(--size-11); gap: var(--size-9); font-size: var(--size-10); }
:where(.sdp-page) .sdp-website-service .sdp-floating-card .icon { width: var(--size-19); height: var(--size-19); }
:where(.sdp-page) .sdp-website-service .sdp-floating-card small { font-size: var(--size-9); }
:where(.sdp-page) .sdp-website-service .sdp-float-brand { left: 0; top: var(--size-25); }
:where(.sdp-page) .sdp-website-service .sdp-float-search { right: 0; top: var(--size-38); }
:where(.sdp-page) .sdp-website-service .sdp-float-search small { display: none; }
:where(.sdp-page) .sdp-website-service .sdp-float-flow { right: 0; bottom: var(--size-9); max-width: var(--size-228); }
:where(.sdp-page) .sdp-website-service .sdp-float-flow small { font-size: var(--size-9); }
:where(.sdp-page) .sdp-website-service .sdp-phone-preview { width: var(--size-83); height: var(--size-143); border-width: var(--size-4); border-radius: var(--size-15); bottom: calc(-1 * var(--size-6)); left: 7%; padding: var(--size-15) var(--size-8) var(--size-8); }
:where(.sdp-page) .sdp-website-service .sdp-phone-preview strong { font-size: var(--size-13); }
:where(.sdp-page) .sdp-website-service .sdp-phone-preview .sdp-phone-image { height: var(--size-36); margin: var(--size-7) 0; }
:where(.sdp-page) .sdp-website-service .sdp-phone-line { height: var(--size-2); margin: var(--size-4) 0; }
:where(.sdp-page) .sdp-website-service .sdp-phone-cta { height: var(--size-9); width: var(--size-40); margin-top: var(--size-5); }
:where(.sdp-page) .sdp-website-service .sdp-mini-visual { height: var(--size-186); }
:where(.sdp-page) .sdp-website-service .sdp-signal-bars { justify-content: start; height: var(--size-46); }
:where(.sdp-page) .sdp-website-service .sdp-signal-bars i { transform: scaleY(.75); }
:where(.sdp-page) .sdp-website-service .sdp-journey-screen .sdp-faux-button { font-size: var(--size-10); }
:where(.sdp-page) .sdp-website-service .sdp-compare-card .sdp-approach-visual { width: 100%; height: var(--size-150); margin: 0; }
:where(.sdp-page) .sdp-website-service .sdp-project-art { height: var(--size-245); }
:where(.sdp-page) .sdp-website-service .sdp-project-art>h3 { font-size: var(--size-42); max-width: var(--size-280); }
:where(.sdp-page) .sdp-website-service .sdp-project-art--wine>strong { font-size: var(--size-33); }
:where(.sdp-page) .sdp-website-service .sdp-brief-card { box-shadow: var(--shadow-offset); transform: rotate(1deg); padding: var(--size-24); max-width: var(--size-295); }
:where(.sdp-page) .sdp-website-service .sdp-brief-card strong { font-size: var(--size-28); }
:where(.sdp-page) .sdp-website-service .sdp-brief-field { font-size: var(--size-13); }
}
@media (max-width:360px) {
:where(.sdp-page) .sdp-website-service .sdp-hero-visual { height: var(--size-410); }
:where(.sdp-page) .sdp-website-service .sdp-preview-copy strong { font-size: var(--size-24); }
:where(.sdp-page) .sdp-website-service .sdp-float-search { top: var(--size-33); }
:where(.sdp-page) .sdp-website-service .sdp-floating-card { font-size: var(--size-9); padding: var(--size-9); }
:where(.sdp-page) .sdp-website-service .sdp-float-flow { max-width: var(--size-206); }
:where(.sdp-page) .sdp-website-service .sdp-phone-preview { left: 4%; bottom: calc(-1 * var(--size-9)); }
}
@media print {
:where(.sdp-page) .sdp-website-service .sdp-hero-visual { height: var(--size-440); max-width: var(--size-550); margin: auto; }
}
/* Requested page-only illustration adjustments. */
:where(.sdp-page) .sdp-website-service .sdp-mini-visual { height: var(--card-media-height); border: 0; border-bottom: var(--border-default); border-radius: var(--radius-none); background: var(--color-surface-secondary); }
:where(.sdp-page) .sdp-website-service .sdp-mini-visual > .sdp-mini-window { scale: 0.9; }
:where(.sdp-page) .sdp-website-service .sdp-mini-visual > .sdp-type-card { scale: 0.9; }
:where(.sdp-page) .sdp-website-service .sdp-mini-visual > .sdp-mini-search { scale: 0.9; }
:where(.sdp-page) .sdp-website-service .sdp-mini-visual > .sdp-mini-route { scale: 0.9; }
:where(.sdp-page) .sdp-website-service .sdp-mini-seal { bottom: var(--size-22); }
:where(.sdp-page) .sdp-website-service .sdp-mini-route { gap: var(--space-2); }
:where(.sdp-page) .sdp-website-service .sdp-mini-route > span { padding: var(--space-3) var(--space-2); }
:where(.sdp-page) .sdp-website-service .sdp-signal-bars { width: var(--space-18); }
:where(.sdp-page) .sdp-website-service .sdp-project-art { height: var(--card-feature-height); border: 0; border-bottom: var(--border-default); border-radius: var(--radius-none); background: var(--color-surface-secondary); color: var(--color-primary); }
:where(.sdp-page) .sdp-website-service .sdp-project-art > h3 { color: inherit; }
:where(.sdp-page) .sdp-website-service .sdp-project-art--olive { background: var(--color-surface-accent); }
:where(.sdp-page) .sdp-website-service .sdp-project-art--wine { background: var(--color-primary); color: var(--color-on-primary); }
:where(.sdp-page) .sdp-website-service .sdp-project-art--wine::after { border-color: var(--color-border-contrast); }
:where(.sdp-page) .sdp-website-service .sdp-project-art--wine > span { color: var(--color-on-primary-muted); }
:where(.sdp-page) .sdp-website-service .sdp-project-art--wine > small { color: var(--color-on-primary-muted); }
:where(.sdp-page) .sdp-website-service .sdp-brief-card { margin-inline: 0; }
:where(.sdp-page) .sdp-website-service .sdp-attention { position: absolute; width: var(--size-126); height: var(--size-112); background: var(--gradient-attention); pointer-events: none; z-index: var(--z-base); }
:where(.sdp-page) .sdp-website-service .sdp-attention--a { left: 24%; top: 26%; }
:where(.sdp-page) .sdp-website-service .sdp-attention--b { left: 6%; bottom: 8%; }
:where(.sdp-page) .sdp-website-service .sdp-scenario-screen--campaign .sdp-attention--a { left: 45%; top: 15%; }
:where(.sdp-page) .sdp-website-service .sdp-scenario-screen--browse .sdp-attention--a { left: 60%; top: 0; }
:where(.sdp-page) .sdp-website-service .sdp-perception { position: relative; padding: var(--space-9); border: var(--border-default); border-radius: var(--radius-xl); background: var(--gradient-accent); overflow: hidden; }
:where(.sdp-page) .sdp-website-service .sdp-perception__label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--color-accent); font-family: var(--font-family-mono); font-size: var(--font-size-micro); letter-spacing: var(--letter-spacing-label); }
:where(.sdp-page) .sdp-website-service .sdp-perception__label .icon { width: var(--icon-size-sm); height: var(--icon-size-sm); }
:where(.sdp-page) .sdp-website-service .sdp-perception__intro { display: grid; grid-template-columns: var(--grid-columns-2); align-items: end; gap: var(--space-4); margin-top: var(--space-8); margin-bottom: var(--space-8); }
:where(.sdp-page) .sdp-website-service .sdp-perception__intro strong { color: var(--color-primary); font-family: var(--font-family-display); font-size: var(--size-34); font-weight: var(--font-weight-regular); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-display); }
:where(.sdp-page) .sdp-website-service .sdp-perception__intro p { font-size: var(--font-size-label); line-height: var(--line-height-relaxed); }
:where(.sdp-page) .sdp-website-service .sdp-perception__foundations { display: grid; grid-template-columns: var(--grid-columns-3); gap: var(--space-3); }
:where(.sdp-page) .sdp-website-service .sdp-perception__foundations > div { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-2); border: var(--border-default); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-accent); box-shadow: var(--shadow-sm); }
:where(.sdp-page) .sdp-website-service .sdp-perception__foundations span { color: var(--color-primary); font-size: var(--font-size-label); font-weight: var(--font-weight-medium); }
:where(.sdp-page) .sdp-website-service .sdp-perception__connector { width: 100%; height: var(--space-14); fill: var(--color-accent); stroke: var(--color-border-strong); stroke-width: var(--border-width-thin); }
:where(.sdp-page) .sdp-website-service .sdp-perception__connector path { fill: none; }
:where(.sdp-page) .sdp-website-service .sdp-perception__mirror { position: relative; padding: var(--space-7); border: var(--border-width-thin) var(--border-style) var(--color-primary); border-radius: var(--radius-lg); background: var(--color-primary); color: var(--color-on-primary); overflow: hidden; box-shadow: var(--shadow-raised); }
:where(.sdp-page) .sdp-website-service .sdp-perception__mirror-label { position: relative; z-index: var(--z-content); display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-family-mono); font-size: var(--font-size-micro); letter-spacing: var(--letter-spacing-label); color: var(--color-on-primary-muted); }
:where(.sdp-page) .sdp-website-service .sdp-perception__mirror-label .icon { width: var(--icon-size-sm); height: var(--icon-size-sm); color: var(--color-highlight); }
:where(.sdp-page) .sdp-website-service .sdp-perception__brand { position: relative; z-index: var(--z-content); margin-block: var(--space-5) var(--space-6); font-family: var(--font-family-display); font-size: var(--size-57); letter-spacing: var(--letter-spacing-display); line-height: var(--line-height-tight); }
:where(.sdp-page) .sdp-website-service .sdp-perception__brand span { color: var(--color-highlight); }
:where(.sdp-page) .sdp-website-service .sdp-perception__rule { height: var(--border-width-thin); width: 64%; background: var(--color-border-contrast); margin-bottom: var(--space-5); }
:where(.sdp-page) .sdp-website-service .sdp-perception__layers { position: relative; z-index: var(--z-content); display: flex; flex-wrap: wrap; gap: var(--space-2); }
:where(.sdp-page) .sdp-website-service .sdp-perception__layers > span { border: var(--border-contrast); border-radius: var(--radius-pill); padding: var(--space-1-5) var(--space-3); color: var(--color-on-primary-muted); font-size: var(--font-size-micro); }
:where(.sdp-page) .sdp-website-service .sdp-perception__arc { position: absolute; right: calc(-1 * var(--size-40)); top: var(--size-36); width: var(--size-170); height: var(--size-230); border: var(--border-width-thin) var(--border-style) var(--color-border-contrast); border-radius: var(--size-100) var(--size-100) 0 0; transform: rotate(22deg); }
:where(.sdp-page) .sdp-website-service .sdp-perception__arc::after { content: ""; position: absolute; inset: var(--space-4); border: var(--border-width-thin) var(--border-style) var(--color-border-contrast); border-radius: inherit; }
:where(.sdp-page) .sdp-website-service .sdp-perception figcaption { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-7); }
:where(.sdp-page) .sdp-website-service .sdp-perception figcaption > .icon { color: var(--color-accent); }
:where(.sdp-page) .sdp-website-service .sdp-perception figcaption strong { display: block; font-size: var(--font-size-small); color: var(--color-primary); font-weight: var(--font-weight-semibold); }
:where(.sdp-page) .sdp-website-service .sdp-perception figcaption span { display: block; margin-top: var(--space-1); font-size: var(--font-size-label); color: var(--color-text-muted); }
@media (max-width: 1000px) {
:where(.sdp-page) .sdp-website-service .sdp-perception { padding: var(--space-6); }
:where(.sdp-page) .sdp-website-service .sdp-perception__intro { grid-template-columns: var(--grid-columns-1); }
:where(.sdp-page) .sdp-website-service .sdp-perception__intro p br { display: none; }
}
@media (max-width: 800px) {
:where(.sdp-page) .sdp-website-service .sdp-perception { max-width: var(--size-600); }
:where(.sdp-page) .sdp-website-service .sdp-perception__intro { grid-template-columns: var(--grid-columns-2); }
:where(.sdp-page) .sdp-website-service .sdp-mini-visual { height: var(--card-media-height); }
}
@media (max-width: 520px) {
:where(.sdp-page) .sdp-website-service .sdp-perception { padding: var(--space-5); }
:where(.sdp-page) .sdp-website-service .sdp-perception__intro { grid-template-columns: var(--grid-columns-1); gap: var(--space-3); }
:where(.sdp-page) .sdp-website-service .sdp-perception__intro strong { font-size: var(--size-32); }
:where(.sdp-page) .sdp-website-service .sdp-perception__foundations { gap: var(--space-2); }
:where(.sdp-page) .sdp-website-service .sdp-perception__mirror { padding: var(--space-5); }
:where(.sdp-page) .sdp-website-service .sdp-perception__brand { font-size: var(--size-47); }
:where(.sdp-page) .sdp-website-service .sdp-perception__label { font-size: var(--font-size-micro); }
:where(.sdp-page) .sdp-website-service .sdp-perception figcaption { align-items: flex-start; }
:where(.sdp-page) .sdp-website-service .sdp-project-art > h3 { font-size: var(--size-38); }
:where(.sdp-page) .sdp-website-service .sdp-project-art--wine > h3 { font-size: var(--size-30); }
}
/* 2026-10 visual revision — clearer interaction, section-specific icon language. */
/* Fluorescent yellow is an attention cue in illustrations, not a CTA colour. */
:where(.sdp-page) .site-footer .footer-brand > a:last-child { color: var(--color-on-primary-muted); }
:where(.sdp-page) .site-footer .footer-column strong { color: var(--color-on-primary-muted); }
/* WHY IT MATTERS: flat, editorial line icons with no surrounding icon cards. */
:where(.sdp-page) .sdp-website-service #neden-onemli .editorial-list .icon-tile { width: var(--length-rem-2-5); height: var(--length-rem-2-5); border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--color-accent); }
:where(.sdp-page) .sdp-website-service #neden-onemli .editorial-list .icon { width: var(--length-rem-2); height: var(--length-rem-2); stroke-width: 1.65; }
:where(.sdp-page) .sdp-website-service #neden-onemli .editorial-list li:nth-child(3n + 2) .icon-tile { color: var(--color-secondary-blue); }
:where(.sdp-page) .sdp-website-service #neden-onemli .editorial-list > li { gap: var(--space-5); }
/* SCOPE: custom two-colour dimensional icons, distinct from editorial icons. */
:where(.sdp-page) .sdp-website-service #kapsam .icon-tile--premium { width: var(--length-rem-4-5); height: var(--length-rem-4-5); border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
:where(.sdp-page) .sdp-website-service #kapsam .icon-tile--premium .sdp-scope-icon-3d { width: var(--length-rem-4-5); height: var(--length-rem-4-5); overflow: visible; filter: drop-shadow(0 var(--length-rem-0-65) var(--length-rem-0-55) var(--color-overlay-7267622837203631203532202f2031362529)); }
:where(.sdp-page) .sdp-scope-icon-3d .sdp-scope-green { fill: var(--color-accent); stroke: none; }
:where(.sdp-page) .sdp-scope-icon-3d .sdp-scope-blue { fill: var(--color-secondary-blue); stroke: none; }
:where(.sdp-page) .sdp-scope-icon-3d .sdp-scope-white { fill: var(--color-surface); stroke: none; }
:where(.sdp-page) .sdp-scope-icon-3d .sdp-scope-line { fill: none; stroke: var(--color-primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:where(.sdp-page) .sdp-website-service #kapsam .capability-strip { background: linear-gradient(135deg, var(--color-surface-secondary), var(--color-surface-accent)); }
:where(.sdp-page) .sdp-website-service #kapsam .disclosure { border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border)); }
/* AUTO STORY: one large scene, three explicit controls, video-like progression. */
:where(.sdp-page) .scenario-showcase { --scenario-duration: 6500ms; position: relative; isolation: isolate; overflow: hidden; padding: clamp(var(--space-rem-1-25), 3vw, var(--space-rem-2-5)); border: var(--border-default); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--color-surface-secondary), var(--color-surface)); box-shadow: var(--shadow-md); }
:where(.sdp-page) .scenario-showcase::after { content: ""; position: absolute; z-index: -1; width: var(--length-rem-13); height: var(--length-rem-13); right: var(--length-rem-negative-4); top: var(--length-rem-negative-5); border-radius: 50%; background: var(--color-highlight); opacity: 0.42; filter: blur(var(--length-rem-0-25)); }
:where(.sdp-page) .sdp-scenario-player-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); }
:where(.sdp-page) .sdp-scenario-player-meta__copy { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-caption); }
:where(.sdp-page) .sdp-scenario-player-meta__copy strong { color: var(--color-heading); }
:where(.sdp-page) .sdp-scenario-live-dot { width: var(--length-rem-0-625); height: var(--length-rem-0-625); border-radius: 50%; background: var(--color-highlight); box-shadow: 0 0 0 var(--length-rem-0-35) color-mix(in srgb, var(--color-highlight) 24%, transparent); }
:where(.sdp-page) .sdp-scenario-play { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--length-rem-2-5); padding: var(--space-2) var(--space-3); border: var(--border-default); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-primary); font: var(--font-size-label) var(--font-family-body); cursor: pointer; }
:where(.sdp-page) .sdp-scenario-play .icon { width: var(--length-rem-1); height: var(--length-rem-1); }
:where(.sdp-page) .sdp-scenario-play__resume-icon { display: none; }
:where(.sdp-page) .sdp-scenario-play[aria-pressed="true"] .sdp-scenario-play__pause-icon { display: none; }
:where(.sdp-page) .sdp-scenario-play[aria-pressed="true"] .sdp-scenario-play__resume-icon { display: block; }
:where(.sdp-page) .sdp-scenario-play__resume { display: none; }
:where(.sdp-page) .sdp-scenario-play[aria-pressed="true"] .sdp-scenario-play__pause { display: none; }
:where(.sdp-page) .sdp-scenario-play[aria-pressed="true"] .sdp-scenario-play__resume { display: inline; }
:where(.sdp-page) .scenario-tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding: 0; margin-bottom: var(--space-7); border: 0; background: transparent; }
:where(.sdp-page) .scenario-tabs .tabs__button { position: relative; justify-content: flex-start; min-height: var(--length-rem-4); padding: var(--space-3) var(--space-4); overflow: hidden; border: var(--border-default); border-radius: var(--radius-md); background: var(--color-overlay-726762283235352032353520323535202f2038362529); color: var(--color-heading); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); cursor: pointer; box-shadow: var(--shadow-sm); }
:where(.sdp-page) .scenario-tabs .tabs__button::before { content: attr(data-step); display: grid; place-items: center; width: var(--length-rem-1-75); height: var(--length-rem-1-75); flex: 0 0 auto; border-radius: 50%; background: var(--color-surface-accent); color: var(--color-primary); font: var(--font-size-micro) var(--font-family-mono); }
:where(.sdp-page) .scenario-tabs .tabs__button::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: var(--length-rem-0-25); background: var(--color-highlight); transform: scaleX(0); transform-origin: left; }
:where(.sdp-page) .scenario-tabs .tabs__button[aria-selected="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-md); }
:where(.sdp-page) .scenario-tabs .tabs__button[aria-selected="true"]::before { background: var(--color-secondary-blue); color: var(--color-surface); }
:where(.sdp-page) .scenario-showcase:not(.is-paused) .scenario-tabs .tabs__button[aria-selected="true"]::after { animation: sdp-scenario-progress var(--scenario-duration) linear forwards; }
@keyframes sdp-scenario-progress {
to { transform: scaleX(1); }
}
:where(.sdp-page) .scenario-grid { display: block; }
:where(.sdp-page) .has-js .scenario-panel:not([data-active="true"]) { display: none !important; }
:where(.sdp-page) .scenario-panel { grid-template-columns: minmax(0, 1.45fr) minmax(var(--length-rem-16), 0.72fr); grid-template-areas: "heading heading" "screen path"; gap: var(--space-5) var(--space-7); align-items: stretch; padding: 0; border: 0; border-radius: 0; background: transparent; }
:where(.sdp-page) .scenario-panel[data-active="true"] { display: grid; }
:where(.sdp-page) .scenario-panel__heading { grid-area: heading; margin: 0; }
:where(.sdp-page) .scenario-panel__heading .icon-tile { width: var(--length-rem-2-5); height: var(--length-rem-2-5); border: 0; background: transparent; color: var(--color-accent); }
:where(.sdp-page) .scenario-panel__heading .icon { width: var(--length-rem-1-8); height: var(--length-rem-1-8); }
:where(.sdp-page) .scenario-panel__heading p { color: var(--color-secondary-blue); }
:where(.sdp-page) .scenario-panel .browser-frame { grid-area: screen; box-shadow: var(--shadow-lg); }
:where(.sdp-page) .scenario-panel .scenario-path { grid-area: path; align-content: start; margin-top: 0; padding: var(--space-5); border-left: var(--border-width-thin) var(--border-style) var(--color-border); }
:where(.sdp-page) .scenario-path > div { align-items: flex-start; flex-direction: column; gap: var(--space-1); padding: var(--space-4) 0; border: 0; border-bottom: var(--border-default); border-radius: 0; background: transparent; }
:where(.sdp-page) .scenario-path > div:last-child { margin-top: var(--space-2); padding: var(--space-4); border: 0; border-radius: var(--radius-md); background: var(--color-primary); }
:where(.sdp-page) .scenario-path dd { text-align: left; font-size: var(--font-size-body-sm); }
:where(.sdp-page) .scenario-panel[data-active="true"] { animation: sdp-scenario-enter 360ms var(--ease-standard) both; }
@keyframes sdp-scenario-enter {
from { opacity: 0; transform: translateY(var(--length-rem-0-5)); }
to { opacity: 1; transform: none; }
}
@media (max-width: 800px) {
:where(.sdp-page) .scenario-showcase { padding: var(--space-5); }
:where(.sdp-page) .scenario-tabs { grid-template-columns: var(--grid-columns-1); gap: var(--space-2); }
:where(.sdp-page) .scenario-tabs .tabs__button { min-height: var(--length-rem-3-25); }
:where(.sdp-page) .scenario-panel { grid-template-columns: var(--grid-columns-1); grid-template-areas: "heading" "screen" "path"; }
:where(.sdp-page) .scenario-panel[data-active="true"] { grid-template-columns: var(--grid-columns-1); grid-template-areas: "heading" "screen" "path"; }
:where(.sdp-page) .scenario-panel .scenario-path { padding: var(--space-4) 0 0; border-left: 0; border-top: var(--border-default); }
}
@media (max-width: 520px) {
:where(.sdp-page) .sdp-scenario-player-meta { align-items: flex-start; }
:where(.sdp-page) .sdp-scenario-player-meta__copy span:last-child { display: block; width: 100%; }
:where(.sdp-page) .scenario-tabs .tabs__button .icon { display: block; }
}
@media (prefers-reduced-motion: reduce) {
:where(.sdp-page) .scenario-tabs .tabs__button::after { animation: none !important; }
:where(.sdp-page) .scenario-panel[data-active="true"] { animation: none; }
}
:where(.sdp-page) .sdp-software-page { color:var(--color-text) }
:where(.sdp-page) .sdp-software-page .container { max-width:var(--size-1320); margin:auto; width:calc(100% - var(--page-gutter)*2) }
:where(.sdp-page) .sdp-software-page .page-section { padding:var(--size-100) 0 }
:where(.sdp-page) .sdp-software-page .hero-section { padding:var(--size-72) 0 var(--size-68); overflow:hidden; background:var(--color-background) }
:where(.sdp-page) .sdp-software-page p { line-height:var(--line-height-1-75) }
:where(.sdp-page) .sdp-software-page h2 { font-family:var(--font-family-display); font-weight:var(--font-weight-display); font-size:clamp(var(--size-32),3.6vw,var(--size-52)); letter-spacing:var(--letter-spacing-negative-038em); line-height:var(--line-height-1-14); max-width:var(--size-850); margin:var(--size-14) 0 var(--size-24); color:var(--color-heading) }
:where(.sdp-page) .sdp-software-page h3 { font-size:var(--size-19); line-height:var(--line-height-art-1-4); font-weight:var(--font-weight-bold); letter-spacing:var(--letter-spacing-negative-025em); margin:0 0 var(--size-12) }
:where(.sdp-page) .sdp-software-page .lead { font-size:var(--size-17); color:var(--color-text-muted); max-width:var(--size-850) }
:where(.sdp-page) .sdp-proof-lead { font-size:var(--size-17); color:var(--color-text-muted); max-width:var(--size-850) }
:where(.sdp-page) .sdp-software-page .hero-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:5%; align-items:center }
:where(.sdp-page) .sdp-software-page .hero-title { font-size:clamp(var(--size-42),4.5vw,var(--size-66)); line-height:var(--line-height-1-07); margin:var(--size-22) 0 var(--size-26); max-width:var(--size-620) }
:where(.sdp-page) .hero-title em { color:var(--color-accent); font-weight:var(--font-weight-regular) }
:where(.sdp-page) .sdp-software-page .hero-lead { font-size:var(--size-16); max-width:var(--size-570) }
:where(.sdp-page) .sdp-software-page .action-group { display:flex; flex-wrap:wrap; gap:var(--size-22); align-items:center; margin:var(--size-28) 0 }
:where(.sdp-page) .sdp-hero-meta { display:flex; gap:var(--size-12) var(--size-20); flex-wrap:wrap; list-style:none; padding:0; margin:var(--size-24) 0 0; font-size:var(--size-11); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-hero-meta li:before { content:'✓'; color:var(--color-accent); margin-right:var(--size-6) }
:where(.sdp-page) .sdp-head { margin-bottom:var(--size-44) }
:where(.sdp-page) .section-head { margin-bottom:var(--size-44) }
:where(.sdp-page) .eyebrow { font-family:var(--font-family-mono); font-size:var(--size-11); letter-spacing:var(--letter-spacing-1em); text-transform:uppercase; color:var(--color-accent) }
:where(.sdp-page) .sdp-mark { display:none }
:where(.sdp-page) .sdp-sw-icon { width:var(--size-54); height:var(--size-54); display:inline-flex; align-items:center; justify-content:center; border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-14); background:linear-gradient(145deg,var(--color-surface),var(--color-surface-accent)); box-shadow:var(--size-3) var(--size-4) 0 var(--color-surface-accent); color:var(--color-primary); flex-shrink:0; margin-bottom:var(--size-22) }
:where(.sdp-page) .sdp-sw-icon svg { width:var(--size-28); height:var(--size-28) }
:where(.sdp-page) .sdp-schema { position:relative; padding:var(--size-28) var(--size-12) var(--size-10); isolation:isolate; min-width:0 }
:where(.sdp-page) .sdp-schema:before { content:''; position:absolute; inset:0 var(--length-px-negative-50); border-radius:50%; background:radial-gradient(ellipse,var(--color-surface-accent) 0%,var(--color-surface-secondary) 48%,transparent 70%); z-index:-2 }
:where(.sdp-page) .sdp-visual-kicker { text-align:center; font:var(--size-10) var(--font-family-mono); letter-spacing:var(--letter-spacing-14em); margin-bottom:var(--size-28); color:var(--color-accent) }
:where(.sdp-page) .sdp-app-window { background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-13); box-shadow:var(--shadow-raised); transform:perspective(var(--size-1100)) rotateY(-5deg) rotateX(3deg); overflow:hidden; margin:0 var(--size-8) var(--size-28) }
:where(.sdp-page) .sdp-window-bar { display:flex; gap:var(--size-5); align-items:center; padding:var(--size-13); background:var(--color-surface-muted); border-bottom:var(--size-1) var(--border-style) var(--color-border) }
:where(.sdp-page) .sdp-window-bar i { width:var(--size-5); height:var(--size-5); border-radius:50%; background:var(--color-border-strong) }
:where(.sdp-page) .sdp-window-bar span { font:var(--size-9) var(--font-family-mono); margin-left:var(--size-12); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-app-layout { display:flex }
:where(.sdp-page) .sdp-app-rail { width:var(--size-44); background:var(--color-primary); padding:var(--size-17) var(--size-11); color:var(--color-highlight) }
:where(.sdp-page) .sdp-app-rail span { display:block; height:var(--size-5); background:var(--color-illustration-487769); margin:var(--size-20) 0 }
:where(.sdp-page) .sdp-app-content { padding:var(--size-22); flex:1; min-width:0 }
:where(.sdp-page) .sdp-app-topline { display:flex; justify-content:space-between; align-items:start; gap:var(--size-10) }
:where(.sdp-page) .sdp-app-topline strong { font:var(--size-24)/var(--line-height-1-12) var(--font-family-display); color:var(--color-heading) }
:where(.sdp-page) .sdp-status { font-size:var(--size-8); padding:var(--size-5) var(--size-7); background:var(--color-surface-secondary); color:var(--color-accent); border-radius:var(--size-12); white-space:nowrap }
:where(.sdp-page) .sdp-app-metrics { display:flex; gap:var(--size-7); margin:var(--size-20) 0 }
:where(.sdp-page) .sdp-app-metrics>div { background:var(--color-surface-secondary); flex:1; padding:var(--size-10); font-size:var(--size-8); color:var(--color-text-muted); border-radius:var(--size-5) }
:where(.sdp-page) .sdp-app-metrics b { display:block; font-size:var(--size-14); color:var(--color-heading); margin-top:var(--size-4) }
:where(.sdp-page) .sdp-app-chart { display:flex; gap:var(--size-20); align-items:center }
:where(.sdp-page) .sdp-bars { height:var(--size-90); display:flex; gap:var(--size-8); align-items:flex-end; flex:1; border-bottom:var(--size-1) var(--border-style) var(--color-border) }
:where(.sdp-page) .sdp-bars i { flex:1; background:var(--color-illustration-9fc7b2); border-radius:var(--size-3) var(--size-3) 0 0 }
:where(.sdp-page) .sdp-bars i:nth-last-child(1) { background:var(--color-primary) }
:where(.sdp-page) .sdp-bars i:nth-last-child(2) { background:var(--color-accent) }
:where(.sdp-page) .sdp-app-tasks { display:grid; gap:var(--size-12); font-size:var(--size-9); color:var(--color-accent) }
:where(.sdp-page) .sdp-schema-title { font:var(--size-11) var(--font-family-mono); text-transform:uppercase; letter-spacing:var(--letter-spacing-12em); color:var(--color-accent); margin:0 0 var(--size-10) var(--size-15) }
:where(.sdp-page) .sdp-stack { list-style:none; margin:0 0 0 var(--size-32); padding:0; display:grid; gap:var(--size-8); position:relative }
:where(.sdp-page) .sdp-stack:before { content:''; position:absolute; left:var(--length-px-negative-16); top:var(--size-20); bottom:var(--size-20); border-left:var(--size-1) var(--border-style) var(--color-border-strong) }
:where(.sdp-page) .sdp-layer { position:relative; display:flex; gap:var(--size-12); align-items:center; border:var(--size-1) var(--border-style) var(--color-border); padding:var(--size-10) var(--size-15); border-radius:var(--size-8); background:var(--color-surface); box-shadow:0 var(--size-3) 0 var(--color-surface-accent) }
:where(.sdp-page) .sdp-layer:before { content:''; position:absolute; left:var(--length-px-negative-16); width:var(--size-15); border-top:var(--size-1) var(--border-style) var(--color-border-strong) }
:where(.sdp-page) .sdp-layer .sdp-sw-icon { margin:0; width:var(--size-29); height:var(--size-29); border:0; box-shadow:none; border-radius:var(--size-6) }
:where(.sdp-page) .sdp-layer svg { width:var(--size-19); height:var(--size-19) }
:where(.sdp-page) .sdp-layer .sdp-lbl { font-size:var(--size-12); font-weight:var(--font-weight-bold) }
:where(.sdp-page) .sdp-layer .sdp-meta { font:var(--size-10) var(--font-family-mono); color:var(--color-text-muted); margin-left:auto }
:where(.sdp-page) .sdp-layer.is-node { background:var(--color-primary); color:var(--color-white); border-color:var(--color-primary) }
:where(.sdp-page) .sdp-layer.is-node .sdp-meta { color:var(--color-highlight) }
:where(.sdp-page) .sdp-diagram-caption { display:block; font:var(--size-10) var(--font-family-mono); color:var(--color-text-muted); margin-top:var(--size-17) }
:where(.sdp-page) .sdp-schema>.sdp-diagram-caption { text-align:center }
:where(.sdp-page)-section-nav { position:sticky; top:var(--header-height); background:var(--color-illustration-f6f5eff2); border-block:var(--size-1) var(--border-style) var(--color-border); z-index:20; backdrop-filter:blur(var(--size-15)) }
:where(.sdp-page)-section-nav__inner { display:flex; align-items:center; justify-content:space-between; gap:var(--size-20); min-height:var(--size-58) }
:where(.sdp-page)-section-nav__label { font:var(--size-12) var(--font-family-mono); white-space:nowrap }
:where(.sdp-page)-section-nav__links { display:flex; gap:var(--size-27); overflow:auto; align-items:center }
:where(.sdp-page)-section-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(.sdp-page)-section-nav a[aria-current] { color:var(--color-accent); border-color:var(--color-accent) }
:where(.sdp-page) .sdp-software-page section { scroll-margin-top:var(--size-160) }
:where(.sdp-page) #deneyim { background:var(--color-surface) }
:where(.sdp-page) .sdp-list { display:grid; grid-template-columns:repeat(5,1fr); list-style:none; padding:0; margin:0 0 var(--size-55); gap:var(--size-20) }
:where(.sdp-page) .sdp-list li { font-size:var(--size-14); line-height:var(--line-height-1-7); border-top:var(--size-1) var(--border-style) var(--color-border); padding-top:var(--size-24) }
:where(.sdp-page) .sdp-list strong { display:block; color:var(--color-heading) }
:where(.sdp-page) .sdp-list .sdp-sw-icon { display:flex }
:where(.sdp-page) .sdp-ask { display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--size-60); background:var(--color-surface-secondary); border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-18); padding:var(--size-40) }
:where(.sdp-page) .sdp-ask h3 { font-family:var(--font-family-display); font-size:var(--size-29); font-weight:var(--font-weight-regular); line-height:var(--line-height-art-1-3) }
:where(.sdp-page) .sdp-questions { padding:0; list-style:none; margin:0 }
:where(.sdp-page) .sdp-questions li { display:flex; gap:var(--size-20); padding:var(--size-15) 0; border-bottom:var(--size-1) var(--border-style) var(--color-border); font-size:var(--size-14); line-height:var(--line-height-1-6) }
:where(.sdp-page) .sdp-questions li:first-child { padding-top:0 }
:where(.sdp-page) .sdp-questions li:last-child { border:0; padding-bottom:0 }
:where(.sdp-page) .sdp-question-no { font:var(--size-12) var(--font-family-mono); color:var(--color-accent); padding-top:var(--size-4) }
:where(.sdp-page) .sdp-close { padding:var(--size-24) var(--size-28); border-left:var(--size-3) var(--border-style) var(--color-accent); margin-top:var(--size-30); background:var(--color-background); font-size:var(--size-15) }
:where(.sdp-page) .sdp-compare-close { padding:var(--size-24) var(--size-28); border-left:var(--size-3) var(--border-style) var(--color-accent); margin-top:var(--size-30); background:var(--color-background); font-size:var(--size-15) }
:where(.sdp-page) .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-22) }
:where(.sdp-page) .sdp-card-grid--3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-22) }
:where(.sdp-page) .sdp-feature { background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-14); padding:var(--size-28); position:relative }
:where(.sdp-page) .sdp-feature>.sdp-sw-icon { position:absolute; top:var(--size-35); left:var(--size-35); width:var(--size-34); height:var(--size-34); margin:0; z-index:1; background:var(--color-surface); box-shadow:none }
:where(.sdp-page) .sdp-feature>.sdp-sw-icon svg { width:var(--size-20); height:var(--size-20) }
:where(.sdp-page) .sdp-feature__body { font-size:var(--size-14); color:var(--color-text-muted); margin:0 }
:where(.sdp-page) .sdp-lift { display:block; color:var(--color-heading); background:var(--color-surface-secondary); border-radius:var(--size-6); padding:var(--size-12) var(--size-14); margin:var(--size-18) var(--space-px-negative-4) var(--space-px-negative-4); font-weight:var(--font-weight-medium) }
:where(.sdp-page) .sdp-mini-diagram { height:var(--size-164); background:linear-gradient(135deg,var(--color-background),var(--color-surface-secondary)); border-radius:var(--size-9); margin:var(--space-px-negative-9) var(--space-px-negative-9) var(--size-26); padding:var(--size-28) var(--size-15) var(--size-12); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--size-8); font-size:var(--size-10); color:var(--color-heading); overflow:hidden }
:where(.sdp-page) .sdp-mini-docs { display:flex; gap:var(--size-8) }
:where(.sdp-page) .sdp-mini-docs span { background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border); padding:var(--size-9); border-radius:var(--size-4); box-shadow:var(--size-3) var(--size-3) 0 var(--color-surface-accent) }
:where(.sdp-page) .sdp-mini-modules span { background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border); padding:var(--size-9); border-radius:var(--size-4); box-shadow:var(--size-3) var(--size-3) 0 var(--color-surface-accent) }
:where(.sdp-page) .sdp-mini-core { background:var(--color-primary); color:var(--color-highlight); border-radius:var(--size-5); padding:var(--size-9) var(--size-16); font-weight:var(--font-weight-medium) }
:where(.sdp-page) .sdp-mini-arrow { color:var(--color-accent); font-size:var(--size-17); line-height:var(--line-height-art-1) }
:where(.sdp-page) .sdp-mini-lines { height:var(--size-16); width:var(--size-100); border:var(--size-1) var(--border-style) var(--color-border-strong); border-top:0 }
:where(.sdp-page) .sdp-mini-modules { display:flex; gap:var(--size-7) }
:where(.sdp-page) .sdp-mini-modules .active { background:var(--color-highlight) }
:where(.sdp-page) .sdp-mini-report { height:var(--size-90); display:flex; align-items:flex-end; gap:var(--size-9); position:relative; padding-bottom:var(--size-20) }
:where(.sdp-page) .sdp-mini-report i { width:var(--size-20); height:var(--size-25); background:var(--color-illustration-9fc7b2); border-radius:var(--size-4) var(--size-4) 0 0 }
:where(.sdp-page) .sdp-mini-report i:nth-child(2) { height:var(--size-40) }
:where(.sdp-page) .sdp-mini-report i:nth-child(3) { height:var(--size-35) }
:where(.sdp-page) .sdp-mini-report i:nth-child(4) { height:var(--size-55) }
:where(.sdp-page) .sdp-mini-report i:nth-child(5) { height:var(--size-70); background:var(--color-primary) }
:where(.sdp-page) .sdp-mini-report b { position:absolute; bottom:0; width:100%; text-align:center; font-weight:var(--font-weight-medium) }
:where(.sdp-page) .sdp-mini-steps { display:flex; align-items:center; margin-bottom:var(--size-8) }
:where(.sdp-page) .sdp-mini-steps span { display:grid; place-items:center; width:var(--size-36); height:var(--size-36); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:50% }
:where(.sdp-page) .sdp-mini-steps i { width:var(--size-20); height:var(--size-1); background:var(--color-border-strong) }
:where(.sdp-page) .sdp-mini-steps .active { background:var(--color-primary); color:var(--color-highlight) }
:where(.sdp-page) .sdp-section-foot { margin-top:var(--size-35) }
:where(.sdp-page) .sdp-pull { padding:var(--size-24) var(--size-30); margin:0; border-left:var(--size-3) var(--border-style) var(--color-accent); background:var(--color-surface-callout); font:var(--size-23)/var(--line-height-1-45) var(--font-family-display) }
:where(.sdp-page) .sdp-pull p { margin:0; line-height:var(--line-height-1-45) }
:where(.sdp-page) .sdp-software-page .card { padding:var(--size-28) }
:where(.sdp-page) .card__body { font-size:var(--size-14); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-flow-explorer { border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-18); background:var(--color-background); padding:var(--size-30); margin:0 0 var(--size-38) }
:where(.sdp-page) .sdp-flow-toolbar { display:flex; justify-content:space-between; gap:var(--size-20) }
:where(.sdp-page) .sdp-flow-toolbar p { font:var(--size-27) var(--font-family-display); margin:var(--size-12) 0 var(--size-20) }
:where(.sdp-page) .sdp-flow-tabs { display:flex; gap:var(--size-8); border-bottom:var(--size-1) var(--border-style) var(--color-border); padding-bottom:var(--size-20) }
:where(.sdp-page) .sdp-flow-tabs button { font:var(--size-12) var(--font-family-body); cursor:pointer; padding:var(--size-12) var(--size-18); border:var(--size-1) var(--border-style) var(--color-border); background:transparent; border-radius:var(--size-30); color:var(--color-heading) }
:where(.sdp-page) .sdp-flow-tabs button[aria-selected=true] { background:var(--color-primary); color:var(--color-white); border-color:var(--color-primary) }
:where(.sdp-page) .sdp-flow-nodes { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--size-30); padding:var(--size-28) 0 }
:where(.sdp-page) .sdp-flow-nodes>div { position:relative; background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-10); padding:var(--size-20); box-shadow:var(--size-4) var(--size-4) 0 var(--color-surface-accent) }
:where(.sdp-page) .sdp-flow-nodes>div:not(:last-child):after { content:'→'; position:absolute; right:var(--length-px-negative-25); top:45%; color:var(--color-accent) }
:where(.sdp-page) .sdp-flow-nodes .sdp-sw-icon { width:var(--size-36); height:var(--size-36); margin-bottom:var(--size-16); box-shadow:none }
:where(.sdp-page) .sdp-flow-nodes svg { width:var(--size-22); height:var(--size-22) }
:where(.sdp-page) .sdp-flow-nodes small { float:right; font:var(--size-10) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-flow-nodes strong { display:block; font-size:var(--size-14) }
:where(.sdp-page) .sdp-flow-result { border-radius:var(--size-7); background:var(--color-surface-accent); padding:var(--size-15) var(--size-20); font-size:var(--size-13); color:var(--color-heading) }
:where(.sdp-page) .sdp-compare { width:100%; border-spacing:0; border-collapse:separate; border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-14); overflow:hidden; font-size:var(--size-14); background:var(--color-surface) }
:where(.sdp-page) .sdp-compare th { text-align:left; padding:var(--size-20) var(--size-24); border-bottom:var(--size-1) var(--border-style) var(--color-border); line-height:var(--line-height-body); vertical-align:top }
:where(.sdp-page) .sdp-compare td { text-align:left; padding:var(--size-20) var(--size-24); border-bottom:var(--size-1) var(--border-style) var(--color-border); line-height:var(--line-height-body); vertical-align:top }
:where(.sdp-page) .sdp-compare thead th { font-size:var(--size-12); font-weight:var(--font-weight-medium); background:var(--color-surface-callout) }
:where(.sdp-page) .sdp-compare thead .is-ours { background:var(--color-primary); color:var(--color-white) }
:where(.sdp-page) .sdp-compare th[scope=row] { width:23%; font-weight:var(--font-weight-medium) }
:where(.sdp-page) .sdp-compare td { width:38.5%; color:var(--color-text-muted) }
:where(.sdp-page) .sdp-compare td.is-ours { background:var(--color-surface-secondary); color:var(--color-heading) }
:where(.sdp-page) .sdp-compare tr:last-child>* { border-bottom:0 }
:where(.sdp-page) .sdp-cases { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--size-22) }
:where(.sdp-page) .sdp-case { border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-14); padding:var(--size-24); overflow:hidden }
:where(.sdp-page) .sdp-case p { font-size:var(--size-14); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-case .sdp-sector { font:var(--size-10) var(--font-family-mono); color:var(--color-accent); letter-spacing:var(--letter-spacing-04em) }
:where(.sdp-page) .sdp-case h3 { font:var(--size-27)/var(--line-height-1-2) var(--font-family-display) }
:where(.sdp-page) .sdp-case .tags { font-size:var(--size-10); border-top:var(--size-1) var(--border-style) var(--color-border); padding-top:var(--size-15); margin-top:var(--size-23) }
:where(.sdp-page) .sdp-proof-art { height:var(--size-200); margin:var(--space-px-negative-24) var(--space-px-negative-24) var(--size-26); padding:var(--size-26); background:var(--color-surface-secondary); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--size-12) }
:where(.sdp-page) .sdp-proof-art>small { font:var(--size-9) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-proof-store { background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border); width:100%; border-radius:var(--size-7); box-shadow:var(--size-5) var(--size-5) 0 var(--color-surface-accent); transform:rotate(-3deg) }
:where(.sdp-page) .sdp-proof-store>div { padding:var(--size-9) var(--size-13); font:var(--size-14) var(--font-family-display); background:var(--color-primary); color:var(--color-white) }
:where(.sdp-page) .sdp-proof-store span { float:right; font-size:var(--size-8) }
:where(.sdp-page) .sdp-proof-store section { display:flex; gap:var(--size-9); padding:var(--size-14) }
:where(.sdp-page) .sdp-proof-store i { height:var(--size-44); flex:1; border-radius:var(--size-5); background:linear-gradient(120deg,var(--color-surface-accent),var(--color-background)) }
:where(.sdp-page) .sdp-proof-store footer { font-size:var(--size-9); padding:0 var(--size-14) var(--size-13); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-proof-network { display:flex; align-items:center; gap:var(--size-15); font-size:var(--size-11) }
:where(.sdp-page) .sdp-proof-network span { padding:var(--size-14) var(--size-10); border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-6); background:var(--color-surface) }
:where(.sdp-page) .sdp-proof-network b { display:grid; place-items:center; background:var(--color-primary); color:var(--color-highlight); width:var(--size-55); height:var(--size-65); clip-path:polygon(50% 0,100% 15%,90% 70%,50% 100%,10% 70%,0 15%); font-size:var(--size-24) }
:where(.sdp-page) .sdp-proof-line { font-size:var(--size-10); color:var(--color-accent) }
:where(.sdp-page) .sdp-proof-class { display:flex; background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-8); width:var(--size-180); height:var(--size-100); padding:var(--size-12); gap:var(--size-12); box-shadow:var(--size-5) var(--size-5) 0 var(--color-surface-accent) }
:where(.sdp-page) .sdp-proof-class>span { display:grid; place-items:center; background:var(--color-primary); color:var(--color-highlight); flex:2; font-size:var(--size-30); border-radius:var(--size-5) }
:where(.sdp-page) .sdp-proof-class>div { flex:1; display:grid; gap:var(--size-8) }
:where(.sdp-page) .sdp-proof-class i { background:var(--color-surface-accent); border-radius:var(--size-4) }
:where(.sdp-page) .sdp-more { text-align:right; margin-top:var(--size-28); color:var(--color-accent) }
:where(.sdp-page) .sdp-sub { font:var(--size-14) var(--font-family-mono); color:var(--color-heading); padding-top:var(--size-25); margin:var(--size-22) 0 }
:where(.sdp-page) .sdp-scope { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-22) }
:where(.sdp-page) .sdp-service-card { border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-14); background:var(--color-surface); padding:var(--size-28) }
:where(.sdp-page) .sdp-service-card:first-child { grid-column:span 2; background:var(--color-surface-secondary); display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--size-30); align-items:center }
:where(.sdp-page) .sdp-service-card:first-child h3 { font:var(--size-29) var(--font-family-display) }
:where(.sdp-page) .sdp-service-card p { font-size:var(--size-14); color:var(--color-text-muted); margin:0 }
:where(.sdp-page) .sdp-service-title h3 { font-size:var(--size-18) }
:where(.sdp-page) .sdp-service-card:first-child .sdp-sw-icon { width:var(--size-74); height:var(--size-74) }
:where(.sdp-page) .sdp-service-card:first-child svg { width:var(--size-38); height:var(--size-38) }
:where(.sdp-page) .sdp-tags { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--size-12) }
:where(.sdp-page) .sdp-tags li { background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-7); padding:var(--size-16); font-size:var(--size-12); display:flex; gap:var(--size-10); align-items:center }
:where(.sdp-page) .sdp-tags li:before { content:'✓'; color:var(--color-accent) }
:where(.sdp-page) .sdp-tags.is-tech { display:flex; flex-wrap:wrap }
:where(.sdp-page) .sdp-tags.is-tech li { background:transparent; border-radius:var(--size-30); font-family:var(--font-family-mono); font-size:var(--size-11); padding:var(--size-10) var(--size-15) }
:where(.sdp-page) .sdp-tags.is-tech li:before { content:'·' }
:where(.sdp-page) .sdp-scope-note { font-size:var(--size-13); color:var(--color-text-muted); margin-top:var(--size-20) }
:where(.sdp-page) #surec h2 { color:var(--color-white) }
:where(.sdp-page) #surec h3 { color:var(--color-white) }
:where(.sdp-page) #surec .eyebrow { color:var(--color-highlight) }
:where(.sdp-page) #surec .split { display:block }
:where(.sdp-page) .sdp-process { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--size-42) var(--size-30) }
:where(.sdp-page) .sdp-process__step { position:relative }
:where(.sdp-page) .sdp-process__rail { display:flex; align-items:center; margin-bottom:var(--size-22) }
:where(.sdp-page) .sdp-process__node { display:grid; place-items:center; width:var(--size-46); height:var(--size-46); border:var(--size-1) var(--border-style) var(--color-illustration-72998b); border-radius:50%; font:var(--size-12) var(--font-family-mono); color:var(--color-highlight); flex-shrink:0 }
:where(.sdp-page) .sdp-process__line { height:var(--size-1); background:var(--color-illustration-487769); width:100%; margin-left:var(--size-12) }
:where(.sdp-page) .sdp-process__step:last-child .sdp-process__node { background:var(--color-highlight); color:var(--color-heading) }
:where(.sdp-page) .sdp-process__body h3 { font-size:var(--size-17) }
:where(.sdp-page) .sdp-process__body p { font-size:var(--size-13) }
:where(.sdp-page) .sdp-why { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--size-30); border-top:var(--size-1) var(--border-style) var(--color-illustration-487769); padding-top:var(--size-45); margin-top:var(--size-60) }
:where(.sdp-page) .sdp-why-item h3 { font-size:var(--size-16) }
:where(.sdp-page) .sdp-why-item p { font-size:var(--size-12) }
:where(.sdp-page) .sdp-why .sdp-sw-icon { background:var(--color-illustration-185043); border-color:var(--color-illustration-487769); box-shadow:none; color:var(--color-highlight); width:var(--size-42); height:var(--size-42) }
:where(.sdp-page) .sdp-why svg { width:var(--size-24); height:var(--size-24) }
:where(.sdp-page) #sonraki-adim { background:var(--color-surface-callout) }
:where(.sdp-page) .sdp-split--cta { display:grid; grid-template-columns:1fr 1fr; gap:8%; align-items:center }
:where(.sdp-page) .sdp-split--cta .section-head { margin:0 }
:where(.sdp-page) .response-note { font-size:var(--size-12); display:block; color:var(--color-text-muted); margin-top:var(--size-20) }
:where(.sdp-page) .sdp-cta-band__aside .button { margin-top:var(--size-20) }
:where(.sdp-page) #sss>.container { display:grid; grid-template-columns:.8fr 1.2fr; gap:7% }
:where(.sdp-page) #sss .section-head { position:sticky; top:var(--size-175); align-self:start }
:where(.sdp-page) .sdp-accordion--eyebrow { margin:var(--size-30) 0 var(--size-12)!important; font-size:var(--size-11)!important }
:where(.sdp-page) .sdp-accordion--eyebrow:first-child { margin-top:0!important }
:where(.sdp-page) .sdp-accordion__item { border-bottom:var(--size-1) var(--border-style) var(--color-border); padding:0 }
:where(.sdp-page) .sdp-accordion__item summary { display:flex; justify-content:space-between; gap:var(--size-20); align-items:center; list-style:none; padding:var(--size-22) 0; cursor:pointer; font-size:var(--size-15); font-weight:var(--font-weight-medium) }
:where(.sdp-page) .sdp-accordion__item summary::-webkit-details-marker { display:none }
:where(.sdp-page) .sdp-accordion__ico:after { content:'+'; font-size:var(--size-22); color:var(--color-accent) }
:where(.sdp-page) .sdp-accordion__item[open] .sdp-accordion__ico:after { content:'−' }
:where(.sdp-page) .sdp-accordion__panel { font-size:var(--size-14); color:var(--color-text-muted); padding:0 var(--size-25) var(--size-22) 0; line-height:var(--line-height-relaxed) }
:where(.sdp-page) .sdp-accordion__panel p { margin:0 }
:where(.sdp-page) .sdp-closing-cta { background:var(--color-primary); color:var(--color-on-primary-muted) }
:where(.sdp-page) .sdp-closing-cta h2 { color:var(--color-white) }
:where(.sdp-page) .sdp-closing-cta .eyebrow { color:var(--color-highlight) }
:where(.sdp-page) .sdp-sw-footer { background:var(--color-surface-footer); color:var(--color-on-primary-muted); padding:var(--size-55) max(5vw,var(--size-22)) var(--size-24); font-size:var(--size-13) }
:where(.sdp-page) .sdp-sw-footer .wrap { max-width:var(--size-1190); margin:auto }
:where(.sdp-page) .sdp-sw-footer a { color:inherit }
:where(.sdp-page) .sdp-sw-footer .sdp-footer-grid { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:var(--size-35) }
:where(.sdp-page) .sdp-sw-footer ul { list-style:none; padding:0 }
:where(.sdp-page) .sdp-sw-footer li { margin:var(--size-10) 0 }
:where(.sdp-page) .sdp-sw-footer .brand { color:var(--color-white) }
:where(.sdp-page) .sdp-sw-footer p { max-width:var(--size-420) }
:where(.sdp-page) .sdp-sw-footer .footer-bottom { border-top:var(--size-1) var(--border-style) var(--color-illustration-487769); margin-top:var(--size-35); padding-top:var(--size-22); font-size:var(--size-11) }
@media(min-width:1600px) {
:where(.sdp-page) .sdp-software-page .hero-title { font-size:var(--size-68) }
}
@media(max-width:1000px) {
:where(.sdp-page) .sdp-software-page .hero-grid { gap:3% }
:where(.sdp-page) .sdp-software-page .hero-title { font-size:var(--size-44) }
:where(.sdp-page) .sdp-list { grid-template-columns:repeat(3,1fr) }
:where(.sdp-page) .sdp-cases { grid-template-columns:1fr 1fr }
:where(.sdp-page) .sdp-case.is-featured { grid-column:span 2 }
:where(.sdp-page) .feature-grid { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-card-grid--3 { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-scope { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-service-card:first-child { grid-column:span 2 }
:where(.sdp-page) .sdp-process { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-why { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-tags { grid-template-columns:repeat(3,1fr) }
:where(.sdp-page)-section-nav__label { display:none }
:where(.sdp-page)-section-nav__links { gap:var(--size-22) }
:where(.sdp-page) .sdp-app-content { padding:var(--size-15) }
:where(.sdp-page) .sdp-app-topline strong { font-size:var(--size-20) }
:where(.sdp-page) .sdp-flow-nodes { gap:var(--size-22) }
:where(.sdp-page) .sdp-flow-nodes>div { padding:var(--size-15) }
:where(.sdp-page) .sdp-flow-nodes>div:not(:last-child):after { right:var(--length-px-negative-19) }
:where(.sdp-page) .sdp-ask { gap:var(--size-30); padding:var(--size-30) }
:where(.sdp-page) .sdp-compare th { padding:var(--size-17) }
:where(.sdp-page) .sdp-compare td { padding:var(--size-17) }
:where(.sdp-page) .sdp-software-page .page-section { padding:var(--size-75) 0 }
}
@media(max-width:800px) {
:where(.sdp-page) .sdp-software-page .hero-grid { grid-template-columns:1fr }
:where(.sdp-page) .sdp-software-page .hero-section { padding:var(--size-45) 0 }
:where(.sdp-page) .sdp-software-page .hero-title { font-size:clamp(var(--size-40),7vw,var(--size-58)) }
:where(.sdp-page) .sdp-schema { max-width:var(--size-530); margin:var(--size-28) auto 0; width:100%; padding-inline:0 }
:where(.sdp-page)-section-nav { top:var(--size-72) }
:where(.sdp-page)-section-nav__links { width:100%; justify-content:space-between }
:where(.sdp-page) .sdp-ask { grid-template-columns:1fr }
:where(.sdp-page) .sdp-ask h3 { max-width:var(--size-520) }
:where(.sdp-page) .sdp-split--cta { grid-template-columns:1fr; gap:var(--size-26) }
:where(.sdp-page) #sss>.container { grid-template-columns:1fr; gap:var(--size-20) }
:where(.sdp-page) #sss .section-head { position:static }
:where(.sdp-page) .sdp-tags { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-sw-footer .sdp-footer-grid { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-flow-toolbar { display:block }
:where(.sdp-page) .sdp-flow-toolbar>.sdp-diagram-caption { margin:0 0 var(--size-16) }
:where(.sdp-page) .sdp-flow-nodes { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-flow-nodes>div:nth-child(2):after { display:none }
:where(.sdp-page) .sdp-flow-tabs { flex-wrap:wrap }
:where(.sdp-page) .sdp-software-page .hero-lead { max-width:none }
}
@media(max-width:520px) {
:where(.sdp-page) .sdp-software-page .page-section { padding:var(--size-58) 0 }
:where(.sdp-page) .sdp-software-page .hero-title { font-size:var(--size-42) }
:where(.sdp-page) .sdp-software-page h2 { font-size:var(--size-34) }
:where(.sdp-page) .sdp-software-page .lead { font-size:var(--size-15) }
:where(.sdp-page) .sdp-head { margin-bottom:var(--size-30) }
:where(.sdp-page) .section-head { margin-bottom:var(--size-30) }
:where(.sdp-page)-section-nav__links { gap:var(--size-22); justify-content:flex-start }
:where(.sdp-page)-section-nav a { font-size:var(--size-11) }
:where(.sdp-page) .sdp-list { grid-template-columns:1fr 1fr; gap:var(--size-24) var(--size-18) }
:where(.sdp-page) .sdp-list li:last-child { grid-column:span 2 }
:where(.sdp-page) .sdp-ask { padding:var(--size-24) }
:where(.sdp-page) .sdp-ask h3 { font-size:var(--size-25) }
:where(.sdp-page) .feature-grid { grid-template-columns:1fr }
:where(.sdp-page) .sdp-card-grid--3 { grid-template-columns:1fr }
:where(.sdp-page) .sdp-scope { grid-template-columns:1fr }
:where(.sdp-page) .sdp-cases { grid-template-columns:1fr }
:where(.sdp-page) .sdp-service-card:first-child { grid-column:auto; display:block }
:where(.sdp-page) .sdp-case.is-featured { grid-column:auto; display:block }
:where(.sdp-page) .sdp-feature { padding:var(--size-25) }
:where(.sdp-page) .sdp-feature>.sdp-sw-icon { top:var(--size-32); left:var(--size-32) }
:where(.sdp-page) .sdp-mini-diagram { height:var(--size-175) }
:where(.sdp-page) .sdp-tags { gap:var(--size-8) }
:where(.sdp-page) .sdp-tags li { font-size:var(--size-11); padding:var(--size-12) }
:where(.sdp-page) .sdp-flow-explorer { padding:var(--size-22) var(--size-18) }
:where(.sdp-page) .sdp-flow-tabs { gap:var(--size-7) }
:where(.sdp-page) .sdp-flow-tabs button { font-size:var(--size-10); padding:var(--size-10) var(--size-12) }
:where(.sdp-page) .sdp-flow-nodes { gap:var(--size-20) }
:where(.sdp-page) .sdp-flow-nodes strong { font-size:var(--size-12) }
:where(.sdp-page) .sdp-flow-result { font-size:var(--size-12) }
:where(.sdp-page) .sdp-compare { display:block; width:100%!important }
:where(.sdp-page) .sdp-compare tbody { display:block; width:100%!important }
:where(.sdp-page) .sdp-compare tr { display:block; width:100%!important }
:where(.sdp-page) .sdp-compare th { display:block; width:100%!important }
:where(.sdp-page) .sdp-compare td { display:block; width:100%!important }
:where(.sdp-page) .sdp-compare thead { display:none }
:where(.sdp-page) .sdp-compare th[scope=row] { background:var(--color-surface-callout); padding:var(--size-13) var(--size-18) }
:where(.sdp-page) .sdp-compare td { padding:var(--size-15) var(--size-18) }
:where(.sdp-page) .sdp-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-7) }
:where(.sdp-page) .sdp-compare tr:last-child>* { border-bottom:var(--size-1) var(--border-style) var(--color-border) }
:where(.sdp-page) .sdp-process { gap:var(--size-28) var(--size-20) }
:where(.sdp-page) .sdp-why { gap:var(--size-28) var(--size-20) }
:where(.sdp-page) .sdp-process__body h3 { font-size:var(--size-15) }
:where(.sdp-page) .sdp-process__body p { font-size:var(--size-12) }
:where(.sdp-page) .sdp-why-item h3 { font-size:var(--size-14) }
:where(.sdp-page) .sdp-pull { font-size:var(--size-21); padding:var(--size-23) }
:where(.sdp-page) .sdp-app-content { padding:var(--size-15) }
:where(.sdp-page) .sdp-app-topline strong { font-size:var(--size-21) }
:where(.sdp-page) .sdp-app-metrics b { font-size:var(--size-12) }
:where(.sdp-page) .sdp-app-chart { gap:var(--size-12) }
:where(.sdp-page) .sdp-app-tasks { font-size:var(--size-8) }
:where(.sdp-page) .sdp-app-rail { width:var(--size-32); padding:var(--size-17) var(--size-7) }
:where(.sdp-page) .sdp-layer { padding:var(--size-9) var(--size-12) }
:where(.sdp-page) .sdp-layer .sdp-meta { font-size:var(--size-9) }
:where(.sdp-page) .sdp-layer .sdp-lbl { font-size:var(--size-11) }
:where(.sdp-page) .sdp-visual-kicker { font-size:var(--size-8) }
:where(.sdp-page) .sdp-sw-footer .sdp-footer-grid { grid-template-columns:1fr 1fr }
:where(.sdp-page) .sdp-hero-meta { font-size:var(--size-10) }
:where(.sdp-page) .sdp-software-page .action-group { gap:var(--size-18) }
}
@media print {
:where(.sdp-page) .site-header { display:none }
:where(.sdp-page)-section-nav { display:none }
:where(.sdp-page) .sdp-flow-tabs { display:none }
:where(.sdp-page) .sdp-software-page .page-section { padding:var(--size-25) 0 }
:where(.sdp-page) .sdp-software-page .container { width:100% }
:where(.sdp-page) .sdp-flow-panel[hidden] { display:block!important }
:where(.sdp-page) .sdp-accordion__panel { display:block!important }
:where(.sdp-page) .sdp-software-page * { box-shadow:none!important }
:where(.sdp-page) .sdp-feature { break-inside:avoid }
:where(.sdp-page) .card { break-inside:avoid }
:where(.sdp-page) .sdp-service-card { break-inside:avoid }
:where(.sdp-page) .sdp-process__step { break-inside:avoid }
}
:where(.sdp-page) .sdp-sw-footer .footer-top { display:grid; grid-template-columns:1fr 1fr; gap:9%; margin-bottom:var(--size-35) }
:where(.sdp-page) .sdp-sw-footer .sdp-footer-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-25) }
:where(.sdp-page) .sdp-sw-footer h4 { font-size:var(--size-12); color:var(--color-white); margin-bottom:var(--size-20) }
:where(.sdp-page) .sdp-sw-footer .footer-brand .brand { display:inline-flex; align-items:baseline; gap:var(--size-8) }
:where(.sdp-page) .sdp-sw-footer .footer-brand p { margin-top:var(--size-20) }
@media(max-width:800px) {
:where(.sdp-page) .sdp-sw-footer .footer-top { grid-template-columns:1fr; gap:var(--size-30) }
:where(.sdp-page) .sdp-sw-footer .sdp-footer-cols { gap:var(--size-16) }
}
:where(.sdp-page) .sdp-software-page h3 { color:var(--color-heading); font-weight:var(--font-weight-bold); letter-spacing:var(--letter-spacing-heading) }
:where(.sdp-page) .sdp-software-page .card__description { display:block; flex:none; padding:0; margin:var(--size-12) 0 0; gap:0; font-size:var(--card-description-size); line-height:var(--line-height-relaxed); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-software-page .card__title { font-size:var(--card-title-size); line-height:var(--line-height-heading); margin:0 }
:where(.sdp-page) .sdp-software-page .card { padding:var(--card-padding); justify-content:flex-start }
:where(.sdp-page) .sdp-sw-icon { width:var(--size-44); height:var(--size-44); border-radius:var(--size-10); background:var(--color-surface-secondary); box-shadow:none; border:var(--border-default); margin:0 0 var(--size-20); color:var(--color-primary) }
:where(.sdp-page) .sdp-sw-icon svg { width:var(--size-24); height:var(--size-24) }
:where(.sdp-page) .sdp-software-page .hero-grid { grid-template-columns:1.15fr .85fr; gap:7% }
:where(.sdp-page) .sdp-software-page .hero-section { padding:var(--size-65) 0 }
:where(.sdp-page) .sdp-schema { max-width:var(--size-410); margin:0 auto; width:100%; padding:var(--size-27); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-18); background:var(--color-surface-secondary); box-shadow:var(--size-10) var(--size-10) 0 var(--color-surface-accent) }
:where(.sdp-page) .sdp-schema:before { display:none }
:where(.sdp-page) .sdp-schema-title { font:var(--font-weight-medium) var(--size-14) var(--font-family-mono); margin:0 0 var(--size-20); color:var(--color-heading) }
:where(.sdp-page) .sdp-stack { gap:var(--size-9); margin-left:var(--size-14) }
:where(.sdp-page) .sdp-layer { padding:var(--size-12); box-shadow:none; border-color:var(--color-border); border-radius:var(--size-7) }
:where(.sdp-page) .sdp-layer .sdp-lbl { font-size:var(--size-14) }
:where(.sdp-page) .sdp-layer .sdp-meta { font-size:var(--size-11); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-layer .sdp-sw-icon { background:var(--color-surface-secondary); width:var(--size-28); height:var(--size-28) }
:where(.sdp-page) .sdp-schema .sdp-diagram-caption { font-size:var(--size-10); margin-top:var(--size-18); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-layer.is-node { box-shadow:0 var(--size-4) var(--size-12) var(--color-illustration-073d3419) }
:where(.sdp-page) #ayrintilar .sdp-feature { padding:var(--card-padding); border-radius:var(--card-radius); box-shadow:var(--card-shadow); display:flex; flex-direction:column; align-items:flex-start }
:where(.sdp-page) .sdp-feature>.sdp-sw-icon { position:static; width:var(--size-44); height:var(--size-44); margin:0 0 var(--size-20); background:var(--color-surface-secondary) }
:where(.sdp-page) .sdp-feature>.sdp-sw-icon svg { width:var(--size-24); height:var(--size-24) }
:where(.sdp-page) .sdp-feature__title { font-size:var(--card-title-size)!important; line-height:var(--line-height-heading)!important; margin-bottom:var(--size-12)!important }
:where(.sdp-page) .sdp-feature__body { font-size:var(--card-description-size); line-height:var(--line-height-relaxed)!important }
:where(.sdp-page) .sdp-lift { background:none; border-radius:0; border:0; padding:0; margin:var(--size-14) 0 0; color:var(--color-heading); font-weight:var(--font-weight-medium) }
:where(.sdp-page) .feature-grid { gap:var(--size-24) }
:where(.sdp-page) .sdp-flow-explorer { background:var(--color-primary); border-color:var(--color-primary); padding:var(--size-32); border-radius:var(--size-18); box-shadow:none }
:where(.sdp-page) .sdp-flow-toolbar .eyebrow { color:var(--color-highlight) }
:where(.sdp-page) .sdp-flow-toolbar p { color:var(--color-white); font-family:var(--font-family-display); font-size:var(--size-30); margin:var(--size-14) 0 var(--size-25) }
:where(.sdp-page) .sdp-flow-toolbar { align-items:center }
:where(.sdp-page) .sdp-playback { display:flex; flex-direction:column; align-items:flex-end; gap:var(--size-12); flex-shrink:0 }
:where(.sdp-page) .sdp-playback-state { color:var(--color-surface-accent); font:var(--size-11) var(--font-family-mono) }
:where(.sdp-page) .sdp-flow-play { border:var(--size-1) var(--border-style) var(--color-illustration-72998b); border-radius:var(--size-6); padding:var(--size-10) var(--size-14); background:transparent; color:var(--color-white); font:var(--size-12) var(--font-family-body); cursor:pointer }
:where(.sdp-page) .sdp-flow-tabs { border:0; padding-bottom:var(--size-20); gap:var(--size-10) }
:where(.sdp-page) .sdp-flow-tabs button { color:var(--color-white); border-color:var(--color-illustration-72998b); padding:var(--size-13) var(--size-18); border-radius:var(--size-7); font-size:var(--size-13); background:var(--color-illustration-185043) }
:where(.sdp-page) .sdp-flow-tabs button[aria-selected=true] { background:var(--color-highlight); color:var(--color-heading); border-color:var(--color-highlight) }
:where(.sdp-page) .sdp-tab-number { font:var(--size-10) var(--font-family-mono); margin-right:var(--size-8); opacity:.8 }
:where(.sdp-page) .sdp-flow-progress { height:var(--size-3); background:var(--color-illustration-487769); overflow:hidden; margin:0 0 var(--size-28); border-radius:var(--size-3) }
:where(.sdp-page) .sdp-flow-progress span { display:block; width:0; height:100%; background:var(--color-highlight) }
:where(.sdp-page) .sdp-flow-nodes { background:var(--color-surface); border-radius:var(--size-12); padding:var(--size-28) var(--size-24); gap:var(--size-28) }
:where(.sdp-page) .sdp-flow-nodes>div { box-shadow:none; border:0; background:var(--color-surface-secondary); padding:var(--size-20) var(--size-16); transition:background .3s,transform .3s; min-height:var(--size-140) }
:where(.sdp-page) .sdp-flow-nodes>div:not(:last-child):after { color:var(--color-accent); right:var(--length-px-negative-22) }
:where(.sdp-page) .sdp-flow-nodes .sdp-sw-icon { background:var(--color-surface); border-color:var(--color-border); box-shadow:none }
:where(.sdp-page) .sdp-flow-nodes strong { color:var(--color-heading); font-size:var(--size-16); line-height:var(--line-height-art-1-4) }
:where(.sdp-page) .sdp-flow-nodes small { color:var(--color-text-muted) }
:where(.sdp-page) .sdp-flow-nodes .is-active { background:var(--color-highlight); transform:translateY(var(--length-px-negative-3)) }
:where(.sdp-page) .sdp-flow-nodes .is-complete .sdp-sw-icon { background:var(--color-primary); color:var(--color-highlight); border-color:var(--color-primary) }
:where(.sdp-page) .sdp-flow-result { margin-top:var(--size-18); background:transparent; border:var(--size-1) var(--border-style) var(--color-illustration-72998b); color:var(--color-white); font-size:var(--size-15); line-height:var(--line-height-1-6) }
:where(.sdp-page) .sdp-flow-panel { animation:sdp-flow-enter .4s ease-out }
@keyframes sdp-flow-enter {
from { opacity:.3; transform:translateY(var(--size-5)) }
to { opacity:1; transform:none }
}
:where(.sdp-page) #surec h2 { color:var(--color-heading) }
:where(.sdp-page) #surec h3 { color:var(--color-heading) }
:where(.sdp-page) #surec .eyebrow { color:var(--color-accent) }
:where(.sdp-page) .sdp-process { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-22) var(--size-28); counter-reset:none }
:where(.sdp-page) .sdp-process__step { display:grid; grid-template-columns:var(--size-52) 1fr; gap:var(--size-20); align-items:start; background:var(--color-surface); border:var(--border-default); border-radius:var(--size-14); padding:var(--size-28) }
:where(.sdp-page) .sdp-process__rail { margin:0; display:block }
:where(.sdp-page) .sdp-process__line { display:none }
:where(.sdp-page) .sdp-process__node { width:var(--size-48); height:var(--size-48); background:var(--color-primary); color:var(--color-highlight); border:0; font-size:var(--size-14) }
:where(.sdp-page) .sdp-process__body h3 { font-size:var(--size-19); font-weight:var(--font-weight-bold); margin:0 0 var(--size-12); line-height:var(--line-height-art-1-4) }
:where(.sdp-page) .sdp-process__body p { font-size:var(--size-16); line-height:var(--line-height-relaxed); color:var(--color-text-muted); margin:0 }
:where(.sdp-page) .sdp-process__step:last-child .sdp-process__node { background:var(--color-accent); color:var(--color-white) }
:where(.sdp-page) .sdp-why { border-color:var(--color-border); gap:var(--size-24); margin-top:var(--size-48); padding-top:var(--size-38) }
:where(.sdp-page) .sdp-why-item h3 { font-size:var(--size-18) }
:where(.sdp-page) .sdp-why-item p { font-size:var(--size-15); color:var(--color-text-muted); line-height:var(--line-height-relaxed) }
:where(.sdp-page) .sdp-why .sdp-sw-icon { background:var(--color-surface-secondary); border-color:var(--color-border); color:var(--color-heading) }
:where(.sdp-page) .sdp-questions li { font-size:var(--size-16) }
:where(.sdp-page) .sdp-list li { font-size:var(--size-15) }
:where(.sdp-page) .sdp-service-card p { font-size:var(--size-16) }
:where(.sdp-page) .sdp-case p { font-size:var(--size-16) }
:where(.sdp-page) .sdp-accordion__panel { font-size:var(--size-16) }
:where(.sdp-page) .sdp-service-title h3 { font-size:var(--size-19) }
:where(.sdp-page) .sdp-tags li { font-size:var(--size-14) }
:where(.sdp-page) .sdp-tags.is-tech li { font-size:var(--size-12) }
:where(.sdp-page) .sdp-compare { font-size:var(--size-15) }
:where(.sdp-page) .sdp-compare thead th { font-size:var(--size-13) }
:where(.sdp-page) .sdp-case .sdp-sector { font-size:var(--size-11) }
:where(.sdp-page) .sdp-case .tags { font-size:var(--size-12) }
:where(.sdp-page) .sdp-software-page .lead { color:var(--color-text); font-size:var(--size-17) }
:where(.sdp-page) .sdp-proof-lead { color:var(--color-text); font-size:var(--size-17) }
:where(.sdp-page) .sdp-software-page .hero-lead { color:var(--color-text); font-size:var(--size-17) }
@media(max-width:1000px) {
:where(.sdp-page) .sdp-software-page .hero-grid { gap:4% }
:where(.sdp-page) .sdp-schema { padding:var(--size-22); max-width:var(--size-370) }
:where(.sdp-page) .sdp-layer { gap:var(--size-8) }
:where(.sdp-page) .sdp-layer .sdp-lbl { font-size:var(--size-12) }
:where(.sdp-page) .sdp-layer .sdp-meta { font-size:var(--size-10) }
:where(.sdp-page) .sdp-flow-nodes { gap:var(--size-22); padding:var(--size-22) var(--size-16) }
:where(.sdp-page) .sdp-flow-nodes strong { font-size:var(--size-14) }
:where(.sdp-page) .sdp-flow-nodes>div { padding:var(--size-16) var(--size-12) }
:where(.sdp-page) .sdp-flow-nodes>div:not(:last-child):after { right:var(--length-px-negative-19) }
:where(.sdp-page) .sdp-process__step { padding:var(--size-24); gap:var(--size-16) }
}
@media(max-width:800px) {
:where(.sdp-page) .sdp-software-page .hero-grid { grid-template-columns:1fr }
:where(.sdp-page) .sdp-schema { max-width:var(--size-450); margin:var(--size-30) auto 0 }
:where(.sdp-page) .sdp-layer .sdp-lbl { font-size:var(--size-14) }
:where(.sdp-page) .sdp-layer .sdp-meta { font-size:var(--size-11) }
:where(.sdp-page) .sdp-flow-toolbar { display:flex; align-items:start }
:where(.sdp-page) .sdp-flow-toolbar p { font-size:var(--size-26) }
:where(.sdp-page) .sdp-playback { align-items:flex-start }
:where(.sdp-page) .sdp-process { grid-template-columns:1fr }
:where(.sdp-page) .sdp-why { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-flow-nodes>div { min-height:var(--size-130) }
:where(.sdp-page) .sdp-flow-tabs { flex-wrap:wrap }
}
@media(max-width:520px) {
:where(.sdp-page) .sdp-software-page .hero-section { padding:var(--size-40) 0 }
:where(.sdp-page) .sdp-schema { padding:var(--size-22) var(--size-18); box-shadow:var(--size-6) var(--size-6) 0 var(--color-surface-accent) }
:where(.sdp-page) .sdp-layer .sdp-lbl { font-size:var(--size-13) }
:where(.sdp-page) .sdp-layer .sdp-meta { font-size:var(--size-10) }
:where(.sdp-page) .sdp-flow-explorer { padding:var(--size-25) var(--size-18) }
:where(.sdp-page) .sdp-flow-toolbar { display:block }
:where(.sdp-page) .sdp-playback { flex-direction:row; align-items:center; justify-content:space-between; margin-bottom:var(--size-22) }
:where(.sdp-page) .sdp-flow-toolbar p { font-size:var(--size-27) }
:where(.sdp-page) .sdp-playback-state { font-size:var(--size-10) }
:where(.sdp-page) .sdp-flow-play { font-size:var(--size-11) }
:where(.sdp-page) .sdp-flow-tabs button { font-size:var(--size-11); padding:var(--size-11) var(--size-10) }
:where(.sdp-page) .sdp-tab-number { margin-right:var(--size-4) }
:where(.sdp-page) .sdp-flow-nodes { padding:var(--size-18) var(--size-12); gap:var(--size-16) }
:where(.sdp-page) .sdp-flow-nodes>div { padding:var(--size-14) var(--size-10); min-height:var(--size-135) }
:where(.sdp-page) .sdp-flow-nodes>div:not(:last-child):after { right:var(--length-px-negative-15); font-size:var(--size-13) }
:where(.sdp-page) .sdp-flow-nodes strong { font-size:var(--size-14) }
:where(.sdp-page) .sdp-flow-result { font-size:var(--size-14); padding:var(--size-14) }
:where(.sdp-page) .sdp-process__step { padding:var(--size-22) var(--size-18); grid-template-columns:var(--size-40) 1fr; gap:var(--size-15) }
:where(.sdp-page) .sdp-process__node { width:var(--size-40); height:var(--size-40); font-size:var(--size-12) }
:where(.sdp-page) .sdp-process__body h3 { font-size:var(--size-18) }
:where(.sdp-page) .sdp-process__body p { font-size:var(--size-15) }
:where(.sdp-page) .sdp-why-item h3 { font-size:var(--size-17) }
:where(.sdp-page) .sdp-why-item p { font-size:var(--size-14) }
:where(.sdp-page) .sdp-tags li { font-size:var(--size-12) }
:where(.sdp-page) .sdp-list li { font-size:var(--size-14) }
:where(.sdp-page) .sdp-questions li { font-size:var(--size-15) }
}
/* Integration page: same brand tokens and reference components; independent layout namespace. */
:where(.sdp-page) { color:var(--color-text); font-family:var(--font-family-body); background:var(--color-background) }
:where(.sdp-page) .container { width:calc(100% - var(--page-gutter)*2); max-width:var(--size-1320); margin-inline:auto }
:where(.sdp-page) section { scroll-margin-top:var(--size-160) }
:where(.sdp-page) .sdp-section { padding:var(--size-96) 0 }
:where(.sdp-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(.sdp-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(.sdp-page) h1 { font-size:clamp(var(--size-44),4.5vw,var(--size-68)); max-width:var(--size-660); margin:var(--size-25) 0 }
:where(.sdp-page) h1 em { color:var(--color-accent); font-weight:var(--font-weight-regular) }
:where(.sdp-page) h2 { font-size:var(--font-size-section); max-width:var(--size-860); margin:var(--size-14) 0 var(--size-28) }
:where(.sdp-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(.sdp-page) p { font-size:var(--size-16); line-height:var(--line-height-relaxed); margin:0 0 var(--size-18) }
:where(.sdp-page) p:last-child { margin-bottom:0 }
:where(.sdp-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(.sdp-page) .sdp-mark { display:none }
:where(.sdp-page) .sdp-head { margin-bottom:var(--size-42) }
:where(.sdp-page) .sdp-head>.body { max-width:var(--size-920) }
:where(.sdp-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(.sdp-page) .sdp-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(.sdp-page) .sdp-int-icon svg { width:var(--size-24); height:var(--size-24) }
:where(.sdp-page) .sdp-hero { padding:var(--size-70) 0 }
:where(.sdp-page) .sdp-hero__grid { display:grid; grid-template-columns:1.16fr .84fr; gap:7%; align-items:center }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-hero__lead p { font-size:var(--size-17) }
:where(.sdp-page) .sdp-hero__lead .body { font-size:var(--size-16); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-hero__actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--size-24); margin:var(--size-28) 0 }
:where(.sdp-page) .sdp-cta__actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--size-24); margin:var(--size-28) 0 }
:where(.sdp-page) .sdp-band__actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--size-24); margin:var(--size-28) 0 }
:where(.sdp-page) .sdp-hero__note { font-size:var(--size-13)!important; max-width:var(--size-560); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-hero__meta li:before { content:'✓'; margin-right:var(--size-7); color:var(--color-accent) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-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(.sdp-page) .sdp-map-top { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--size-14) }
:where(.sdp-page) .sdp-map-bottom { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-50); margin-inline:var(--size-20) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-map-node .sdp-int-icon { width:var(--size-34); height:var(--size-34); border:0; background:transparent }
:where(.sdp-page) .sdp-map-node b { font-size:var(--size-12); font-weight:var(--font-weight-medium); white-space:nowrap }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-map-hub .sdp-int-icon { background:var(--color-illustration-185043); color:var(--color-highlight); border-color:var(--color-illustration-487769) }
:where(.sdp-page) .sdp-map-hub b { display:block; font:var(--size-26) var(--font-family-display) }
:where(.sdp-page) .sdp-map-hub small { display:block; font-size:var(--size-9); color:var(--color-on-primary-muted); margin-top:var(--size-5) }
:where(.sdp-page) .sdp-map-wires { height:var(--size-31); display:flex; justify-content:space-around; margin-inline:12% }
:where(.sdp-page) .sdp-map-wires i { display:block; width:var(--size-1); background:var(--color-border-strong); position:relative }
:where(.sdp-page) .sdp-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:sdp-data-pulse 4s linear infinite }
:where(.sdp-page) .sdp-map-wires i:nth-child(2):after { animation-delay:1.4s }
:where(.sdp-page) .sdp-map-wires i:nth-child(3):after { animation-delay:2.8s }
:where(.sdp-page) .sdp-bottom-wires { margin-inline:21% }
:where(.sdp-page) .sdp-connection-map .figure-note { text-align:center }
@keyframes sdp-data-pulse {
0% { transform:translateY(0); opacity:0 }
15%,85% { opacity:1 }
100% { transform:translateY(var(--size-27)); opacity:0 }
}
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-integration-nav>.container { display:flex; justify-content:space-between; align-items:center; gap:var(--size-25) }
:where(.sdp-page) .sdp-integration-nav>.container>span { font:var(--size-12) var(--font-family-mono); color:var(--color-primary) }
:where(.sdp-page) .sdp-integration-nav .container>div { display:flex; gap:var(--size-30); overflow:auto }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-integration-nav a[aria-current] { border-color:var(--color-accent); color:var(--color-accent) }
:where(.sdp-page) #mimari { background:var(--color-surface) }
:where(.sdp-page) #senaryolar { background:var(--color-surface) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-speclist li { border-top:var(--border-default); padding-top:var(--size-22); position:relative }
:where(.sdp-page) .sdp-speclist .sdp-ix { position:absolute; right:0; top:var(--size-28); font:var(--size-11) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-speclist .sdp-int-icon { margin-bottom:var(--size-18) }
:where(.sdp-page) .sdp-speclist p { font-size:var(--size-15); color:var(--color-text-muted); margin:0 }
:where(.sdp-page) .sdp-speclist strong { display:block; font-size:var(--size-18); color:var(--color-heading); margin-bottom:var(--size-10) }
:where(.sdp-page) .sdp-speclist li:last-child { grid-column:span 2 }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-player-heading { display:flex; justify-content:space-between; align-items:center; gap:var(--size-30); margin-bottom:var(--size-25) }
:where(.sdp-page) .sdp-integration-player .eyebrow { color:var(--color-highlight) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-player-controls { display:flex; flex-direction:column; align-items:flex-end; gap:var(--size-10); flex-shrink:0 }
:where(.sdp-page) .sdp-player-count { font:var(--size-10) var(--font-family-mono); color:var(--color-surface-accent) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-player-tabs { display:flex; gap:var(--size-10); flex-wrap:wrap; margin-bottom:var(--size-22) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-player-tabs small { font:var(--size-10) var(--font-family-mono); margin-right:var(--size-12) }
:where(.sdp-page) .sdp-player-tabs [aria-selected=true] { background:var(--color-highlight); color:var(--color-primary); border-color:var(--color-highlight) }
:where(.sdp-page) .sdp-player-progress { height:var(--size-3); background:var(--color-illustration-487769); border-radius:var(--size-4); overflow:hidden; margin-bottom:var(--size-25) }
:where(.sdp-page) .sdp-player-progress span { display:block; width:0; height:100%; background:var(--color-highlight) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-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(.sdp-page) .sdp-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(.sdp-page) .sdp-step-index { float:right; font:var(--size-10) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-scene-step .sdp-int-icon { background:var(--color-surface); width:var(--size-36); height:var(--size-36); margin-bottom:var(--size-17) }
:where(.sdp-page) .sdp-scene-step svg { width:var(--size-21); height:var(--size-21) }
:where(.sdp-page) .sdp-scene-step strong { display:block; font-size:var(--size-16); line-height:var(--line-height-art-1-4); margin-bottom:var(--size-8) }
:where(.sdp-page) .sdp-scene-step>small { font:var(--size-11) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-scene-step.is-active { background:var(--color-highlight); transform:translateY(var(--length-px-negative-3)) }
:where(.sdp-page) .sdp-scene-step.is-complete .sdp-int-icon { background:var(--color-primary); color:var(--color-highlight); border-color:var(--color-primary) }
:where(.sdp-page) .sdp-integration-player .sdp-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(.sdp-page) .sdp-integration-player .sdp-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(.sdp-page) .sdp-scene { animation:sdp-scene-in .4s ease-out }
@keyframes sdp-scene-in {
from { opacity:.3; transform:translateY(var(--size-4)) }
to { opacity:1; transform:none }
}
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-connection-compare>div { padding:var(--size-32); background:var(--color-surface) }
:where(.sdp-page) .sdp-connection-compare .sdp-connected-side { background:var(--color-surface-accent) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-transfer-row { display:flex; align-items:center; gap:var(--size-10); justify-content:space-between; margin-bottom:var(--size-20) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-transfer-row b { color:var(--color-accent); font-weight:var(--font-weight-regular) }
:where(.sdp-page) .sdp-manual-side .sdp-transfer-row b { color:var(--color-text-muted) }
:where(.sdp-page) .sdp-connection-compare p { font-size:var(--size-12); color:var(--color-text-muted); margin:0 }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-symptoms { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 var(--size-28); margin:0; padding:0; list-style:none }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-symptoms .sdp-ix { font:var(--size-11) var(--font-family-mono); color:var(--color-accent); padding-top:var(--size-5) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-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(.sdp-page) .sdp-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(.sdp-page) .sdp-resilience-copy p { font-size:var(--size-15) }
:where(.sdp-page) .sdp-resilience figcaption { font:var(--size-10) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-tree-source span { color:var(--color-highlight); margin:0 var(--size-20) }
:where(.sdp-page) .sdp-tree-branches { padding:var(--size-20) 0 0 var(--size-25); position:relative }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-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(.sdp-page) .sdp-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(.sdp-page) .sdp-branch-label { display:block; font:var(--size-10) var(--font-family-mono); color:var(--color-accent); margin-bottom:var(--size-5) }
:where(.sdp-page) .sdp-tree-branches b { font-size:var(--size-14); font-weight:var(--font-weight-bold) }
:where(.sdp-page) .sdp-tree-branches small { display:block; margin-top:var(--size-3); font-size:var(--size-12); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-pillars { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--size-24) }
:where(.sdp-page) .sdp-pillar { padding:var(--size-27); border:var(--border-default); border-radius:var(--size-14); min-width:0 }
:where(.sdp-page) .sdp-pillar .sdp-int-icon { display:flex; margin-bottom:var(--size-20) }
:where(.sdp-page) .sdp-pillar .sdp-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(.sdp-page) .sdp-pillar h3 { font-size:var(--size-18) }
:where(.sdp-page) .sdp-pillar p { font-size:var(--size-15); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-outcomes-wrap .sdp-subhead { color:var(--color-highlight); margin-top:0!important }
:where(.sdp-page) .sdp-check { list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--size-20) var(--size-36); margin:0 }
:where(.sdp-page) .sdp-check li { font-size:var(--size-15); line-height:var(--line-height-1-6); position:relative; padding-left:var(--size-26) }
:where(.sdp-page) .sdp-check li:before { content:'✓'; position:absolute; left:0; color:var(--color-highlight) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-compare th { text-align:left; padding:var(--size-20) var(--size-24); vertical-align:top; border-bottom:var(--border-default) }
:where(.sdp-page) .sdp-compare td { text-align:left; padding:var(--size-20) var(--size-24); vertical-align:top; border-bottom:var(--border-default) }
:where(.sdp-page) .sdp-compare thead th { background:var(--color-surface-accent); font-size:var(--size-12); font-weight:var(--font-weight-medium) }
:where(.sdp-page) .sdp-compare thead th:last-child { background:var(--color-primary); color:var(--color-white) }
:where(.sdp-page) .sdp-compare td:last-child { background:var(--color-surface-secondary); color:var(--color-primary) }
:where(.sdp-page) .sdp-compare td:nth-child(2) { color:var(--color-text-muted) }
:where(.sdp-page) .sdp-compare tbody th { font-weight:var(--font-weight-medium); width:23% }
:where(.sdp-page) .sdp-compare tr:last-child>* { border-bottom:0 }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-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(.sdp-page) .sdp-tags { display:flex; flex-wrap:wrap; gap:var(--size-8) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-featured-map { text-align:center }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-product-spokes { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--size-12); position:relative }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-product-spokes>span { display:flex; flex-direction:column; align-items:center; gap:var(--size-10); font-size:var(--size-11) }
:where(.sdp-page) .sdp-product-spokes .sdp-int-icon { background:var(--color-surface) }
:where(.sdp-page) .sdp-featured-map>small { display:block; font:var(--size-10) var(--font-family-mono); margin-top:var(--size-25); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-scenarios { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-24) }
:where(.sdp-page) .sdp-scenario { padding:var(--size-30); border:var(--border-default); border-radius:var(--size-14) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-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(.sdp-page) .sdp-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(.sdp-page) .sdp-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(.sdp-page) .sdp-case-flow .sdp-int-icon { background:var(--color-surface) }
:where(.sdp-page) .sdp-scenario dl { margin:0 }
:where(.sdp-page) .sdp-scenario dl>div { margin-top:var(--size-20) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-scenario dd { margin:0; font-size:var(--size-15); line-height:var(--line-height-relaxed); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-scenario dl>div:last-child { border-top:var(--border-default); padding-top:var(--size-20) }
:where(.sdp-page) .sdp-scenario dl>div:last-child dd { color:var(--color-primary) }
:where(.sdp-page) .sdp-scope { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-24) }
:where(.sdp-page) .sdp-scope__group { padding:var(--size-32); background:var(--color-surface); border:var(--border-default); border-radius:var(--size-14) }
:where(.sdp-page) .sdp-scope__head { display:flex; align-items:center; gap:var(--size-18); margin-bottom:var(--size-22); position:relative; padding-right:var(--size-25) }
:where(.sdp-page) .sdp-scope__head h3 { margin:0; font-size:var(--size-21) }
:where(.sdp-page) .sdp-scope__letter { position:absolute; right:0; top:0; font:var(--size-11) var(--font-family-mono); color:var(--color-accent) }
:where(.sdp-page) .sdp-scope__group>p { color:var(--color-text-muted) }
:where(.sdp-page) .sdp-scope__group ul { padding:var(--size-18) 0 0; list-style:none; border-top:var(--border-default); margin:var(--size-22) 0 0 }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-scope__group li:before { content:'✓'; position:absolute; left:0; color:var(--color-accent) }
:where(.sdp-page) .sdp-two { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-50); margin-top:var(--size-25) }
:where(.sdp-page) .sdp-deliverables { padding:0; list-style:none; margin:0; counter-reset:deliverable }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-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(.sdp-page) .sdp-methods { display:flex; flex-wrap:wrap; gap:var(--size-9); list-style:none; padding:0; margin:var(--size-25) 0 }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-methods-note { font-size:var(--size-14)!important; color:var(--color-text-muted) }
:where(.sdp-page) .sdp-method-graphics { display:grid; gap:var(--size-14) }
:where(.sdp-page) .sdp-method-graphics>div { border:var(--border-default); border-radius:var(--size-8); padding:var(--size-18); background:var(--color-surface) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-method-graphics p { font-size:var(--size-11); margin:var(--size-10) 0 0; color:var(--color-text-muted) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-signal i { height:var(--size-6); flex:1; border-radius:var(--size-2); background:var(--color-border-strong) }
:where(.sdp-page) .sdp-signal.sdp-realtime i:nth-child(3n+1) { background:var(--color-primary); height:var(--size-22); width:var(--size-4); flex:.25 }
:where(.sdp-page) .sdp-signal.sdp-batch i { height:var(--size-20); background:var(--color-surface-accent) }
:where(.sdp-page) .sdp-signal.sdp-batch i:nth-child(3n) { background:var(--color-accent); margin-right:var(--size-10) }
:where(.sdp-page) .sdp-signal.sdp-queue i { height:var(--size-14); border:var(--size-1) var(--border-style) var(--color-accent); background:var(--color-surface-secondary) }
:where(.sdp-page) .sdp-signal.sdp-queue i:first-child { background:var(--color-primary) }
:where(.sdp-page) .sdp-process { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-24) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-step>.sdp-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(.sdp-page) .sdp-step p { font-size:var(--size-16); color:var(--color-text-muted); margin:0 }
:where(.sdp-page) .sdp-step h3 { font-size:var(--size-19) }
:where(.sdp-page) .sdp-why { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-30); margin-top:var(--size-25) }
:where(.sdp-page) .sdp-why__item { border-top:var(--border-default); padding-top:var(--size-25) }
:where(.sdp-page) .sdp-why__item .sdp-int-icon { margin-bottom:var(--size-20) }
:where(.sdp-page) .sdp-why__item p { font-size:var(--size-15); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-why__item:last-child { grid-column:span 2 }
:where(.sdp-page) .sdp-why__item h3 { font-size:var(--size-18) }
/*:where(.sdp-page) .sdp-cta { max-width:var(--size-940) }*/
:where(.sdp-page) .sdp-cta__note { font-size:var(--size-13)!important; color:var(--color-text-muted) }
:where(.sdp-page) #sss>.container { display:grid; grid-template-columns:.7fr 1.3fr; gap:8% }
:where(.sdp-page) #sss .sdp-head { position:sticky; top:var(--size-170); align-self:start }
:where(.sdp-page) .sdp-faq-topics { display:grid; margin-top:var(--size-30) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-faq-topics span { color:var(--color-accent) }
:where(.sdp-page) .sdp-faq__group { scroll-margin-top:var(--size-170); margin-bottom:var(--size-35) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-qa { border-bottom:var(--border-default) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-qa summary::-webkit-details-marker { display:none }
:where(.sdp-page) .sdp-qa summary:after { content:'+'; font-size:var(--size-22); color:var(--color-accent); flex-shrink:0 }
:where(.sdp-page) .sdp-qa[open] summary:after { content:'−' }
:where(.sdp-page) .sdp-qa__a { padding:0 var(--size-24) var(--size-22) 0; color:var(--color-text-muted) }
:where(.sdp-page) .sdp-qa__a p { font-size:var(--size-15) }
:where(.sdp-page) .sdp-band { background:var(--color-primary); color:var(--color-on-primary-muted); padding:var(--size-85) 0 }
:where(.sdp-page) .sdp-band h2 { color:var(--color-white); max-width:var(--size-800); font-size:var(--font-size-closing) }
:where(.sdp-page) .sdp-band .lead { max-width:var(--size-880); font-size:var(--size-17) }
:where(.sdp-page) .sdp-band__note { font-size:var(--size-13)!important; max-width:var(--size-800) }
:where(.sdp-page) [hidden] { display:none!important }
:where(.sdp-page) button:focus-visible { outline:var(--size-3) var(--border-style) var(--color-highlight); outline-offset:var(--size-4) }
@media(max-width:1100px) {
:where(.sdp-page) .sdp-pillars { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-hero__grid { gap:4% }
:where(.sdp-page) .sdp-connection-map { padding:var(--size-22) }
:where(.sdp-page) .sdp-map-top { gap:var(--size-9) }
:where(.sdp-page) .sdp-speclist { grid-template-columns:repeat(3,1fr) }
:where(.sdp-page) .sdp-speclist li:last-child { grid-column:auto }
:where(.sdp-page) .sdp-connection-compare>div { padding:var(--size-25) }
:where(.sdp-page) .sdp-transfer-row { gap:var(--size-6) }
:where(.sdp-page) .sdp-transfer-row span { padding:var(--size-10) var(--size-8); font-size:var(--size-11) }
:where(.sdp-page) .sdp-featured { padding:var(--size-30); gap:5% }
:where(.sdp-page) .sdp-scene-step strong { font-size:var(--size-14) }
:where(.sdp-page) .sdp-scene-flow { gap:var(--size-23) }
:where(.sdp-page) .sdp-why { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:800px) {
:where(.sdp-page) .sdp-section { padding:var(--size-70) 0 }
:where(.sdp-page) .sdp-hero__grid { grid-template-columns:1fr }
:where(.sdp-page) .sdp-hero { padding:var(--size-45) 0 }
:where(.sdp-page) .sdp-connection-map { margin:var(--size-35) 0 0; max-width:var(--size-440); padding:var(--size-28) }
:where(.sdp-page) .sdp-integration-nav>.container>span { display:none }
:where(.sdp-page) .sdp-integration-nav .container>div { width:100%; justify-content:space-between; gap:var(--size-20) }
:where(.sdp-page) .sdp-hero__lead p { max-width:var(--size-670) }
:where(.sdp-page) .sdp-speclist { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-speclist li:last-child { grid-column:span 2 }
:where(.sdp-page) .sdp-connection-compare { grid-template-columns:1fr }
:where(.sdp-page) .sdp-symptoms { grid-template-columns:1fr 1fr }
:where(.sdp-page) .sdp-resilience { grid-template-columns:1fr; gap:var(--size-30) }
:where(.sdp-page) .sdp-resilience-copy h3 br { display:none }
:where(.sdp-page) .sdp-featured { grid-template-columns:1fr; gap:var(--size-35) }
:where(.sdp-page) .sdp-featured-map { max-width:var(--size-460); width:100%; margin:auto }
:where(.sdp-page) .sdp-scenarios { grid-template-columns:1fr }
:where(.sdp-page) .sdp-scope { grid-template-columns:1fr }
:where(.sdp-page) .sdp-two { grid-template-columns:1fr }
:where(.sdp-page) .sdp-process { grid-template-columns:1fr }
:where(.sdp-page) .sdp-two { gap:var(--size-20) }
:where(.sdp-page) .sdp-check { grid-template-columns:1fr }
:where(.sdp-page) .sdp-player-heading { align-items:flex-start }
:where(.sdp-page) .sdp-player-heading h3 { font-size:var(--size-27) }
:where(.sdp-page) .sdp-scene-flow { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-scene-step:nth-child(2):after { display:none }
:where(.sdp-page) .sdp-scene-step strong { font-size:var(--size-16) }
:where(.sdp-page) .sdp-scene-step small { font-size:var(--size-11) }
:where(.sdp-page) #sss>.container { grid-template-columns:1fr; gap:var(--size-15) }
:where(.sdp-page) #sss .sdp-head { position:static }
:where(.sdp-page) .sdp-faq-topics { display:flex; flex-wrap:wrap; gap:var(--size-10) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-faq-topics span { display:none }
:where(.sdp-page) .sdp-compare td { padding:var(--size-16) }
:where(.sdp-page) .sdp-compare th { padding:var(--size-16) }
}
@media(max-width:520px) {
:where(.sdp-page) .sdp-section { padding:var(--size-58) 0 }
:where(.sdp-page) h1 { font-size:var(--size-44) }
:where(.sdp-page) h2 { font-size:var(--size-34) }
:where(.sdp-page) .sdp-head { margin-bottom:var(--size-30) }
:where(.sdp-page) p { font-size:var(--size-16) }
:where(.sdp-page) .sdp-hero__lead p { font-size:var(--size-16) }
:where(.sdp-page) .sdp-hero__note { font-size:var(--size-12)!important }
:where(.sdp-page) .sdp-hero__actions { gap:var(--size-20) }
:where(.sdp-page) .sdp-hero__meta { font-size:var(--size-10) }
:where(.sdp-page) .sdp-connection-map { padding:var(--size-24) var(--size-20); box-shadow:var(--size-5) var(--size-5) 0 var(--color-surface-accent) }
:where(.sdp-page) .sdp-connection-map figcaption { font-size:var(--size-9) }
:where(.sdp-page) .sdp-map-node { padding:var(--size-12) var(--size-6) }
:where(.sdp-page) .sdp-map-node b { font-size:var(--size-11) }
:where(.sdp-page) .sdp-map-hub b { font-size:var(--size-24) }
:where(.sdp-page) .sdp-map-hub small { font-size:var(--size-8) }
:where(.sdp-page) .sdp-map-bottom { margin-inline:var(--size-12); gap:var(--size-35) }
:where(.sdp-page) .sdp-integration-nav .container>div { justify-content:flex-start; gap:var(--size-23) }
:where(.sdp-page) .sdp-integration-nav a { font-size:var(--size-11) }
:where(.sdp-page) .sdp-speclist { gap:var(--size-25) var(--size-20) }
:where(.sdp-page) .sdp-speclist strong { font-size:var(--size-17) }
:where(.sdp-page) .sdp-speclist p { font-size:var(--size-14) }
:where(.sdp-page) .sdp-integration-player { padding:var(--size-25) var(--size-18) }
:where(.sdp-page) .sdp-player-heading { display:block }
:where(.sdp-page) .sdp-player-heading h3 { font-size:var(--size-28) }
:where(.sdp-page) .sdp-player-controls { flex-direction:row; justify-content:space-between; align-items:center; margin-top:var(--size-24) }
:where(.sdp-page) .sdp-player-tabs { gap:var(--size-8) }
:where(.sdp-page) .sdp-player-tabs button { font-size:var(--size-11); padding:var(--size-11) var(--size-10) }
:where(.sdp-page) .sdp-player-tabs small { margin-right:var(--size-6); font-size:var(--size-9) }
:where(.sdp-page) .sdp-scene-flow { padding:var(--size-18) var(--size-12); gap:var(--size-18) }
:where(.sdp-page) .sdp-scene-step { padding:var(--size-15) var(--size-10) }
:where(.sdp-page) .sdp-scene-step:not(:last-child):after { right:var(--length-px-negative-16); font-size:var(--size-14) }
:where(.sdp-page) .sdp-scene-step strong { font-size:var(--size-14) }
:where(.sdp-page) .sdp-scene-step>small { font-size:var(--size-10) }
:where(.sdp-page) .sdp-scene-step .sdp-int-icon { width:var(--size-32); height:var(--size-32) }
:where(.sdp-page) .sdp-integration-player .sdp-scene-result { font-size:var(--size-14); padding:var(--size-15) }
:where(.sdp-page) .sdp-integration-player .sdp-player-note { font-size:var(--size-9) }
:where(.sdp-page) .sdp-symptoms { grid-template-columns:1fr }
:where(.sdp-page) .sdp-symptoms li { padding:var(--size-18) 0 }
:where(.sdp-page) .sdp-connection-compare>div { padding:var(--size-25) var(--size-20) }
:where(.sdp-page) .sdp-connection-compare h3 { font-size:var(--size-25) }
:where(.sdp-page) .sdp-transfer-row span { font-size:var(--size-10); padding:var(--size-11) var(--size-7) }
:where(.sdp-page) .sdp-connection-compare p { font-size:var(--size-11) }
:where(.sdp-page) .sdp-cost-note { padding:var(--size-22) }
:where(.sdp-page) .sdp-resilience { padding:var(--size-25) var(--size-20) }
:where(.sdp-page) .sdp-resilience-copy h3 { font-size:var(--size-29) }
:where(.sdp-page) .sdp-tree-source { font-size:var(--size-12) }
:where(.sdp-page) .sdp-tree-source span { margin:0 var(--size-13) }
:where(.sdp-page) .sdp-tree-branches b { font-size:var(--size-13) }
:where(.sdp-page) .sdp-pillars { grid-template-columns:1fr }
:where(.sdp-page) .sdp-pillar { padding:var(--size-26) }
:where(.sdp-page) .sdp-pillar p { font-size:var(--size-16) }
:where(.sdp-page) .sdp-outcomes-wrap { padding:var(--size-26) var(--size-22) }
:where(.sdp-page) .sdp-check li { font-size:var(--size-14) }
:where(.sdp-page) .sdp-compare { display:block; width:100% }
:where(.sdp-page) .sdp-compare tbody { display:block; width:100% }
:where(.sdp-page) .sdp-compare tr { display:block; width:100% }
:where(.sdp-page) .sdp-compare tbody th { display:block; width:100% }
:where(.sdp-page) .sdp-compare td { display:block; width:100% }
:where(.sdp-page) .sdp-compare thead { display:none }
:where(.sdp-page) .sdp-compare tbody th { background:var(--color-surface-accent); padding:var(--size-14) var(--size-18) }
:where(.sdp-page) .sdp-compare td { font-size:var(--size-14); padding:var(--size-17) var(--size-18) }
:where(.sdp-page) .sdp-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(.sdp-page) .sdp-compare tr:last-child>* { border-bottom:var(--border-default) }
:where(.sdp-page) .sdp-featured { padding:var(--size-26) }
:where(.sdp-page) .sdp-featured h3 { font-size:var(--size-27) }
:where(.sdp-page) .sdp-product-spokes { gap:var(--size-7) }
:where(.sdp-page) .sdp-product-spokes .sdp-int-icon { width:var(--size-37); height:var(--size-37) }
:where(.sdp-page) .sdp-product-spokes>span { font-size:var(--size-10) }
:where(.sdp-page) .sdp-scenario { padding:var(--size-26) var(--size-22) }
:where(.sdp-page) .sdp-scenario>h3 { font-size:var(--size-26) }
:where(.sdp-page) .sdp-scenario dd { font-size:var(--size-15) }
:where(.sdp-page) .sdp-case-flow { gap:var(--size-15); padding:var(--size-20) var(--size-10) }
:where(.sdp-page) .sdp-case-flow>div { font-size:var(--size-10) }
:where(.sdp-page) .sdp-case-flow>div:not(:last-child):after { right:var(--length-px-negative-14) }
:where(.sdp-page) .sdp-scope__group { padding:var(--size-26) var(--size-22) }
:where(.sdp-page) .sdp-scope__head h3 { font-size:var(--size-19) }
:where(.sdp-page) .sdp-scope__head { gap:var(--size-14) }
:where(.sdp-page) .sdp-scope__group li { font-size:var(--size-14) }
:where(.sdp-page) .sdp-step { grid-template-columns:var(--size-39) 1fr; gap:var(--size-15); padding:var(--size-24) var(--size-18) }
:where(.sdp-page) .sdp-step>.sdp-no { width:var(--size-39); height:var(--size-39); font-size:var(--size-11) }
:where(.sdp-page) .sdp-step h3 { font-size:var(--size-18) }
:where(.sdp-page) .sdp-step p { font-size:var(--size-15) }
:where(.sdp-page) .sdp-why { gap:var(--size-25) var(--size-20) }
:where(.sdp-page) .sdp-why__item h3 { font-size:var(--size-17) }
:where(.sdp-page) .sdp-why__item p { font-size:var(--size-14) }
:where(.sdp-page) .sdp-qa summary { font-size:var(--size-15) }
:where(.sdp-page) .sdp-band { padding:var(--size-65) 0 }
:where(.sdp-page) .sdp-band h2 { font-size:var(--size-38) }
:where(.sdp-page) .sdp-band .lead { font-size:var(--size-16) }
}
@media(prefers-reduced-motion:reduce) {
:where(.sdp-page) .sdp-map-wires i:after { animation:none }
:where(.sdp-page) .sdp-scene { animation:none }
:where(.sdp-page) .sdp-scene-step { transition:none; transform:none!important }
}
@media print {
:where(.sdp-page) .sdp-integration-nav { display:none }
:where(.sdp-page) .site-header { display:none }
:where(.sdp-page) .sdp-player-controls { display:none }
:where(.sdp-page) .sdp-player-tabs { display:none }
:where(.sdp-page) .sdp-player-progress { display:none }
:where(.sdp-page) .sdp-section { padding:var(--size-25) 0 }
:where(.sdp-page) .container { width:100% }
:where(.sdp-page) .sdp-scene[hidden] { display:block!important }
:where(.sdp-page) .sdp-qa__a { display:block!important }
:where(.sdp-page) .sdp-step { break-inside:avoid }
:where(.sdp-page) .sdp-pillar { break-inside:avoid }
:where(.sdp-page) .sdp-scope__group { break-inside:avoid }
}
/* Performance-specific composition; all brand tokens and shared chrome retained. */
:where(.sdp-page) .sdp-section { padding:var(--size-96) 0 }
:where(.sdp-page) .sdp-hero { padding:var(--size-65) 0 }
:where(.sdp-page) .sdp-hero-grid { display:grid; grid-template-columns:1.18fr .82fr; gap:7%; align-items:center }
:where(.sdp-page) .sdp-hero .lead { font-size:var(--size-17); line-height:var(--line-height-relaxed) }
:where(.sdp-page) .sdp-actions { display:flex; flex-wrap:wrap; gap:var(--size-24); align-items:center; margin:var(--size-28) 0 }
:where(.sdp-page) .sdp-note { font-size:var(--size-13); color:var(--color-text-muted); line-height:var(--line-height-relaxed) }
:where(.sdp-page) .sdp-hero-meta { display:flex; gap:var(--size-12); flex-wrap:wrap; font:var(--size-11)/var(--line-height-1-7) var(--font-family-mono)!important; color:var(--color-accent); margin-top:var(--size-23)!important }
:where(.sdp-page) .sdp-head .lead { max-width:var(--size-920) }
:where(.sdp-page) .sdp-head { margin-bottom:var(--size-42) }
:where(.sdp-page) .sdp-performance-chart { max-width:var(--size-440); width:100%; margin:0; 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(.sdp-page) .sdp-performance-chart figcaption { font:var(--size-10)/var(--line-height-1-5) var(--font-family-mono); color:var(--color-accent); letter-spacing:var(--letter-spacing-08em) }
:where(.sdp-page) .sdp-performance-chart h3 { font:var(--size-32)/var(--line-height-1-14) var(--font-family-display); font-weight:var(--font-weight-regular); margin:var(--size-20) 0 var(--size-25) }
:where(.sdp-page) .sdp-performance-chart svg { width:100%; display:block; overflow:visible }
:where(.sdp-page) .sdp-performance-chart svg text { font:var(--size-11) var(--font-family-body); fill:var(--color-illustration-435c50) }
:where(.sdp-page) .sdp-chart-legend { display:grid; gap:var(--size-12); font-size:var(--size-11); margin-top:var(--size-5) }
:where(.sdp-page) .sdp-chart-legend>span { display:flex; align-items:center; gap:var(--size-10) }
:where(.sdp-page) .sdp-chart-legend>span:before { content:''; width:var(--size-25); border-top:var(--size-3) var(--border-style) var(--color-primary) }
:where(.sdp-page) .sdp-chart-legend .sdp-legend-dashed:before { border-top:var(--size-3) dashed var(--color-illustration-789085) }
:where(.sdp-page) .sdp-performance-chart p { font:var(--size-10)/var(--line-height-1-65) var(--font-family-mono); color:var(--color-text-muted); margin:var(--size-22) 0 0 }
:where(.sdp-page) .sdp-ensures { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-22) var(--size-30); padding:0; margin:var(--size-40) 0 }
:where(.sdp-page) .sdp-ensures li { font-size:var(--size-15); line-height:var(--line-height-1-7); position:relative; padding:var(--size-22) 0 0 var(--size-25); border-top:var(--border-default) }
:where(.sdp-page) .sdp-ensures li:before { content:'✓'; position:absolute; top:var(--size-22); left:0; color:var(--color-accent) }
:where(.sdp-page) .sdp-ensures li:last-child { grid-column:span 3 }
:where(.sdp-page) .sdp-closing-note { padding:var(--size-25) var(--size-30); border-left:var(--size-3) var(--border-style) var(--color-accent); background:var(--color-surface-callout); margin-top:var(--size-35)!important }
:where(.sdp-page) .sdp-pull { padding:var(--size-25) var(--size-30); border-left:var(--size-3) var(--border-style) var(--color-accent); background:var(--color-surface-callout); margin-top:var(--size-35)!important }
:where(.sdp-page) .sdp-compare-close { padding:var(--size-25) var(--size-30); border-left:var(--size-3) var(--border-style) var(--color-accent); background:var(--color-surface-callout); margin-top:var(--size-35)!important }
:where(.sdp-page) .sdp-outputs-close { padding:var(--size-25) var(--size-30); border-left:var(--size-3) var(--border-style) var(--color-accent); background:var(--color-surface-callout); margin-top:var(--size-35)!important }
:where(.sdp-page) .sdp-pull { font:var(--size-25)/var(--line-height-1-45) var(--font-family-display); color:var(--color-heading) }
:where(.sdp-page) .sdp-capacity-player { background:var(--color-primary); border-radius:var(--size-18); padding:var(--size-32); color:var(--color-white); margin-top:var(--size-35) }
:where(.sdp-page) .sdp-capacity-player .eyebrow { color:var(--color-highlight) }
:where(.sdp-page) .sdp-capacity-player .sdp-player-heading h3 { color:var(--color-white) }
:where(.sdp-page) .sdp-capacity-player .sdp-player-note { font:var(--size-10)/var(--line-height-1-65) var(--font-family-mono); color:var(--color-on-primary-muted); margin:var(--size-22) 0 0 }
:where(.sdp-page) .sdp-capacity-diagram { display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:var(--size-38); align-items:center; padding:var(--size-28); background:var(--color-surface); border-radius:var(--size-12); color:var(--color-primary) }
:where(.sdp-page) .sdp-demand { text-align:center; position:relative }
:where(.sdp-page) .sdp-balance { text-align:center; position:relative }
:where(.sdp-page) .sdp-demand:after { content:'→'; position:absolute; right:var(--length-px-negative-27); top:45%; color:var(--color-accent); font-size:var(--size-23) }
:where(.sdp-page) .sdp-balance:after { content:'→'; position:absolute; right:var(--length-px-negative-27); top:45%; color:var(--color-accent); font-size:var(--size-23) }
:where(.sdp-page) .sdp-demand>.sdp-int-icon { margin-bottom:var(--size-16) }
:where(.sdp-page) .sdp-balance>.sdp-int-icon { margin-bottom:var(--size-16) }
:where(.sdp-page) .sdp-demand strong { display:block; font-size:var(--size-16); line-height:var(--line-height-art-1-4) }
:where(.sdp-page) .sdp-balance strong { display:block; font-size:var(--size-16); line-height:var(--line-height-art-1-4) }
:where(.sdp-page) .sdp-demand>span:not(.sdp-int-icon) { font:var(--size-11)/var(--line-height-1-6) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-balance small { font:var(--size-11)/var(--line-height-1-6) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-demand-bars { display:flex; gap:var(--size-8); align-items:flex-end; justify-content:center; height:var(--size-64); margin:var(--size-10) 0 }
:where(.sdp-page) .sdp-demand-bars i { width:var(--size-13); background:var(--color-illustration-9fc7b2); border-radius:var(--size-3) var(--size-3) 0 0 }
:where(.sdp-page) .sdp-demand-bars i:nth-child(even) { background:var(--color-accent) }
:where(.sdp-page) .sdp-balance { padding:var(--size-24) var(--size-12); border:var(--size-1) var(--border-style) var(--color-border); background:var(--color-surface-secondary); border-radius:var(--size-9) }
:where(.sdp-page) .sdp-balance small { display:block; margin-top:var(--size-8) }
:where(.sdp-page) .sdp-instances { display:grid; gap:var(--size-11) }
:where(.sdp-page) .sdp-instance { display:flex; align-items:center; gap:var(--size-13); border:var(--border-default); border-radius:var(--size-8); padding:var(--size-13); background:var(--color-surface-secondary) }
:where(.sdp-page) .sdp-instance .sdp-int-icon { width:var(--size-36); height:var(--size-36); background:var(--color-surface) }
:where(.sdp-page) .sdp-instance svg { width:var(--size-22); height:var(--size-22) }
:where(.sdp-page) .sdp-instance b { display:block; font-size:var(--size-13); font-weight:var(--font-weight-medium) }
:where(.sdp-page) .sdp-instance small { display:block; font-size:var(--size-10); margin-top:var(--size-4); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-instance.sdp-reserve { background:var(--color-background); border-style:dashed }
:where(.sdp-page) .sdp-instance.sdp-reserve .sdp-int-icon { background:transparent; color:var(--color-text-muted) }
:where(.sdp-page) .sdp-instance.sdp-reserve b { color:var(--color-text-muted) }
:where(.sdp-page) .sdp-instance.sdp-live { border-color:var(--color-accent) }
:where(.sdp-page) .sdp-load-panel:nth-of-type(3) .sdp-instance.sdp-live { background:var(--color-highlight) }
:where(.sdp-page) .sdp-capacity-note { border:var(--size-1) var(--border-style) var(--color-illustration-72998b); border-radius:var(--size-8); padding:var(--size-20); margin-top:var(--size-18) }
:where(.sdp-page) .sdp-capacity-note h4 { color:var(--color-white); font:var(--font-weight-medium) var(--size-17) var(--font-family-body); margin:0 0 var(--size-8) }
:where(.sdp-page) .sdp-capacity-note p { color:var(--color-on-primary-muted); font-size:var(--size-14); margin:0 }
:where(.sdp-page) .sdp-load-panel { animation:sdp-scene-in .4s ease-out }
:where(.sdp-page) .sdp-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-24) }
:where(.sdp-page) .sdp-approach { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-24) }
:where(.sdp-page) .sdp-fact { background:var(--color-surface); border:var(--border-default); border-radius:var(--size-14); padding:var(--size-28); position:relative }
:where(.sdp-page) .sdp-approach-item { background:var(--color-surface); border:var(--border-default); border-radius:var(--size-14); padding:var(--size-28); position:relative }
:where(.sdp-page) .sdp-fact>.sdp-int-icon { margin-bottom:var(--size-20) }
:where(.sdp-page) .sdp-approach-item>.sdp-int-icon { margin-bottom:var(--size-20) }
:where(.sdp-page) .sdp-fact h3 { font-size:var(--size-19); line-height:var(--line-height-art-1-4) }
:where(.sdp-page) .sdp-approach-item h3 { font-size:var(--size-19); line-height:var(--line-height-art-1-4) }
:where(.sdp-page) .sdp-fact p { font-size:var(--size-15); color:var(--color-text-muted); line-height:var(--line-height-relaxed); margin:0 }
:where(.sdp-page) .sdp-approach-item p { font-size:var(--size-15); color:var(--color-text-muted); line-height:var(--line-height-relaxed); margin:0 }
:where(.sdp-page) .sdp-fact:last-child { grid-column:span 3; display:grid; grid-template-columns:var(--size-44) .7fr 1.3fr; gap:var(--size-25); align-items:start }
:where(.sdp-page) .sdp-fact:last-child .sdp-int-icon { margin:0 }
:where(.sdp-page) .sdp-fact:last-child h3 { margin:0 }
:where(.sdp-page) .sdp-approach-item .sdp-num { position:absolute; right:var(--size-28); top:var(--size-32); font:var(--size-11) var(--font-family-mono); color:var(--color-accent) }
:where(.sdp-page) .sdp-trace-figure { margin:var(--size-35) 0 var(--size-40); padding:var(--size-34); display:grid; grid-template-columns:.8fr 1.2fr; gap:7%; align-items:center; background:var(--color-surface-secondary); border:var(--border-default); border-radius:var(--size-16) }
:where(.sdp-page) .sdp-trace-figure h3 { font:var(--size-32)/var(--line-height-1-2) var(--font-family-display); font-weight:var(--font-weight-regular); margin:var(--size-15) 0 }
:where(.sdp-page) .sdp-trace-figure p { font-size:var(--size-15) }
:where(.sdp-page) .sdp-trace-figure figcaption { font:var(--size-10) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-trace-plot { background:var(--color-surface); border:var(--border-default); border-radius:var(--size-10); padding:var(--size-24) }
:where(.sdp-page) .sdp-trace-axis { display:flex; justify-content:space-between; font:var(--size-10) var(--font-family-mono); color:var(--color-text-muted); margin:0 0 var(--size-20) var(--size-110) }
:where(.sdp-page) .sdp-trace-row { display:grid; grid-template-columns:var(--size-96) 1fr; align-items:center; gap:var(--size-14); margin:var(--size-18) 0 }
:where(.sdp-page) .sdp-trace-row>span { font-size:var(--size-12); color:var(--color-primary) }
:where(.sdp-page) .sdp-trace-row>div { height:var(--size-22); background:repeating-linear-gradient(90deg,transparent 0%,transparent 24%,var(--color-surface-secondary) 24%,var(--color-surface-secondary) 25%) }
:where(.sdp-page) .sdp-trace-row i { display:block; height:100%; background:var(--color-surface-accent); border-radius:var(--size-3) }
:where(.sdp-page) .sdp-trace-row i.sdp-trace-focus { background:var(--color-primary) }
:where(.sdp-page) .sdp-trace-callout { margin-top:var(--size-25); padding:var(--size-12); background:var(--color-surface-secondary); border-radius:var(--size-6); font-size:var(--size-11); color:var(--color-primary) }
:where(.sdp-page) .sdp-spec { background:var(--color-background); border:var(--border-default); border-radius:var(--size-14); margin-top:var(--size-35); padding:var(--size-28) }
:where(.sdp-page) .sdp-spec h2 { font:var(--size-22) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-02em); margin:0 0 var(--size-23) }
:where(.sdp-page) .sdp-spec dl { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--size-24); margin:0 }
:where(.sdp-page) .sdp-spec dt { font:var(--size-10) var(--font-family-mono); color:var(--color-accent); margin-bottom:var(--size-10) }
:where(.sdp-page) .sdp-spec dd { font-size:var(--size-13); line-height:var(--line-height-1-7); margin:0 }
:where(.sdp-page) .sdp-compare { border:var(--border-default); border-radius:var(--size-14); overflow:hidden; background:var(--color-surface) }
:where(.sdp-page) .sdp-compare-head { display:grid; grid-template-columns:1fr 1fr }
:where(.sdp-page) .sdp-pair { display:grid; grid-template-columns:1fr 1fr }
:where(.sdp-page) .sdp-compare-head>div { padding:var(--size-20) var(--size-26); background:var(--color-surface-accent); font-size:var(--size-13) }
:where(.sdp-page) .sdp-compare-head .sdp-h-accent { background:var(--color-primary); color:var(--color-white) }
:where(.sdp-page) .sdp-pair>div { padding:var(--size-20) var(--size-26); border-top:var(--border-default) }
:where(.sdp-page) .sdp-pair-b { background:var(--color-surface-secondary) }
:where(.sdp-page) .sdp-pair-a { color:var(--color-text-muted) }
:where(.sdp-page) .sdp-pair p { font-size:var(--size-15); line-height:var(--line-height-relaxed); margin:0 }
:where(.sdp-page) .sdp-pair-lab { display:none; font:var(--size-10) var(--font-family-mono); color:var(--color-accent); margin-bottom:var(--size-8) }
:where(.sdp-page) .sdp-metrics { padding:0; margin:0 0 var(--size-40); list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--size-18) }
:where(.sdp-page) .sdp-metrics li { display:flex; align-items:center; gap:var(--size-13); border:var(--border-default); border-radius:var(--size-10); padding:var(--size-20); font-size:var(--size-13); line-height:var(--line-height-1-6) }
:where(.sdp-page) .sdp-metrics .sdp-int-icon { width:var(--size-34); height:var(--size-34) }
:where(.sdp-page) .sdp-metrics svg { width:var(--size-20); height:var(--size-20) }
:where(.sdp-page) .sdp-result-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:var(--size-40); align-items:start }
:where(.sdp-page) .sdp-scenario-block { padding:var(--size-30); background:var(--color-background); border:var(--border-default); border-radius:var(--size-14) }
:where(.sdp-page) .sdp-scenario-h { font:var(--size-29) var(--font-family-display)!important; font-weight:var(--font-weight-regular)!important; margin-bottom:var(--size-22)!important }
:where(.sdp-page) .sdp-scenario-lead { color:var(--color-text-muted) }
:where(.sdp-page) .sdp-scenario { list-style:none; counter-reset:step; padding:0; margin:var(--size-25) 0 }
:where(.sdp-page) .sdp-scenario li { position:relative; counter-increment:step; padding:var(--size-13) 0 var(--size-13) var(--size-35); border-bottom:var(--border-default); font-size:var(--size-15); line-height:var(--line-height-1-7) }
:where(.sdp-page) .sdp-scenario li:before { content:counter(step,decimal-leading-zero); position:absolute; left:0; top:var(--size-16); font:var(--size-11) var(--font-family-mono); color:var(--color-accent) }
:where(.sdp-page) .sdp-scenario-close { color:var(--color-primary); margin:var(--size-25) 0 0!important }
:where(.sdp-page) .sdp-case { padding:0 0 var(--size-25) }
:where(.sdp-page) .sdp-case .sdp-sector { font:var(--size-10) var(--font-family-mono); color:var(--color-accent); margin-top:var(--size-28) }
:where(.sdp-page) .sdp-case>h3 { font:var(--size-32) var(--font-family-display); font-weight:var(--font-weight-regular) }
:where(.sdp-page) .sdp-case>p { font-size:var(--size-15); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-case .tags { font:var(--size-11)/var(--line-height-1-8) var(--font-family-mono); color:var(--color-accent); padding-top:var(--size-18); border-top:var(--border-default); display:block }
:where(.sdp-page) .sdp-scale-architecture { margin:0; padding:var(--size-25); background:var(--color-surface-secondary); border:var(--border-default); border-radius:var(--size-14); text-align:center }
:where(.sdp-page) .sdp-scale-architecture figcaption { font:var(--size-10) var(--font-family-mono); color:var(--color-accent); margin-bottom:var(--size-20); letter-spacing:var(--letter-spacing-06em) }
:where(.sdp-page) .sdp-architecture-entry { display:flex; align-items:center; justify-content:center; gap:var(--size-10); background:var(--color-surface); border:var(--border-default); border-radius:var(--size-7); padding:var(--size-10); margin-bottom:var(--size-22); position:relative }
:where(.sdp-page) .sdp-architecture-entry:after { content:''; position:absolute; bottom:var(--length-px-negative-23); height:var(--size-22); width:var(--size-1); background:var(--color-border-strong) }
:where(.sdp-page) .sdp-architecture-entry .sdp-int-icon { border:0; background:transparent; width:var(--size-28); height:var(--size-28) }
:where(.sdp-page) .sdp-architecture-entry b { font-size:var(--size-13); font-weight:var(--font-weight-medium) }
:where(.sdp-page) .sdp-architecture-fork { display:grid; grid-template-columns:.65fr 1.35fr; gap:var(--size-14) }
:where(.sdp-page) .sdp-architecture-fork>div { background:var(--color-surface); border:var(--border-default); border-radius:var(--size-8); padding:var(--size-15) var(--size-8) }
:where(.sdp-page) .sdp-architecture-fork .sdp-int-icon { width:var(--size-32); height:var(--size-32) }
:where(.sdp-page) .sdp-architecture-fork svg { width:var(--size-19); height:var(--size-19) }
:where(.sdp-page) .sdp-architecture-fork b { display:block; font-size:var(--size-12); margin-top:var(--size-10); font-weight:var(--font-weight-medium) }
:where(.sdp-page) .sdp-architecture-fork small { display:block; font-size:var(--size-9); color:var(--color-text-muted); margin-top:var(--size-5) }
:where(.sdp-page) .sdp-architecture-apps { display:flex; gap:var(--size-7); margin:var(--size-20) 0 var(--size-20) 32%; position:relative }
:where(.sdp-page) .sdp-architecture-apps:before { content:''; position:absolute; left:50%; height:var(--size-20); top:var(--length-px-negative-20); border-left:var(--size-1) var(--border-style) var(--color-border-strong) }
:where(.sdp-page) .sdp-architecture-apps span { flex:1; background:var(--color-primary); color:var(--color-white); font-size:var(--size-9); padding:var(--size-13) var(--size-4); border-radius:var(--size-5) }
:where(.sdp-page) .sdp-architecture-base { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-9); border-top:var(--size-1) var(--border-style) var(--color-border-strong); padding-top:var(--size-20) }
:where(.sdp-page) .sdp-architecture-base>div { display:flex; flex-direction:column; gap:var(--size-8); align-items:center }
:where(.sdp-page) .sdp-architecture-base .sdp-int-icon { background:var(--color-surface); width:var(--size-32); height:var(--size-32) }
:where(.sdp-page) .sdp-architecture-base svg { width:var(--size-20); height:var(--size-20) }
:where(.sdp-page) .sdp-architecture-base b { font-size:var(--size-10); font-weight:var(--font-weight-medium) }
:where(.sdp-page) .sdp-scale-architecture p { font:var(--size-9)/var(--line-height-1-6) var(--font-family-mono); color:var(--color-text-muted); margin-top:var(--size-22) }
:where(.sdp-page) .sdp-scope-controls { display:flex; justify-content:space-between; align-items:center; gap:var(--size-20); margin-bottom:var(--size-25) }
:where(.sdp-page) .sdp-scope-controls>span { font:var(--size-11) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-scope-expand { font:var(--size-12) var(--font-family-body); border:var(--size-1) var(--border-style) var(--color-border-strong); background:transparent; padding:var(--size-11) var(--size-15); border-radius:var(--size-6); color:var(--color-primary); cursor:pointer }
:where(.sdp-page) .sdp-scope { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--size-24); align-items:start }
:where(.sdp-page) .sdp-scope>details { border:var(--border-default); border-radius:var(--size-14); background:var(--color-surface); overflow:hidden }
:where(.sdp-page) .sdp-scope summary { cursor:pointer; list-style:none; padding:var(--size-27); display:block; position:relative }
:where(.sdp-page) .sdp-scope summary::-webkit-details-marker { display:none }
:where(.sdp-page) .sdp-scope summary .sdp-int-icon { margin-bottom:var(--size-20) }
:where(.sdp-page) .sdp-scope summary h3 { font-size:var(--size-19); line-height:var(--line-height-art-1-4) }
:where(.sdp-page) .sdp-scope summary p { font-size:var(--size-15); color:var(--color-text-muted); line-height:var(--line-height-relaxed); margin:0 0 var(--size-20) }
:where(.sdp-page) .sdp-scope .sdp-plus { position:absolute; top:var(--size-31); right:var(--size-25); color:var(--color-accent); font-size:var(--size-22) }
:where(.sdp-page) .sdp-scope .sdp-plus:after { content:'+' }
:where(.sdp-page) .sdp-scope details[open] .sdp-plus:after { content:'−' }
:where(.sdp-page) .sdp-scope-toggle-label { font:var(--size-11) var(--font-family-mono); color:var(--color-accent); border-bottom:var(--size-1) var(--border-style) var(--color-border-strong); padding-bottom:var(--size-3) }
:where(.sdp-page) .sdp-scope .sdp-panel { padding:0 var(--size-27) var(--size-27) }
:where(.sdp-page) .sdp-scope .sdp-panel ul { list-style:none; padding:var(--size-18) 0 0; border-top:var(--border-default); margin:0 }
:where(.sdp-page) .sdp-scope .sdp-panel li { position:relative; font-size:var(--size-14); line-height:var(--line-height-1-7); padding:var(--size-7) 0 var(--size-7) var(--size-20) }
:where(.sdp-page) .sdp-scope .sdp-panel li:before { content:'✓'; position:absolute; left:0; color:var(--color-accent) }
:where(.sdp-page) .sdp-scope .sdp-panel p { font-size:var(--size-13); line-height:var(--line-height-relaxed); background:var(--color-surface-secondary); padding:var(--size-14); margin:var(--size-20) 0 0; border-radius:var(--size-5) }
:where(.sdp-page) .sdp-scope details[open] { border-color:var(--color-border-strong) }
:where(.sdp-page) .sdp-cta { padding:var(--size-80) 0 }
:where(.sdp-page) .sdp-cta-inner { max-width:var(--size-950) }
:where(.sdp-page) .sdp-timeline { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-24) }
:where(.sdp-page) .sdp-step { position:relative; display:grid; grid-template-columns:var(--size-46) 1fr; gap:var(--size-22); padding:var(--size-28); background:var(--color-background); border:var(--border-default); border-radius:var(--size-14) }
:where(.sdp-page) .sdp-step>.sdp-num { width:var(--size-46); height:var(--size-46); display:grid; place-items:center; border-radius:50%; background:var(--color-primary); color:var(--color-highlight); font:var(--size-12) var(--font-family-mono) }
:where(.sdp-page) .sdp-step .sdp-rail { display:none }
:where(.sdp-page) .sdp-step h3 { font-size:var(--size-19) }
:where(.sdp-page) .sdp-step p { color:var(--color-text-muted); font-size:var(--size-16); margin:0 }
:where(.sdp-page) .sdp-step:last-child { grid-column:span 2 }
:where(.sdp-page) .sdp-why-head { margin:var(--size-45) 0 var(--size-25)!important; font:var(--size-14) var(--font-family-mono)!important; color:var(--color-primary) }
:where(.sdp-page) .sdp-why { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--size-28) }
:where(.sdp-page) .sdp-why-item { border-top:var(--border-default); padding-top:var(--size-25) }
:where(.sdp-page) .sdp-why-item .sdp-int-icon { margin-bottom:var(--size-20) }
:where(.sdp-page) .sdp-why-item h3 { font-size:var(--size-18) }
:where(.sdp-page) .sdp-why-item p { font-size:var(--size-15); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-outputs { counter-reset:output; list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 var(--size-38) }
:where(.sdp-page) .sdp-outputs li { counter-increment:output; border-bottom:var(--border-default); position:relative; padding:var(--size-23) 0 var(--size-23) var(--size-40); font-size:var(--size-16); line-height:var(--line-height-1-6) }
:where(.sdp-page) .sdp-outputs li:before { content:counter(output,decimal-leading-zero); position:absolute; left:0; top:var(--size-27); font:var(--size-11) var(--font-family-mono); color:var(--color-accent) }
:where(.sdp-page) .sdp-faq-group { scroll-margin-top:var(--size-170); margin-bottom:var(--size-35) }
:where(.sdp-page) .sdp-faq-group>h3 { font:var(--size-12) var(--font-family-mono); color:var(--color-accent); text-transform:uppercase; margin-bottom:var(--size-10); letter-spacing:var(--letter-spacing-05em) }
:where(.sdp-page) .sdp-faq details { border-bottom:var(--border-default) }
:where(.sdp-page) .sdp-faq summary { display:flex; justify-content:space-between; align-items:center; gap:var(--size-22); padding:var(--size-22) 0; cursor:pointer; list-style:none; font:var(--font-weight-medium) var(--size-16)/var(--line-height-1-6) var(--font-family-body); color:var(--color-heading) }
:where(.sdp-page) .sdp-faq summary::-webkit-details-marker { display:none }
:where(.sdp-page) .sdp-faq .sdp-plus:after { content:'+'; font-size:var(--size-22); color:var(--color-accent) }
:where(.sdp-page) .sdp-faq details[open] .sdp-plus:after { content:'−' }
:where(.sdp-page) .sdp-faq .sdp-panel { padding:0 var(--size-20) var(--size-22) 0 }
:where(.sdp-page) .sdp-faq .sdp-panel p { font-size:var(--size-15); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-closing h2 { color:var(--color-white); font-size:var(--font-size-closing) }
:where(.sdp-page) .sdp-closing .sdp-note { color:var(--color-on-primary-muted) }
@media(max-width:1100px) {
:where(.sdp-page) .sdp-hero-grid { gap:4% }
:where(.sdp-page) .sdp-performance-chart { padding:var(--size-24) }
:where(.sdp-page) .sdp-performance-chart h3 { font-size:var(--size-29) }
:where(.sdp-page) .sdp-metrics { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-facts { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-approach { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-scope { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-fact:last-child { grid-column:span 2; display:block }
:where(.sdp-page) .sdp-fact:last-child .sdp-int-icon { margin-bottom:var(--size-20) }
:where(.sdp-page) .sdp-fact:last-child h3 { margin-bottom:var(--size-12) }
:where(.sdp-page) .sdp-spec dl { grid-template-columns:repeat(3,1fr) }
:where(.sdp-page) .sdp-why { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-capacity-diagram { gap:var(--size-28); padding:var(--size-24) }
:where(.sdp-page) .sdp-demand:after { right:var(--length-px-negative-22) }
:where(.sdp-page) .sdp-balance:after { right:var(--length-px-negative-22) }
:where(.sdp-page) .sdp-instance { padding:var(--size-12); gap:var(--size-8) }
:where(.sdp-page) .sdp-result-grid { gap:var(--size-25) }
:where(.sdp-page) .sdp-trace-figure { gap:5%; padding:var(--size-28) }
:where(.sdp-page) .sdp-trace-plot { padding:var(--size-20) }
}
@media(max-width:800px) {
:where(.sdp-page) .sdp-section { padding:var(--size-70) 0 }
:where(.sdp-page) .sdp-hero-grid { grid-template-columns:1fr }
:where(.sdp-page) .sdp-performance-chart { margin:var(--size-30) auto 0; padding:var(--size-28) }
:where(.sdp-page) .sdp-performance-chart h3 br { display:none }
:where(.sdp-page) .sdp-performance-chart svg { max-width:var(--size-390); margin:auto }
:where(.sdp-page) .sdp-ensures { grid-template-columns:1fr 1fr }
:where(.sdp-page) .sdp-ensures li:last-child { grid-column:span 2 }
:where(.sdp-page) .sdp-capacity-diagram { grid-template-columns:1fr 1fr; gap:var(--size-25) }
:where(.sdp-page) .sdp-instances { grid-column:span 2; grid-template-columns:repeat(3,1fr); gap:var(--size-12) }
:where(.sdp-page) .sdp-instance { display:flex; flex-direction:column; text-align:center; padding:var(--size-15) var(--size-8) }
:where(.sdp-page) .sdp-balance:after { content:'↓'; top:auto; bottom:var(--length-px-negative-29); right:45% }
:where(.sdp-page) .sdp-demand:after { right:var(--length-px-negative-20) }
:where(.sdp-page) .sdp-result-grid { grid-template-columns:1fr; gap:var(--size-28) }
:where(.sdp-page) .sdp-trace-figure { grid-template-columns:1fr; gap:var(--size-28) }
:where(.sdp-page) .sdp-case { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-10) var(--size-28) }
:where(.sdp-page) .sdp-scale-architecture { grid-row:span 4 }
:where(.sdp-page) .sdp-case .sdp-sector { margin:0 }
:where(.sdp-page) .sdp-case>h3 { margin:0 }
:where(.sdp-page) .sdp-case .tags { align-self:end }
:where(.sdp-page) .sdp-timeline { grid-template-columns:1fr }
:where(.sdp-page) .sdp-step:last-child { grid-column:auto }
:where(.sdp-page) .sdp-spec dl { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:520px) {
:where(.sdp-page) .sdp-section { padding:var(--size-58) 0 }
:where(.sdp-page) .sdp-hero { padding:var(--size-42) 0 }
:where(.sdp-page) .sdp-hero .lead { font-size:var(--size-16) }
:where(.sdp-page) .sdp-hero-meta { gap:var(--size-7); font-size:var(--size-10)!important }
:where(.sdp-page) .sdp-actions { gap:var(--size-18) }
:where(.sdp-page) .sdp-actions a { font-size:var(--size-13) }
:where(.sdp-page) .sdp-performance-chart { padding:var(--size-24); box-shadow:var(--size-5) var(--size-5) 0 var(--color-surface-accent) }
:where(.sdp-page) .sdp-performance-chart h3 { font-size:var(--size-28) }
:where(.sdp-page) .sdp-performance-chart figcaption { font-size:var(--size-9) }
:where(.sdp-page) .sdp-ensures { grid-template-columns:1fr; gap:0 }
:where(.sdp-page) .sdp-ensures li { padding:var(--size-16) 0 var(--size-16) var(--size-25); font-size:var(--size-15) }
:where(.sdp-page) .sdp-ensures li:before { top:var(--size-16) }
:where(.sdp-page) .sdp-ensures li:last-child { grid-column:auto }
:where(.sdp-page) .sdp-capacity-player { padding:var(--size-25) var(--size-18) }
:where(.sdp-page) .sdp-capacity-diagram { padding:var(--size-20) var(--size-14); gap:var(--size-25) var(--size-22) }
:where(.sdp-page) .sdp-demand strong { font-size:var(--size-13) }
:where(.sdp-page) .sdp-balance strong { font-size:var(--size-13) }
:where(.sdp-page) .sdp-balance { padding:var(--size-20) var(--size-8) }
:where(.sdp-page) .sdp-demand>span:not(.sdp-int-icon) { font-size:var(--size-10) }
:where(.sdp-page) .sdp-balance small { font-size:var(--size-10) }
:where(.sdp-page) .sdp-demand-bars { gap:var(--size-5) }
:where(.sdp-page) .sdp-demand-bars i { width:var(--size-10) }
:where(.sdp-page) .sdp-instances { gap:var(--size-7) }
:where(.sdp-page) .sdp-instance { padding:var(--size-12) var(--size-5) }
:where(.sdp-page) .sdp-instance b { font-size:var(--size-10) }
:where(.sdp-page) .sdp-instance small { font-size:var(--size-9) }
:where(.sdp-page) .sdp-instance .sdp-int-icon { width:var(--size-29); height:var(--size-29) }
:where(.sdp-page) .sdp-instance svg { width:var(--size-18); height:var(--size-18) }
:where(.sdp-page) .sdp-capacity-note { padding:var(--size-17) }
:where(.sdp-page) .sdp-capacity-note h4 { font-size:var(--size-16); line-height:var(--line-height-label) }
:where(.sdp-page) .sdp-capacity-note p { font-size:var(--size-14) }
:where(.sdp-page) .sdp-capacity-player .sdp-player-note { font-size:var(--size-9) }
:where(.sdp-page) .sdp-facts { grid-template-columns:1fr }
:where(.sdp-page) .sdp-approach { grid-template-columns:1fr }
:where(.sdp-page) .sdp-scope { grid-template-columns:1fr }
:where(.sdp-page) .sdp-fact:last-child { grid-column:auto }
:where(.sdp-page) .sdp-fact { padding:var(--size-26) }
:where(.sdp-page) .sdp-approach-item { padding:var(--size-26) }
:where(.sdp-page) .sdp-fact p { font-size:var(--size-16) }
:where(.sdp-page) .sdp-approach-item p { font-size:var(--size-16) }
:where(.sdp-page) .sdp-trace-figure { padding:var(--size-25) var(--size-20) }
:where(.sdp-page) .sdp-trace-figure h3 { font-size:var(--size-29) }
:where(.sdp-page) .sdp-trace-plot { padding:var(--size-20) var(--size-15) }
:where(.sdp-page) .sdp-trace-axis { margin-left:var(--size-83); font-size:var(--size-8) }
:where(.sdp-page) .sdp-trace-row { grid-template-columns:var(--size-73) 1fr; gap:var(--size-10) }
:where(.sdp-page) .sdp-trace-row>span { font-size:var(--size-10) }
:where(.sdp-page) .sdp-trace-callout { font-size:var(--size-10) }
:where(.sdp-page) .sdp-spec { padding:var(--size-25) var(--size-22) }
:where(.sdp-page) .sdp-spec dl { gap:var(--size-20) }
:where(.sdp-page) .sdp-spec dd { font-size:var(--size-12) }
:where(.sdp-page) .sdp-pair { grid-template-columns:1fr }
:where(.sdp-page) .sdp-compare-head { display:none }
:where(.sdp-page) .sdp-pair-lab { display:block }
:where(.sdp-page) .sdp-pair>div { padding:var(--size-20) }
:where(.sdp-page) .sdp-metrics { gap:var(--size-12) }
:where(.sdp-page) .sdp-metrics li { padding:var(--size-16) var(--size-12); gap:var(--size-10); font-size:var(--size-11); align-items:flex-start; flex-direction:column }
:where(.sdp-page) .sdp-metrics .sdp-int-icon { width:var(--size-32); height:var(--size-32) }
:where(.sdp-page) .sdp-case { display:block }
:where(.sdp-page) .sdp-case .sdp-sector { margin-top:var(--size-25) }
:where(.sdp-page) .sdp-case>h3 { margin:var(--size-15) 0 }
:where(.sdp-page) .sdp-case .tags { margin-top:var(--size-20) }
:where(.sdp-page) .sdp-scenario-block { padding:var(--size-26) var(--size-22) }
:where(.sdp-page) .sdp-scenario-h { font-size:var(--size-26)!important }
:where(.sdp-page) .sdp-scope-controls { align-items:flex-start; flex-direction:column; gap:var(--size-14) }
:where(.sdp-page) .sdp-scope-controls>span { font-size:var(--size-10) }
:where(.sdp-page) .sdp-scope summary { padding:var(--size-26) }
:where(.sdp-page) .sdp-scope summary p { font-size:var(--size-16) }
:where(.sdp-page) .sdp-step { padding:var(--size-24) var(--size-20); gap:var(--size-16); grid-template-columns:var(--size-39) 1fr }
:where(.sdp-page) .sdp-step>.sdp-num { width:var(--size-39); height:var(--size-39); font-size:var(--size-11) }
:where(.sdp-page) .sdp-step h3 { font-size:var(--size-18) }
:where(.sdp-page) .sdp-step p { font-size:var(--size-15) }
:where(.sdp-page) .sdp-why { gap:var(--size-25) var(--size-20) }
:where(.sdp-page) .sdp-why-item h3 { font-size:var(--size-17) }
:where(.sdp-page) .sdp-why-item p { font-size:var(--size-14) }
:where(.sdp-page) .sdp-outputs { grid-template-columns:1fr }
:where(.sdp-page) .sdp-outputs li { font-size:var(--size-15) }
:where(.sdp-page) .sdp-closing-note { padding:var(--size-23) }
:where(.sdp-page) .sdp-pull { padding:var(--size-23) }
:where(.sdp-page) .sdp-compare-close { padding:var(--size-23) }
:where(.sdp-page) .sdp-outputs-close { padding:var(--size-23) }
:where(.sdp-page) .sdp-pull { font-size:var(--size-23) }
:where(.sdp-page) .sdp-faq summary { font-size:var(--size-15) }
:where(.sdp-page) .sdp-closing h2 { font-size:var(--size-38) }
}
@media(prefers-reduced-motion:reduce) {
:where(.sdp-page) .sdp-load-panel { animation:none }
}
@media print {
:where(.sdp-page) .sdp-capacity-player .sdp-player-controls { display:none }
:where(.sdp-page) .sdp-scope-controls { display:none }
:where(.sdp-page) .sdp-load-panel[hidden] { display:block!important }
:where(.sdp-page) .sdp-scope .sdp-panel { display:block!important }
:where(.sdp-page) .sdp-faq .sdp-panel { display:block!important }
:where(.sdp-page) .sdp-fact { break-inside:avoid }
:where(.sdp-page) .sdp-step { break-inside:avoid }
:where(.sdp-page) .sdp-scope details { break-inside:avoid }
}
/* Stronger contrast, while keeping the approved green / cream palette. */
:where(.sdp-page) .eyebrow { font-weight:var(--font-weight-medium); color:var(--color-heading) }
:where(.sdp-page) .sdp-fact { border-color:var(--color-border-strong) }
:where(.sdp-page) .sdp-approach-item { border-color:var(--color-border-strong) }
:where(.sdp-page) .sdp-scope>details { border-color:var(--color-border-strong) }
:where(.sdp-page) .sdp-metrics li { border-color:var(--color-border-strong) }
:where(.sdp-page) .sdp-fact p { color:var(--color-text-muted) }
:where(.sdp-page) .sdp-approach-item p { color:var(--color-text-muted) }
:where(.sdp-page) .sdp-scope summary p { color:var(--color-text-muted) }
:where(.sdp-page) .sdp-step p { color:var(--color-text-muted) }
:where(.sdp-page) .sdp-why-item p { color:var(--color-text-muted) }
:where(.sdp-page) .sdp-faq .sdp-panel p { color:var(--color-text-muted) }
:where(.sdp-page) .sdp-case>p { color:var(--color-text-muted) }
:where(.sdp-page) .sdp-int-icon { background:var(--color-surface-secondary); border-color:var(--color-border-strong); color:var(--color-heading) }
:where(.sdp-page) .sdp-capacity-player .eyebrow { color:var(--color-highlight) }
:where(.sdp-page) .sdp-capacity-player .sdp-int-icon { background:var(--color-surface-secondary) }
:where(.sdp-page) .sdp-pair-a { color:var(--color-text-muted) }
:where(.sdp-page) .sdp-pair-b { background:var(--color-surface-secondary) }
:where(.sdp-page) .sdp-pair { border-color:var(--color-border-strong) }
:where(.sdp-page) .sdp-scope .sdp-scope-toggle-label { font-weight:var(--font-weight-medium); color:var(--color-heading) }
:where(.sdp-page) .sdp-scope summary h3 { color:var(--color-heading) }
:where(.sdp-page) .sdp-scope .sdp-panel { background:var(--color-surface-muted) }
:where(.sdp-page) .sdp-scope .sdp-panel ul { padding-top:var(--size-20) }
:where(.sdp-page) #birlikte { border-block:var(--size-1) var(--border-style) var(--color-border-strong) }
:where(.sdp-page) #birlikte>.container { display:grid; grid-template-columns:1.15fr .85fr; gap:7%; align-items:center }
:where(.sdp-page) #baslayalim>.container { display:grid; grid-template-columns:1.15fr .85fr; gap:7%; align-items:center }
:where(.sdp-page) #birlikte .sdp-cta-inner { min-width:0 }
:where(.sdp-page) #baslayalim .sdp-cta-inner { min-width:0 }
:where(.sdp-page) .sdp-discovery-visual { margin:0; border:var(--size-1) var(--border-style) var(--color-border); background:var(--color-surface); border-radius:var(--size-16); padding:var(--size-28); box-shadow:var(--size-8) var(--size-8) 0 var(--color-illustration-bdd7c5) }
:where(.sdp-page) .sdp-discovery-visual figcaption { font:var(--size-11)/var(--line-height-1-6) var(--font-family-mono); letter-spacing:var(--letter-spacing-07em); color:var(--color-heading); margin-bottom:var(--size-24) }
:where(.sdp-page) .sdp-discovery-stack { display:grid; gap:var(--size-15) }
:where(.sdp-page) .sdp-discovery-stack>div { display:flex; gap:var(--size-14); align-items:center; border-bottom:var(--size-1) var(--border-style) var(--color-border); padding-bottom:var(--size-16) }
:where(.sdp-page) .sdp-discovery-stack .sdp-int-icon { width:var(--size-40); height:var(--size-40) }
:where(.sdp-page) .sdp-discovery-stack b { display:block; font-size:var(--size-15); font-weight:var(--font-weight-bold); color:var(--color-heading); line-height:var(--line-height-label) }
:where(.sdp-page) .sdp-discovery-stack small { display:block; font-size:var(--size-12); color:var(--color-text-muted); margin-top:var(--size-5) }
:where(.sdp-page) .sdp-discovery-end { background:var(--color-primary); color:var(--color-highlight); border-radius:var(--size-7); padding:var(--size-15); text-align:center; font-size:var(--size-13); margin-top:var(--size-22) }
:where(.sdp-page) .sdp-method-board { margin:var(--size-35) 0 var(--size-42); background:var(--color-primary); border-radius:var(--size-16); padding:var(--size-30) }
:where(.sdp-page) .sdp-method-board>figcaption { font:var(--size-11) var(--font-family-mono); letter-spacing:var(--letter-spacing-1em); color:var(--color-highlight); margin-bottom:var(--size-24) }
:where(.sdp-page) .sdp-method-phases { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--size-18) }
:where(.sdp-page) .sdp-method-phase { background:var(--color-surface); border-radius:var(--size-10); padding:var(--size-23) var(--size-20); min-width:0 }
:where(.sdp-page) .sdp-phase-label { font:var(--size-10)/var(--line-height-1-5) var(--font-family-mono); color:var(--color-heading); font-weight:var(--font-weight-medium); letter-spacing:var(--letter-spacing-02em) }
:where(.sdp-page) .sdp-method-phase h3 { font-size:var(--size-18); line-height:var(--line-height-art-1-4); color:var(--color-heading); margin:var(--size-20) 0 var(--size-12) }
:where(.sdp-page) .sdp-method-phase p { font-size:var(--size-13); line-height:var(--line-height-1-7); color:var(--color-text-muted); margin:0 }
:where(.sdp-page) .sdp-phase-art { height:var(--size-90); margin-top:var(--size-20); background:var(--color-surface-secondary); border-radius:var(--size-7); padding:var(--size-14); box-sizing:border-box }
:where(.sdp-page) .sdp-measurement-art { display:flex; align-items:flex-end; gap:var(--size-8); position:relative }
:where(.sdp-page) .sdp-measurement-art i { display:block; width:16%; background:var(--color-illustration-8ab099); border-radius:var(--size-3) var(--size-3) 0 0; height:35% }
:where(.sdp-page) .sdp-measurement-art i:nth-child(2) { height:70% }
:where(.sdp-page) .sdp-measurement-art i:nth-child(3) { height:95%; background:var(--color-primary) }
:where(.sdp-page) .sdp-measurement-art i:nth-child(4) { height:55% }
:where(.sdp-page) .sdp-measurement-art i:nth-child(5) { height:40% }
:where(.sdp-page) .sdp-measurement-art b { position:absolute; left:10%; right:10%; top:var(--size-30); border-top:var(--size-1) dashed var(--color-primary) }
:where(.sdp-page) .sdp-priority-art { display:grid; gap:var(--size-7) }
:where(.sdp-page) .sdp-priority-art>div { display:flex; gap:var(--size-10); align-items:center }
:where(.sdp-page) .sdp-priority-art b { font:var(--size-10) var(--font-family-mono); color:var(--color-heading) }
:where(.sdp-page) .sdp-priority-art i { display:block; height:var(--size-9); background:var(--color-illustration-8ab099); border-radius:var(--size-2); width:75% }
:where(.sdp-page) .sdp-priority-art>div:nth-child(1) i { background:var(--color-primary); width:90% }
:where(.sdp-page) .sdp-priority-art>div:nth-child(3) i { width:55% }
:where(.sdp-page) .sdp-modules-art { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-7); padding:var(--size-10) }
:where(.sdp-page) .sdp-modules-art>div { display:grid; place-items:center; border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-4); background:var(--color-surface); font-size:var(--size-10); color:var(--color-heading) }
:where(.sdp-page) .sdp-modules-art .active { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-highlight) }
:where(.sdp-page) .sdp-verify-art { padding:var(--size-10) }
:where(.sdp-page) .sdp-verify-art svg { width:100%; height:100% }
:where(.sdp-page) .sdp-method-caption { font:var(--size-10)/var(--line-height-1-6) var(--font-family-mono); color:var(--color-surface-accent); margin:var(--size-20) 0 0 }
:where(.sdp-page) .sdp-step { background:var(--color-surface); border-color:var(--color-border-strong) }
:where(.sdp-page) .sdp-step .sdp-step-body>.sdp-int-icon { width:var(--size-35); height:var(--size-35); margin-bottom:var(--size-15); background:var(--color-surface-secondary) }
:where(.sdp-page) .sdp-step .sdp-step-body>.sdp-int-icon svg { width:var(--size-20); height:var(--size-20) }
:where(.sdp-page) .sdp-step .sdp-num { background:var(--color-primary); color:var(--color-highlight); border-radius:var(--size-10) }
:where(.sdp-page) .sdp-step:last-child { background:var(--color-surface-secondary) }
:where(.sdp-page) .sdp-why-item { background:var(--color-surface); padding:var(--size-25); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-12) }
:where(.sdp-page) .sdp-why-item p { font-size:var(--size-15) }
:where(.sdp-page) .sdp-why { gap:var(--size-22) }
:where(.sdp-page) #ciktilar h2 { color:var(--color-white) }
:where(.sdp-page) #ciktilar .eyebrow { color:var(--color-highlight) }
:where(.sdp-page) #ciktilar .lead { color:var(--color-illustration-e0eee5) }
:where(.sdp-page) .sdp-deliverable-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--size-24) }
:where(.sdp-page) .sdp-deliverable-card { overflow:hidden; color:var(--color-text); min-width:0 }
:where(.sdp-page) .sdp-deliverable-preview { height:var(--size-195); background:var(--color-surface-secondary); position:relative; border-bottom:var(--size-1) var(--border-style) var(--color-border); display:flex; align-items:center; justify-content:center; padding:var(--size-25); box-sizing:border-box }
:where(.sdp-page) .sdp-deliverable-copy { padding:var(--size-26) }
:where(.sdp-page) .sdp-deliverable-index { font:var(--size-10) var(--font-family-mono); color:var(--color-heading); letter-spacing:var(--letter-spacing-06em) }
:where(.sdp-page) .sdp-deliverable-copy h3 { font:var(--font-weight-regular) var(--size-26)/var(--line-height-1-2) var(--font-family-display); color:var(--color-heading); margin:var(--size-15) 0 var(--size-20) }
:where(.sdp-page) .sdp-deliverable-copy ul { padding:0; margin:0; list-style:none }
:where(.sdp-page) .sdp-deliverable-copy li { font-size:var(--size-15); line-height:var(--line-height-1-75); color:var(--color-text-muted); position:relative; padding:0 0 0 var(--size-22); margin-top:var(--size-12) }
:where(.sdp-page) .sdp-deliverable-copy li:before { content:'✓'; position:absolute; left:0; color:var(--color-heading) }
:where(.sdp-page) .sdp-deliverable-card:nth-child(4) { grid-column:auto }
:where(.sdp-page) .sdp-deliverable-card:nth-child(5) { grid-column:auto }
:where(.sdp-page) .sdp-deliverable-card:last-child { grid-column:span 2; display:grid; grid-template-columns:.85fr 1.15fr }
:where(.sdp-page) .sdp-deliverable-card:last-child .sdp-deliverable-preview { height:100%; min-height:var(--size-220); border-bottom:0; border-right:var(--size-1) var(--border-style) var(--color-border) }
:where(.sdp-page) .sdp-paper { background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); box-shadow:var(--size-6) var(--size-6) 0 var(--color-illustration-b4d0be); border-radius:var(--size-4); width:var(--size-170); padding:var(--size-18); transform:rotate(-4deg) }
:where(.sdp-page) .sdp-paper>span { font:var(--size-7) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sdp-page) .sdp-paper>b { display:block; font:var(--size-18) var(--font-family-display); color:var(--color-heading); margin:var(--size-10) 0 }
:where(.sdp-page) .sdp-paper-lines { display:grid; gap:var(--size-5) }
:where(.sdp-page) .sdp-paper-lines i { height:var(--size-3); background:var(--color-surface-accent); width:90% }
:where(.sdp-page) .sdp-paper-lines i:last-child { width:65% }
:where(.sdp-page) .sdp-paper-chart { display:flex; gap:var(--size-7); align-items:flex-end; height:var(--size-40); margin-top:var(--size-10) }
:where(.sdp-page) .sdp-paper-chart i { width:var(--size-24); height:var(--size-18); background:var(--color-illustration-8ab099); border-radius:var(--size-2) }
:where(.sdp-page) .sdp-paper-chart i:nth-child(2) { height:var(--size-28) }
:where(.sdp-page) .sdp-paper-chart i:nth-child(3) { height:var(--size-36); background:var(--color-primary) }
:where(.sdp-page) .sdp-paper-chart i:nth-child(4) { height:var(--size-24) }
:where(.sdp-page) .sdp-paper-badge { position:absolute; bottom:var(--size-18); right:var(--size-18); background:var(--color-primary); color:var(--color-highlight); font-size:var(--size-10); border-radius:var(--size-5); padding:var(--size-9) var(--size-12) }
:where(.sdp-page) .sdp-roadmap-preview { flex-direction:column; gap:var(--size-12) }
:where(.sdp-page) .sdp-roadmap-preview>div { display:flex; align-items:center; gap:var(--size-12); width:90%; background:var(--color-surface); padding:var(--size-10); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-5) }
:where(.sdp-page) .sdp-roadmap-preview span { background:var(--color-primary); color:var(--color-highlight); font:var(--size-9) var(--font-family-mono); border-radius:50%; width:var(--size-23); height:var(--size-23); display:grid; place-items:center }
:where(.sdp-page) .sdp-roadmap-preview i { flex:1; height:var(--size-5); background:var(--color-surface-accent) }
:where(.sdp-page) .sdp-roadmap-preview b { font-size:var(--size-10); color:var(--color-heading); font-weight:var(--font-weight-medium) }
:where(.sdp-page) .sdp-architecture-preview { display:flex; flex-direction:column }
:where(.sdp-page) .sdp-mini-server { background:var(--color-primary); color:var(--color-white); border-radius:var(--size-7); padding:var(--size-16) var(--size-30); font-size:var(--size-14) }
:where(.sdp-page) .sdp-mini-branch { height:var(--size-25); width:var(--size-1); background:var(--color-illustration-739582) }
:where(.sdp-page) .sdp-mini-layers { display:flex; border-top:var(--size-1) var(--border-style) var(--color-illustration-739582); padding-top:var(--size-14); gap:var(--size-9) }
:where(.sdp-page) .sdp-mini-layers span { padding:var(--size-12); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-5); font-size:var(--size-11); color:var(--color-heading) }
:where(.sdp-page) .sdp-dashboard-window { background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); box-shadow:var(--size-6) var(--size-6) 0 var(--color-illustration-b4d0be); width:100%; border-radius:var(--size-7); overflow:hidden }
:where(.sdp-page) .sdp-dashboard-header { display:flex; justify-content:space-between; padding:var(--size-12) var(--size-15); background:var(--color-primary); color:var(--color-white); font-size:var(--size-11) }
:where(.sdp-page) .sdp-dashboard-header b { font-weight:var(--font-weight-medium) }
:where(.sdp-page) .sdp-dashboard-header span { color:var(--color-highlight) }
:where(.sdp-page) .sdp-dashboard-plot { padding:var(--size-15) var(--size-15) var(--size-5) }
:where(.sdp-page) .sdp-dashboard-plot svg { width:100%; height:var(--size-60) }
:where(.sdp-page) .sdp-dashboard-labels { display:flex; justify-content:space-between; font-size:var(--size-8); color:var(--color-text-muted); padding:var(--size-8) var(--size-15) var(--size-13) }
:where(.sdp-page) .sdp-handover-doc { background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-6); box-shadow:var(--size-6) var(--size-6) 0 var(--color-illustration-b4d0be); padding:var(--size-22); width:var(--size-185) }
:where(.sdp-page) .sdp-handover-doc b { display:block; font:var(--size-22) var(--font-family-display); color:var(--color-heading); margin-bottom:var(--size-20) }
:where(.sdp-page) .sdp-handover-doc span { display:block; font-size:var(--size-11); color:var(--color-text-muted); margin-top:var(--size-12) }
:where(.sdp-page) .sdp-handover-seal { background:var(--color-primary); border:var(--size-4) var(--border-style) var(--color-border); color:var(--color-highlight); display:grid; place-items:center; border-radius:50%; width:var(--size-46); height:var(--size-46); font-size:var(--size-25); position:absolute; bottom:var(--size-25); right:var(--size-22) }
:where(.sdp-page) .sdp-deliverable-note { font:var(--size-10)/var(--line-height-1-65) var(--font-family-mono); color:var(--color-illustration-c9dfd1); margin-top:var(--size-24) }
:where(.sdp-page) .sdp-outputs-close { background:var(--color-illustration-194e3e); color:var(--color-white); border-color:var(--color-highlight) }
:where(.sdp-page) .sdp-faq details { border-color:var(--color-border-strong) }
:where(.sdp-page) .sdp-faq details[open] { background:var(--color-surface-muted); padding:0 var(--size-18); margin:0 var(--space-px-negative-18); border-radius:var(--size-8) }
:where(.sdp-page) .sdp-faq-topics a { color:var(--color-text); border-color:var(--color-border-strong) }
:where(.sdp-page) .sdp-growth-visual { margin:0; padding:var(--size-30); border:var(--size-1) var(--border-style) var(--color-illustration-729a86); border-radius:var(--size-16); background:var(--color-illustration-194e3e); color:var(--color-white) }
:where(.sdp-page) .sdp-growth-visual figcaption { font:var(--size-10)/var(--line-height-1-6) var(--font-family-mono); letter-spacing:var(--letter-spacing-07em); color:var(--color-highlight); margin-bottom:var(--size-25) }
:where(.sdp-page) .sdp-growth-platforms { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-16); align-items:end; min-height:var(--size-170); padding:0 0 var(--size-32); border-bottom:var(--size-1) var(--border-style) var(--color-illustration-729a86) }
:where(.sdp-page) .sdp-growth-platforms>div { display:flex; flex-direction:column; gap:var(--size-7); position:relative }
:where(.sdp-page) .sdp-growth-platforms i { height:var(--size-23); display:block; background:var(--color-highlight); border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-4); box-shadow:var(--size-3) var(--size-3) 0 var(--color-primary) }
:where(.sdp-page) .sdp-growth-platforms>div:first-child i { background:var(--color-illustration-80ad96); border-color:var(--color-border) }
:where(.sdp-page) .sdp-growth-platforms>div:nth-child(2) i { background:var(--color-illustration-a2ceb5); border-color:var(--color-border) }
:where(.sdp-page) .sdp-growth-platforms span { position:absolute; top:calc(100% + var(--size-12)); font-size:var(--size-11); width:100%; text-align:center; color:var(--color-illustration-e0eee5) }
:where(.sdp-page) .sdp-growth-base { margin-top:var(--size-20); font-size:var(--size-13); line-height:var(--line-height-1-6); color:var(--color-white); text-align:center }
:where(.sdp-page) .sdp-growth-visual p { font:var(--size-10) var(--font-family-mono); text-align:center; color:var(--color-illustration-c9dfd1); margin-top:var(--size-20) }
@media(max-width:1100px) {
:where(.sdp-page) .sdp-method-phases { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-phase-art { height:var(--size-95) }
:where(.sdp-page) .sdp-deliverable-grid { grid-template-columns:repeat(2,1fr) }
:where(.sdp-page) .sdp-deliverable-card:last-child { grid-column:span 2 }
:where(.sdp-page) #birlikte>.container { gap:5% }
:where(.sdp-page) #baslayalim>.container { gap:5% }
:where(.sdp-page) .sdp-discovery-visual { padding:var(--size-24) }
:where(.sdp-page) .sdp-discovery-stack b { font-size:var(--size-14) }
:where(.sdp-page) .sdp-why { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:800px) {
:where(.sdp-page) #birlikte>.container { grid-template-columns:1fr; gap:var(--size-35) }
:where(.sdp-page) #baslayalim>.container { grid-template-columns:1fr; gap:var(--size-35) }
:where(.sdp-page) .sdp-discovery-visual { max-width:var(--size-520); width:100%; justify-self:center }
:where(.sdp-page) .sdp-growth-visual { max-width:var(--size-520); width:100%; justify-self:center }
:where(.sdp-page) .sdp-method-board { padding:var(--size-26) }
:where(.sdp-page) .sdp-deliverable-card:last-child { grid-template-columns:1fr 1fr }
:where(.sdp-page) .sdp-step:last-child { grid-column:auto }
}
@media(max-width:520px) {
:where(.sdp-page) .sdp-method-board { padding:var(--size-23) var(--size-18) }
:where(.sdp-page) .sdp-method-phases { gap:var(--size-14) }
:where(.sdp-page) .sdp-method-phase { padding:var(--size-18) var(--size-13) }
:where(.sdp-page) .sdp-phase-label { font-size:var(--size-8) }
:where(.sdp-page) .sdp-method-phase h3 { font-size:var(--size-16); margin-top:var(--size-17) }
:where(.sdp-page) .sdp-method-phase p { font-size:var(--size-12) }
:where(.sdp-page) .sdp-phase-art { height:var(--size-85); padding:var(--size-10) }
:where(.sdp-page) .sdp-modules-art { gap:var(--size-5) }
:where(.sdp-page) .sdp-modules-art>div { font-size:var(--size-9) }
:where(.sdp-page) .sdp-measurement-art { gap:var(--size-5) }
:where(.sdp-page) .sdp-deliverable-grid { grid-template-columns:1fr }
:where(.sdp-page) .sdp-deliverable-card:last-child { grid-column:auto; display:block }
:where(.sdp-page) .sdp-deliverable-card:last-child .sdp-deliverable-preview { height:var(--size-195); min-height:0; border-right:0; border-bottom:var(--size-1) var(--border-style) var(--color-border) }
:where(.sdp-page) .sdp-deliverable-copy { padding:var(--size-25) }
:where(.sdp-page) .sdp-deliverable-copy li { font-size:var(--size-15) }
:where(.sdp-page) .sdp-why { grid-template-columns:1fr }
:where(.sdp-page) .sdp-why-item { padding:var(--size-25) }
:where(.sdp-page) .sdp-why-item p { font-size:var(--size-15) }
:where(.sdp-page) .sdp-step { gap:var(--size-13) }
:where(.sdp-page) .sdp-discovery-visual { padding:var(--size-24) var(--size-22) }
:where(.sdp-page) .sdp-discovery-visual figcaption { font-size:var(--size-9) }
:where(.sdp-page) .sdp-discovery-stack b { font-size:var(--size-15) }
:where(.sdp-page) .sdp-growth-visual { padding:var(--size-26) }
:where(.sdp-page) .sdp-deliverable-note { font-size:var(--size-9) }
:where(.sdp-page) .sdp-method-caption { font-size:var(--size-9) }
}
/* Hero: familiar actions and bare service icons. */
:where(.sdp-page) .sdp-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--size-16) var(--size-26) }
:where(.sdp-page) #top .sdp-perf-hero-link { display:inline-flex; align-items:center; gap:var(--size-12); min-height:var(--size-44); padding:var(--size-7) 0; background:transparent!important; border:0; border-bottom:var(--size-1) var(--border-style) var(--color-primary); border-radius:0; box-shadow:none; color:var(--color-heading); font:var(--font-weight-medium) var(--size-14)/var(--line-height-1-6) var(--font-family-body); text-decoration:none }
:where(.sdp-page) .sdp-hero-meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--size-16) var(--size-25); margin-top:var(--size-28); font:var(--font-weight-medium) var(--size-13)/var(--line-height-1-6) var(--font-family-body); color:var(--color-heading) }
:where(.sdp-page) .sdp-hero-meta>.sdp-hero-meta-item { display:flex; align-items:center; gap:var(--size-10) }
:where(.sdp-page) .sdp-hero-meta-icon { display:inline-grid; place-items:center; width:var(--size-24); height:var(--size-24); background:none; border:0; flex:none; color:var(--color-heading) }
:where(.sdp-page) .sdp-hero-meta-icon svg { display:block; width:var(--size-24); height:var(--size-24); fill:none; stroke:currentColor }
/* Read the diagram as waiting time, then explain both outcomes in plain language. */
:where(.sdp-page) .sdp-performance-chart h3 { font:var(--font-weight-display) var(--size-30)/var(--line-height-1-18) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-025em); margin:var(--size-19) 0 var(--size-23); color:var(--color-heading) }
:where(.sdp-page) .sdp-performance-chart svg text { font:var(--size-11) var(--font-family-body); fill:var(--color-text-muted) }
:where(.sdp-page) .sdp-chart-legend { display:grid; gap:var(--size-12); margin-top:var(--size-2) }
:where(.sdp-page) .sdp-chart-legend>span { display:grid; grid-template-columns:var(--size-25) minmax(0,1fr); gap:var(--size-12); align-items:start; padding:var(--size-14); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-7) }
:where(.sdp-page) .sdp-chart-legend>span:before { width:var(--size-25); margin-top:var(--size-10); grid-row:1/3 }
:where(.sdp-page) .sdp-chart-legend strong { display:block; font:var(--font-weight-bold) var(--size-12)/var(--line-height-1-6) var(--font-family-body); color:var(--color-heading) }
:where(.sdp-page) .sdp-chart-legend small { display:block; font:var(--font-weight-regular) var(--size-11)/var(--line-height-1-7) var(--font-family-body); color:var(--color-text-muted); margin-top:var(--size-3) }
:where(.sdp-page) .sdp-performance-chart>p { color:var(--color-text-muted) }
/* Seven benefits: a clear two-column rhythm, with the last point as a complete row. */
:where(.sdp-page) .sdp-ensures { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-18) var(--size-24); margin:var(--size-36) 0 }
:where(.sdp-page) .sdp-ensures li { padding:var(--size-21) var(--size-23) var(--size-21) var(--size-49); border:0; background:var(--color-background); border-radius:var(--size-8); font:var(--font-weight-regular) var(--size-15)/var(--line-height-1-8) var(--font-family-body); color:var(--color-text) }
:where(.sdp-page) .sdp-ensures li:before { left:var(--size-22); top:var(--size-22); color:var(--color-heading) }
:where(.sdp-page) .sdp-ensures li:last-child { grid-column:1/-1; background:var(--color-surface-secondary) }
/* Measurement framework: explicit phases on a contrasting base. */
:where(.sdp-page) .sdp-spec { padding:var(--size-30); background:var(--color-primary); border:var(--size-1) var(--border-style) var(--color-primary); border-radius:var(--size-12) }
:where(.sdp-page) .sdp-spec h2 { font:var(--font-weight-display) var(--size-30)/var(--line-height-1-2) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-025em); color:var(--color-white); margin:0 0 var(--size-25) }
:where(.sdp-page) .sdp-spec dl { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--size-15); margin:0 }
:where(.sdp-page) .sdp-spec .sdp-row { display:block; background:var(--color-surface); border:0; border-radius:var(--size-7); padding:var(--size-18); min-width:0; margin:0 }
:where(.sdp-page) .sdp-spec dt { font:var(--font-weight-medium) var(--size-11)/var(--line-height-1-7) var(--font-family-mono); color:var(--color-heading); margin-bottom:var(--size-12) }
:where(.sdp-page) .sdp-spec dd { font:var(--font-weight-regular) var(--size-13)/var(--line-height-1-8) var(--font-family-body); color:var(--color-text); margin:0 }
:where(.sdp-page) .sdp-spec dt .sdp-int-icon { display:grid; width:var(--size-36); height:var(--size-36); margin-bottom:var(--size-15) }
:where(.sdp-page) .sdp-spec dt .sdp-int-icon svg { width:var(--size-21); height:var(--size-21) }
/* Architecture: two separate request paths, rather than an unlabelled CDN-to-balancer link. */
:where(.sdp-page) .sdp-scale-architecture { position:relative }
:where(.sdp-page) .sdp-architecture-entry { margin-bottom:0 }
:where(.sdp-page) .sdp-architecture-entry:after { display:none }
:where(.sdp-page) .sdp-architecture-fork-connector { height:var(--size-36); width:100%; display:block; max-width:none; overflow:visible }
:where(.sdp-page) .sdp-architecture-fork-connector path { fill:none; stroke:var(--color-illustration-739582); stroke-width:1.3; vector-effect:non-scaling-stroke }
:where(.sdp-page) .sdp-architecture-apps:before { display:none }
:where(.sdp-page) .sdp-architecture-apps { margin:0 0 var(--size-20) 32% }
:where(.sdp-page) .sdp-architecture-apps-connector { height:var(--size-24); margin-left:32%; width:68%; display:block; max-width:none; overflow:visible }
:where(.sdp-page) .sdp-architecture-apps-connector path { fill:none; stroke:var(--color-illustration-739582); stroke-width:1.3; vector-effect:non-scaling-stroke }
/* Equal collapsed scope cards; expanded panels retain natural content height. */
:where(.sdp-page) .sdp-scope { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:var(--size-24) }
:where(.sdp-page) .sdp-scope summary { display:grid; grid-template-rows:var(--size-44) var(--size-54) minmax(var(--size-108),auto) var(--size-20); gap:var(--size-16); padding:var(--size-27); min-height:var(--size-328); box-sizing:border-box }
:where(.sdp-page) .sdp-scope summary>.sdp-int-icon { margin:0 }
:where(.sdp-page) .sdp-scope summary h3 { font:var(--font-weight-bold) var(--size-19)/var(--line-height-1-4) var(--font-family-body); letter-spacing:var(--letter-spacing-negative-02em); margin:0; color:var(--color-heading) }
:where(.sdp-page) .sdp-scope summary p { font:var(--font-weight-regular) var(--size-15)/var(--line-height-1-8) var(--font-family-body); margin:0; color:var(--color-text-muted) }
:where(.sdp-page) .sdp-scope summary .sdp-scope-toggle-label { justify-self:start; align-self:end; line-height:var(--line-height-label) }
:where(.sdp-page) .sdp-scope summary .sdp-plus { top:var(--size-30); right:var(--size-25) }
/* Methodology: numbers alone, and a proper display heading for the studio difference. */
:where(.sdp-page) .sdp-step { grid-template-columns:var(--size-46) minmax(0,1fr); gap:var(--size-22) }
:where(.sdp-page) .sdp-step .sdp-step-body>.sdp-int-icon { display:none }
:where(.sdp-page) .sdp-step .sdp-step-body h3 { font:var(--font-weight-bold) var(--size-19)/var(--line-height-1-45) var(--font-family-body); color:var(--color-heading); margin:0 0 var(--size-14) }
:where(.sdp-page) .sdp-why-head { font:var(--font-weight-display) var(--size-34)/var(--line-height-1-2) var(--font-family-display)!important; letter-spacing:var(--letter-spacing-negative-025em); color:var(--color-heading)!important; margin:var(--size-54) 0 var(--size-28)!important }
/* The wide final deliverable is intentional; its document now fills the visual area. */
:where(.sdp-page) .sdp-deliverable-card:last-child { grid-template-columns:1fr 1.2fr }
:where(.sdp-page) .sdp-deliverable-card:last-child .sdp-deliverable-preview { min-height:var(--size-310); padding:var(--size-30) }
:where(.sdp-page) .sdp-handover-doc { width:min(100%,var(--size-280)); padding:var(--size-28); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-7); box-shadow:var(--size-7) var(--size-7) 0 var(--color-illustration-b4d0be) }
:where(.sdp-page) .sdp-handover-doc b { font:var(--font-weight-display) var(--size-30)/var(--line-height-1-15) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-02em); margin-bottom:var(--size-25) }
:where(.sdp-page) .sdp-handover-doc span { font:var(--font-weight-regular) var(--size-13)/var(--line-height-1-8) var(--font-family-body); color:var(--color-text-muted); margin-top:var(--size-14) }
:where(.sdp-page) .sdp-handover-seal { width:var(--size-40); height:var(--size-40); right:var(--size-18); bottom:var(--size-18); font-size:var(--size-22) }
:where(.sdp-page) .sdp-outputs-close { background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-white); border-left:0; border-radius:var(--size-8); color:var(--color-heading); padding:var(--size-25) var(--size-28); font:var(--font-weight-regular) var(--size-15)/var(--line-height-1-8) var(--font-family-body); margin-top:var(--size-30) }
:where(.sdp-page) .sdp-outputs-close strong { color:var(--color-heading); font-weight:var(--font-weight-bold) }
/* FAQ: no frame, no fill or text colour change on expansion. */
:where(.sdp-page) #sss .sdp-faq details { background:transparent; border:0; border-radius:0; box-shadow:none; margin:0; padding:0 }
:where(.sdp-page) #sss .sdp-faq details[open] { background:transparent; border:0; border-radius:0; box-shadow:none; margin:0; padding:0 }
:where(.sdp-page) #sss .sdp-faq details+details { border-top:var(--size-1) var(--border-style) var(--color-border-strong) }
:where(.sdp-page) #sss .sdp-faq summary { color:var(--color-heading); background:transparent; margin:0; padding:var(--size-22) 0; border:0; border-radius:0 }
:where(.sdp-page) #sss .sdp-faq details[open] summary { color:var(--color-heading); background:transparent; margin:0; padding:var(--size-22) 0; border:0; border-radius:0 }
:where(.sdp-page) #sss .sdp-faq .sdp-panel { background:transparent; border:0; border-radius:0; color:var(--color-text-muted); padding:0 var(--size-22) var(--size-22) 0 }
:where(.sdp-page) #sss .sdp-faq .sdp-panel p { color:var(--color-text-muted); background:transparent }
/* Closing: cream action, underlined secondary link and a white diagram. */
:where(.sdp-page) #baslayalim .sdp-cta-inner>p { color:var(--color-surface-secondary) }
:where(.sdp-page) #baslayalim .sdp-note { color:var(--color-surface-secondary) }
:where(.sdp-page) #baslayalim .sdp-perf-closing-link { display:inline-flex; align-items:center; gap:var(--size-12); min-height:var(--size-44); padding:var(--size-7) 0; background:transparent!important; border:0; border-bottom:var(--size-1) var(--border-style) var(--color-white); border-radius:0; box-shadow:none; font:var(--font-weight-medium) var(--size-14)/var(--line-height-1-6) var(--font-family-body); color:var(--color-white)!important; text-decoration:none }
:where(.sdp-page) #baslayalim .sdp-growth-visual { background:var(--color-surface); color:var(--color-heading); border-color:var(--color-white) }
:where(.sdp-page) #baslayalim .sdp-growth-visual figcaption { color:var(--color-heading) }
:where(.sdp-page) #baslayalim .sdp-growth-platforms { border-color:var(--color-border-strong) }
:where(.sdp-page) #baslayalim .sdp-growth-platforms i { background:var(--color-highlight); border-color:var(--color-border-strong); box-shadow:var(--size-2) var(--size-2) 0 var(--color-surface-accent) }
:where(.sdp-page) #baslayalim .sdp-growth-platforms>div:first-child i { background:var(--color-primary); border-color:var(--color-primary) }
:where(.sdp-page) #baslayalim .sdp-growth-platforms>div:nth-child(2) i { background:var(--color-accent); border-color:var(--color-accent) }
:where(.sdp-page) #baslayalim .sdp-growth-platforms span { color:var(--color-heading) }
:where(.sdp-page) #baslayalim .sdp-growth-base { color:var(--color-heading) }
:where(.sdp-page) #baslayalim .sdp-growth-visual p { color:var(--color-text-muted) }
@media(max-width:1100px) {
:where(.sdp-page) .sdp-scope { grid-template-columns:repeat(2,minmax(0,1fr)) }
:where(.sdp-page) .sdp-spec dl { grid-template-columns:repeat(3,minmax(0,1fr)) }
:where(.sdp-page) .sdp-spec .sdp-row:nth-last-child(-n+2) { grid-column:auto }
}
@media(max-width:800px) {
:where(.sdp-page) .sdp-spec dl { grid-template-columns:repeat(2,minmax(0,1fr)) }
:where(.sdp-page) .sdp-spec .sdp-row:last-child { grid-column:1/-1 }
:where(.sdp-page) .sdp-spec { padding:var(--size-26) }
:where(.sdp-page) .sdp-deliverable-card:last-child { grid-template-columns:1fr 1fr }
:where(.sdp-page) .sdp-deliverable-card:last-child .sdp-deliverable-preview { padding:var(--size-24) }
}
@media(max-width:650px) {
:where(.sdp-page) .sdp-scope { grid-template-columns:1fr }
:where(.sdp-page) .sdp-scope summary { grid-template-rows:var(--size-44) auto auto var(--size-20); min-height:0; padding:var(--size-26); gap:var(--size-18) }
:where(.sdp-page) .sdp-scope summary h3 { font-size:var(--size-19) }
:where(.sdp-page) .sdp-scope summary p { font-size:var(--size-15) }
:where(.sdp-page) .sdp-ensures { grid-template-columns:1fr; gap:var(--size-14) }
:where(.sdp-page) .sdp-ensures li { font-size:var(--size-14); padding:var(--size-20) var(--size-20) var(--size-20) var(--size-45) }
:where(.sdp-page) .sdp-ensures li:before { left:var(--size-19); top:var(--size-20) }
:where(.sdp-page) .sdp-spec dl { grid-template-columns:1fr; gap:var(--size-14) }
:where(.sdp-page) .sdp-spec .sdp-row:last-child { grid-column:auto }
:where(.sdp-page) .sdp-spec .sdp-row { padding:var(--size-18) var(--size-20) }
:where(.sdp-page) .sdp-spec dt .sdp-int-icon { display:inline-grid; vertical-align:middle; margin:0 var(--size-12) 0 0 }
:where(.sdp-page) .sdp-spec dt { margin-bottom:var(--size-10) }
:where(.sdp-page) .sdp-spec dd { font-size:var(--size-14) }
:where(.sdp-page) .sdp-step { grid-template-columns:var(--size-39) minmax(0,1fr); gap:var(--size-17) }
:where(.sdp-page) .sdp-step .sdp-step-body h3 { font-size:var(--size-18) }
:where(.sdp-page) .sdp-why-head { font-size:var(--size-30)!important; margin:var(--size-42) 0 var(--size-25)!important }
:where(.sdp-page) .sdp-deliverable-card:last-child { display:block }
:where(.sdp-page) .sdp-deliverable-card:last-child .sdp-deliverable-preview { height:auto; min-height:var(--size-310); border-right:0; border-bottom:var(--size-1) var(--border-style) var(--color-border-strong) }
:where(.sdp-page) .sdp-handover-doc { max-width:var(--size-270); padding:var(--size-26) }
:where(.sdp-page) .sdp-outputs-close { padding:var(--size-23); font-size:var(--size-14) }
:where(.sdp-page) .sdp-actions { gap:var(--size-15) var(--size-24) }
:where(.sdp-page) .sdp-performance-chart h3 { font-size:var(--size-28) }
}
/* The balancer and its three application nodes share the exact same grid track. */
:where(.sdp-page) .sdp-scale-architecture .sdp-architecture-fork { display:grid; grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr); column-gap:var(--size-14); width:100%; min-width:0; box-sizing:border-box }
:where(.sdp-page) .sdp-scale-architecture .sdp-architecture-application-row { display:grid; grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr); column-gap:var(--size-14); width:100%; min-width:0; box-sizing:border-box }
:where(.sdp-page) .sdp-scale-architecture .sdp-architecture-application-row { margin:0 0 var(--size-20); padding:0; border:0 }
:where(.sdp-page) .sdp-scale-architecture .sdp-architecture-apps { grid-column:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--size-7); margin:0!important; padding:0; width:auto!important; min-width:0; box-sizing:border-box }
:where(.sdp-page) .sdp-scale-architecture .sdp-architecture-apps>span { display:grid; place-items:center; min-width:0; box-sizing:border-box; text-align:center }
:where(.sdp-page) .sdp-scale-architecture .sdp-architecture-apps-connector { display:block; width:100%!important; max-width:none; margin:0!important; padding:0; border:0; height:var(--size-24); box-sizing:border-box }
:where(.sdp-page) .sdp-scale-architecture .sdp-architecture-fork-connector { display:block; width:100%; max-width:none; margin:0; padding:0; border:0; height:var(--size-36); box-sizing:border-box }
:where(.sdp-page) .feature-grid { border: none; overflow: visible; }
:where(.sdp-page) .sdp-measure-1 { height: var(--size-14); }
:where(.sdp-page) .sdp-measure-2 { height: var(--size-22); }
:where(.sdp-page) .sdp-measure-3 { height: var(--size-16); }
:where(.sdp-page) .sdp-measure-4 { height: var(--size-26); }
:where(.sdp-page) .sdp-measure-5 { height: var(--size-18); }
:where(.sdp-page) .sdp-measure-6 { height: var(--size-24); }
:where(.sdp-page) .sdp-measure-7 { height: var(--size-21); }
:where(.sdp-page) .sdp-measure-8 { height: var(--size-33); }
:where(.sdp-page) .sdp-measure-9 { height: var(--size-27); }
:where(.sdp-page) .sdp-measure-10 { height: var(--size-42); }
:where(.sdp-page) .sdp-measure-11 { height: var(--size-36); }
:where(.sdp-page) .sdp-measure-12 { height: var(--size-48); }
:where(.sdp-page) .sdp-measure-13 { height: var(--size-21); }
:where(.sdp-page) .sdp-measure-14 { height: var(--size-33); }
:where(.sdp-page) .sdp-measure-15 { height: var(--size-27); }
:where(.sdp-page) .sdp-measure-16 { height: var(--size-42); }
:where(.sdp-page) .sdp-measure-17 { height: var(--size-36); }
:where(.sdp-page) .sdp-measure-18 { height: var(--size-48); }
:where(.sdp-page) .sdp-measure-19 { margin-left: 0; width: 92%; }
:where(.sdp-page) .sdp-measure-20 { margin-left: 12%; width: 58%; }
:where(.sdp-page) .sdp-measure-21 { margin-left: 70%; width: 15%; }
:where(.sdp-page) .sdp-measure-22 { margin-left: 85%; width: 7%; }