:where(.sdcw-page) .sdcw-hero-visual { min-width: 0; position: relative; height: var(--size-610); display: grid; place-items: center; }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-orbit { position: absolute; width: 92%; aspect-ratio: 1; border: var(--size-1) var(--border-style) var(--color-border); border-radius: var(--radius-circle); }
:where(.sdcw-page) .sdcw-orbit--inner { width: 70%; border-style: dashed; opacity: .7; }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-skeleton-nav { display: flex; gap: var(--size-12); }
:where(.sdcw-page) .sdcw-skeleton-nav i { width: var(--size-25); height: var(--size-3); background: var(--color-surface-accent); }
:where(.sdcw-page) .sdcw-preview-layout { display: grid; grid-template-columns: 1.1fr .9fr; min-height: var(--size-270); }
:where(.sdcw-page) .sdcw-preview-copy { padding: var(--size-34) var(--size-8) var(--size-26) var(--size-27); position: relative; z-index: var(--z-content); }
:where(.sdcw-page) .sdcw-preview-copy .sdcw-tiny { font: var(--size-9) var(--font-family-mono); color: var(--color-accent); letter-spacing: var(--tracking-art--07); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-preview-copy > p { font-size: var(--size-10); line-height: var(--line-height-art-1-55); max-width: var(--size-170); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-faux-button .icon { width: var(--size-12); height: var(--size-12); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-floating-card .icon { color: var(--color-accent); width: var(--size-23); height: var(--size-23); }
:where(.sdcw-page) .sdcw-floating-card strong { font-weight: var(--font-weight-semibold); display: block; }
:where(.sdcw-page) .sdcw-floating-card small { color: var(--color-text-muted); font-size: var(--size-10); }
:where(.sdcw-page) .sdcw-float-brand { left: 0; top: var(--size-78); transform: rotate(-4deg); }
:where(.sdcw-page) .sdcw-float-search { right: -3%; top: var(--size-118); transform: rotate(5deg); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-float-flow .icon { color: var(--color-highlight); }
:where(.sdcw-page) .sdcw-float-flow small { color: var(--color-on-primary-muted); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-phone-preview .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-phone-line { height: var(--size-3); background: var(--color-diagram-muted); width: 75%; margin: var(--size-5) 0; }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-mini-window .sdcw-line { height: var(--size-4); background: var(--color-surface-accent); margin: var(--size-7) 0; }
:where(.sdcw-page) .sdcw-mini-window .sdcw-line:last-child { width: 60%; }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-swatches { display: flex; gap: var(--size-4); flex-direction: column; }
:where(.sdcw-page) .sdcw-swatches i { width: var(--size-31); height: var(--size-18); background: var(--color-accent); border-radius: var(--size-2); }
:where(.sdcw-page) .sdcw-swatches i:nth-child(2) { background: var(--color-diagram-muted); }
:where(.sdcw-page) .sdcw-swatches i:nth-child(3) { background: var(--color-diagram-muted); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-search-field .icon { width: var(--size-14); height: var(--size-14); }
:where(.sdcw-page) .sdcw-search-result { display: flex; gap: var(--size-8); margin-top: var(--size-10); }
:where(.sdcw-page) .sdcw-search-result i { width: var(--size-21); height: var(--size-21); background: var(--color-surface-accent); border-radius: var(--size-4); }
:where(.sdcw-page) .sdcw-search-result b { display: block; width: var(--size-92); height: var(--size-4); margin: var(--size-4) 0; background: var(--color-diagram-muted); }
:where(.sdcw-page) .sdcw-search-result b + b { width: var(--size-60); background: var(--color-surface-accent); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-mini-route { display: flex; align-items: center; gap: var(--size-9); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-mini-route .icon { width: var(--size-20); height: var(--size-20); color: var(--color-accent); }
:where(.sdcw-page) .sdcw-mini-route > span:last-child { background: var(--color-primary); color: var(--color-surface); }
:where(.sdcw-page) .sdcw-mini-route > span:last-child .icon { color: var(--color-on-primary-muted); }
:where(.sdcw-page) .sdcw-mini-route > i { font-style: normal; color: var(--color-text-muted); }
:where(.sdcw-page) .sdcw-signal-bars { display: flex; align-items: center; justify-content: center; gap: var(--size-5); }
:where(.sdcw-page) .sdcw-signal-bars i { width: var(--size-7); height: var(--size-30); background: var(--color-diagram-muted); border-radius: var(--size-4); }
:where(.sdcw-page) .sdcw-signal-bars i:nth-child(2) { height: var(--size-46); background: var(--color-accent); }
:where(.sdcw-page) .sdcw-signal-bars i:nth-child(3) { height: var(--size-57); background: var(--color-primary); }
:where(.sdcw-page) .sdcw-signal-bars i:nth-child(4) { height: var(--size-38); background: var(--color-diagram-strong); }
:where(.sdcw-page) .sdcw-journey-screen .sdcw-faux-button { margin-top: var(--size-20); font-size: var(--size-11); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-approach-visual .sdcw-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(.sdcw-page) .sdcw-wire-window .sdcw-wire-nav { height: var(--size-4); background: var(--color-diagram-muted); width: 40%; margin-bottom: var(--size-12); }
:where(.sdcw-page) .sdcw-wire-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--size-5); }
:where(.sdcw-page) .sdcw-wire-grid i { height: var(--size-42); background: var(--color-surface-accent); border-radius: var(--size-2); }
:where(.sdcw-page) .sdcw-approach-visual--bespoke .sdcw-wire-grid { grid-template-columns: 1.2fr 1fr; }
:where(.sdcw-page) .sdcw-approach-visual--bespoke .sdcw-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(.sdcw-page) .sdcw-approach-visual--bespoke .sdcw-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(.sdcw-page) .sdcw-approach-visual--system { background: var(--color-primary); gap: var(--size-7); display: flex; align-items: center; padding: var(--size-18); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-system-mini-node .icon { width: var(--size-16); height: var(--size-16); }
:where(.sdcw-page) .sdcw-approach-visual--system .sdcw-wire-window { width: 50%; background: var(--color-surface); border-color: var(--color-border-strong); }
:where(.sdcw-page) .sdcw-approach-visual--system > i { font-style: normal; font-size: var(--size-12); color: var(--color-text-muted); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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-285); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-project-art--olive { background: var(--color-surface-accent); color: var(--color-primary); border-color: var(--color-border); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-project-art--wine { background: var(--color-surface-accent); color: var(--color-text-muted); border-color: var(--color-border); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-project-art--wine > strong { font-size: var(--size-31); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-brief-card .sdcw-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(.sdcw-page) .sdcw-brief-card strong { font: var(--font-weight-regular) var(--size-28) var(--font-family-display); letter-spacing: var(--tracking-art-n-03); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-brief-field .icon { width: var(--size-18); height: var(--size-18); color: var(--color-accent); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-hero-visual { height: var(--size-630); }
}
@media (max-width:1200px) {
:where(.sdcw-page) .sdcw-hero-visual { height: var(--size-550); }
:where(.sdcw-page) .sdcw-float-search { right: -1%; }
:where(.sdcw-page) .sdcw-floating-card { padding: var(--size-11) var(--size-12); }
:where(.sdcw-page) .sdcw-preview-copy strong { font-size: var(--size-29); }
:where(.sdcw-page) .sdcw-mini-route { gap: var(--size-5); }
:where(.sdcw-page) .sdcw-mini-route > span { padding: var(--size-12) var(--size-8); }
:where(.sdcw-page) .sdcw-project-art { padding: var(--size-25); }
}
@media (max-width:1000px) {
:where(.sdcw-page) .sdcw-hero-visual { height: var(--size-535); }
:where(.sdcw-page) .sdcw-float-brand { top: var(--size-59); }
:where(.sdcw-page) .sdcw-float-search { top: var(--size-119); right: -2%; }
:where(.sdcw-page) .sdcw-float-search small { display: none; }
:where(.sdcw-page) .sdcw-preview-copy { padding-left: var(--size-19); }
:where(.sdcw-page) .sdcw-preview-copy strong { font-size: var(--size-27); }
:where(.sdcw-page) .sdcw-preview-copy > p { font-size: var(--size-9); }
:where(.sdcw-page) .sdcw-preview-base { padding: var(--size-14) var(--size-15); font-size: var(--size-8); }
:where(.sdcw-page) .sdcw-preview-layout { min-height: var(--size-251); }
:where(.sdcw-page) .sdcw-phone-preview { left: 5%; bottom: var(--size-17); }
:where(.sdcw-page) .sdcw-float-flow { bottom: var(--size-45); font-size: var(--size-11); }
:where(.sdcw-page) .sdcw-mini-visual { height: var(--size-190); }
:where(.sdcw-page) .sdcw-project-art > h3 { font-size: var(--size-32); }
:where(.sdcw-page) .sdcw-project-art--wine > strong { font-size: var(--size-28); }
:where(.sdcw-page) .sdcw-brief-card { padding: var(--size-22); }
}
@media (max-width:800px) {
:where(.sdcw-page) .sdcw-hero-visual { height: var(--size-580); width: 100%; max-width: var(--size-570); margin: var(--size-26) auto 0; }
:where(.sdcw-page) .sdcw-preview-copy strong { font-size: var(--size-33); }
:where(.sdcw-page) .sdcw-preview-copy > p { font-size: var(--size-11); }
:where(.sdcw-page) .sdcw-preview-layout { min-height: var(--size-287); }
:where(.sdcw-page) .sdcw-preview-copy { padding: var(--size-31) var(--size-9) var(--size-25) var(--size-26); }
:where(.sdcw-page) .sdcw-preview-base { font-size: var(--size-9); }
:where(.sdcw-page) .sdcw-float-brand { top: var(--size-64); }
:where(.sdcw-page) .sdcw-float-search { top: var(--size-100); right: 0; }
:where(.sdcw-page) .sdcw-float-search small { display: block; }
:where(.sdcw-page) .sdcw-float-flow { bottom: var(--size-36); font-size: var(--size-12); right: 0; }
:where(.sdcw-page) .sdcw-phone-preview { left: 10%; bottom: var(--size-5); }
:where(.sdcw-page) .sdcw-journey-screen .sdcw-faux-button { font-size: var(--size-12); }
:where(.sdcw-page) .sdcw-compare-card .sdcw-approach-visual { grid-column: 1; grid-row: 2/5; height: var(--size-180); margin-top: var(--size-6); }
:where(.sdcw-page) .sdcw-project-art { height: var(--size-295); }
:where(.sdcw-page) .sdcw-brief-card { max-width: var(--size-390); width: 100%; margin: auto; padding: var(--size-29); transform: rotate(2deg); }
}
@media (max-width:520px) {
:where(.sdcw-page) .sdcw-hero-visual { height: var(--size-440); margin-top: var(--size-32); max-width: var(--size-385); }
:where(.sdcw-page) .sdcw-visual-caption { font-size: var(--size-8); left: 3%; top: calc(-1 * var(--size-6)); }
:where(.sdcw-page) .sdcw-hero-browser { width: 96%; transform: none; margin-top: var(--size-10); }
:where(.sdcw-page) .sdcw-preview-nav { padding: var(--size-13) var(--size-16); }
:where(.sdcw-page) .sdcw-preview-nav b { font-size: var(--size-16); }
:where(.sdcw-page) .sdcw-skeleton-nav { gap: var(--size-8); }
:where(.sdcw-page) .sdcw-skeleton-nav i { width: var(--size-20); }
:where(.sdcw-page) .sdcw-preview-layout { min-height: var(--size-235); }
:where(.sdcw-page) .sdcw-preview-copy { padding: var(--size-25) var(--size-5) var(--size-23) var(--size-16); }
:where(.sdcw-page) .sdcw-preview-copy strong { font-size: var(--size-27); margin: var(--size-13) 0; }
:where(.sdcw-page) .sdcw-preview-copy .sdcw-tiny { font-size: var(--size-7); }
:where(.sdcw-page) .sdcw-preview-copy > p { font-size: var(--size-9); }
:where(.sdcw-page) .sdcw-preview-copy .sdcw-faux-button { font-size: var(--size-8); padding: var(--size-8) var(--size-9); gap: var(--size-7); margin-top: var(--size-14); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-architecture::before { inset: var(--size-15) var(--size-15) 0; border-radius: var(--size-45) var(--size-45) 0 0; }
:where(.sdcw-page) .sdcw-architecture i { width: var(--size-35); height: var(--size-55); left: var(--size-5); bottom: var(--size-15); }
:where(.sdcw-page) .sdcw-preview-base { font-size: var(--size-7); padding: var(--size-12) var(--size-15); }
:where(.sdcw-page) .sdcw-floating-card { padding: var(--size-10) var(--size-11); gap: var(--size-9); font-size: var(--size-10); }
:where(.sdcw-page) .sdcw-floating-card .icon { width: var(--size-19); height: var(--size-19); }
:where(.sdcw-page) .sdcw-floating-card small { font-size: var(--size-9); }
:where(.sdcw-page) .sdcw-float-brand { left: 0; top: var(--size-25); }
:where(.sdcw-page) .sdcw-float-search { right: 0; top: var(--size-38); }
:where(.sdcw-page) .sdcw-float-search small { display: none; }
:where(.sdcw-page) .sdcw-float-flow { right: 0; bottom: var(--size-9); max-width: var(--size-228); }
:where(.sdcw-page) .sdcw-float-flow small { font-size: var(--size-9); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-phone-preview strong { font-size: var(--size-13); }
:where(.sdcw-page) .sdcw-phone-preview .sdcw-phone-image { height: var(--size-36); margin: var(--size-7) 0; }
:where(.sdcw-page) .sdcw-phone-line { height: var(--size-2); margin: var(--size-4) 0; }
:where(.sdcw-page) .sdcw-phone-cta { height: var(--size-9); width: var(--size-40); margin-top: var(--size-5); }
:where(.sdcw-page) .sdcw-mini-visual { height: var(--size-186); }
:where(.sdcw-page) .sdcw-signal-bars { justify-content: start; height: var(--size-46); }
:where(.sdcw-page) .sdcw-signal-bars i { transform: scaleY(.75); }
:where(.sdcw-page) .sdcw-journey-screen .sdcw-faux-button { font-size: var(--size-10); }
:where(.sdcw-page) .sdcw-compare-card .sdcw-approach-visual { width: 100%; height: var(--size-150); margin: 0; }
:where(.sdcw-page) .sdcw-project-art { height: var(--size-245); }
:where(.sdcw-page) .sdcw-project-art > h3 { font-size: var(--size-42); max-width: var(--size-280); }
:where(.sdcw-page) .sdcw-project-art--wine > strong { font-size: var(--size-33); }
:where(.sdcw-page) .sdcw-brief-card { box-shadow: var(--shadow-offset); transform: rotate(1deg); padding: var(--size-24); max-width: var(--size-295); }
:where(.sdcw-page) .sdcw-brief-card strong { font-size: var(--size-28); }
:where(.sdcw-page) .sdcw-brief-field { font-size: var(--size-13); }
}
@media (max-width:360px) {
:where(.sdcw-page) .sdcw-hero-visual { height: var(--size-410); }
:where(.sdcw-page) .sdcw-preview-copy strong { font-size: var(--size-24); }
:where(.sdcw-page) .sdcw-float-search { top: var(--size-33); }
:where(.sdcw-page) .sdcw-floating-card { font-size: var(--size-9); padding: var(--size-9); }
:where(.sdcw-page) .sdcw-float-flow { max-width: var(--size-206); }
:where(.sdcw-page) .sdcw-phone-preview { left: 4%; bottom: calc(-1 * var(--size-9)); }
}
@media print {
:where(.sdcw-page) .sdcw-hero-visual { height: var(--size-440); max-width: var(--size-550); margin: auto; }
}
/* Requested page-only illustration adjustments. */
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-mini-visual > .sdcw-mini-window { scale: 0.9; }
:where(.sdcw-page) .sdcw-mini-visual > .sdcw-type-card { scale: 0.9; }
:where(.sdcw-page) .sdcw-mini-visual > .sdcw-mini-search { scale: 0.9; }
:where(.sdcw-page) .sdcw-mini-visual > .sdcw-mini-route { scale: 0.9; }
:where(.sdcw-page) .sdcw-mini-seal { bottom: var(--size-22); }
:where(.sdcw-page) .sdcw-mini-route { gap: var(--space-2); }
:where(.sdcw-page) .sdcw-mini-route > span { padding: var(--space-3) var(--space-2); }
:where(.sdcw-page) .sdcw-signal-bars { width: var(--space-18); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-project-art > h3 { color: inherit; }
:where(.sdcw-page) .sdcw-project-art--olive { background: var(--color-surface-accent); }
:where(.sdcw-page) .sdcw-project-art--wine { background: var(--color-primary); color: var(--color-on-primary); }
:where(.sdcw-page) .sdcw-project-art--wine::after { border-color: var(--color-border-contrast); }
:where(.sdcw-page) .sdcw-project-art--wine > span { color: var(--color-on-primary-muted); }
:where(.sdcw-page) .sdcw-project-art--wine > small { color: var(--color-on-primary-muted); }
:where(.sdcw-page) .sdcw-brief-card { margin-inline: 0; }
:where(.sdcw-page) .sdcw-attention { position: absolute; width: var(--size-126); height: var(--size-112); background: var(--gradient-attention); pointer-events: none; z-index: var(--z-base); }
:where(.sdcw-page) .sdcw-attention--a { left: 24%; top: 26%; }
:where(.sdcw-page) .sdcw-attention--b { left: 6%; bottom: 8%; }
:where(.sdcw-page) .sdcw-scenario-screen--campaign .sdcw-attention--a { left: 45%; top: 15%; }
:where(.sdcw-page) .sdcw-scenario-screen--browse .sdcw-attention--a { left: 60%; top: 0; }
:where(.sdcw-page) .sdcw-perception { position: relative; padding: var(--space-9); border: var(--border-default); border-radius: var(--radius-xl); background: var(--gradient-accent); overflow: hidden; }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-perception__label .icon { width: var(--icon-size-sm); height: var(--icon-size-sm); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-perception__intro p { font-size: var(--font-size-label); line-height: var(--line-height-relaxed); }
:where(.sdcw-page) .sdcw-perception__foundations { display: grid; grid-template-columns: var(--grid-columns-3); gap: var(--space-3); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-perception__foundations span { color: var(--color-primary); font-size: var(--font-size-label); font-weight: var(--font-weight-medium); }
:where(.sdcw-page) .sdcw-perception__connector { width: 100%; height: var(--space-14); fill: var(--color-accent); stroke: var(--color-border-strong); stroke-width: var(--border-width-thin); }
:where(.sdcw-page) .sdcw-perception__connector path { fill: none; }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-perception__mirror-label .icon { width: var(--icon-size-sm); height: var(--icon-size-sm); color: var(--color-highlight); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-perception__brand span { color: var(--color-highlight); }
:where(.sdcw-page) .sdcw-perception__rule { height: var(--border-width-thin); width: 64%; background: var(--color-border-contrast); margin-bottom: var(--space-5); }
:where(.sdcw-page) .sdcw-perception__layers { position: relative; z-index: var(--z-content); display: flex; flex-wrap: wrap; gap: var(--space-2); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-perception figcaption { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-7); }
:where(.sdcw-page) .sdcw-perception figcaption > .icon { color: var(--color-accent); }
:where(.sdcw-page) .sdcw-perception figcaption strong { display: block; font-size: var(--font-size-small); color: var(--color-primary); font-weight: var(--font-weight-semibold); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-perception { padding: var(--space-6); }
:where(.sdcw-page) .sdcw-perception__intro { grid-template-columns: var(--grid-columns-1); }
:where(.sdcw-page) .sdcw-perception__intro p br { display: none; }
}
@media (max-width: 800px) {
:where(.sdcw-page) .sdcw-perception { max-width: var(--size-600); }
:where(.sdcw-page) .sdcw-perception__intro { grid-template-columns: var(--grid-columns-2); }
:where(.sdcw-page) .sdcw-mini-visual { height: var(--card-media-height); }
}
@media (max-width: 520px) {
:where(.sdcw-page) .sdcw-perception { padding: var(--space-5); }
:where(.sdcw-page) .sdcw-perception__intro { grid-template-columns: var(--grid-columns-1); gap: var(--space-3); }
:where(.sdcw-page) .sdcw-perception__intro strong { font-size: var(--size-32); }
:where(.sdcw-page) .sdcw-perception__foundations { gap: var(--space-2); }
:where(.sdcw-page) .sdcw-perception__mirror { padding: var(--space-5); }
:where(.sdcw-page) .sdcw-perception__brand { font-size: var(--size-47); }
:where(.sdcw-page) .sdcw-perception__label { font-size: var(--font-size-micro); }
:where(.sdcw-page) .sdcw-perception figcaption { align-items: flex-start; }
:where(.sdcw-page) .sdcw-project-art > h3 { font-size: var(--size-38); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .site-footer .footer-brand > a:last-child { color: var(--color-on-primary-muted); }
:where(.sdcw-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(.sdcw-page) #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(.sdcw-page) #neden-onemli .editorial-list .icon { width: var(--length-rem-2); height: var(--length-rem-2); stroke-width: 1.65; }
:where(.sdcw-page) #neden-onemli .editorial-list li:nth-child(3n + 2) .icon-tile { color: var(--color-secondary-blue); }
:where(.sdcw-page) #neden-onemli .editorial-list > li { gap: var(--space-5); }
/* SCOPE: custom two-colour dimensional icons, distinct from editorial icons. */
:where(.sdcw-page) #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(.sdcw-page) #kapsam .icon-tile--premium .sdcw-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(.sdcw-page) .sdcw-scope-icon-3d .sdcw-scope-green { fill: var(--color-accent); stroke: none; }
:where(.sdcw-page) .sdcw-scope-icon-3d .sdcw-scope-blue { fill: var(--color-secondary-blue); stroke: none; }
:where(.sdcw-page) .sdcw-scope-icon-3d .sdcw-scope-white { fill: var(--color-surface); stroke: none; }
:where(.sdcw-page) .sdcw-scope-icon-3d .sdcw-scope-line { fill: none; stroke: var(--color-primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:where(.sdcw-page) #kapsam .capability-strip { background: linear-gradient(135deg, var(--color-surface-secondary), var(--color-surface-accent)); }
:where(.sdcw-page) #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(.sdcw-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(.sdcw-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(.sdcw-page) .sdcw-scenario-player-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-scenario-player-meta__copy strong { color: var(--color-heading); }
:where(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-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(.sdcw-page) .sdcw-scenario-play .icon { width: var(--length-rem-1); height: var(--length-rem-1); }
:where(.sdcw-page) .sdcw-scenario-play__resume-icon { display: none; }
:where(.sdcw-page) .sdcw-scenario-play[aria-pressed="true"] .sdcw-scenario-play__pause-icon { display: none; }
:where(.sdcw-page) .sdcw-scenario-play[aria-pressed="true"] .sdcw-scenario-play__resume-icon { display: block; }
:where(.sdcw-page) .sdcw-scenario-play__resume { display: none; }
:where(.sdcw-page) .sdcw-scenario-play[aria-pressed="true"] .sdcw-scenario-play__pause { display: none; }
:where(.sdcw-page) .sdcw-scenario-play[aria-pressed="true"] .sdcw-scenario-play__resume { display: inline; }
:where(.sdcw-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(.sdcw-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(.sdcw-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(.sdcw-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(.sdcw-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(.sdcw-page) .scenario-tabs .tabs__button[aria-selected="true"]::before { background: var(--color-secondary-blue); color: var(--color-surface); }
:where(.sdcw-page) .scenario-showcase:not(.is-paused) .scenario-tabs .tabs__button[aria-selected="true"]::after { animation: sdcw-scenario-progress var(--scenario-duration) linear forwards; }
@keyframes sdcw-scenario-progress {
to { transform: scaleX(1); }
}
:where(.sdcw-page) .scenario-grid { display: block; }
:where(.sdcw-page) .has-js .scenario-panel:not([data-active="true"]) { display: none !important; }
:where(.sdcw-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; }
:where(.sdcw-page) .scenario-panel[data-active="true"] { display: grid; }
:where(.sdcw-page) .scenario-panel__heading { grid-area: heading; margin: 0; }
:where(.sdcw-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(.sdcw-page) .scenario-panel__heading .icon { width: var(--length-rem-1-8); height: var(--length-rem-1-8); }
:where(.sdcw-page) .scenario-panel__heading p { color: var(--color-secondary-blue); }
:where(.sdcw-page) .scenario-panel .browser-frame { grid-area: screen; box-shadow: var(--shadow-lg); }
:where(.sdcw-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(.sdcw-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(.sdcw-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(.sdcw-page) .scenario-path dd { text-align: left; font-size: var(--font-size-body-sm); }
:where(.sdcw-page) .scenario-panel[data-active="true"] { animation: sdcw-scenario-enter 360ms var(--ease-standard) both; }
@keyframes sdcw-scenario-enter {
from { opacity: 0; transform: translateY(var(--length-rem-0-5)); }
to { opacity: 1; transform: none; }
}
@media (max-width: 800px) {
:where(.sdcw-page) .scenario-showcase { padding: var(--space-5); }
:where(.sdcw-page) .scenario-tabs { grid-template-columns: var(--grid-columns-1); gap: var(--space-2); }
:where(.sdcw-page) .scenario-tabs .tabs__button { min-height: var(--length-rem-3-25); }
:where(.sdcw-page) .scenario-panel { grid-template-columns: var(--grid-columns-1); grid-template-areas: "heading" "screen" "path"; }
:where(.sdcw-page) .scenario-panel[data-active="true"] { grid-template-columns: var(--grid-columns-1); grid-template-areas: "heading" "screen" "path"; }
:where(.sdcw-page) .scenario-panel .scenario-path { padding: var(--space-4) 0 0; border-left: 0; border-top: var(--border-default); }
}
@media (max-width: 520px) {
:where(.sdcw-page) .sdcw-scenario-player-meta { align-items: flex-start; }
:where(.sdcw-page) .sdcw-scenario-player-meta__copy span:last-child { display: block; width: 100%; }
:where(.sdcw-page) .scenario-tabs .tabs__button .icon { display: block; }
}
@media (prefers-reduced-motion: reduce) {
:where(.sdcw-page) .scenario-tabs .tabs__button::after { animation: none !important; }
:where(.sdcw-page) .scenario-panel[data-active="true"] { animation: none; }
}
:where(.sdcw-page) .feature-grid { border: none; overflow: visible; }