/* Page layout uses the approved reference tokens and shared components. */
:where(.sduu-page) { color:var(--color-text); font-size:var(--font-size-body); line-height:var(--line-height-body) }
:where(.sduu-page) .container>* { min-width:0 }
:where(.sduu-page) h1 { font-family:var(--font-family-display); font-weight:var(--font-weight-display); letter-spacing:var(--letter-spacing-display); line-height:var(--line-height-tight) }
:where(.sduu-page) h2 { font-family:var(--font-family-display); font-weight:var(--font-weight-display); letter-spacing:var(--letter-spacing-display); line-height:var(--line-height-tight) }
:where(.sduu-page) h1 { font-size:var(--font-size-hero) }
:where(.sduu-page) h2 { font-size:var(--font-size-section) }
:where(.sduu-page) h3 { font-family:var(--font-family-body); font-weight:var(--font-weight-semibold); letter-spacing:var(--letter-spacing-heading); line-height:var(--line-height-heading) }
:where(.sduu-page) .eyebrow { font-family:var(--font-family-mono); font-size:var(--eyebrow-size); line-height:var(--line-height-body); letter-spacing:var(--letter-spacing-eyebrow); font-weight:var(--font-weight-regular) }
:where(.sduu-page) .body { font-size:var(--font-size-body-lg); line-height:var(--line-height-relaxed) }
:where(.sduu-page) .sduu-hero { padding-block:var(--space-18) var(--space-16) }
:where(.sduu-page) .sduu-hero__grid { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); gap:var(--gap-layout); align-items:center }
:where(.sduu-page) .sduu-hero__copy h1 { max-width:17ch }
:where(.sduu-page) .sduu-hero__copy .lead { font-size:var(--font-size-body-lg); line-height:var(--line-height-relaxed); margin-top:var(--space-7); max-width:var(--measure-copy) }
:where(.sduu-page) .sduu-hero__support { font-size:var(--font-size-body); line-height:var(--line-height-relaxed); margin-top:var(--space-5); max-width:var(--measure-copy) }
:where(.sduu-page) .sduu-actions { margin-top:var(--space-8) }
:where(.sduu-page) .sduu-meta { display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-6); padding-top:var(--space-6); margin-top:var(--space-9); border-top:var(--border-default); font-size:var(--font-size-label); color:var(--color-text-muted) }
:where(.sduu-page) .sduu-meta li { display:flex; align-items:center; gap:var(--space-2) }
:where(.sduu-page) .sduu-meta li:before { content:""; width:var(--size-5); height:var(--size-5); background:var(--color-accent); border-radius:50%; flex:none }
:where(.sduu-page) .sduu-hero__visual { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); align-content:center; min-width:0 }
:where(.sduu-page) .sduu-canvas { grid-column:1/-1; border:var(--border-default); border-radius:var(--radius-xl); background:var(--color-surface); overflow:hidden; box-shadow:var(--shadow-md) }
:where(.sduu-page) .sduu-canvas__topbar { display:flex; align-items:center; gap:var(--size-6); padding:var(--space-3) var(--space-4); background:var(--color-surface-secondary); border-bottom:var(--border-default) }
:where(.sduu-page) .sduu-canvas__topbar>span { height:var(--size-6); width:var(--size-6); border-radius:50%; background:var(--color-border-strong) }
:where(.sduu-page) .sduu-canvas__topbar>span:first-child { background:var(--color-accent) }
:where(.sduu-page) .sduu-canvas__topbar small { margin-left:auto; font:var(--font-size-label-sm) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sduu-page) .sduu-flow { padding:var(--space-7) }
:where(.sduu-page) .sduu-kicker { display:block; font:var(--font-size-label-sm)/var(--line-height-label) var(--font-family-mono); letter-spacing:var(--letter-spacing-label); color:var(--color-text-muted) }
:where(.sduu-page) .sduu-flow__head strong { display:block; font-family:var(--font-family-display); font-weight:var(--font-weight-display); font-size:var(--font-size-card-lg); line-height:var(--line-height-heading); margin-top:var(--space-2) }
:where(.sduu-page) .sduu-flow__result strong { display:block; font-family:var(--font-family-display); font-weight:var(--font-weight-display); font-size:var(--font-size-card-lg); line-height:var(--line-height-heading); margin-top:var(--space-2) }
:where(.sduu-page) .sduu-flow__line { height:var(--space-6); margin-left:var(--space-4); border-left:var(--border-strong); margin-top:var(--space-3) }
:where(.sduu-page) .sduu-flow__steps { display:grid; gap:var(--space-2) }
:where(.sduu-page) .sduu-flow__steps>div { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-3) var(--space-4); background:var(--color-surface-secondary); border-radius:var(--radius-sm) }
:where(.sduu-page) .sduu-flow__steps span { font:var(--font-size-label-sm) var(--font-family-mono); color:var(--color-accent); flex:none }
:where(.sduu-page) .sduu-flow__steps b { font-size:var(--font-size-small); font-weight:var(--font-weight-semibold); line-height:var(--line-height-label) }
:where(.sduu-page) .sduu-flow__steps .is-active { background:var(--color-surface-accent) }
:where(.sduu-page) .sduu-flow__result { margin-top:var(--space-5); padding:var(--space-5); border-radius:var(--radius-md); background:var(--color-primary); color:var(--color-on-primary) }
:where(.sduu-page) .sduu-flow__result .sduu-kicker { color:var(--color-illustration-c9dfd1) }
:where(.sduu-page) .sduu-float-card { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4); border:var(--border-default); border-radius:var(--radius-md); background:var(--color-surface); min-width:0 }
:where(.sduu-page) .sduu-float-card>span:last-child { min-width:0; overflow-wrap:anywhere }
:where(.sduu-page) .sduu-float-card__icon { display:grid; place-items:center; flex:0 0 var(--size-34); width:var(--size-34); height:var(--size-34); border-radius:var(--radius-sm); background:var(--color-surface-accent); color:var(--color-accent) }
:where(.sduu-page) .sduu-float-card__icon svg { width:var(--size-18); height:var(--size-18); fill:none; stroke:currentColor; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round }
:where(.sduu-page) .sduu-float-card small { display:block; font-family:var(--font-family-mono); font-size:var(--font-size-label-sm); line-height:var(--line-height-label); letter-spacing:var(--letter-spacing-label); color:var(--color-text-muted) }
:where(.sduu-page) .sduu-float-card strong { display:block; font-size:var(--font-size-small); line-height:var(--line-height-heading); font-weight:var(--font-weight-semibold); margin-top:var(--space-1) }
:where(.sduu-page) .sduu-visual-note { grid-column:1/-1; display:block; font-size:var(--font-size-label); line-height:var(--line-height-body); color:var(--color-text-muted) }
:where(.sduu-page) .section-nav .container { overflow-x:auto; scrollbar-width:none }
:where(.sduu-page) .section-nav .container::-webkit-scrollbar { display:none }
:where(.sduu-page) .sduu-section { padding-block:var(--section-space); scroll-margin-top:var(--anchor-offset) }
:where(.sduu-page) .sduu-closing { padding-block:var(--section-space); scroll-margin-top:var(--anchor-offset) }
:where(.sduu-page) .sduu-section-heading { max-width:var(--measure-heading) }
:where(.sduu-page) .sduu-section-heading>.body { margin-top:var(--space-6) }
:where(.sduu-page) .sduu-heading-row { max-width:var(--content-width-wide); margin-bottom:var(--section-heading-space) }
:where(.sduu-page) .sduu-heading-row>.body { margin-top:var(--space-6); max-width:var(--content-width-narrow) }
:where(.sduu-page) .sduu-split { display:grid; grid-template-columns:var(--grid-split-aside); gap:var(--gap-layout); align-items:start }
:where(.sduu-page) .sduu-prose { display:grid; gap:var(--space-6); font-size:var(--font-size-body); line-height:var(--line-height-relaxed) }
:where(.sduu-page) .sduu-prose strong { color:var(--color-heading); font-weight:var(--font-weight-semibold) }
:where(.sduu-page) .sduu-checklist { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4) }
:where(.sduu-page) .sduu-checklist li { position:relative; padding-left:var(--space-6); font-size:var(--font-size-body-sm); color:var(--color-text) }
:where(.sduu-page) .sduu-checklist li:before { content:"✓"; position:absolute; top:0; left:0; color:var(--color-accent) }
:where(.sduu-page) .sduu-note { margin-top:var(--space-7); max-width:var(--content-width-wide); font-size:var(--font-size-body); line-height:var(--line-height-relaxed); color:var(--color-text-muted); border:0; padding:0 }
:where(.sduu-page) .sduu-prose .sduu-note { margin:0 }
:where(.sduu-page) .sduu-perspective-grid { display:grid; gap:var(--gap-grid); border:0; background:transparent }
:where(.sduu-page) .sduu-scope-grid { display:grid; gap:var(--gap-grid); border:0; background:transparent }
:where(.sduu-page) .sduu-principle-grid { display:grid; gap:var(--gap-grid); border:0; background:transparent }
:where(.sduu-page) .sduu-outcome-grid { display:grid; gap:var(--gap-grid); border:0; background:transparent }
:where(.sduu-page) .sduu-perspective-grid { grid-template-columns:var(--grid-columns-4) }
:where(.sduu-page) .sduu-scope-grid { grid-template-columns:var(--grid-columns-3) }
:where(.sduu-page) .sduu-outcome-grid { grid-template-columns:var(--grid-columns-3) }
:where(.sduu-page) .sduu-principle-grid { grid-template-columns:var(--grid-columns-2) }
:where(.sduu-page) .sduu-perspective-card { min-width:0 }
:where(.sduu-page) .sduu-scope-grid article { padding:var(--card-padding); border:var(--border-default); background:var(--color-surface); border-radius:var(--card-radius); box-shadow:var(--shadow-sm); min-width:0 }
:where(.sduu-page) .sduu-principle-grid article { padding:var(--card-padding); border:var(--border-default); background:var(--color-surface); border-radius:var(--card-radius); box-shadow:var(--shadow-sm); min-width:0 }
:where(.sduu-page) .sduu-ux-icon { margin-bottom:var(--space-5) }
:where(.sduu-page) .sduu-perspective-card p { margin-top:var(--space-3) }
:where(.sduu-page) .sduu-scope-grid article p { margin-top:var(--space-3) }
:where(.sduu-page) .sduu-principle-grid article p { margin-top:var(--space-3) }
/* Results have no surrounding frame, card borders or dividing rules. */
:where(.sduu-page) .sduu-outcome-grid article { padding:var(--card-padding); min-width:0; border:0; border-radius:var(--card-radius); background:var(--color-surface-secondary); box-shadow:none }
:where(.sduu-page) .sduu-outcome-grid article p { margin-top:var(--space-3) }
:where(.sduu-page) .sduu-outcome-grid article:last-child { grid-column:1/-1; display:grid; grid-template-columns:var(--icon-tile-size) minmax(0,.85fr) minmax(0,1.15fr); gap:var(--space-6); align-items:center }
:where(.sduu-page) .sduu-outcome-grid article:last-child .sduu-ux-icon { margin:0 }
:where(.sduu-page) .sduu-outcome-grid article:last-child p { margin:0 }
:where(.sduu-page) .sduu-friction-list { display:grid; gap:var(--gap-grid) }
:where(.sduu-page) .sduu-friction-list>article { display:grid; grid-template-columns:var(--space-7) minmax(0,1fr); gap:var(--space-5); padding:var(--card-padding); background:var(--color-surface); border:var(--border-default); border-radius:var(--card-radius) }
:where(.sduu-page) .sduu-friction-list>article>span { font:var(--font-size-label) var(--font-family-mono); color:var(--color-accent); padding-top:var(--space-1) }
:where(.sduu-page) .sduu-friction-list h3 { font-size:var(--card-title-size) }
:where(.sduu-page) .sduu-friction-list p { margin-top:var(--space-3); font-size:var(--card-description-size); line-height:var(--line-height-relaxed) }
:where(.sduu-page) .sduu-friction-list .sduu-section-note { font-size:var(--font-size-body); line-height:var(--line-height-relaxed) }
/* Comparison uses the original copy and a deliberate dark highlighted column. */
:where(.sduu-page) .sduu-table-wrap { border:var(--border-default); border-radius:var(--radius-lg); overflow-x:auto; background:var(--color-surface) }
:where(.sduu-page) .sduu-visually-hidden { position:absolute; width:var(--size-1); height:var(--size-1); overflow:hidden; clip-path:inset(50%); white-space:nowrap }
:where(.sduu-page) .sduu-table { width:100%; min-width:var(--size-900); table-layout:fixed; border-collapse:collapse }
:where(.sduu-page) .sduu-table th { text-align:left; vertical-align:top; padding:var(--space-5); border-right:var(--border-default); border-bottom:var(--border-default); font-size:var(--font-size-small); line-height:var(--line-height-relaxed) }
:where(.sduu-page) .sduu-table td { text-align:left; vertical-align:top; padding:var(--space-5); border-right:var(--border-default); border-bottom:var(--border-default); font-size:var(--font-size-small); line-height:var(--line-height-relaxed) }
:where(.sduu-page) .sduu-table thead th { background:var(--color-surface-secondary); font-weight:var(--font-weight-semibold); color:var(--color-heading) }
:where(.sduu-page) .sduu-table thead th:first-child { width:20% }
:where(.sduu-page) .sduu-table tbody th { color:var(--color-heading); font-weight:var(--font-weight-semibold) }
:where(.sduu-page) .sduu-table td { color:var(--color-text-muted) }
:where(.sduu-page) .sduu-table tr>:last-child { background:var(--color-primary); color:var(--color-on-primary); border-right:0; border-bottom-color:var(--color-illustration-53796a) }
:where(.sduu-page) .sduu-table tr>:last-child span { color:inherit }
:where(.sduu-page) .sduu-table tr>:last-child b { color:inherit }
:where(.sduu-page) .sduu-table tbody tr:last-child>* { border-bottom:0 }
/* Selected work: foregrounds belong to the dark copy panel, not the light page. */
:where(.sduu-page) .sduu-project { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:var(--space-8); align-items:center; padding:var(--space-10); background:var(--color-primary); border-radius:var(--radius-xl); overflow:hidden }
:where(.sduu-page) .sduu-project__copy { min-width:0 }
:where(.sduu-page) .sduu-project__tags { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-7) }
:where(.sduu-page) .sduu-project__tags span { padding:var(--space-1-5) var(--space-2-5); font-size:var(--font-size-label-sm); font-family:var(--font-family-mono); color:var(--color-illustration-d9eade); border:var(--size-1) var(--border-style) var(--color-illustration-7a9d8b); border-radius:var(--radius-xs) }
:where(.sduu-page) .sduu-project__copy h3 { color:var(--color-white); font-family:var(--font-family-display); font-size:var(--font-size-statement); font-weight:var(--font-weight-display); line-height:var(--line-height-display); letter-spacing:var(--letter-spacing-heading) }
:where(.sduu-page) .sduu-project__copy p { color:var(--color-illustration-e0eee5); margin-top:var(--space-5); font-size:var(--font-size-body); line-height:var(--line-height-relaxed) }
:where(.sduu-page) .sduu-project__link { display:inline-flex; align-items:center; gap:var(--space-4); color:var(--color-highlight); font-size:var(--font-size-small); font-weight:var(--font-weight-semibold); margin-top:var(--space-7) }
:where(.sduu-page) .sduu-project__link b { font-weight:inherit }
:where(.sduu-page) .sduu-work>.container>.sduu-visual-note { margin-top:var(--space-4) }
:where(.sduu-page) .sduu-dashboard { background:var(--color-background); border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--radius-md); overflow:hidden; min-width:0; color:var(--color-heading) }
:where(.sduu-page) .sduu-dashboard__chrome { display:flex; align-items:center; gap:var(--size-6); padding:var(--space-3); background:var(--color-surface); border-bottom:var(--border-default) }
:where(.sduu-page) .sduu-dashboard__chrome i { width:var(--size-6); height:var(--size-6); background:var(--color-border-strong); border-radius:50% }
:where(.sduu-page) .sduu-dashboard__chrome i:first-child { background:var(--color-accent) }
:where(.sduu-page) .sduu-dashboard__chrome span { margin-left:auto; font:var(--font-size-label-sm) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sduu-page) .sduu-dashboard__layout { display:grid; grid-template-columns:var(--size-44) minmax(0,1fr) }
:where(.sduu-page) .sduu-dashboard__layout aside { padding:var(--space-4) var(--space-2); display:flex; flex-direction:column; align-items:center; gap:var(--space-5); background:var(--color-surface-secondary); border-right:var(--border-default) }
:where(.sduu-page) .sduu-dashboard__layout aside b { display:grid; place-items:center; width:var(--size-28); height:var(--size-28); background:var(--color-primary); color:var(--color-white); border-radius:var(--radius-xs); font-size:var(--font-size-micro) }
:where(.sduu-page) .sduu-dashboard__layout aside i { width:var(--size-16); height:var(--size-16); border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-3) }
:where(.sduu-page) .sduu-dashboard__content { padding:var(--space-5); min-width:0 }
:where(.sduu-page) .sduu-dashboard__head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap }
:where(.sduu-page) .sduu-dashboard__head small { display:block }
:where(.sduu-page) .sduu-dashboard__head strong { display:block }
:where(.sduu-page) .sduu-dashboard__head small { font-size:var(--font-size-label-sm); color:var(--color-text-muted) }
:where(.sduu-page) .sduu-dashboard__head strong { font-size:var(--font-size-body-sm); line-height:var(--line-height-heading); color:var(--color-heading) }
:where(.sduu-page) .sduu-dashboard-button { display:inline-flex; padding:var(--space-2) var(--space-3); font-size:var(--font-size-label-sm); background:var(--color-primary); color:var(--color-white); border-radius:var(--radius-xs) }
:where(.sduu-page) .sduu-dashboard__stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2); margin-top:var(--space-5) }
:where(.sduu-page) .sduu-dashboard__stats>div { padding:var(--space-3); background:var(--color-surface); border:var(--border-default); border-radius:var(--radius-sm); min-width:0 }
:where(.sduu-page) .sduu-dashboard__stats small { display:block }
:where(.sduu-page) .sduu-dashboard__stats strong { display:block }
:where(.sduu-page) .sduu-dashboard__stats em { display:block }
:where(.sduu-page) .sduu-dashboard__stats small { font-size:var(--font-size-label-sm); line-height:var(--line-height-label); color:var(--color-text-muted) }
:where(.sduu-page) .sduu-dashboard__stats strong { font-size:var(--font-size-card-lg); font-weight:var(--font-weight-semibold); color:var(--color-heading); margin-block:var(--space-2) }
:where(.sduu-page) .sduu-dashboard__stats em { font-size:var(--font-size-label-sm); font-style:normal; color:var(--color-accent) }
:where(.sduu-page) .sduu-dashboard__panels { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--space-2); margin-top:var(--space-2) }
:where(.sduu-page) .sduu-dashboard__chart { padding:var(--space-3); background:var(--color-surface); border:var(--border-default); border-radius:var(--radius-sm); min-width:0 }
:where(.sduu-page) .sduu-dashboard__orders { padding:var(--space-3); background:var(--color-surface); border:var(--border-default); border-radius:var(--radius-sm); min-width:0 }
:where(.sduu-page) .sduu-dashboard__chart>span { font-size:var(--font-size-label-sm); font-weight:var(--font-weight-semibold); color:var(--color-heading) }
:where(.sduu-page) .sduu-dashboard__orders>span { font-size:var(--font-size-label-sm); font-weight:var(--font-weight-semibold); color:var(--color-heading) }
:where(.sduu-page) .sduu-dashboard__chart svg { width:100%; height:var(--size-100); margin-top:var(--space-5) }
:where(.sduu-page) .sduu-dashboard__chart svg path { fill:none; stroke:var(--color-accent); stroke-width:3; vector-effect:non-scaling-stroke }
:where(.sduu-page) .sduu-dashboard__chart-bars { display:flex; gap:var(--size-5); align-items:end; height:var(--space-9) }
:where(.sduu-page) .sduu-dashboard__chart-bars i { flex:1; background:var(--color-illustration-a8c9b4); border-radius:var(--size-2) var(--size-2) 0 0; height:40% }
:where(.sduu-page) .sduu-dashboard__chart-bars i:nth-child(2n) { height:65% }
:where(.sduu-page) .sduu-dashboard__chart-bars i:nth-child(3n) { height:85% }
:where(.sduu-page) .sduu-dashboard__orders>div { display:grid; grid-template-columns:var(--size-14) minmax(0,1fr); gap:var(--size-2) var(--size-8); padding-top:var(--space-4) }
:where(.sduu-page) .sduu-dashboard__orders i { grid-row:span 2; width:var(--size-14); height:var(--size-14); border-radius:var(--size-3); background:var(--color-surface-accent); margin-top:var(--size-3) }
:where(.sduu-page) .sduu-dashboard__orders b { font-size:var(--font-size-label-sm); color:var(--color-heading) }
:where(.sduu-page) .sduu-dashboard__orders small { font-size:var(--font-size-label-sm); color:var(--color-text-muted); overflow-wrap:anywhere }
/* Process cards: a single icon, no numbered badge, inner rule or connectors. */
:where(.sduu-page) .sduu-timeline { display:grid; grid-template-columns:var(--grid-columns-2); gap:var(--gap-grid); margin-top:var(--space-8) }
:where(.sduu-page) .sduu-timeline>li { padding:var(--card-padding); background:var(--color-surface); border:var(--border-default); border-radius:var(--card-radius); min-width:0 }
:where(.sduu-page) .sduu-timeline>li>div { padding:0; border:0 }
:where(.sduu-page) .sduu-timeline h3 { font-size:var(--card-title-size) }
:where(.sduu-page) .sduu-timeline p { margin-top:var(--space-3); font-size:var(--card-description-size); line-height:var(--line-height-relaxed) }
:where(.sduu-page) .sduu-consult__box { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:var(--gap-layout); align-items:center }
:where(.sduu-page) .sduu-consult__box>div>p:not(.eyebrow) { margin-top:var(--space-6); line-height:var(--line-height-relaxed) }
:where(.sduu-page) .sduu-consult__response { display:flex; align-items:center; gap:var(--space-3); font-size:var(--font-size-small) }
:where(.sduu-page) .sduu-consult__response span { width:var(--size-6); height:var(--size-6); background:var(--color-accent); border-radius:50%; flex:none }
:where(.sduu-page) .sduu-consult__action { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-5) }
:where(.sduu-page) .sduu-consult__action>small { color:var(--color-text-muted); font-size:var(--font-size-small); line-height:var(--line-height-relaxed); max-width:38ch }
:where(.sduu-page) .sduu-faq-list { display:grid; gap:var(--space-4) }
:where(.sduu-page) .sduu-faq-list details { background:var(--color-surface); border:var(--border-default); border-radius:var(--radius-md); padding:var(--space-6) }
:where(.sduu-page) .sduu-faq-list summary { display:flex; justify-content:space-between; align-items:center; gap:var(--space-5); font-size:var(--font-size-body-lg); font-weight:var(--font-weight-semibold); line-height:var(--line-height-heading); color:var(--color-heading) }
:where(.sduu-page) .sduu-faq-list summary i { width:var(--size-18); height:var(--size-18); position:relative; flex:none; color:var(--color-accent) }
:where(.sduu-page) .sduu-faq-list summary i:before { content:""; position:absolute; top:var(--size-8); left:var(--size-2); width:var(--size-14); height:var(--size-1); background:currentColor }
:where(.sduu-page) .sduu-faq-list summary i:after { content:""; position:absolute; top:var(--size-8); left:var(--size-2); width:var(--size-14); height:var(--size-1); background:currentColor }
:where(.sduu-page) .sduu-faq-list summary i:after { transform:rotate(90deg) }
:where(.sduu-page) .sduu-faq-list details[open] summary i:after { transform:rotate(0) }
:where(.sduu-page) .sduu-faq-list details p { margin-top:var(--space-5); font-size:var(--font-size-body-sm); line-height:var(--line-height-relaxed) }
:where(.sduu-page) .sduu-closing__inner { display:block; max-width:var(--content-width-wide) }
:where(.sduu-page) .sduu-closing h2 { color:var(--color-white); font-size:var(--font-size-closing) }
:where(.sduu-page) .sduu-closing .eyebrow { color:var(--color-highlight) }
:where(.sduu-page) .sduu-closing__copy>p:not(.eyebrow) { color:var(--color-illustration-e0eee5); font-size:var(--font-size-body); line-height:var(--line-height-relaxed); max-width:var(--content-width-narrow); margin-top:var(--space-7) }
/* Informative diagrams, restrained to the reference palette. */
:where(.sduu-page) .sduu-relationship { margin-top:var(--space-9); padding:var(--space-6); background:var(--color-surface-secondary); border:var(--border-default); border-radius:var(--radius-lg) }
:where(.sduu-page) .sduu-journey-chart { margin-top:var(--space-9); padding:var(--space-6); background:var(--color-surface-secondary); border:var(--border-default); border-radius:var(--radius-lg) }
:where(.sduu-page) .sduu-system-board { margin-top:var(--space-9); padding:var(--space-6); background:var(--color-surface-secondary); border:var(--border-default); border-radius:var(--radius-lg) }
:where(.sduu-page) .sduu-relationship div { padding:var(--space-4); border:var(--border-strong); border-radius:var(--radius-sm); background:var(--color-surface-accent) }
:where(.sduu-page) .sduu-relationship div div { margin-top:var(--space-3); background:var(--color-surface) }
:where(.sduu-page) .sduu-relationship div div div { background:var(--color-primary); color:var(--color-white); border-color:var(--color-primary) }
:where(.sduu-page) .sduu-relationship b { display:block; font:var(--font-size-card-lg) var(--font-family-display); margin-bottom:var(--space-1) }
:where(.sduu-page) .sduu-relationship span { display:block; font-size:var(--font-size-small); line-height:var(--line-height-body) }
:where(.sduu-page) .sduu-relationship figcaption { margin-top:var(--space-4); font-size:var(--font-size-label); color:var(--color-text-muted) }
:where(.sduu-page) .sduu-journey-chart figcaption { margin-top:var(--space-4); font-size:var(--font-size-label); color:var(--color-text-muted) }
:where(.sduu-page) .sduu-system-board figcaption { margin-top:var(--space-4); font-size:var(--font-size-label); color:var(--color-text-muted) }
:where(.sduu-page) .sduu-figure-label { font:var(--font-size-label-sm)/var(--line-height-body) var(--font-family-mono); letter-spacing:var(--letter-spacing-label) }
:where(.sduu-page) .sduu-journey-chart svg { display:block; width:100%; height:auto; margin-block:var(--space-5) }
:where(.sduu-page) .sduu-chart-key { display:flex; flex-wrap:wrap; gap:var(--space-3); font-size:var(--font-size-label); line-height:var(--line-height-body) }
:where(.sduu-page) .sduu-chart-key strong { color:var(--color-accent); font-weight:var(--font-weight-semibold) }
:where(.sduu-page) .sduu-swatches { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); margin-block:var(--space-6) }
:where(.sduu-page) .sduu-swatches i { width:var(--size-32); height:var(--size-32); background:var(--color-primary); border-radius:50% }
:where(.sduu-page) .sduu-swatches i:nth-child(2) { background:var(--color-accent) }
:where(.sduu-page) .sduu-swatches i:nth-child(3) { background:var(--color-highlight) }
:where(.sduu-page) .sduu-swatches i:nth-child(4) { background:var(--color-background); border:var(--border-default) }
:where(.sduu-page) .sduu-swatches span { margin-left:auto; font:var(--font-size-statement) var(--font-family-display) }
:where(.sduu-page) .sduu-system-row { display:grid; text-align:center; gap:var(--space-2) }
:where(.sduu-page) .sduu-system-row>span { padding:var(--space-4); background:var(--color-surface); border-radius:var(--radius-sm); font-size:var(--font-size-small) }
:where(.sduu-page) .sduu-system-row .sduu-system-result { background:var(--color-primary); color:var(--color-white) }
:where(.sduu-page) .sduu-system-row b { color:var(--color-accent); font-weight:var(--font-weight-regular) }
:where(.sduu-page) .sduu-discovery-map { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:var(--space-4); row-gap:var(--space-2); align-items:center; width:100%; padding:var(--space-6); background:var(--color-surface); border-radius:var(--radius-lg) }
:where(.sduu-page) .sduu-discovery-map>.sduu-ux-icon { grid-row:span 5; align-self:start; margin:0 }
:where(.sduu-page) .sduu-discovery-map>b { grid-column:2; font-size:var(--font-size-small) }
:where(.sduu-page) .sduu-discovery-map>span:not(.sduu-ux-icon) { grid-column:2; font-size:var(--font-size-small) }
:where(.sduu-page) .sduu-discovery-map>b { font-weight:var(--font-weight-semibold) }
:where(.sduu-page) .sduu-discovery-map>span:not(.sduu-ux-icon) { color:var(--color-accent) }
/* Autoplay prototype: explicit steps, pause control and reduced-motion support. */
:where(.sduu-page) .sduu-design-player { background:var(--color-primary); color:var(--color-white); padding:var(--space-9); border-radius:var(--radius-lg); overflow:hidden }
:where(.sduu-page) .sduu-player-top { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4) }
:where(.sduu-page) .sduu-design-player button { border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--button-radius); padding:var(--space-2) var(--space-3); min-height:var(--touch-target); font-size:var(--font-size-label); font-weight:var(--font-weight-medium); line-height:var(--line-height-label); color:var(--color-illustration-e0eee5); background:transparent }
:where(.sduu-page) .sduu-design-player button.active { background:var(--color-highlight); color:var(--color-primary); border-color:var(--color-highlight) }
:where(.sduu-page) .sduu-design-player button:focus-visible { outline-color:var(--color-highlight) }
:where(.sduu-page) .sduu-player-body { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--space-10); align-items:center; padding-block:var(--space-8) }
:where(.sduu-page) .sduu-player-copy>span { font:var(--font-size-label) var(--font-family-mono); color:var(--color-highlight) }
:where(.sduu-page) .sduu-player-copy h3 { font-family:var(--font-family-display); font-weight:var(--font-weight-display); font-size:var(--font-size-statement); line-height:var(--line-height-display); color:var(--color-white); margin-top:var(--space-4) }
:where(.sduu-page) .sduu-player-copy p { color:var(--color-illustration-e0eee5); font-size:var(--font-size-body-sm); line-height:var(--line-height-relaxed); margin-block:var(--space-5) var(--space-6); min-height:var(--length-em-5-1) }
:where(.sduu-page) .sduu-scene-tabs { display:flex; gap:var(--space-2); flex-wrap:wrap }
:where(.sduu-page) .sduu-screen-demo { background:var(--color-surface); border-radius:var(--radius-md); overflow:hidden; min-width:0; color:var(--color-heading) }
:where(.sduu-page) .sduu-demo-toolbar { display:flex; gap:var(--space-3); justify-content:space-between; padding:var(--space-4); background:var(--color-surface-secondary); font:var(--font-size-label-sm) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sduu-page) .sduu-demo-toolbar i { font-style:normal; color:var(--color-accent); white-space:nowrap }
:where(.sduu-page) .sduu-demo-layout { display:grid; grid-template-columns:var(--size-44) minmax(0,1fr) }
:where(.sduu-page) .sduu-demo-layout aside { background:var(--color-surface-secondary); display:flex; flex-direction:column; gap:var(--space-5); padding:var(--space-6) var(--space-3); border-right:var(--border-default) }
:where(.sduu-page) .sduu-demo-layout aside i { width:var(--size-18); height:var(--size-18); border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-3) }
:where(.sduu-page) .sduu-demo-main { padding:var(--space-7) }
:where(.sduu-page) .sduu-demo-tag { font:var(--font-size-label-sm) var(--font-family-mono); letter-spacing:var(--letter-spacing-label); color:var(--color-text-muted) }
:where(.sduu-page) .sduu-demo-main>b { display:block; font:var(--font-weight-display) var(--font-size-statement)/var(--line-height-display) var(--font-family-display); letter-spacing:var(--letter-spacing-display); margin-top:var(--space-4) }
:where(.sduu-page) .sduu-demo-lines { margin-top:var(--space-4) }
:where(.sduu-page) .sduu-demo-lines i { display:block; width:85%; height:var(--size-6); background:var(--color-surface-accent); border-radius:var(--size-3); margin-top:var(--space-2) }
:where(.sduu-page) .sduu-demo-lines i:last-child { width:65% }
:where(.sduu-page) .sduu-demo-cards { display:flex; gap:var(--space-3); margin-block:var(--space-6) }
:where(.sduu-page) .sduu-demo-cards i { flex:1; height:var(--size-60); background:var(--color-surface-accent); border-radius:var(--radius-sm); border:var(--border-default) }
:where(.sduu-page) .sduu-demo-button { display:inline-flex; padding:var(--space-3) var(--space-4); border-radius:var(--button-radius); font-size:var(--font-size-label); background:var(--color-primary); color:var(--color-white) }
:where(.sduu-page) .sduu-handoff { display:block; font-size:var(--font-size-label-sm); color:var(--color-accent); margin-top:var(--space-5); visibility:hidden }
:where(.sduu-page) .stage-0 .sduu-demo-cards i { background:repeating-linear-gradient(135deg,var(--color-surface),var(--color-surface) var(--size-9),var(--color-border) var(--size-10),var(--color-surface) var(--size-11)) }
:where(.sduu-page) .stage-0 .sduu-demo-main>b { color:var(--color-text-muted) }
:where(.sduu-page) .stage-0 .sduu-demo-button { background:var(--color-surface-secondary); color:var(--color-text); border:var(--size-1) dashed var(--color-border) }
:where(.sduu-page) .stage-2 .sduu-handoff { visibility:visible }
:where(.sduu-page) .stage-2 .sduu-demo-cards i { outline:var(--size-1) dashed var(--color-accent); outline-offset:var(--size-3) }
:where(.sduu-page) .stage-2 .sduu-demo-main>b { outline:var(--size-1) dashed var(--color-accent); outline-offset:var(--size-5) }
:where(.sduu-page) .sduu-player-progress { height:var(--size-3); background:var(--color-illustration-55796a); margin-bottom:var(--space-4); border-radius:var(--size-3) }
:where(.sduu-page) .sduu-player-progress i { display:block; height:100%; width:33%; background:var(--color-highlight); transition:width .3s }
:where(.sduu-page) .sduu-design-player>small { font-size:var(--font-size-label); color:var(--color-illustration-c9dfd1) }
@media(max-width:1200px) {
:where(.sduu-page) .sduu-perspective-grid { grid-template-columns:var(--grid-columns-2) }
:where(.sduu-page) .sduu-project { gap:var(--space-6); padding:var(--space-8) }
:where(.sduu-page) .sduu-float-card { padding:var(--space-3); gap:var(--space-2) }
}
@media(max-width:1000px) {
:where(.sduu-page) .sduu-hero__grid { grid-template-columns:1fr }
:where(.sduu-page) .sduu-hero__copy { max-width:var(--content-width-narrow) }
:where(.sduu-page) .sduu-hero__visual { max-width:var(--size-540); width:100%; justify-self:start }
:where(.sduu-page) .sduu-hero__copy h1 { max-width:21ch }
:where(.sduu-page) .sduu-split { grid-template-columns:1fr }
:where(.sduu-page) .sduu-scope-grid { grid-template-columns:var(--grid-columns-2) }
:where(.sduu-page) .sduu-outcome-grid { grid-template-columns:var(--grid-columns-2) }
:where(.sduu-page) .sduu-project { grid-template-columns:1fr }
:where(.sduu-page) .sduu-project__copy { max-width:var(--measure-copy) }
:where(.sduu-page) .sduu-outcome-grid article:last-child { display:block }
:where(.sduu-page) .sduu-outcome-grid article:last-child .sduu-ux-icon { margin-bottom:var(--space-5) }
:where(.sduu-page) .sduu-outcome-grid article:last-child p { margin-top:var(--space-3) }
:where(.sduu-page) .sduu-relationship { max-width:var(--size-540) }
:where(.sduu-page) .sduu-journey-chart { max-width:var(--size-540) }
:where(.sduu-page) .sduu-system-board { max-width:var(--size-540) }
:where(.sduu-page) .sduu-consult__box { grid-template-columns:1fr }
:where(.sduu-page) .sduu-consult__action { max-width:var(--size-540) }
:where(.sduu-page) .sduu-dashboard { max-width:var(--size-700); width:100% }
:where(.sduu-page) .sduu-player-body { gap:var(--space-6) }
}
@media(max-width:800px) {
:where(.sduu-page) .sduu-heading-row>.body { font-size:var(--font-size-body) }
:where(.sduu-page) .sduu-timeline { grid-template-columns:1fr }
:where(.sduu-page) .sduu-principle-grid { grid-template-columns:1fr }
:where(.sduu-page) .sduu-player-body { grid-template-columns:1fr }
:where(.sduu-page) .sduu-player-copy p { min-height:0 }
:where(.sduu-page) .sduu-design-player { padding:var(--space-6) }
:where(.sduu-page) .sduu-screen-demo { max-width:var(--size-640); width:100% }
:where(.sduu-page) .section-nav-links { gap:var(--space-6) }
:where(.sduu-page) .section-nav-label { display:none }
:where(.sduu-page) .sduu-section-heading { max-width:var(--content-width-wide) }
}
@media(max-width:520px) {
:where(.sduu-page) .sduu-hero { padding-block:var(--space-10) var(--space-12) }
:where(.sduu-page) .sduu-perspective-grid { grid-template-columns:1fr }
:where(.sduu-page) .sduu-scope-grid { grid-template-columns:1fr }
:where(.sduu-page) .sduu-outcome-grid { grid-template-columns:1fr }
:where(.sduu-page) .sduu-checklist { grid-template-columns:1fr }
:where(.sduu-page) .sduu-outcome-grid article:last-child { grid-column:auto }
:where(.sduu-page) .sduu-hero__visual { grid-template-columns:1fr }
:where(.sduu-page) .sduu-canvas { grid-column:auto }
:where(.sduu-page) .sduu-visual-note { grid-column:auto }
:where(.sduu-page) .sduu-flow { padding:var(--space-5) }
:where(.sduu-page) .sduu-float-card { padding:var(--space-4); gap:var(--space-3) }
:where(.sduu-page) .sduu-project { padding:var(--space-6) }
:where(.sduu-page) .sduu-dashboard__layout { grid-template-columns:1fr }
:where(.sduu-page) .sduu-dashboard__layout aside { display:none }
:where(.sduu-page) .sduu-dashboard__content { padding:var(--space-3) }
:where(.sduu-page) .sduu-dashboard__stats { grid-template-columns:1fr }
:where(.sduu-page) .sduu-dashboard__stats>div { display:grid; grid-template-columns:1fr auto; gap:var(--space-2); align-items:center }
:where(.sduu-page) .sduu-dashboard__stats strong { grid-column:2; grid-row:span 2; margin:0 }
:where(.sduu-page) .sduu-dashboard__stats em { grid-column:1; grid-row:2 }
:where(.sduu-page) .sduu-dashboard__panels { grid-template-columns:1fr }
:where(.sduu-page) .sduu-dashboard__orders>div { padding-top:var(--space-3) }
:where(.sduu-page) .sduu-friction-list>article { grid-template-columns:var(--size-20) 1fr; gap:var(--space-3) }
:where(.sduu-page) .sduu-actions { gap:var(--space-5) }
:where(.sduu-page) .sduu-actions .button { width:100% }
:where(.sduu-page) .sduu-faq-list details { padding:var(--space-5) }
:where(.sduu-page) .sduu-faq-list summary { font-size:var(--font-size-body) }
:where(.sduu-page) .sduu-player-top { align-items:flex-start }
:where(.sduu-page) .sduu-player-top>.sduu-figure-label { max-width:14ch }
:where(.sduu-page) .sduu-demo-layout { grid-template-columns:1fr }
:where(.sduu-page) .sduu-demo-layout aside { display:none }
:where(.sduu-page) .sduu-demo-main { padding:var(--space-5) }
:where(.sduu-page) .sduu-demo-toolbar { padding:var(--space-3) }
:where(.sduu-page) .sduu-demo-toolbar>span { font-size:var(--font-size-micro) }
:where(.sduu-page) .sduu-demo-main>b { font-size:var(--font-size-card-display) }
:where(.sduu-page) .sduu-scene-tabs>button { flex:1; min-width:var(--size-80) }
:where(.sduu-page) .sduu-relationship { padding:var(--space-5) }
:where(.sduu-page) .sduu-journey-chart { padding:var(--space-5) }
:where(.sduu-page) .sduu-system-board { padding:var(--space-5) }
:where(.sduu-page) .sduu-discovery-map { padding:var(--space-5) }
}
@media(prefers-reduced-motion:reduce) {
:where(.sduu-page) .sduu-player-progress i { transition:none }
}
@media print {
:where(.sduu-page) .sduu-design-player button { display:none }
:where(.sduu-page) .section-nav { display:none }
:where(.sduu-page) .sduu-section { padding-block:var(--space-10) }
:where(.sduu-page) .sduu-closing { padding-block:var(--space-10) }
:where(.sduu-page) article { break-inside:avoid }
:where(.sduu-page) .sduu-timeline>li { break-inside:avoid }
:where(.sduu-page) .sduu-project { print-color-adjust:exact }
:where(.sduu-page) .sduu-design-player { print-color-adjust:exact }
:where(.sduu-page) .sduu-closing { print-color-adjust:exact }
}
:where(.sduu-page) .sduu-chart-key>span { display:inline-flex; align-items:center; gap:var(--size-8) }
:where(.sduu-page) .sduu-chart-key>strong { display:inline-flex; align-items:center; gap:var(--size-8) }
:where(.sduu-page) .sduu-chart-key>span:before { content:""; width:var(--size-22); border-top:var(--size-2) dashed var(--color-illustration-687b70) }
:where(.sduu-page) .sduu-chart-key>strong:before { content:""; width:var(--size-22); border-top:var(--size-3) var(--border-style) var(--color-accent) }
/* Align UI/UX with the approved live Performance & Scalability page. */
:where(.sduu-page) h1 { line-height:var(--line-height-display) }
:where(.sduu-page) h2 { line-height:var(--line-height-display) }
:where(.sduu-page) h1 { font-size:clamp(var(--size-44),4.5vw,var(--size-68)); margin:var(--size-25) 0; max-width:var(--size-660) }
:where(.sduu-page) h1 em { color:var(--color-accent); font-weight:var(--font-weight-regular) }
:where(.sduu-page) h2 { max-width:var(--size-860); margin:var(--size-14) 0 var(--size-28) }
:where(.sduu-page) h3 { font-size:var(--size-19); font-weight:var(--font-weight-bold); line-height:var(--line-height-art-1-4); margin:0 0 var(--size-12) }
:where(.sduu-page) p { line-height:var(--line-height-relaxed); font-size:var(--size-16) }
:where(.sduu-page) .eyebrow { font:var(--font-weight-medium) var(--size-11)/var(--line-height-1-5) var(--font-family-mono); letter-spacing:var(--letter-spacing-12em); color:var(--color-heading); margin:0 0 var(--size-18) }
:where(.sduu-page) .sduu-hero { padding:var(--size-65) 0 }
:where(.sduu-page) .sduu-hero__grid { grid-template-columns:1.18fr .82fr; gap:7% }
:where(.sduu-page) .sduu-hero__copy .lead { font-size:var(--size-17); line-height:var(--line-height-relaxed); margin-top:0 }
:where(.sduu-page) .sduu-hero__support { color:var(--color-text-muted); margin-top:var(--size-18) }
:where(.sduu-page) .sduu-actions { gap:var(--size-24); margin:var(--size-28) 0 0 }
:where(.sduu-page) .sduu-meta { font:var(--size-11)/var(--line-height-1-7) var(--font-family-mono); color:var(--color-heading); margin-top:var(--size-23); gap:var(--size-12) var(--size-20); padding-top:var(--size-20) }
:where(.sduu-page) .sduu-section { padding:var(--size-96) 0 }
:where(.sduu-page) .sduu-closing { padding:var(--size-96) 0 }
:where(.sduu-page) .sduu-heading-row { margin-bottom:var(--size-42); max-width:100% }
:where(.sduu-page) .sduu-heading-row>.body { font-size:var(--size-16); line-height:var(--line-height-relaxed); max-width:var(--size-920); margin-top:0 }
:where(.sduu-page) .sduu-section-heading>.body { font-size:var(--size-16); line-height:var(--line-height-relaxed); max-width:var(--size-920); margin-top:0 }
:where(.sduu-page) .sduu-perspective-card { border-color:var(--color-border-strong) }
:where(.sduu-page) .sduu-scope-grid article { border-color:var(--color-border-strong); box-shadow:none }
:where(.sduu-page) .sduu-principle-grid article { border-color:var(--color-border-strong); box-shadow:none }
:where(.sduu-page) .sduu-friction-list>article { border-color:var(--color-border-strong); box-shadow:none }
:where(.sduu-page) .sduu-timeline>li { border-color:var(--color-border-strong); box-shadow:none }
:where(.sduu-page) .sduu-outcome-grid article { background:var(--color-surface-secondary); border:0; box-shadow:none }
:where(.sduu-page) .card__title { font-size:var(--size-19); line-height:var(--line-height-art-1-4); font-weight:var(--font-weight-bold); margin:0 0 var(--size-12) }
:where(.sduu-page) .sduu-timeline h3 { font-size:var(--size-19); line-height:var(--line-height-art-1-4); font-weight:var(--font-weight-bold); margin:0 0 var(--size-12) }
:where(.sduu-page) .sduu-friction-list h3 { font-size:var(--size-19); line-height:var(--line-height-art-1-4); font-weight:var(--font-weight-bold); margin:0 0 var(--size-12) }
:where(.sduu-page) .card__description { font-size:var(--size-15); line-height:var(--line-height-relaxed); color:var(--color-text-muted); margin:0 }
:where(.sduu-page) .sduu-perspective-card p { font-size:var(--size-15); line-height:var(--line-height-relaxed); color:var(--color-text-muted); margin:0 }
:where(.sduu-page) .sduu-scope-grid article p { font-size:var(--size-15); line-height:var(--line-height-relaxed); color:var(--color-text-muted); margin:0 }
:where(.sduu-page) .sduu-principle-grid article p { font-size:var(--size-15); line-height:var(--line-height-relaxed); color:var(--color-text-muted); margin:0 }
:where(.sduu-page) .sduu-outcome-grid article p { font-size:var(--size-15); line-height:var(--line-height-relaxed); color:var(--color-text-muted); margin:0 }
:where(.sduu-page) .sduu-friction-list p { font-size:var(--size-15); line-height:var(--line-height-relaxed); color:var(--color-text-muted); margin:0 }
:where(.sduu-page) .sduu-timeline p { font-size:var(--size-15); line-height:var(--line-height-relaxed); color:var(--color-text-muted); margin:0 }
:where(.sduu-page) .sduu-timeline p { font-size:var(--size-16) }
:where(.sduu-page) .sduu-ux-icon { width:var(--size-44); height:var(--size-44); border-radius:var(--size-10); background:var(--color-surface-secondary); border:var(--size-1) var(--border-style) var(--color-border-strong); color:var(--color-heading); margin-bottom:var(--size-20) }
:where(.sduu-page) .sduu-ux-icon svg { width:var(--size-24); height:var(--size-24); stroke-width:1.5 }
:where(.sduu-page) .sduu-note { font-size:var(--size-16); line-height:var(--line-height-relaxed); color:var(--color-text-muted); border:0 }
:where(.sduu-page) .sduu-hero__visual { max-width:var(--size-440); width:100%; justify-self:center }
:where(.sduu-page) .sduu-canvas { border-color:var(--color-border-strong); border-radius:var(--size-18); box-shadow:var(--size-8) var(--size-8) 0 var(--color-surface-accent) }
:where(.sduu-page) .sduu-float-card { background:var(--color-surface); border-color:var(--color-border-strong) }
:where(.sduu-page) .sduu-float-card__icon { background:var(--color-surface-secondary); color:var(--color-heading) }
:where(.sduu-page) .sduu-flow__head strong { font-size:var(--size-22); font-weight:var(--font-weight-display) }
:where(.sduu-page) .sduu-flow__result strong { font-size:var(--size-22); font-weight:var(--font-weight-display) }
:where(.sduu-page) .sduu-flow__result .sduu-kicker { color:var(--color-illustration-c9dfd1) }
:where(.sduu-page) .sduu-flow__steps>div { background:var(--color-surface-secondary) }
:where(.sduu-page) .sduu-flow__steps .is-active { background:var(--color-surface-accent) }
:where(.sduu-page) .sduu-visual-note { font-size:var(--size-10); line-height:var(--line-height-body); color:var(--color-text-muted); font-family:var(--font-family-mono); margin-top:var(--size-8) }
:where(.sduu-page) .sduu-hero__visual .sduu-visual-note { margin:0 }
:where(.sduu-page) .sduu-perspective-grid { grid-template-columns:repeat(4,minmax(0,1fr)) }
:where(.sduu-page) .sduu-scope-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
:where(.sduu-page) .sduu-outcome-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
:where(.sduu-page) .sduu-relationship { background:var(--color-surface-secondary); border-color:var(--color-border-strong); border-radius:var(--size-16) }
:where(.sduu-page) .sduu-journey-chart { background:var(--color-surface-secondary); border-color:var(--color-border-strong); border-radius:var(--size-16) }
:where(.sduu-page) .sduu-system-board { background:var(--color-surface-secondary); border-color:var(--color-border-strong); border-radius:var(--size-16) }
:where(.sduu-page) .sduu-relationship span { font-size:var(--size-13); line-height:var(--line-height-1-7) }
:where(.sduu-page) .sduu-relationship figcaption { font-size:var(--size-10); line-height:var(--line-height-body); font-family:var(--font-family-mono); color:var(--color-text-muted) }
:where(.sduu-page) .sduu-journey-chart figcaption { font-size:var(--size-10); line-height:var(--line-height-body); font-family:var(--font-family-mono); color:var(--color-text-muted) }
:where(.sduu-page) .sduu-system-board figcaption { font-size:var(--size-10); line-height:var(--line-height-body); font-family:var(--font-family-mono); color:var(--color-text-muted) }
:where(.sduu-page) .sduu-project { padding:var(--size-32); border-radius:var(--size-18) }
:where(.sduu-page) .sduu-project__copy h3 { font:var(--font-weight-regular) var(--size-32)/var(--line-height-1-2) var(--font-family-display); color:var(--color-white); letter-spacing:var(--letter-spacing-heading); margin:0 0 var(--size-20) }
:where(.sduu-page) .sduu-project__copy p { color:var(--color-illustration-e0eee5); font-size:var(--size-16); line-height:var(--line-height-relaxed); margin:0 }
:where(.sduu-page) .sduu-project__tags span { color:var(--color-illustration-d9eade) }
:where(.sduu-page) .sduu-project__link { color:var(--color-highlight) }
:where(.sduu-page) .sduu-player-copy h3 { font:var(--font-weight-regular) var(--size-30)/var(--line-height-1-2) var(--font-family-display); color:var(--color-white); margin:var(--size-14) 0 var(--size-20) }
:where(.sduu-page) .sduu-player-copy p { color:var(--color-illustration-e0eee5); font-size:var(--size-15); line-height:var(--line-height-relaxed); margin:0 0 var(--size-24) }
:where(.sduu-page) .sduu-design-player { border-radius:var(--size-18); padding:var(--size-32) }
:where(.sduu-page) .sduu-design-player>small { font:var(--size-10)/var(--line-height-1-65) var(--font-family-mono); color:var(--color-illustration-c9dfd1) }
:where(.sduu-page) .sduu-demo-main>b { font-size:var(--size-30); line-height:var(--line-height-1-2) }
:where(.sduu-page) .sduu-timeline>li>div { padding:0; border:0 }
:where(.sduu-page) .sduu-timeline>li:before { content:none }
:where(.sduu-page) .sduu-timeline>li:after { content:none }
:where(.sduu-page) .sduu-timeline:before { content:none }
:where(.sduu-page) .sduu-outcome-grid article:last-child .sduu-ux-icon { margin:0 }
:where(.sduu-page) .sduu-consult { padding:var(--size-80) 0 }
:where(.sduu-page) .sduu-consult__response { font-size:var(--size-13); color:var(--color-text-muted) }
:where(.sduu-page) .sduu-faq-list details { background:var(--color-surface); border-color:var(--color-border-strong); border-radius:var(--size-10); padding:var(--size-22) }
:where(.sduu-page) .sduu-faq-list details[open] { background:var(--color-surface-muted) }
:where(.sduu-page) .sduu-faq-list summary { font-size:var(--size-16); font-weight:var(--font-weight-medium); line-height:var(--line-height-1-6) }
:where(.sduu-page) .sduu-faq-list details p { font-size:var(--size-15); line-height:var(--line-height-relaxed); color:var(--color-text-muted) }
:where(.sduu-page) .sduu-closing h2 { font-size:var(--font-size-closing); color:var(--color-white) }
:where(.sduu-page) .sduu-closing .eyebrow { color:var(--color-highlight) }
:where(.sduu-page) .sduu-closing__copy>p:not(.eyebrow) { font-size:var(--size-17); line-height:var(--line-height-relaxed); color:var(--color-illustration-e0eee5) }
@media(max-width:1200px) {
:where(.sduu-page) .sduu-perspective-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:1100px) {
:where(.sduu-page) .sduu-hero__grid { gap:4% }
:where(.sduu-page) .sduu-scope-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
:where(.sduu-page) .sduu-outcome-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
:where(.sduu-page) .sduu-project { padding:var(--size-28) }
}
@media(max-width:1000px) {
:where(.sduu-page) .sduu-hero__grid { grid-template-columns:1fr }
:where(.sduu-page) .sduu-hero__visual { margin-top:var(--size-30) }
:where(.sduu-page) .sduu-outcome-grid article:last-child .sduu-ux-icon { margin:0 0 var(--size-20) }
:where(.sduu-page) .sduu-outcome-grid article:last-child p { margin:0 }
}
@media(max-width:800px) {
:where(.sduu-page) .sduu-section { padding:var(--size-70) 0 }
:where(.sduu-page) .sduu-closing { padding:var(--size-70) 0 }
:where(.sduu-page) .sduu-hero { padding:var(--size-45) 0 }
:where(.sduu-page) .sduu-project { padding:var(--size-28) }
:where(.sduu-page) .sduu-design-player { padding:var(--size-28) }
:where(.sduu-page) .sduu-consult { padding:var(--size-70) 0 }
}
@media(max-width:520px) {
:where(.sduu-page) .sduu-section { padding:var(--size-58) 0 }
:where(.sduu-page) .sduu-closing { padding:var(--size-58) 0 }
:where(.sduu-page) .sduu-hero { padding:var(--size-42) 0 }
:where(.sduu-page) h1 { font-size:var(--size-44) }
:where(.sduu-page) h2 { font-size:var(--size-34) }
:where(.sduu-page) .sduu-hero__copy .lead { font-size:var(--size-16) }
:where(.sduu-page) .sduu-heading-row { margin-bottom:var(--size-30) }
:where(.sduu-page) .sduu-actions { gap:var(--size-18) }
:where(.sduu-page) .sduu-perspective-grid { grid-template-columns:1fr }
:where(.sduu-page) .sduu-scope-grid { grid-template-columns:1fr }
:where(.sduu-page) .sduu-outcome-grid { grid-template-columns:1fr }
:where(.sduu-page) .sduu-scope-grid article { padding:var(--size-26) }
:where(.sduu-page) .sduu-principle-grid article { padding:var(--size-26) }
:where(.sduu-page) .sduu-outcome-grid article { padding:var(--size-26) }
:where(.sduu-page) .sduu-timeline>li { padding:var(--size-24) var(--size-22) }
:where(.sduu-page) .sduu-timeline p { font-size:var(--size-15) }
:where(.sduu-page) .sduu-project { padding:var(--size-26) var(--size-22) }
:where(.sduu-page) .sduu-project__copy h3 { font-size:var(--size-27) }
:where(.sduu-page) .sduu-design-player { padding:var(--size-25) var(--size-18) }
:where(.sduu-page) .sduu-player-copy h3 { font-size:var(--size-28) }
:where(.sduu-page) .sduu-closing h2 { font-size:var(--size-38) }
:where(.sduu-page) .sduu-closing__copy>p:not(.eyebrow) { font-size:var(--size-16) }
:where(.sduu-page) .sduu-consult { padding:var(--size-65) 0 }
:where(.sduu-page) .sduu-hero__visual { max-width:var(--size-440) }
:where(.sduu-page) .sduu-float-card { padding:var(--size-16) }
:where(.sduu-page) .sduu-demo-main>b { font-size:var(--size-27) }
}
:where(.sduu-page) .sduu-section-heading { max-width:var(--size-860) }
:where(.sduu-page) .section-nav-label { font-size:var(--size-12); color:var(--color-heading) }
@media(max-width:520px) {
:where(.sduu-page) .sduu-actions .button { width:auto }
}
/* A compact note icon must never inherit the default SVG fill or expand. */
:where(.sduu-page) .sduu-positive-note { display:flex; align-items:flex-start; gap:var(--size-16); margin-top:var(--size-4); min-width:0 }
:where(.sduu-page) .sduu-positive-note .sduu-ux-icon { margin:0; flex:0 0 var(--size-44) }
:where(.sduu-page) .sduu-positive-note svg { width:var(--size-24); height:var(--size-24); max-width:var(--size-24); max-height:var(--size-24); fill:none; stroke:currentColor; stroke-width:1.5; flex:none }
:where(.sduu-page) .sduu-positive-note p { margin:0; flex:1; min-width:0; font-size:var(--size-15); line-height:var(--line-height-relaxed); color:var(--color-text-muted) }
:where(.sduu-page) .feature-grid { border: none; overflow: visible; }