/* PAGE-SPECIFIC ILLUSTRATIONS ONLY. Shared UI lives in the CSS files. */
:where(.sdcs-page) .sdcs-website-service .sdcs-hero-visual { min-width: 0; position: relative; height: var(--size-610); display: grid; place-items: center; }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-orbit { position: absolute; width: 92%; aspect-ratio: 1; border: var(--size-1) var(--border-style) var(--color-border); border-radius: var(--radius-circle); }
:where(.sdcs-page) .sdcs-website-service .sdcs-orbit--inner { width: 70%; border-style: dashed; opacity: .7; }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-skeleton-nav { display: flex; gap: var(--size-12); }
:where(.sdcs-page) .sdcs-website-service .sdcs-skeleton-nav i { width: var(--size-25); height: var(--size-3); background: var(--color-surface-accent); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-layout { display: grid; grid-template-columns: 1.1fr .9fr; min-height: var(--size-270); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-copy { padding: var(--size-34) var(--size-8) var(--size-26) var(--size-27); position: relative; z-index: var(--z-content); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-copy .sdcs-tiny { font: var(--size-9) var(--font-family-mono); color: var(--color-accent); letter-spacing: var(--tracking-art--07); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-preview-copy>p { font-size: var(--size-10); line-height: var(--line-height-art-1-55); max-width: var(--size-170); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-faux-button .icon { width: var(--size-12); height: var(--size-12); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-floating-card .icon { color: var(--color-accent); width: var(--size-23); height: var(--size-23); }
:where(.sdcs-page) .sdcs-website-service .sdcs-floating-card strong { font-weight: var(--font-weight-semibold); display: block; }
:where(.sdcs-page) .sdcs-website-service .sdcs-floating-card small { color: var(--color-text-muted); font-size: var(--size-10); }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-brand { left: 0; top: var(--size-78); transform: rotate(-4deg); }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-search { right: -3%; top: var(--size-118); transform: rotate(5deg); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-float-flow .icon { color: var(--color-highlight); }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-flow small { color: var(--color-on-primary-muted); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-phone-preview .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-phone-line { height: var(--size-3); background: var(--color-diagram-muted); width: 75%; margin: var(--size-5) 0; }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-mini-window .sdcs-line { height: var(--size-4); background: var(--color-surface-accent); margin: var(--size-7) 0; }
:where(.sdcs-page) .sdcs-website-service .sdcs-mini-window .sdcs-line:last-child { width: 60%; }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-swatches { display: flex; gap: var(--size-4); flex-direction: column; }
:where(.sdcs-page) .sdcs-website-service .sdcs-swatches i { width: var(--size-31); height: var(--size-18); background: var(--color-accent); border-radius: var(--size-2); }
:where(.sdcs-page) .sdcs-website-service .sdcs-swatches i:nth-child(2) { background: var(--color-diagram-muted); }
:where(.sdcs-page) .sdcs-website-service .sdcs-swatches i:nth-child(3) { background: var(--color-diagram-muted); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-search-field .icon { width: var(--size-14); height: var(--size-14); }
:where(.sdcs-page) .sdcs-website-service .sdcs-search-result { display: flex; gap: var(--size-8); margin-top: var(--size-10); }
:where(.sdcs-page) .sdcs-website-service .sdcs-search-result i { width: var(--size-21); height: var(--size-21); background: var(--color-surface-accent); border-radius: var(--size-4); }
:where(.sdcs-page) .sdcs-website-service .sdcs-search-result b { display: block; width: var(--size-92); height: var(--size-4); margin: var(--size-4) 0; background: var(--color-diagram-muted); }
:where(.sdcs-page) .sdcs-website-service .sdcs-search-result b+b { width: var(--size-60); background: var(--color-surface-accent); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-mini-route { display: flex; align-items: center; gap: var(--size-9); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-mini-route .icon { width: var(--size-20); height: var(--size-20); color: var(--color-accent); }
:where(.sdcs-page) .sdcs-website-service .sdcs-mini-route>span:last-child { background: var(--color-primary); color: var(--color-surface); }
:where(.sdcs-page) .sdcs-website-service .sdcs-mini-route>span:last-child .icon { color: var(--color-on-primary-muted); }
:where(.sdcs-page) .sdcs-website-service .sdcs-mini-route>i { font-style: normal; color: var(--color-text-muted); }
:where(.sdcs-page) .sdcs-website-service .sdcs-signal-bars { display: flex; align-items: center; justify-content: center; gap: var(--size-5); }
:where(.sdcs-page) .sdcs-website-service .sdcs-signal-bars i { width: var(--size-7); height: var(--size-30); background: var(--color-diagram-muted); border-radius: var(--size-4); }
:where(.sdcs-page) .sdcs-website-service .sdcs-signal-bars i:nth-child(2) { height: var(--size-46); background: var(--color-accent); }
:where(.sdcs-page) .sdcs-website-service .sdcs-signal-bars i:nth-child(3) { height: var(--size-57); background: var(--color-primary); }
:where(.sdcs-page) .sdcs-website-service .sdcs-signal-bars i:nth-child(4) { height: var(--size-38); background: var(--color-diagram-strong); }
:where(.sdcs-page) .sdcs-website-service .sdcs-journey-screen .sdcs-faux-button { margin-top: var(--size-20); font-size: var(--size-11); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-approach-visual .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-wire-window .sdcs-wire-nav { height: var(--size-4); background: var(--color-diagram-muted); width: 40%; margin-bottom: var(--size-12); }
:where(.sdcs-page) .sdcs-website-service .sdcs-wire-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--size-5); }
:where(.sdcs-page) .sdcs-website-service .sdcs-wire-grid i { height: var(--size-42); background: var(--color-surface-accent); border-radius: var(--size-2); }
:where(.sdcs-page) .sdcs-website-service .sdcs-approach-visual--bespoke .sdcs-wire-grid { grid-template-columns: 1.2fr 1fr; }
:where(.sdcs-page) .sdcs-website-service .sdcs-approach-visual--bespoke .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-approach-visual--bespoke .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-approach-visual--system { background: var(--color-primary); gap: var(--size-7); display: flex; align-items: center; padding: var(--size-18); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-system-mini-node .icon { width: var(--size-16); height: var(--size-16); }
:where(.sdcs-page) .sdcs-website-service .sdcs-approach-visual--system .sdcs-wire-window { width: 50%; background: var(--color-surface); border-color: var(--color-border-strong); }
:where(.sdcs-page) .sdcs-website-service .sdcs-approach-visual--system>i { font-style: normal; font-size: var(--size-12); color: var(--color-text-muted); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-project-art--olive { background: var(--color-surface-accent); color: var(--color-primary); border-color: var(--color-border); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-project-art--wine { background: var(--color-surface-accent); color: var(--color-text-muted); border-color: var(--color-border); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-project-art--wine>strong { font-size: var(--size-31); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-brief-card .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-brief-card strong { font: var(--font-weight-regular) var(--size-28) var(--font-family-display); letter-spacing: var(--tracking-art-n-03); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-brief-field .icon { width: var(--size-18); height: var(--size-18); color: var(--color-accent); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-hero-visual { height: var(--size-630); }
}
@media (max-width:1200px) {
:where(.sdcs-page) .sdcs-website-service .sdcs-hero-visual { height: var(--size-550); }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-search { right: -1%; }
:where(.sdcs-page) .sdcs-website-service .sdcs-floating-card { padding: var(--size-11) var(--size-12); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-copy strong { font-size: var(--size-29); }
:where(.sdcs-page) .sdcs-website-service .sdcs-mini-route { gap: var(--size-5); }
:where(.sdcs-page) .sdcs-website-service .sdcs-mini-route>span { padding: var(--size-12) var(--size-8); }
:where(.sdcs-page) .sdcs-website-service .sdcs-project-art { padding: var(--size-25); }
}
@media (max-width:1000px) {
:where(.sdcs-page) .sdcs-website-service .sdcs-hero-visual { height: var(--size-535); }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-brand { top: var(--size-59); }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-search { top: var(--size-119); right: -2%; }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-search small { display: none; }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-copy { padding-left: var(--size-19); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-copy strong { font-size: var(--size-27); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-copy>p { font-size: var(--size-9); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-base { padding: var(--size-14) var(--size-15); font-size: var(--size-8); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-layout { min-height: var(--size-251); }
:where(.sdcs-page) .sdcs-website-service .sdcs-phone-preview { left: 5%; bottom: var(--size-17); }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-flow { bottom: var(--size-45); font-size: var(--size-11); }
:where(.sdcs-page) .sdcs-website-service .sdcs-mini-visual { height: var(--size-190); }
:where(.sdcs-page) .sdcs-website-service .sdcs-project-art>h3 { font-size: var(--size-32); }
:where(.sdcs-page) .sdcs-website-service .sdcs-project-art--wine>strong { font-size: var(--size-28); }
:where(.sdcs-page) .sdcs-website-service .sdcs-brief-card { padding: var(--size-22); }
}
@media (max-width:800px) {
:where(.sdcs-page) .sdcs-website-service .sdcs-hero-visual { height: var(--size-580); width: 100%; max-width: var(--size-570); margin: var(--size-26) auto 0; }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-copy strong { font-size: var(--size-33); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-copy>p { font-size: var(--size-11); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-layout { min-height: var(--size-287); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-copy { padding: var(--size-31) var(--size-9) var(--size-25) var(--size-26); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-base { font-size: var(--size-9); }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-brand { top: var(--size-64); }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-search { top: var(--size-100); right: 0; }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-search small { display: block; }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-flow { bottom: var(--size-36); font-size: var(--size-12); right: 0; }
:where(.sdcs-page) .sdcs-website-service .sdcs-phone-preview { left: 10%; bottom: var(--size-5); }
:where(.sdcs-page) .sdcs-website-service .sdcs-journey-screen .sdcs-faux-button { font-size: var(--size-12); }
:where(.sdcs-page) .sdcs-website-service .sdcs-compare-card .sdcs-approach-visual { grid-column: 1; grid-row: 2/5; height: var(--size-180); margin-top: var(--size-6); }
:where(.sdcs-page) .sdcs-website-service .sdcs-project-art { height: var(--size-295); }
:where(.sdcs-page) .sdcs-website-service .sdcs-brief-card { max-width: var(--size-390); width: 100%; margin: auto; padding: var(--size-29); transform: rotate(2deg); }
}
@media (max-width:520px) {
:where(.sdcs-page) .sdcs-website-service .sdcs-hero-visual { height: var(--size-440); margin-top: var(--size-32); max-width: var(--size-385); }
:where(.sdcs-page) .sdcs-website-service .sdcs-visual-caption { font-size: var(--size-8); left: 3%; top: calc(-1 * var(--size-6)); }
:where(.sdcs-page) .sdcs-website-service .sdcs-hero-browser { width: 96%; transform: none; margin-top: var(--size-10); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-nav { padding: var(--size-13) var(--size-16); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-nav b { font-size: var(--size-16); }
:where(.sdcs-page) .sdcs-website-service .sdcs-skeleton-nav { gap: var(--size-8); }
:where(.sdcs-page) .sdcs-website-service .sdcs-skeleton-nav i { width: var(--size-20); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-layout { min-height: var(--size-235); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-copy { padding: var(--size-25) var(--size-5) var(--size-23) var(--size-16); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-copy strong { font-size: var(--size-27); margin: var(--size-13) 0; }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-copy .sdcs-tiny { font-size: var(--size-7); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-copy>p { font-size: var(--size-9); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-copy .sdcs-faux-button { font-size: var(--size-8); padding: var(--size-8) var(--size-9); gap: var(--size-7); margin-top: var(--size-14); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-architecture::before { inset: var(--size-15) var(--size-15) 0; border-radius: var(--size-45) var(--size-45) 0 0; }
:where(.sdcs-page) .sdcs-website-service .sdcs-architecture i { width: var(--size-35); height: var(--size-55); left: var(--size-5); bottom: var(--size-15); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-base { font-size: var(--size-7); padding: var(--size-12) var(--size-15); }
:where(.sdcs-page) .sdcs-website-service .sdcs-floating-card { padding: var(--size-10) var(--size-11); gap: var(--size-9); font-size: var(--size-10); }
:where(.sdcs-page) .sdcs-website-service .sdcs-floating-card .icon { width: var(--size-19); height: var(--size-19); }
:where(.sdcs-page) .sdcs-website-service .sdcs-floating-card small { font-size: var(--size-9); }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-brand { left: 0; top: var(--size-25); }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-search { right: 0; top: var(--size-38); }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-search small { display: none; }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-flow { right: 0; bottom: var(--size-9); max-width: var(--size-228); }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-flow small { font-size: var(--size-9); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-phone-preview strong { font-size: var(--size-13); }
:where(.sdcs-page) .sdcs-website-service .sdcs-phone-preview .sdcs-phone-image { height: var(--size-36); margin: var(--size-7) 0; }
:where(.sdcs-page) .sdcs-website-service .sdcs-phone-line { height: var(--size-2); margin: var(--size-4) 0; }
:where(.sdcs-page) .sdcs-website-service .sdcs-phone-cta { height: var(--size-9); width: var(--size-40); margin-top: var(--size-5); }
:where(.sdcs-page) .sdcs-website-service .sdcs-mini-visual { height: var(--size-186); }
:where(.sdcs-page) .sdcs-website-service .sdcs-signal-bars { justify-content: start; height: var(--size-46); }
:where(.sdcs-page) .sdcs-website-service .sdcs-signal-bars i { transform: scaleY(.75); }
:where(.sdcs-page) .sdcs-website-service .sdcs-journey-screen .sdcs-faux-button { font-size: var(--size-10); }
:where(.sdcs-page) .sdcs-website-service .sdcs-compare-card .sdcs-approach-visual { width: 100%; height: var(--size-150); margin: 0; }
:where(.sdcs-page) .sdcs-website-service .sdcs-project-art { height: var(--size-245); }
:where(.sdcs-page) .sdcs-website-service .sdcs-project-art>h3 { font-size: var(--size-42); max-width: var(--size-280); }
:where(.sdcs-page) .sdcs-website-service .sdcs-project-art--wine>strong { font-size: var(--size-33); }
:where(.sdcs-page) .sdcs-website-service .sdcs-brief-card { box-shadow: var(--shadow-offset); transform: rotate(1deg); padding: var(--size-24); max-width: var(--size-295); }
:where(.sdcs-page) .sdcs-website-service .sdcs-brief-card strong { font-size: var(--size-28); }
:where(.sdcs-page) .sdcs-website-service .sdcs-brief-field { font-size: var(--size-13); }
}
@media (max-width:360px) {
:where(.sdcs-page) .sdcs-website-service .sdcs-hero-visual { height: var(--size-410); }
:where(.sdcs-page) .sdcs-website-service .sdcs-preview-copy strong { font-size: var(--size-24); }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-search { top: var(--size-33); }
:where(.sdcs-page) .sdcs-website-service .sdcs-floating-card { font-size: var(--size-9); padding: var(--size-9); }
:where(.sdcs-page) .sdcs-website-service .sdcs-float-flow { max-width: var(--size-206); }
:where(.sdcs-page) .sdcs-website-service .sdcs-phone-preview { left: 4%; bottom: calc(-1 * var(--size-9)); }
}
@media print {
:where(.sdcs-page) .sdcs-website-service .sdcs-hero-visual { height: var(--size-440); max-width: var(--size-550); margin: auto; }
}
/* Requested page-only illustration adjustments. */
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-mini-visual > .sdcs-mini-window { scale: 0.9; }
:where(.sdcs-page) .sdcs-website-service .sdcs-mini-visual > .sdcs-type-card { scale: 0.9; }
:where(.sdcs-page) .sdcs-website-service .sdcs-mini-visual > .sdcs-mini-search { scale: 0.9; }
:where(.sdcs-page) .sdcs-website-service .sdcs-mini-visual > .sdcs-mini-route { scale: 0.9; }
:where(.sdcs-page) .sdcs-website-service .sdcs-mini-seal { bottom: var(--size-22); }
:where(.sdcs-page) .sdcs-website-service .sdcs-mini-route { gap: var(--space-2); }
:where(.sdcs-page) .sdcs-website-service .sdcs-mini-route > span { padding: var(--space-3) var(--space-2); }
:where(.sdcs-page) .sdcs-website-service .sdcs-signal-bars { width: var(--space-18); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-project-art > h3 { color: inherit; }
:where(.sdcs-page) .sdcs-website-service .sdcs-project-art--olive { background: var(--color-surface-accent); }
:where(.sdcs-page) .sdcs-website-service .sdcs-project-art--wine { background: var(--color-primary); color: var(--color-on-primary); }
:where(.sdcs-page) .sdcs-website-service .sdcs-project-art--wine::after { border-color: var(--color-border-contrast); }
:where(.sdcs-page) .sdcs-website-service .sdcs-project-art--wine > span { color: var(--color-on-primary-muted); }
:where(.sdcs-page) .sdcs-website-service .sdcs-project-art--wine > small { color: var(--color-on-primary-muted); }
:where(.sdcs-page) .sdcs-website-service .sdcs-brief-card { margin-inline: 0; }
:where(.sdcs-page) .sdcs-website-service .sdcs-attention { position: absolute; width: var(--size-126); height: var(--size-112); background: var(--gradient-attention); pointer-events: none; z-index: var(--z-base); }
:where(.sdcs-page) .sdcs-website-service .sdcs-attention--a { left: 24%; top: 26%; }
:where(.sdcs-page) .sdcs-website-service .sdcs-attention--b { left: 6%; bottom: 8%; }
:where(.sdcs-page) .sdcs-website-service .sdcs-scenario-screen--campaign .sdcs-attention--a { left: 45%; top: 15%; }
:where(.sdcs-page) .sdcs-website-service .sdcs-scenario-screen--browse .sdcs-attention--a { left: 60%; top: 0; }
:where(.sdcs-page) .sdcs-website-service .sdcs-perception { position: relative; padding: var(--space-9); border: var(--border-default); border-radius: var(--radius-xl); background: var(--gradient-accent); overflow: hidden; }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-perception__label .icon { width: var(--icon-size-sm); height: var(--icon-size-sm); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-perception__intro p { font-size: var(--font-size-label); line-height: var(--line-height-relaxed); }
:where(.sdcs-page) .sdcs-website-service .sdcs-perception__foundations { display: grid; grid-template-columns: var(--grid-columns-3); gap: var(--space-3); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-perception__foundations span { color: var(--color-primary); font-size: var(--font-size-label); font-weight: var(--font-weight-medium); }
:where(.sdcs-page) .sdcs-website-service .sdcs-perception__connector { width: 100%; height: var(--space-14); fill: var(--color-accent); stroke: var(--color-border-strong); stroke-width: var(--border-width-thin); }
:where(.sdcs-page) .sdcs-website-service .sdcs-perception__connector path { fill: none; }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-perception__mirror-label .icon { width: var(--icon-size-sm); height: var(--icon-size-sm); color: var(--color-highlight); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-perception__brand span { color: var(--color-highlight); }
:where(.sdcs-page) .sdcs-website-service .sdcs-perception__rule { height: var(--border-width-thin); width: 64%; background: var(--color-border-contrast); margin-bottom: var(--space-5); }
:where(.sdcs-page) .sdcs-website-service .sdcs-perception__layers { position: relative; z-index: var(--z-content); display: flex; flex-wrap: wrap; gap: var(--space-2); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-perception figcaption { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-7); }
:where(.sdcs-page) .sdcs-website-service .sdcs-perception figcaption > .icon { color: var(--color-accent); }
:where(.sdcs-page) .sdcs-website-service .sdcs-perception figcaption strong { display: block; font-size: var(--font-size-small); color: var(--color-primary); font-weight: var(--font-weight-semibold); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .sdcs-website-service .sdcs-perception { padding: var(--space-6); }
:where(.sdcs-page) .sdcs-website-service .sdcs-perception__intro { grid-template-columns: var(--grid-columns-1); }
:where(.sdcs-page) .sdcs-website-service .sdcs-perception__intro p br { display: none; }
}
@media (max-width: 800px) {
:where(.sdcs-page) .sdcs-website-service .sdcs-perception { max-width: var(--size-600); }
:where(.sdcs-page) .sdcs-website-service .sdcs-perception__intro { grid-template-columns: var(--grid-columns-2); }
:where(.sdcs-page) .sdcs-website-service .sdcs-mini-visual { height: var(--card-media-height); }
}
@media (max-width: 520px) {
:where(.sdcs-page) .sdcs-website-service .sdcs-perception { padding: var(--space-5); }
:where(.sdcs-page) .sdcs-website-service .sdcs-perception__intro { grid-template-columns: var(--grid-columns-1); gap: var(--space-3); }
:where(.sdcs-page) .sdcs-website-service .sdcs-perception__intro strong { font-size: var(--size-32); }
:where(.sdcs-page) .sdcs-website-service .sdcs-perception__foundations { gap: var(--space-2); }
:where(.sdcs-page) .sdcs-website-service .sdcs-perception__mirror { padding: var(--space-5); }
:where(.sdcs-page) .sdcs-website-service .sdcs-perception__brand { font-size: var(--size-47); }
:where(.sdcs-page) .sdcs-website-service .sdcs-perception__label { font-size: var(--font-size-micro); }
:where(.sdcs-page) .sdcs-website-service .sdcs-perception figcaption { align-items: flex-start; }
:where(.sdcs-page) .sdcs-website-service .sdcs-project-art > h3 { font-size: var(--size-38); }
:where(.sdcs-page) .sdcs-website-service .sdcs-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(.sdcs-page) .site-footer .footer-brand > a:last-child { color: var(--color-on-primary-muted); }
:where(.sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-website-service #neden-onemli .editorial-list .icon { width: var(--length-rem-2); height: var(--length-rem-2); stroke-width: 1.65; }
:where(.sdcs-page) .sdcs-website-service #neden-onemli .editorial-list li:nth-child(3n + 2) .icon-tile { color: var(--color-secondary-blue); }
:where(.sdcs-page) .sdcs-website-service #neden-onemli .editorial-list > li { gap: var(--space-5); }
/* SCOPE: custom two-colour dimensional icons, distinct from editorial icons. */
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-website-service #kapsam .icon-tile--premium .sdcs-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(.sdcs-page) .sdcs-scope-icon-3d .sdcs-scope-green { fill: var(--color-accent); stroke: none; }
:where(.sdcs-page) .sdcs-scope-icon-3d .sdcs-scope-blue { fill: var(--color-secondary-blue); stroke: none; }
:where(.sdcs-page) .sdcs-scope-icon-3d .sdcs-scope-white { fill: var(--color-surface); stroke: none; }
:where(.sdcs-page) .sdcs-scope-icon-3d .sdcs-scope-line { fill: none; stroke: var(--color-primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:where(.sdcs-page) .sdcs-website-service #kapsam .capability-strip { background: linear-gradient(135deg, var(--color-surface-secondary), var(--color-surface-accent)); }
:where(.sdcs-page) .sdcs-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(.sdcs-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(.sdcs-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(.sdcs-page) .sdcs-scenario-player-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-scenario-player-meta__copy strong { color: var(--color-heading); }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-scenario-play .icon { width: var(--length-rem-1); height: var(--length-rem-1); }
:where(.sdcs-page) .sdcs-scenario-play__resume-icon { display: none; }
:where(.sdcs-page) .sdcs-scenario-play[aria-pressed="true"] .sdcs-scenario-play__pause-icon { display: none; }
:where(.sdcs-page) .sdcs-scenario-play[aria-pressed="true"] .sdcs-scenario-play__resume-icon { display: block; }
:where(.sdcs-page) .sdcs-scenario-play__resume { display: none; }
:where(.sdcs-page) .sdcs-scenario-play[aria-pressed="true"] .sdcs-scenario-play__pause { display: none; }
:where(.sdcs-page) .sdcs-scenario-play[aria-pressed="true"] .sdcs-scenario-play__resume { display: inline; }
:where(.sdcs-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(.sdcs-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(.sdcs-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(.sdcs-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(.sdcs-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(.sdcs-page) .scenario-tabs .tabs__button[aria-selected="true"]::before { background: var(--color-secondary-blue); color: var(--color-surface); }
:where(.sdcs-page) .scenario-showcase:not(.is-paused) .scenario-tabs .tabs__button[aria-selected="true"]::after { animation: sdcs-scenario-progress var(--scenario-duration) linear forwards; }
@keyframes sdcs-scenario-progress {
to { transform: scaleX(1); }
}
:where(.sdcs-page) .scenario-grid { display: block; }
:where(.sdcs-page) .has-js .scenario-panel:not([data-active="true"]) { display: none !important; }
:where(.sdcs-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(.sdcs-page) .scenario-panel[data-active="true"] { display: grid; }
:where(.sdcs-page) .scenario-panel__heading { grid-area: heading; margin: 0; }
:where(.sdcs-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(.sdcs-page) .scenario-panel__heading .icon { width: var(--length-rem-1-8); height: var(--length-rem-1-8); }
:where(.sdcs-page) .scenario-panel__heading p { color: var(--color-secondary-blue); }
:where(.sdcs-page) .scenario-panel .browser-frame { grid-area: screen; box-shadow: var(--shadow-lg); }
:where(.sdcs-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(.sdcs-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(.sdcs-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(.sdcs-page) .scenario-path dd { text-align: left; font-size: var(--font-size-body-sm); }
:where(.sdcs-page) .scenario-panel[data-active="true"] { animation: sdcs-scenario-enter 360ms var(--ease-standard) both; }
@keyframes sdcs-scenario-enter {
from { opacity: 0; transform: translateY(var(--length-rem-0-5)); }
to { opacity: 1; transform: none; }
}
@media (max-width: 800px) {
:where(.sdcs-page) .scenario-showcase { padding: var(--space-5); }
:where(.sdcs-page) .scenario-tabs { grid-template-columns: var(--grid-columns-1); gap: var(--space-2); }
:where(.sdcs-page) .scenario-tabs .tabs__button { min-height: var(--length-rem-3-25); }
:where(.sdcs-page) .scenario-panel { grid-template-columns: var(--grid-columns-1); grid-template-areas: "heading" "screen" "path"; }
:where(.sdcs-page) .scenario-panel[data-active="true"] { grid-template-columns: var(--grid-columns-1); grid-template-areas: "heading" "screen" "path"; }
:where(.sdcs-page) .scenario-panel .scenario-path { padding: var(--space-4) 0 0; border-left: 0; border-top: var(--border-default); }
}
@media (max-width: 520px) {
:where(.sdcs-page) .sdcs-scenario-player-meta { align-items: flex-start; }
:where(.sdcs-page) .sdcs-scenario-player-meta__copy span:last-child { display: block; width: 100%; }
:where(.sdcs-page) .scenario-tabs .tabs__button .icon { display: block; }
}
@media (prefers-reduced-motion: reduce) {
:where(.sdcs-page) .scenario-tabs .tabs__button::after { animation: none !important; }
:where(.sdcs-page) .scenario-panel[data-active="true"] { animation: none; }
}
/* Shared palette, typefaces and base components are inherited verbatim from the reference. */
:where(.sdcs-page) { color:var(--color-text) }
:where(.sdcs-page) .container { max-width:var(--size-1320); margin:auto; width:calc(100% - var(--page-gutter)*2) }
:where(.sdcs-page) .page-section { padding:var(--size-100) 0 }
:where(.sdcs-page) .hero-section { padding:var(--size-72) 0 var(--size-68); overflow:hidden }
:where(.sdcs-page) p { line-height:var(--line-height-1-75) }
:where(.sdcs-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(.sdcs-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(.sdcs-page) .lead { font-size:var(--size-17); color:var(--color-text-muted); max-width:var(--size-850) }
:where(.sdcs-page) .sdcs-proof-lead { font-size:var(--size-17); color:var(--color-text-muted); max-width:var(--size-850) }
:where(.sdcs-page) .hero-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:5%; align-items:center }
:where(.sdcs-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(.sdcs-page) .hero-title em { color:var(--color-accent); font-weight:var(--font-weight-regular) }
:where(.sdcs-page) .hero-lead { font-size:var(--size-16); max-width:var(--size-570) }
:where(.sdcs-page) .action-group { display:flex; flex-wrap:wrap; gap:var(--size-22); align-items:center; margin:var(--size-28) 0 }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-hero-meta li:before { content:'✓'; color:var(--color-accent); margin-right:var(--size-6) }
:where(.sdcs-page) .sdcs-head { margin-bottom:var(--size-44) }
:where(.sdcs-page) .section-head { margin-bottom:var(--size-44) }
:where(.sdcs-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(.sdcs-page) .sdcs-mark { display:none }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-sw-icon svg { width:var(--size-28); height:var(--size-28) }
:where(.sdcs-page) .sdcs-schema { position:relative; padding:var(--size-28) var(--size-12) var(--size-10); isolation:isolate; min-width:0 }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-window-bar i { width:var(--size-5); height:var(--size-5); border-radius:50%; background:var(--color-border-strong) }
:where(.sdcs-page) .sdcs-window-bar span { font:var(--size-9) var(--font-family-mono); margin-left:var(--size-12); color:var(--color-text-muted) }
:where(.sdcs-page) .sdcs-app-layout { display:flex }
:where(.sdcs-page) .sdcs-app-rail { width:var(--size-44); background:var(--color-primary); padding:var(--size-17) var(--size-11); color:var(--color-highlight) }
:where(.sdcs-page) .sdcs-app-rail span { display:block; height:var(--size-5); background:var(--color-illustration-487769); margin:var(--size-20) 0 }
:where(.sdcs-page) .sdcs-app-content { padding:var(--size-22); flex:1; min-width:0 }
:where(.sdcs-page) .sdcs-app-topline { display:flex; justify-content:space-between; align-items:start; gap:var(--size-10) }
:where(.sdcs-page) .sdcs-app-topline strong { font:var(--size-24)/var(--line-height-1-12) var(--font-family-display); color:var(--color-heading) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-app-metrics { display:flex; gap:var(--size-7); margin:var(--size-20) 0 }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-app-metrics b { display:block; font-size:var(--size-14); color:var(--color-heading); margin-top:var(--size-4) }
:where(.sdcs-page) .sdcs-app-chart { display:flex; gap:var(--size-20); align-items:center }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-bars i { flex:1; background:var(--color-illustration-9fc7b2); border-radius:var(--size-3) var(--size-3) 0 0 }
:where(.sdcs-page) .sdcs-bars i:nth-last-child(1) { background:var(--color-primary) }
:where(.sdcs-page) .sdcs-bars i:nth-last-child(2) { background:var(--color-accent) }
:where(.sdcs-page) .sdcs-app-tasks { display:grid; gap:var(--size-12); font-size:var(--size-9); color:var(--color-accent) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-stack { list-style:none; margin:0 0 0 var(--size-32); padding:0; display:grid; gap:var(--size-8); position:relative }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-layer .sdcs-sw-icon { margin:0; width:var(--size-29); height:var(--size-29); border:0; box-shadow:none; border-radius:var(--size-6) }
:where(.sdcs-page) .sdcs-layer svg { width:var(--size-19); height:var(--size-19) }
:where(.sdcs-page) .sdcs-layer .sdcs-lbl { font-size:var(--size-12); font-weight:var(--font-weight-bold) }
:where(.sdcs-page) .sdcs-layer .sdcs-meta { font:var(--size-10) var(--font-family-mono); color:var(--color-text-muted); margin-left:auto }
:where(.sdcs-page) .sdcs-layer.is-node { background:var(--color-primary); color:var(--color-white); border-color:var(--color-primary) }
:where(.sdcs-page) .sdcs-layer.is-node .sdcs-meta { color:var(--color-highlight) }
:where(.sdcs-page) .sdcs-diagram-caption { display:block; font:var(--size-10) var(--font-family-mono); color:var(--color-text-muted); margin-top:var(--size-17) }
:where(.sdcs-page) .sdcs-schema>.sdcs-diagram-caption { text-align:center }
:where(.sdcs-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(.sdcs-page)-section-nav__inner { display:flex; align-items:center; justify-content:space-between; gap:var(--size-20); min-height:var(--size-58) }
:where(.sdcs-page)-section-nav__label { font:var(--size-12) var(--font-family-mono); white-space:nowrap }
:where(.sdcs-page)-section-nav__links { display:flex; gap:var(--size-27); overflow:auto; align-items:center }
:where(.sdcs-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(.sdcs-page)-section-nav a[aria-current] { color:var(--color-accent); border-color:var(--color-accent) }
:where(.sdcs-page) section { scroll-margin-top:var(--size-160) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-list strong { display:block; color:var(--color-heading) }
:where(.sdcs-page) .sdcs-list .sdcs-sw-icon { display:flex }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-questions { padding:0; list-style:none; margin:0 }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-questions li:first-child { padding-top:0 }
:where(.sdcs-page) .sdcs-questions li:last-child { border:0; padding-bottom:0 }
:where(.sdcs-page) .sdcs-question-no { font:var(--size-12) var(--font-family-mono); color:var(--color-accent); padding-top:var(--size-4) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-22) }
:where(.sdcs-page) .sdcs-card-grid--3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-22) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-feature>.sdcs-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(.sdcs-page) .sdcs-feature>.sdcs-sw-icon svg { width:var(--size-20); height:var(--size-20) }
:where(.sdcs-page) .sdcs-feature__body { font-size:var(--size-14); color:var(--color-text-muted); margin:0 }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-mini-docs { display:flex; gap:var(--size-8) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-mini-arrow { color:var(--color-accent); font-size:var(--size-17); line-height:var(--line-height-art-1) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-mini-modules { display:flex; gap:var(--size-7) }
:where(.sdcs-page) .sdcs-mini-modules .active { background:var(--color-highlight) }
:where(.sdcs-page) .sdcs-mini-report { height:var(--size-90); display:flex; align-items:flex-end; gap:var(--size-9); position:relative; padding-bottom:var(--size-20) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-mini-report i:nth-child(2) { height:var(--size-40) }
:where(.sdcs-page) .sdcs-mini-report i:nth-child(3) { height:var(--size-35) }
:where(.sdcs-page) .sdcs-mini-report i:nth-child(4) { height:var(--size-55) }
:where(.sdcs-page) .sdcs-mini-report i:nth-child(5) { height:var(--size-70); background:var(--color-primary) }
:where(.sdcs-page) .sdcs-mini-report b { position:absolute; bottom:0; width:100%; text-align:center; font-weight:var(--font-weight-medium) }
:where(.sdcs-page) .sdcs-mini-steps { display:flex; align-items:center; margin-bottom:var(--size-8) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-mini-steps i { width:var(--size-20); height:var(--size-1); background:var(--color-border-strong) }
:where(.sdcs-page) .sdcs-mini-steps .active { background:var(--color-primary); color:var(--color-highlight) }
:where(.sdcs-page) .sdcs-section-foot { margin-top:var(--size-35) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-pull p { margin:0; line-height:var(--line-height-1-45) }
:where(.sdcs-page) .card { padding:var(--size-28) }
:where(.sdcs-page) .card__body { font-size:var(--size-14); color:var(--color-text-muted) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-flow-toolbar { display:flex; justify-content:space-between; gap:var(--size-20) }
:where(.sdcs-page) .sdcs-flow-toolbar p { font:var(--size-27) var(--font-family-display); margin:var(--size-12) 0 var(--size-20) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-flow-tabs button[aria-selected=true] { background:var(--color-primary); color:var(--color-white); border-color:var(--color-primary) }
:where(.sdcs-page) .sdcs-flow-nodes { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--size-30); padding:var(--size-28) 0 }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-flow-nodes>div:not(:last-child):after { content:'→'; position:absolute; right:var(--length-px-negative-25); top:45%; color:var(--color-accent) }
:where(.sdcs-page) .sdcs-flow-nodes .sdcs-sw-icon { width:var(--size-36); height:var(--size-36); margin-bottom:var(--size-16); box-shadow:none }
:where(.sdcs-page) .sdcs-flow-nodes svg { width:var(--size-22); height:var(--size-22) }
:where(.sdcs-page) .sdcs-flow-nodes small { float:right; font:var(--size-10) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sdcs-page) .sdcs-flow-nodes strong { display:block; font-size:var(--size-14) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-compare thead th { font-size:var(--size-12); font-weight:var(--font-weight-medium); background:var(--color-surface-callout) }
:where(.sdcs-page) .sdcs-compare thead .is-ours { background:var(--color-primary); color:var(--color-white) }
:where(.sdcs-page) .sdcs-compare th[scope=row] { width:23%; font-weight:var(--font-weight-medium) }
:where(.sdcs-page) .sdcs-compare td { width:38.5%; color:var(--color-text-muted) }
:where(.sdcs-page) .sdcs-compare td.is-ours { background:var(--color-surface-secondary); color:var(--color-heading) }
:where(.sdcs-page) .sdcs-compare tr:last-child>* { border-bottom:0 }
:where(.sdcs-page) .sdcs-cases { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--size-22) }
:where(.sdcs-page) .sdcs-case { border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-14); padding:var(--size-24); overflow:hidden }
:where(.sdcs-page) .sdcs-case p { font-size:var(--size-14); color:var(--color-text-muted) }
:where(.sdcs-page) .sdcs-case .sdcs-sector { font:var(--size-10) var(--font-family-mono); color:var(--color-accent); letter-spacing:var(--letter-spacing-04em) }
:where(.sdcs-page) .sdcs-case h3 { font:var(--size-27)/var(--line-height-1-2) var(--font-family-display) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-proof-art>small { font:var(--size-9) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-proof-store span { float:right; font-size:var(--size-8) }
:where(.sdcs-page) .sdcs-proof-store section { display:flex; gap:var(--size-9); padding:var(--size-14) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-proof-store footer { font-size:var(--size-9); padding:0 var(--size-14) var(--size-13); color:var(--color-text-muted) }
:where(.sdcs-page) .sdcs-proof-network { display:flex; align-items:center; gap:var(--size-15); font-size:var(--size-11) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-proof-line { font-size:var(--size-10); color:var(--color-accent) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-proof-class>div { flex:1; display:grid; gap:var(--size-8) }
:where(.sdcs-page) .sdcs-proof-class i { background:var(--color-surface-accent); border-radius:var(--size-4) }
:where(.sdcs-page) .sdcs-more { text-align:right; margin-top:var(--size-28); color:var(--color-accent) }
:where(.sdcs-page) .sdcs-sub { font:var(--size-14) var(--font-family-mono); color:var(--color-heading); padding-top:var(--size-25); margin:var(--size-22) 0 }
:where(.sdcs-page) .sdcs-scope { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-22) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-service-card:first-child h3 { font:var(--size-29) var(--font-family-display) }
:where(.sdcs-page) .sdcs-service-card p { font-size:var(--size-14); color:var(--color-text-muted); margin:0 }
:where(.sdcs-page) .sdcs-service-title h3 { font-size:var(--size-18) }
:where(.sdcs-page) .sdcs-service-card:first-child .sdcs-sw-icon { width:var(--size-74); height:var(--size-74) }
:where(.sdcs-page) .sdcs-service-card:first-child svg { width:var(--size-38); height:var(--size-38) }
:where(.sdcs-page) .sdcs-tags { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--size-12) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-tags li:before { content:'✓'; color:var(--color-accent) }
:where(.sdcs-page) .sdcs-tags.is-tech { display:flex; flex-wrap:wrap }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-tags.is-tech li:before { content:'·' }
:where(.sdcs-page) .sdcs-scope-note { font-size:var(--size-13); color:var(--color-text-muted); margin-top:var(--size-20) }
:where(.sdcs-page) #surec h2 { color:var(--color-white) }
:where(.sdcs-page) #surec h3 { color:var(--color-white) }
:where(.sdcs-page) #surec .eyebrow { color:var(--color-highlight) }
:where(.sdcs-page) #surec .split { display:block }
:where(.sdcs-page) .sdcs-process { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--size-42) var(--size-30) }
:where(.sdcs-page) .sdcs-process__step { position:relative }
:where(.sdcs-page) .sdcs-process__rail { display:flex; align-items:center; margin-bottom:var(--size-22) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-process__line { height:var(--size-1); background:var(--color-illustration-487769); width:100%; margin-left:var(--size-12) }
:where(.sdcs-page) .sdcs-process__step:last-child .sdcs-process__node { background:var(--color-highlight); color:var(--color-heading) }
:where(.sdcs-page) .sdcs-process__body h3 { font-size:var(--size-17) }
:where(.sdcs-page) .sdcs-process__body p { font-size:var(--size-13) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-why-item h3 { font-size:var(--size-16) }
:where(.sdcs-page) .sdcs-why-item p { font-size:var(--size-12) }
:where(.sdcs-page) .sdcs-why .sdcs-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(.sdcs-page) .sdcs-why svg { width:var(--size-24); height:var(--size-24) }
:where(.sdcs-page) .sdcs-split--cta { display:grid; grid-template-columns:1fr 1fr; gap:8%; align-items:center }
:where(.sdcs-page) .sdcs-split--cta .section-head { margin:0 }
:where(.sdcs-page) .response-note { font-size:var(--size-12); display:block; color:var(--color-text-muted); margin-top:var(--size-20) }
:where(.sdcs-page) .sdcs-cta-band__aside .button { margin-top:var(--size-20) }
:where(.sdcs-page) #sss>.container { display:grid; grid-template-columns:.8fr 1.2fr; gap:7% }
:where(.sdcs-page) #sss .section-head { position:sticky; top:var(--size-175); align-self:start }
:where(.sdcs-page) .sdcs-accordion--eyebrow { margin:var(--size-30) 0 var(--size-12)!important; font-size:var(--size-11)!important }
:where(.sdcs-page) .sdcs-accordion--eyebrow:first-child { margin-top:0!important }
:where(.sdcs-page) .sdcs-accordion__item { border-bottom:var(--size-1) var(--border-style) var(--color-border); padding:0 }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-accordion__item summary::-webkit-details-marker { display:none }
:where(.sdcs-page) .sdcs-accordion__ico:after { content:'+'; font-size:var(--size-22); color:var(--color-accent) }
:where(.sdcs-page) .sdcs-accordion__item[open] .sdcs-accordion__ico:after { content:'−' }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-accordion__panel p { margin:0 }
:where(.sdcs-page) .sdcs-closing-cta h2 { color:var(--color-white) }
:where(.sdcs-page) .sdcs-closing-cta .eyebrow { color:var(--color-highlight) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-sw-footer .wrap { max-width:var(--size-1190); margin:auto }
:where(.sdcs-page) .sdcs-sw-footer a { color:inherit }
:where(.sdcs-page) .sdcs-sw-footer .sdcs-footer-grid { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:var(--size-35) }
:where(.sdcs-page) .sdcs-sw-footer ul { list-style:none; padding:0 }
:where(.sdcs-page) .sdcs-sw-footer li { margin:var(--size-10) 0 }
:where(.sdcs-page) .sdcs-sw-footer .brand { color:var(--color-white) }
:where(.sdcs-page) .sdcs-sw-footer p { max-width:var(--size-420) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .hero-title { font-size:var(--size-68) }
}
@media(max-width:1000px) {
:where(.sdcs-page) .hero-grid { gap:3% }
:where(.sdcs-page) .hero-title { font-size:var(--size-44) }
:where(.sdcs-page) .sdcs-list { grid-template-columns:repeat(3,1fr) }
:where(.sdcs-page) .sdcs-cases { grid-template-columns:1fr 1fr }
:where(.sdcs-page) .sdcs-case.is-featured { grid-column:span 2 }
:where(.sdcs-page) .feature-grid { grid-template-columns:repeat(2,1fr) }
:where(.sdcs-page) .sdcs-card-grid--3 { grid-template-columns:repeat(2,1fr) }
:where(.sdcs-page) .sdcs-scope { grid-template-columns:repeat(2,1fr) }
:where(.sdcs-page) .sdcs-service-card:first-child { grid-column:span 2 }
:where(.sdcs-page) .sdcs-process { grid-template-columns:repeat(2,1fr) }
:where(.sdcs-page) .sdcs-why { grid-template-columns:repeat(2,1fr) }
:where(.sdcs-page) .sdcs-tags { grid-template-columns:repeat(3,1fr) }
:where(.sdcs-page)-section-nav__label { display:none }
:where(.sdcs-page)-section-nav__links { gap:var(--size-22) }
:where(.sdcs-page) .sdcs-app-content { padding:var(--size-15) }
:where(.sdcs-page) .sdcs-app-topline strong { font-size:var(--size-20) }
:where(.sdcs-page) .sdcs-flow-nodes { gap:var(--size-22) }
:where(.sdcs-page) .sdcs-flow-nodes>div { padding:var(--size-15) }
:where(.sdcs-page) .sdcs-flow-nodes>div:not(:last-child):after { right:var(--length-px-negative-19) }
:where(.sdcs-page) .sdcs-ask { gap:var(--size-30); padding:var(--size-30) }
:where(.sdcs-page) .sdcs-compare th { padding:var(--size-17) }
:where(.sdcs-page) .sdcs-compare td { padding:var(--size-17) }
:where(.sdcs-page) .page-section { padding:var(--size-75) 0 }
}
@media(max-width:800px) {
:where(.sdcs-page) .hero-grid { grid-template-columns:1fr }
:where(.sdcs-page) .hero-section { padding:var(--size-45) 0 }
:where(.sdcs-page) .hero-title { font-size:clamp(var(--size-40),7vw,var(--size-58)) }
:where(.sdcs-page) .sdcs-schema { max-width:var(--size-530); margin:var(--size-28) auto 0; width:100%; padding-inline:0 }
:where(.sdcs-page)-section-nav { top:var(--size-72) }
:where(.sdcs-page)-section-nav__links { width:100%; justify-content:space-between }
:where(.sdcs-page) .sdcs-ask { grid-template-columns:1fr }
:where(.sdcs-page) .sdcs-ask h3 { max-width:var(--size-520) }
:where(.sdcs-page) .sdcs-split--cta { grid-template-columns:1fr; gap:var(--size-26) }
:where(.sdcs-page) #sss>.container { grid-template-columns:1fr; gap:var(--size-20) }
:where(.sdcs-page) #sss .section-head { position:static }
:where(.sdcs-page) .sdcs-tags { grid-template-columns:repeat(2,1fr) }
:where(.sdcs-page) .sdcs-sw-footer .sdcs-footer-grid { grid-template-columns:repeat(2,1fr) }
:where(.sdcs-page) .sdcs-flow-toolbar { display:block }
:where(.sdcs-page) .sdcs-flow-toolbar>.sdcs-diagram-caption { margin:0 0 var(--size-16) }
:where(.sdcs-page) .sdcs-flow-nodes { grid-template-columns:repeat(2,1fr) }
:where(.sdcs-page) .sdcs-flow-nodes>div:nth-child(2):after { display:none }
:where(.sdcs-page) .sdcs-flow-tabs { flex-wrap:wrap }
:where(.sdcs-page) .hero-lead { max-width:none }
}
@media(max-width:520px) {
:where(.sdcs-page) .page-section { padding:var(--size-58) 0 }
:where(.sdcs-page) .hero-title { font-size:var(--size-42) }
:where(.sdcs-page) h2 { font-size:var(--size-34) }
:where(.sdcs-page) .lead { font-size:var(--size-15) }
:where(.sdcs-page) .sdcs-head { margin-bottom:var(--size-30) }
:where(.sdcs-page) .section-head { margin-bottom:var(--size-30) }
:where(.sdcs-page)-section-nav__links { gap:var(--size-22); justify-content:flex-start }
:where(.sdcs-page)-section-nav a { font-size:var(--size-11) }
:where(.sdcs-page) .sdcs-list { grid-template-columns:1fr 1fr; gap:var(--size-24) var(--size-18) }
:where(.sdcs-page) .sdcs-list li:last-child { grid-column:span 2 }
:where(.sdcs-page) .sdcs-ask { padding:var(--size-24) }
:where(.sdcs-page) .sdcs-ask h3 { font-size:var(--size-25) }
:where(.sdcs-page) .feature-grid { grid-template-columns:1fr }
:where(.sdcs-page) .sdcs-card-grid--3 { grid-template-columns:1fr }
:where(.sdcs-page) .sdcs-scope { grid-template-columns:1fr }
:where(.sdcs-page) .sdcs-cases { grid-template-columns:1fr }
:where(.sdcs-page) .sdcs-service-card:first-child { grid-column:auto; display:block }
:where(.sdcs-page) .sdcs-case.is-featured { grid-column:auto; display:block }
:where(.sdcs-page) .sdcs-feature { padding:var(--size-25) }
:where(.sdcs-page) .sdcs-feature>.sdcs-sw-icon { top:var(--size-32); left:var(--size-32) }
:where(.sdcs-page) .sdcs-mini-diagram { height:var(--size-175) }
:where(.sdcs-page) .sdcs-tags { gap:var(--size-8) }
:where(.sdcs-page) .sdcs-tags li { font-size:var(--size-11); padding:var(--size-12) }
:where(.sdcs-page) .sdcs-flow-explorer { padding:var(--size-22) var(--size-18) }
:where(.sdcs-page) .sdcs-flow-tabs { gap:var(--size-7) }
:where(.sdcs-page) .sdcs-flow-tabs button { font-size:var(--size-10); padding:var(--size-10) var(--size-12) }
:where(.sdcs-page) .sdcs-flow-nodes { gap:var(--size-20) }
:where(.sdcs-page) .sdcs-flow-nodes strong { font-size:var(--size-12) }
:where(.sdcs-page) .sdcs-flow-result { font-size:var(--size-12) }
:where(.sdcs-page) .sdcs-compare { display:block; width:100%!important }
:where(.sdcs-page) .sdcs-compare tbody { display:block; width:100%!important }
:where(.sdcs-page) .sdcs-compare tr { display:block; width:100%!important }
:where(.sdcs-page) .sdcs-compare th { display:block; width:100%!important }
:where(.sdcs-page) .sdcs-compare td { display:block; width:100%!important }
:where(.sdcs-page) .sdcs-compare thead { display:none }
:where(.sdcs-page) .sdcs-compare th[scope=row] { background:var(--color-surface-callout); padding:var(--size-13) var(--size-18) }
:where(.sdcs-page) .sdcs-compare td { padding:var(--size-15) var(--size-18) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-compare tr:last-child>* { border-bottom:var(--size-1) var(--border-style) var(--color-border) }
:where(.sdcs-page) .sdcs-process { gap:var(--size-28) var(--size-20) }
:where(.sdcs-page) .sdcs-why { gap:var(--size-28) var(--size-20) }
:where(.sdcs-page) .sdcs-process__body h3 { font-size:var(--size-15) }
:where(.sdcs-page) .sdcs-process__body p { font-size:var(--size-12) }
:where(.sdcs-page) .sdcs-why-item h3 { font-size:var(--size-14) }
:where(.sdcs-page) .sdcs-pull { font-size:var(--size-21); padding:var(--size-23) }
:where(.sdcs-page) .sdcs-app-content { padding:var(--size-15) }
:where(.sdcs-page) .sdcs-app-topline strong { font-size:var(--size-21) }
:where(.sdcs-page) .sdcs-app-metrics b { font-size:var(--size-12) }
:where(.sdcs-page) .sdcs-app-chart { gap:var(--size-12) }
:where(.sdcs-page) .sdcs-app-tasks { font-size:var(--size-8) }
:where(.sdcs-page) .sdcs-app-rail { width:var(--size-32); padding:var(--size-17) var(--size-7) }
:where(.sdcs-page) .sdcs-layer { padding:var(--size-9) var(--size-12) }
:where(.sdcs-page) .sdcs-layer .sdcs-meta { font-size:var(--size-9) }
:where(.sdcs-page) .sdcs-layer .sdcs-lbl { font-size:var(--size-11) }
:where(.sdcs-page) .sdcs-visual-kicker { font-size:var(--size-8) }
:where(.sdcs-page) .sdcs-sw-footer .sdcs-footer-grid { grid-template-columns:1fr 1fr }
:where(.sdcs-page) .sdcs-hero-meta { font-size:var(--size-10) }
:where(.sdcs-page) .action-group { gap:var(--size-18) }
}
@media print {
:where(.sdcs-page) .site-header { display:none }
:where(.sdcs-page)-section-nav { display:none }
:where(.sdcs-page) .sdcs-flow-tabs { display:none }
:where(.sdcs-page) .page-section { padding:var(--size-25) 0 }
:where(.sdcs-page) .container { width:100% }
:where(.sdcs-page) .sdcs-flow-panel[hidden] { display:block!important }
:where(.sdcs-page) .sdcs-accordion__panel { display:block!important }
:where(.sdcs-page) * { box-shadow:none!important }
:where(.sdcs-page) .sdcs-feature { break-inside:avoid }
:where(.sdcs-page) .card { break-inside:avoid }
:where(.sdcs-page) .sdcs-service-card { break-inside:avoid }
:where(.sdcs-page) .sdcs-process__step { break-inside:avoid }
}
:where(.sdcs-page) .sdcs-sw-footer .footer-top { display:grid; grid-template-columns:1fr 1fr; gap:9%; margin-bottom:var(--size-35) }
:where(.sdcs-page) .sdcs-sw-footer .sdcs-footer-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-25) }
:where(.sdcs-page) .sdcs-sw-footer h4 { font-size:var(--size-12); color:var(--color-white); margin-bottom:var(--size-20) }
:where(.sdcs-page) .sdcs-sw-footer .footer-brand .brand { display:inline-flex; align-items:baseline; gap:var(--size-8) }
:where(.sdcs-page) .sdcs-sw-footer .footer-brand p { margin-top:var(--size-20) }
@media(max-width:800px) {
:where(.sdcs-page) .sdcs-sw-footer .footer-top { grid-template-columns:1fr; gap:var(--size-30) }
:where(.sdcs-page) .sdcs-sw-footer .sdcs-footer-cols { gap:var(--size-16) }
}
/* Match the approved reference's tokens and component rhythm. */
:where(.sdcs-page) h3 { color:var(--color-heading); font-weight:var(--font-weight-bold); letter-spacing:var(--letter-spacing-heading) }
:where(.sdcs-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(.sdcs-page) .card__title { font-size:var(--card-title-size); line-height:var(--line-height-heading); margin:0 }
:where(.sdcs-page) .card { padding:var(--card-padding); justify-content:flex-start }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-sw-icon svg { width:var(--size-24); height:var(--size-24) }
:where(.sdcs-page) .hero-grid { grid-template-columns:1.15fr .85fr; gap:7% }
:where(.sdcs-page) .hero-section { padding:var(--size-65) 0 }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-schema:before { display:none }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-stack { gap:var(--size-9); margin-left:var(--size-14) }
:where(.sdcs-page) .sdcs-layer { padding:var(--size-12); box-shadow:none; border-color:var(--color-border); border-radius:var(--size-7) }
:where(.sdcs-page) .sdcs-layer .sdcs-lbl { font-size:var(--size-14) }
:where(.sdcs-page) .sdcs-layer .sdcs-meta { font-size:var(--size-11); color:var(--color-text-muted) }
:where(.sdcs-page) .sdcs-layer .sdcs-sw-icon { background:var(--color-surface-secondary); width:var(--size-28); height:var(--size-28) }
:where(.sdcs-page) .sdcs-schema .sdcs-diagram-caption { font-size:var(--size-10); margin-top:var(--size-18); color:var(--color-text-muted) }
:where(.sdcs-page) .sdcs-layer.is-node { box-shadow:0 var(--size-4) var(--size-12) var(--color-illustration-073d3419) }
:where(.sdcs-page) #ayrintilar .sdcs-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(.sdcs-page) .sdcs-feature>.sdcs-sw-icon { position:static; width:var(--size-44); height:var(--size-44); margin:0 0 var(--size-20); background:var(--color-surface-secondary) }
:where(.sdcs-page) .sdcs-feature>.sdcs-sw-icon svg { width:var(--size-24); height:var(--size-24) }
:where(.sdcs-page) .sdcs-feature__title { font-size:var(--card-title-size)!important; line-height:var(--line-height-heading)!important; margin-bottom:var(--size-12)!important }
:where(.sdcs-page) .sdcs-feature__body { font-size:var(--card-description-size); line-height:var(--line-height-relaxed)!important }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .feature-grid { gap:var(--size-24) }
:where(.sdcs-page) .sdcs-flow-explorer { background:var(--color-primary); border-color:var(--color-primary); padding:var(--size-32); border-radius:var(--size-18); box-shadow:none }
:where(.sdcs-page) .sdcs-flow-toolbar .eyebrow { color:var(--color-highlight) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-flow-toolbar { align-items:center }
:where(.sdcs-page) .sdcs-playback { display:flex; flex-direction:column; align-items:flex-end; gap:var(--size-12); flex-shrink:0 }
:where(.sdcs-page) .sdcs-playback-state { color:var(--color-surface-accent); font:var(--size-11) var(--font-family-mono) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-flow-tabs { border:0; padding-bottom:var(--size-20); gap:var(--size-10) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-flow-tabs button[aria-selected=true] { background:var(--color-highlight); color:var(--color-heading); border-color:var(--color-highlight) }
:where(.sdcs-page) .sdcs-tab-number { font:var(--size-10) var(--font-family-mono); margin-right:var(--size-8); opacity:.8 }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-flow-progress span { display:block; width:0; height:100%; background:var(--color-highlight) }
:where(.sdcs-page) .sdcs-flow-nodes { background:var(--color-surface); border-radius:var(--size-12); padding:var(--size-28) var(--size-24); gap:var(--size-28) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-flow-nodes>div:not(:last-child):after { color:var(--color-accent); right:var(--length-px-negative-22) }
:where(.sdcs-page) .sdcs-flow-nodes .sdcs-sw-icon { background:var(--color-surface); border-color:var(--color-border); box-shadow:none }
:where(.sdcs-page) .sdcs-flow-nodes strong { color:var(--color-heading); font-size:var(--size-16); line-height:var(--line-height-art-1-4) }
:where(.sdcs-page) .sdcs-flow-nodes small { color:var(--color-text-muted) }
:where(.sdcs-page) .sdcs-flow-nodes .is-active { background:var(--color-highlight); transform:translateY(var(--length-px-negative-3)) }
:where(.sdcs-page) .sdcs-flow-nodes .is-complete .sdcs-sw-icon { background:var(--color-primary); color:var(--color-highlight); border-color:var(--color-primary) }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-flow-panel { animation:sdcs-flow-enter .4s ease-out }
@keyframes sdcs-flow-enter {
from { opacity:.3; transform:translateY(var(--size-5)) }
to { opacity:1; transform:none }
}
:where(.sdcs-page) #surec h2 { color:var(--color-heading) }
:where(.sdcs-page) #surec h3 { color:var(--color-heading) }
:where(.sdcs-page) #surec .eyebrow { color:var(--color-accent) }
:where(.sdcs-page) .sdcs-process { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-22) var(--size-28); counter-reset:none }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-process__rail { margin:0; display:block }
:where(.sdcs-page) .sdcs-process__line { display:none }
:where(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-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(.sdcs-page) .sdcs-process__body p { font-size:var(--size-16); line-height:var(--line-height-relaxed); color:var(--color-text-muted); margin:0 }
:where(.sdcs-page) .sdcs-process__step:last-child .sdcs-process__node { background:var(--color-accent); color:var(--color-white) }
:where(.sdcs-page) .sdcs-why { border-color:var(--color-border); gap:var(--size-24); margin-top:var(--size-48); padding-top:var(--size-38) }
:where(.sdcs-page) .sdcs-why-item h3 { font-size:var(--size-18) }
:where(.sdcs-page) .sdcs-why-item p { font-size:var(--size-15); color:var(--color-text-muted); line-height:var(--line-height-relaxed) }
:where(.sdcs-page) .sdcs-why .sdcs-sw-icon { background:var(--color-surface-secondary); border-color:var(--color-border); color:var(--color-heading) }
:where(.sdcs-page) .sdcs-questions li { font-size:var(--size-16) }
:where(.sdcs-page) .sdcs-list li { font-size:var(--size-15) }
:where(.sdcs-page) .sdcs-service-card p { font-size:var(--size-16) }
:where(.sdcs-page) .sdcs-case p { font-size:var(--size-16) }
:where(.sdcs-page) .sdcs-accordion__panel { font-size:var(--size-16) }
:where(.sdcs-page) .sdcs-service-title h3 { font-size:var(--size-19) }
:where(.sdcs-page) .sdcs-tags li { font-size:var(--size-14) }
:where(.sdcs-page) .sdcs-tags.is-tech li { font-size:var(--size-12) }
:where(.sdcs-page) .sdcs-compare { font-size:var(--size-15) }
:where(.sdcs-page) .sdcs-compare thead th { font-size:var(--size-13) }
:where(.sdcs-page) .sdcs-case .sdcs-sector { font-size:var(--size-11) }
:where(.sdcs-page) .sdcs-case .tags { font-size:var(--size-12) }
:where(.sdcs-page) .lead { color:var(--color-text); font-size:var(--size-17) }
:where(.sdcs-page) .sdcs-proof-lead { color:var(--color-text); font-size:var(--size-17) }
:where(.sdcs-page) .hero-lead { color:var(--color-text); font-size:var(--size-17) }
@media(max-width:1000px) {
:where(.sdcs-page) .hero-grid { gap:4% }
:where(.sdcs-page) .sdcs-schema { padding:var(--size-22); max-width:var(--size-370) }
:where(.sdcs-page) .sdcs-layer { gap:var(--size-8) }
:where(.sdcs-page) .sdcs-layer .sdcs-lbl { font-size:var(--size-12) }
:where(.sdcs-page) .sdcs-layer .sdcs-meta { font-size:var(--size-10) }
:where(.sdcs-page) .sdcs-flow-nodes { gap:var(--size-22); padding:var(--size-22) var(--size-16) }
:where(.sdcs-page) .sdcs-flow-nodes strong { font-size:var(--size-14) }
:where(.sdcs-page) .sdcs-flow-nodes>div { padding:var(--size-16) var(--size-12) }
:where(.sdcs-page) .sdcs-flow-nodes>div:not(:last-child):after { right:var(--length-px-negative-19) }
:where(.sdcs-page) .sdcs-process__step { padding:var(--size-24); gap:var(--size-16) }
}
@media(max-width:800px) {
:where(.sdcs-page) .hero-grid { grid-template-columns:1fr }
:where(.sdcs-page) .sdcs-schema { max-width:var(--size-450); margin:var(--size-30) auto 0 }
:where(.sdcs-page) .sdcs-layer .sdcs-lbl { font-size:var(--size-14) }
:where(.sdcs-page) .sdcs-layer .sdcs-meta { font-size:var(--size-11) }
:where(.sdcs-page) .sdcs-flow-toolbar { display:flex; align-items:start }
:where(.sdcs-page) .sdcs-flow-toolbar p { font-size:var(--size-26) }
:where(.sdcs-page) .sdcs-playback { align-items:flex-start }
:where(.sdcs-page) .sdcs-process { grid-template-columns:1fr }
:where(.sdcs-page) .sdcs-why { grid-template-columns:repeat(2,1fr) }
:where(.sdcs-page) .sdcs-flow-nodes>div { min-height:var(--size-130) }
:where(.sdcs-page) .sdcs-flow-tabs { flex-wrap:wrap }
}
@media(max-width:520px) {
:where(.sdcs-page) .hero-section { padding:var(--size-40) 0 }
:where(.sdcs-page) .sdcs-schema { padding:var(--size-22) var(--size-18); box-shadow:var(--size-6) var(--size-6) 0 var(--color-surface-accent) }
:where(.sdcs-page) .sdcs-layer .sdcs-lbl { font-size:var(--size-13) }
:where(.sdcs-page) .sdcs-layer .sdcs-meta { font-size:var(--size-10) }
:where(.sdcs-page) .sdcs-flow-explorer { padding:var(--size-25) var(--size-18) }
:where(.sdcs-page) .sdcs-flow-toolbar { display:block }
:where(.sdcs-page) .sdcs-playback { flex-direction:row; align-items:center; justify-content:space-between; margin-bottom:var(--size-22) }
:where(.sdcs-page) .sdcs-flow-toolbar p { font-size:var(--size-27) }
:where(.sdcs-page) .sdcs-playback-state { font-size:var(--size-10) }
:where(.sdcs-page) .sdcs-flow-play { font-size:var(--size-11) }
:where(.sdcs-page) .sdcs-flow-tabs button { font-size:var(--size-11); padding:var(--size-11) var(--size-10) }
:where(.sdcs-page) .sdcs-tab-number { margin-right:var(--size-4) }
:where(.sdcs-page) .sdcs-flow-nodes { padding:var(--size-18) var(--size-12); gap:var(--size-16) }
:where(.sdcs-page) .sdcs-flow-nodes>div { padding:var(--size-14) var(--size-10); min-height:var(--size-135) }
:where(.sdcs-page) .sdcs-flow-nodes>div:not(:last-child):after { right:var(--length-px-negative-15); font-size:var(--size-13) }
:where(.sdcs-page) .sdcs-flow-nodes strong { font-size:var(--size-14) }
:where(.sdcs-page) .sdcs-flow-result { font-size:var(--size-14); padding:var(--size-14) }
:where(.sdcs-page) .sdcs-process__step { padding:var(--size-22) var(--size-18); grid-template-columns:var(--size-40) 1fr; gap:var(--size-15) }
:where(.sdcs-page) .sdcs-process__node { width:var(--size-40); height:var(--size-40); font-size:var(--size-12) }
:where(.sdcs-page) .sdcs-process__body h3 { font-size:var(--size-18) }
:where(.sdcs-page) .sdcs-process__body p { font-size:var(--size-15) }
:where(.sdcs-page) .sdcs-why-item h3 { font-size:var(--size-17) }
:where(.sdcs-page) .sdcs-why-item p { font-size:var(--size-14) }
:where(.sdcs-page) .sdcs-tags li { font-size:var(--size-12) }
:where(.sdcs-page) .sdcs-list li { font-size:var(--size-14) }
:where(.sdcs-page) .sdcs-questions li { font-size:var(--size-15) }
}
:where(.sdcs-page) #kapsam { padding-block:var(--size-96) }
:where(.sdcs-page) #kapsam>.container>.sdcs-head .eyebrow { color:var(--color-highlight) }
:where(.sdcs-page) #kapsam>.container>.sdcs-head h2 { color:var(--color-white); font-family:var(--font-family-display); font-weight:var(--font-weight-display) }
:where(.sdcs-page) #kapsam>.container>.sdcs-head .lead { color:var(--color-surface-secondary); max-width:var(--size-900); font-size:var(--size-17); line-height:var(--line-height-relaxed) }
:where(.sdcs-page) #kapsam .sdcs-scope-services-title { font:var(--font-weight-display) var(--size-32)/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-27) }
:where(.sdcs-page) #kapsam .sdcs-head { margin-bottom:var(--size-42) }
:where(.sdcs-page) #kapsam .sdcs-scope { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-24); align-items:stretch; margin:0 }
:where(.sdcs-page) #kapsam .sdcs-scope>.sdcs-service-card { display:flex; flex-direction:column; grid-column:auto; min-width:0; gap:0; padding:var(--size-28); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-white); border-radius:var(--size-12); align-items:stretch; min-height:var(--size-215) }
:where(.sdcs-page) #kapsam .sdcs-service-title { display:flex; align-items:center; gap:var(--size-17); margin-bottom:var(--size-19); min-height:var(--size-48) }
:where(.sdcs-page) #kapsam .sdcs-service-title h3 { font:var(--font-weight-bold) var(--size-20)/var(--line-height-1-4) var(--font-family-body); letter-spacing:var(--letter-spacing-negative-02em); color:var(--color-heading); margin:0 }
:where(.sdcs-page) #kapsam .sdcs-service-card .sdcs-sw-icon { width:var(--size-44); height:var(--size-44); min-width:var(--size-44); display:grid; place-items:center; background:var(--color-surface-accent); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-10); box-shadow:none; color:var(--color-heading); margin:0; flex:none }
:where(.sdcs-page) #kapsam .sdcs-service-card .sdcs-sw-icon svg { width:var(--size-24); height:var(--size-24); display:block; fill:none; stroke:currentColor; max-width:var(--size-24) }
:where(.sdcs-page) #kapsam .sdcs-service-card .sdcs-panel { display:block; background:transparent; padding:0; border:0; margin:0 }
:where(.sdcs-page) #kapsam .sdcs-service-card .sdcs-panel p { font:var(--font-weight-regular) var(--size-15)/var(--line-height-1-85) var(--font-family-body); color:var(--color-text-muted); margin:0 }
:where(.sdcs-page) #kapsam .sdcs-scope>.sdcs-service-card.sdcs-scope-modernization { grid-column:1/-1; display:grid; grid-template-columns:1fr .95fr; gap:var(--size-36); align-items:center; padding:var(--size-30); min-height:0 }
:where(.sdcs-page) .sdcs-scope-modernization-visual { margin:0; padding:var(--size-24); background:var(--color-surface-secondary); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-8); min-width:0 }
:where(.sdcs-page) .sdcs-scope-modernization-visual>figcaption { font:var(--font-weight-medium) var(--size-10)/var(--line-height-1-7) var(--font-family-mono); letter-spacing:var(--letter-spacing-06em); color:var(--color-heading); margin-bottom:var(--size-18) }
:where(.sdcs-page) .sdcs-modernization-flow { display:grid; grid-template-columns:1fr var(--size-18) 1fr var(--size-18) 1fr; gap:var(--size-6); align-items:center }
:where(.sdcs-page) .sdcs-modernization-flow>span { display:grid; place-items:center; padding:var(--size-13) var(--size-8); min-height:var(--size-64); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-5); text-align:center; color:var(--color-heading); font:var(--font-weight-medium) var(--size-12)/var(--line-height-1-7) var(--font-family-body); min-width:0 }
:where(.sdcs-page) .sdcs-modernization-flow>span:last-child { background:var(--color-primary); color:var(--color-white); border-color:var(--color-primary) }
:where(.sdcs-page) .sdcs-modernization-flow>b { font-size:var(--size-17); line-height:var(--line-height-art-1); color:var(--color-accent); font-weight:var(--font-weight-regular); text-align:center }
:where(.sdcs-page) .sdcs-scope-modernization-visual>small { font:var(--size-9)/var(--line-height-1-8) var(--font-family-mono); color:var(--color-text-muted); display:block; margin-top:var(--size-18) }
:where(.sdcs-page) .sdcs-scope-outputs { background:var(--color-background); border-radius:var(--size-12); padding:var(--size-34); margin-top:var(--size-36); color:var(--color-heading) }
:where(.sdcs-page) #kapsam .sdcs-scope-group-title { font:var(--font-weight-display) var(--size-32)/var(--line-height-1-2) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-025em); color:var(--color-heading); margin:0 0 var(--size-27) }
:where(.sdcs-page) .sdcs-scope-output-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--size-34) }
:where(.sdcs-page) .sdcs-scope-output-group { min-width:0 }
:where(.sdcs-page) #kapsam .sdcs-scope-output-group>.sdcs-sw-icon { display:grid; place-items:center; width:var(--size-44); height:var(--size-44); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-10); background:var(--color-surface-accent); color:var(--color-heading); box-shadow:none; margin:0 0 var(--size-18) }
:where(.sdcs-page) #kapsam .sdcs-scope-tech-group>.sdcs-sw-icon { display:grid; place-items:center; width:var(--size-44); height:var(--size-44); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-10); background:var(--color-surface-accent); color:var(--color-heading); box-shadow:none; margin:0 0 var(--size-18) }
:where(.sdcs-page) .sdcs-scope-output-group>.sdcs-sw-icon svg { width:var(--size-24); height:var(--size-24); fill:none; stroke:currentColor }
:where(.sdcs-page) .sdcs-scope-tech-group>.sdcs-sw-icon svg { width:var(--size-24); height:var(--size-24); fill:none; stroke:currentColor }
:where(.sdcs-page) #kapsam .sdcs-scope-output-group h4 { font:var(--font-weight-bold) var(--size-18)/var(--line-height-1-45) var(--font-family-body); letter-spacing:var(--letter-spacing-negative-02em); color:var(--color-heading); margin:0 0 var(--size-17) }
:where(.sdcs-page) .sdcs-scope-output-group ul { list-style:none; padding:0; margin:0; display:grid; gap:var(--size-11) }
:where(.sdcs-page) .sdcs-scope-output-group li { position:relative; padding-left:var(--size-20); color:var(--color-text); font:var(--font-weight-regular) var(--size-14)/var(--line-height-1-8) var(--font-family-body) }
:where(.sdcs-page) .sdcs-scope-output-group li:before { content:'✓'; position:absolute; left:0; top:0; color:var(--color-accent) }
:where(.sdcs-page) #kapsam .sdcs-scope-note { font:var(--font-weight-regular) var(--size-14)/var(--line-height-1-8) var(--font-family-body); color:var(--color-text-muted); background:var(--color-surface-secondary); border:0; border-radius:var(--size-6); padding:var(--size-17) var(--size-20); margin:var(--size-28) 0 0 }
:where(.sdcs-page) .sdcs-scope-tech { background:var(--color-surface-secondary); padding:var(--size-34); margin-top:var(--size-28); border-radius:var(--size-12); color:var(--color-heading) }
:where(.sdcs-page) .sdcs-scope-tech-groups { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--size-28) }
:where(.sdcs-page) #kapsam .sdcs-scope-tech-group h4 { font:var(--font-weight-bold) var(--size-17)/var(--line-height-1-5) var(--font-family-body); letter-spacing:var(--letter-spacing-negative-02em); color:var(--color-heading); margin:0 0 var(--size-16) }
:where(.sdcs-page) .sdcs-scope-tech-group ul { list-style:none; padding:0; margin:0; display:grid; gap:var(--size-12) }
:where(.sdcs-page) .sdcs-scope-tech-group li { font:var(--font-weight-regular) var(--size-13)/var(--line-height-1-8) var(--font-family-body); color:var(--color-text); padding-left:var(--size-15); position:relative }
:where(.sdcs-page) .sdcs-scope-tech-group li:before { content:''; position:absolute; left:0; top:var(--size-10); width:var(--size-4); height:var(--size-4); background:var(--color-accent); border-radius:50% }
/* A clear section change: dark-green scope, then a white development process. */
:where(.sdcs-page) #surec { padding-block:var(--size-96) }
:where(.sdcs-page) #surec .section-head { display:block; margin-bottom:var(--size-38); max-width:var(--size-1000) }
:where(.sdcs-page) #surec .section-head .eyebrow { color:var(--color-heading) }
:where(.sdcs-page) #surec .section-head h2 { color:var(--color-heading); font-family:var(--font-family-display); font-weight:var(--font-weight-display) }
:where(.sdcs-page) #surec .sdcs-process { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-24); align-items:stretch }
:where(.sdcs-page) #surec .sdcs-process__step { display:grid; grid-template-columns:var(--size-44) minmax(0,1fr); gap:var(--size-20); align-items:start; background:var(--color-background); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-12); padding:var(--size-28); min-width:0 }
:where(.sdcs-page) #surec .sdcs-process__node { width:var(--size-44); height:var(--size-44); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-8); background:var(--color-surface-accent); color:var(--color-heading); font:var(--font-weight-medium) var(--size-12)/var(--line-height-1-7) var(--font-family-mono) }
:where(.sdcs-page) #surec .sdcs-process__step:last-child .sdcs-process__node { width:var(--size-44); height:var(--size-44); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-8); background:var(--color-surface-accent); color:var(--color-heading); font:var(--font-weight-medium) var(--size-12)/var(--line-height-1-7) var(--font-family-mono) }
:where(.sdcs-page) #surec .sdcs-process__body h3 { font:var(--font-weight-bold) var(--size-19)/var(--line-height-1-45) var(--font-family-body); letter-spacing:var(--letter-spacing-negative-02em); color:var(--color-heading); margin:0 0 var(--size-13) }
:where(.sdcs-page) #surec .sdcs-process__body p { font:var(--font-weight-regular) var(--size-15)/var(--line-height-1-8) var(--font-family-body); color:var(--color-text-muted); margin:0 }
:where(.sdcs-page) #surec .sdcs-why { margin-top:var(--size-48); padding-top:0; border:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--size-28) }
:where(.sdcs-page) #surec .sdcs-why-item h3 { font:var(--font-weight-bold) var(--size-18)/var(--line-height-1-5) var(--font-family-body); letter-spacing:var(--letter-spacing-negative-02em); color:var(--color-heading); margin:var(--size-18) 0 var(--size-13) }
:where(.sdcs-page) #surec .sdcs-why-item p { font:var(--font-weight-regular) var(--size-14)/var(--line-height-1-8) var(--font-family-body); color:var(--color-text-muted) }
:where(.sdcs-page) #surec .sdcs-why .sdcs-sw-icon { width:var(--size-44); height:var(--size-44); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-10); background:var(--color-surface-accent); color:var(--color-heading); box-shadow:none }
@media(max-width:1000px) {
:where(.sdcs-page) .sdcs-scope-output-groups { gap:var(--size-24) }
:where(.sdcs-page) .sdcs-scope-tech-groups { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-30) }
:where(.sdcs-page) #surec .sdcs-why { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-28) }
:where(.sdcs-page) #kapsam .sdcs-scope>.sdcs-service-card.sdcs-scope-modernization { grid-template-columns:1fr; gap:var(--size-24) }
:where(.sdcs-page) .sdcs-scope-modernization-visual { width:100% }
}
@media(max-width:800px) {
:where(.sdcs-page) #kapsam { padding-block:var(--size-70) }
:where(.sdcs-page) #surec { padding-block:var(--size-70) }
:where(.sdcs-page) #kapsam .sdcs-scope { grid-template-columns:1fr }
:where(.sdcs-page) #kapsam .sdcs-scope>.sdcs-service-card { min-height:0; padding:var(--size-27) }
:where(.sdcs-page) .sdcs-scope-output-groups { grid-template-columns:1fr; gap:var(--size-29) }
:where(.sdcs-page) .sdcs-scope-output-group { display:grid; grid-template-columns:var(--size-44) minmax(0,1fr); gap:0 var(--size-18) }
:where(.sdcs-page) #kapsam .sdcs-scope-output-group>.sdcs-sw-icon { grid-row:1/3; margin:0 }
:where(.sdcs-page) .sdcs-scope-output-group ul { grid-column:2 }
:where(.sdcs-page) #kapsam .sdcs-scope-output-group h4 { margin-bottom:var(--size-13) }
:where(.sdcs-page) #surec .sdcs-process { grid-template-columns:1fr }
:where(.sdcs-page) #surec .sdcs-process__step { padding:var(--size-26) }
}
@media(max-width:600px) {
:where(.sdcs-page) #kapsam { padding-block:var(--size-58) }
:where(.sdcs-page) #surec { padding-block:var(--size-58) }
:where(.sdcs-page) #kapsam .sdcs-scope-services-title { font-size:var(--size-28); margin-bottom:var(--size-24) }
:where(.sdcs-page) #kapsam .sdcs-scope-group-title { font-size:var(--size-28); margin-bottom:var(--size-24) }
:where(.sdcs-page) #kapsam>.container>.sdcs-head .lead { font-size:var(--size-15) }
:where(.sdcs-page) #kapsam .sdcs-service-title { gap:var(--size-15); align-items:flex-start; margin-bottom:var(--size-18) }
:where(.sdcs-page) #kapsam .sdcs-service-title h3 { font-size:var(--size-19) }
:where(.sdcs-page) #kapsam .sdcs-scope>.sdcs-service-card { padding:var(--size-24); border-radius:var(--size-10) }
:where(.sdcs-page) #kapsam .sdcs-scope>.sdcs-service-card.sdcs-scope-modernization { padding:var(--size-24); border-radius:var(--size-10) }
:where(.sdcs-page) #kapsam .sdcs-service-card .sdcs-panel p { font-size:var(--size-14) }
:where(.sdcs-page) .sdcs-scope-modernization-visual { padding:var(--size-20) }
:where(.sdcs-page) .sdcs-modernization-flow { gap:var(--size-3); grid-template-columns:1fr var(--size-14) 1fr var(--size-14) 1fr }
:where(.sdcs-page) .sdcs-modernization-flow>span { font-size:var(--size-10); padding:var(--size-12) var(--size-4); min-height:var(--size-65) }
:where(.sdcs-page) .sdcs-modernization-flow>b { font-size:var(--size-14) }
:where(.sdcs-page) .sdcs-scope-modernization-visual>figcaption { font-size:var(--size-9) }
:where(.sdcs-page) .sdcs-scope-outputs { padding:var(--size-25); margin-top:var(--size-26) }
:where(.sdcs-page) .sdcs-scope-tech { padding:var(--size-25); margin-top:var(--size-26) }
:where(.sdcs-page) .sdcs-scope-output-group { display:block }
:where(.sdcs-page) #kapsam .sdcs-scope-output-group>.sdcs-sw-icon { margin-bottom:var(--size-18) }
:where(.sdcs-page) .sdcs-scope-output-group li { font-size:var(--size-14) }
:where(.sdcs-page) .sdcs-scope-tech-groups { grid-template-columns:1fr; gap:var(--size-28) }
:where(.sdcs-page) .sdcs-scope-tech-group { display:grid; grid-template-columns:var(--size-44) minmax(0,1fr); gap:0 var(--size-16) }
:where(.sdcs-page) #kapsam .sdcs-scope-tech-group>.sdcs-sw-icon { grid-row:1/3; margin:0 }
:where(.sdcs-page) .sdcs-scope-tech-group ul { grid-column:2 }
:where(.sdcs-page) #kapsam .sdcs-scope-tech-group h4 { margin-bottom:var(--size-12) }
:where(.sdcs-page) .sdcs-scope-tech-group li { font-size:var(--size-13) }
:where(.sdcs-page) #kapsam .sdcs-scope-note { font-size:var(--size-13); padding:var(--size-17) }
:where(.sdcs-page) #surec .sdcs-process__step { padding:var(--size-24) var(--size-21); gap:var(--size-16); grid-template-columns:var(--size-40) minmax(0,1fr) }
:where(.sdcs-page) #surec .sdcs-process__node { width:var(--size-40); height:var(--size-40) }
:where(.sdcs-page) #surec .sdcs-process__step:last-child .sdcs-process__node { width:var(--size-40); height:var(--size-40) }
:where(.sdcs-page) #surec .sdcs-process__body h3 { font-size:var(--size-18) }
:where(.sdcs-page) #surec .sdcs-process__body p { font-size:var(--size-14) }
:where(.sdcs-page) #surec .sdcs-why { grid-template-columns:1fr; gap:var(--size-27) }
:where(.sdcs-page) #surec .sdcs-why-item { display:grid; grid-template-columns:var(--size-44) minmax(0,1fr); gap:0 var(--size-16) }
:where(.sdcs-page) #surec .sdcs-why-item .sdcs-sw-icon { grid-row:1/3 }
:where(.sdcs-page) #surec .sdcs-why-item h3 { margin:0 0 var(--size-12); font-size:var(--size-17) }
:where(.sdcs-page) #surec .sdcs-why-item p { grid-column:2; font-size:var(--size-14) }
}
/* Approved Avielon language: hero, studio difference and closing composition. */
:where(.sdcs-page) #top .hero-grid { grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:5%; align-items:center }
:where(.sdcs-page) #top .sdcs-schema { width:100%; max-width:none; padding:var(--size-34); background:var(--color-primary); border:var(--size-1) var(--border-style) var(--color-primary); border-radius:var(--size-12); box-shadow:var(--size-10) var(--size-10) 0 var(--color-surface-accent); margin:0 }
:where(.sdcs-page) #top .sdcs-schema-title { color:var(--color-white); font:var(--font-weight-medium) var(--size-13)/var(--line-height-1-5) var(--font-family-mono); margin-bottom:var(--size-26) }
:where(.sdcs-page) #top .sdcs-stack { gap:var(--size-14); margin-left:var(--size-14) }
:where(.sdcs-page) #top .sdcs-stack:before { border-color:var(--color-surface-accent) }
:where(.sdcs-page) #top .sdcs-layer:before { border-color:var(--color-surface-accent) }
:where(.sdcs-page) #top .sdcs-layer { min-height:var(--size-68); padding:var(--size-14) var(--size-16); gap:var(--size-12); background:var(--color-surface); border-color:var(--color-surface-accent); box-shadow:none }
:where(.sdcs-page) #top .sdcs-layer .sdcs-lbl { color:var(--color-heading); font-size:var(--size-15) }
:where(.sdcs-page) #top .sdcs-layer .sdcs-meta { color:var(--color-text-muted); font-size:var(--size-11) }
:where(.sdcs-page) #top .sdcs-layer .sdcs-sw-icon { width:var(--size-34); height:var(--size-34); background:var(--color-surface-secondary); color:var(--color-heading); flex-shrink:0 }
:where(.sdcs-page) #top .sdcs-layer svg { width:var(--size-22); height:var(--size-22) }
:where(.sdcs-page) #top .sdcs-layer.is-node { background:var(--color-highlight); border-color:var(--color-highlight) }
:where(.sdcs-page) #top .sdcs-layer.is-node .sdcs-sw-icon { background:transparent }
:where(.sdcs-page) #top .sdcs-schema>.sdcs-diagram-caption { color:var(--color-surface-secondary); font-size:var(--size-11); margin-top:var(--size-24) }
:where(.sdcs-page) #top .sdcs-hero-meta { gap:var(--size-16) var(--size-22); color:var(--color-text); font:var(--font-weight-regular) var(--size-13)/var(--line-height-1-6) var(--font-family-body); margin-top:var(--size-30) }
:where(.sdcs-page) #top .sdcs-hero-meta li { display:flex; align-items:center; gap:var(--size-10) }
:where(.sdcs-page) #top .sdcs-hero-meta li:before { display:none }
:where(.sdcs-page) #top .sdcs-hero-meta svg { width:var(--size-24); height:var(--size-24); flex:0 0 var(--size-24); color:var(--color-heading) }
:where(.sdcs-page) .sdcs-custom-text-link { display:inline-flex; align-items:center; gap:var(--size-12); padding:var(--size-7) 0; background:none; border:0; 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:underline; text-underline-offset:var(--size-6); text-decoration-thickness:var(--size-1) }
:where(.sdcs-page) .sdcs-custom-text-link:after { display:none }
:where(.sdcs-page) .sdcs-custom-text-link>span { font-size:var(--size-21); line-height:var(--line-height-art-1); text-decoration:none }
:where(.sdcs-page) .sdcs-custom-text-link:focus-visible { outline:var(--size-2) var(--border-style) currentColor; outline-offset:var(--size-6) }
:where(.sdcs-page) #surec .sdcs-custom-why-block { margin-top:var(--size-56); padding:var(--size-36); border-radius:var(--size-12); background:var(--color-surface-secondary) }
:where(.sdcs-page) #surec .sdcs-custom-why-heading .eyebrow { margin-bottom:var(--size-14); color:var(--color-accent) }
:where(.sdcs-page) #surec .sdcs-custom-why-heading h3 { font:var(--font-weight-display) clamp(var(--size-28),3vw,var(--size-38))/var(--line-height-1-2) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-025em); color:var(--color-heading); margin:0 }
:where(.sdcs-page) #surec .sdcs-custom-why-block .sdcs-why { margin:var(--size-30) 0 0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-22) }
:where(.sdcs-page) #surec .sdcs-why-item { background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-10); padding:var(--size-28); min-width:0 }
:where(.sdcs-page) #surec .sdcs-why-item h3 { font-size:var(--size-19); margin:var(--size-20) 0 var(--size-12) }
:where(.sdcs-page) #surec .sdcs-why-item p { font-size:var(--size-15); margin:0 }
:where(.sdcs-page) #birlikte-baslayalim .sdcs-split--cta { grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:6%; align-items:center }
:where(.sdcs-page) #birlikte-baslayalim .section-head { margin:0 }
:where(.sdcs-page) #birlikte-baslayalim h2 { color:var(--color-white); font:var(--font-weight-display) clamp(var(--size-34),3.5vw,var(--size-48))/var(--line-height-1-16) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-03em); margin:var(--size-18) 0 var(--size-24) }
:where(.sdcs-page) #birlikte-baslayalim .eyebrow { color:var(--color-highlight) }
:where(.sdcs-page) #birlikte-baslayalim .sdcs-custom-closing-copy>p:not(.eyebrow) { font:var(--font-weight-regular) var(--size-16)/var(--line-height-1-8) var(--font-family-body); color:var(--color-background); margin:0; max-width:var(--size-590) }
:where(.sdcs-page) #birlikte-baslayalim .action-group { gap:var(--size-18) var(--size-26); margin:var(--size-28) 0 0 }
:where(.sdcs-page) #birlikte-baslayalim .sdcs-custom-text-link { color:var(--color-white); background:none }
:where(.sdcs-page) .sdcs-custom-closing-visual { min-width:0; margin:0; padding:var(--size-34); background:var(--color-surface); color:var(--color-heading); border:var(--size-1) var(--border-style) var(--color-surface-accent); border-radius:var(--size-12) }
:where(.sdcs-page) .sdcs-custom-closing-visual figcaption { 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-heading) }
:where(.sdcs-page) .sdcs-custom-visual-lead { font:var(--font-weight-regular) var(--size-14)/var(--line-height-1-7) var(--font-family-body); color:var(--color-text-muted); margin:var(--size-12) 0 var(--size-26) }
:where(.sdcs-page) .sdcs-custom-product-path { list-style:none; padding:0; margin:0; display:grid; gap:var(--size-22) }
:where(.sdcs-page) .sdcs-custom-product-path li { display:grid; grid-template-columns:var(--size-40) minmax(0,1fr); gap:var(--size-16); position:relative; align-items:start }
:where(.sdcs-page) .sdcs-custom-path-number { width:var(--size-40); height:var(--size-40); background:var(--color-surface-secondary); color:var(--color-heading); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-6); display:grid; place-items:center; font:var(--font-weight-medium) var(--size-11) var(--font-family-mono); position:relative; z-index:1 }
:where(.sdcs-page) .sdcs-custom-product-path li:not(:last-child):after { content:''; position:absolute; left:var(--size-19-5); top:var(--size-40); bottom:var(--length-px-negative-22); width:var(--size-1); background:var(--color-illustration-739582) }
:where(.sdcs-page) .sdcs-custom-product-path strong { font:var(--font-weight-bold) var(--size-16)/var(--line-height-1-5) var(--font-family-body); color:var(--color-heading); display:block }
:where(.sdcs-page) .sdcs-custom-product-path li div>span { display:block; color:var(--color-text-muted); font:var(--font-weight-regular) var(--size-12)/var(--line-height-1-7) var(--font-family-body); margin-top:var(--size-5) }
:where(.sdcs-page) .sdcs-custom-visual-result { display:flex; align-items:center; gap:var(--size-12); padding:var(--size-18); background:var(--color-primary); color:var(--color-white); margin-top:var(--size-28); border-radius:var(--size-7); font:var(--font-weight-medium) var(--size-13)/var(--line-height-1-6) var(--font-family-body) }
:where(.sdcs-page) .sdcs-custom-visual-result svg { width:var(--size-24); height:var(--size-24); color:var(--color-highlight); flex-shrink:0 }
@media(max-width:1100px) {
:where(.sdcs-page) #top .hero-grid { gap:4% }
:where(.sdcs-page) #top .sdcs-schema { padding:var(--size-26) }
:where(.sdcs-page) #top .sdcs-layer { padding:var(--size-12); gap:var(--size-9) }
:where(.sdcs-page) #top .sdcs-layer .sdcs-lbl { font-size:var(--size-13) }
:where(.sdcs-page) #top .sdcs-layer .sdcs-meta { font-size:var(--size-10) }
:where(.sdcs-page) .sdcs-custom-closing-visual { padding:var(--size-26) }
}
@media(max-width:800px) {
:where(.sdcs-page) #top .hero-grid { grid-template-columns:minmax(0,1fr); gap:var(--size-40) }
:where(.sdcs-page) #birlikte-baslayalim .sdcs-split--cta { grid-template-columns:minmax(0,1fr); gap:var(--size-40) }
:where(.sdcs-page) #top .sdcs-schema { max-width:var(--size-620); margin:0 auto }
:where(.sdcs-page) #top .sdcs-layer .sdcs-lbl { font-size:var(--size-15) }
:where(.sdcs-page) #top .sdcs-layer .sdcs-meta { font-size:var(--size-11) }
:where(.sdcs-page) #surec .sdcs-custom-why-block { padding:var(--size-28) }
:where(.sdcs-page) #surec .sdcs-why-item { padding:var(--size-24) }
:where(.sdcs-page) .sdcs-custom-closing-visual { width:100%; max-width:var(--size-620) }
}
@media(max-width:600px) {
:where(.sdcs-page) #surec .sdcs-custom-why-block { margin-top:var(--size-36); padding:var(--size-24) var(--size-18) }
:where(.sdcs-page) #surec .sdcs-custom-why-block .sdcs-why { grid-template-columns:minmax(0,1fr); gap:var(--size-18); margin-top:var(--size-24) }
:where(.sdcs-page) #surec .sdcs-why-item { padding:var(--size-22); display:grid; grid-template-columns:var(--size-44) minmax(0,1fr); gap:0 var(--size-15) }
:where(.sdcs-page) #surec .sdcs-why-item h3 { font-size:var(--size-18); margin:0 0 var(--size-12) }
:where(.sdcs-page) #top .sdcs-schema { padding:var(--size-24) var(--size-18); box-shadow:var(--size-5) var(--size-5) 0 var(--color-surface-accent) }
:where(.sdcs-page) #top .sdcs-layer { display:grid; grid-template-columns:var(--size-30) minmax(0,1fr); gap:0 var(--size-12); padding:var(--size-12); min-height:var(--size-70) }
:where(.sdcs-page) #top .sdcs-layer .sdcs-sw-icon { grid-row:1/3; width:var(--size-30); height:var(--size-30) }
:where(.sdcs-page) #top .sdcs-layer .sdcs-lbl { font-size:var(--size-14) }
:where(.sdcs-page) #top .sdcs-layer .sdcs-meta { grid-column:2; margin:var(--size-3) 0 0; font-size:var(--size-10) }
:where(.sdcs-page) #top .sdcs-hero-meta { font-size:var(--size-13); gap:var(--size-16) }
:where(.sdcs-page) .sdcs-custom-closing-visual { padding:var(--size-25) var(--size-22) }
:where(.sdcs-page) .sdcs-custom-closing-visual figcaption { font-size:var(--size-28) }
:where(.sdcs-page) .sdcs-custom-product-path { gap:var(--size-24) }
:where(.sdcs-page) .sdcs-custom-product-path li:not(:last-child):after { bottom:var(--length-px-negative-24) }
:where(.sdcs-page) .sdcs-custom-product-path strong { font-size:var(--size-15) }
:where(.sdcs-page) .sdcs-custom-product-path li div>span { font-size:var(--size-12) }
:where(.sdcs-page) #birlikte-baslayalim h2 { font-size:var(--size-34) }
}
:where(.sdcs-page) #top .sdcs-custom-text-link { border:0; border-bottom:var(--size-1) var(--border-style) currentColor; padding:0 0 var(--size-6); text-decoration:none; align-items:center }
:where(.sdcs-page) #birlikte-baslayalim .sdcs-custom-text-link { border:0; border-bottom:var(--size-1) var(--border-style) currentColor; padding:0 0 var(--size-6); text-decoration:none; align-items:center }
:where(.sdcs-page) #top .sdcs-custom-text-link>span { border:0; padding:0; text-decoration:none }
:where(.sdcs-page) #birlikte-baslayalim .sdcs-custom-text-link>span { border:0; padding:0; text-decoration:none }
:where(.sdcs-page) .feature-grid { border: none; overflow: visible; }