/* Production components shared by the canvas-linked landing and SaaS report. */
.ux-page { margin: 0; color: var(--ds-ink); background: var(--ds-white); font-family: var(--ds-font), Pretendard, system-ui, sans-serif; font-weight: var(--ds-weight-medium); -webkit-font-smoothing: antialiased; }
.ux-page a { text-decoration: none; }
.ux-page a:hover { text-decoration: none; }
.ux-page :where(button,input,select,textarea) { font-family: inherit; }
.ux-container { width: min(1132px, calc(100% - 48px)); margin-inline: auto; }
.ux-section { padding-block: var(--ds-space-96); border-bottom: var(--ds-border-1) solid var(--ds-line); }
.ux-section--soft { background: var(--ds-surface); }
.ux-section--dark { background: var(--ds-ink); color: var(--ds-white); }
.ux-title { margin: 0; font-size: var(--ds-type-section); line-height: var(--ds-leading-1-2); font-weight: var(--ds-weight-display); }
.ux-lead { max-width: 720px; margin: var(--ds-space-18) 0 0; color: var(--ds-muted); font-size: var(--ds-type-lg); line-height: var(--ds-leading-1-65); }
.ux-eyebrow { margin: 0 0 var(--ds-space-16); color: var(--ds-primary); font-size: var(--ds-type-xs); line-height: var(--ds-leading-1-85); font-weight: var(--ds-weight-display); }
.ux-btn, .canvas-report .button { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; gap: var(--ds-space-8); min-height: 52px; padding: 0 var(--ds-space-26); border: var(--ds-border-1) solid transparent; border-radius: var(--ds-radius-13); background: var(--ds-primary); color: var(--ds-white); font-size: var(--ds-type-base); line-height: var(--ds-leading-1-41); font-weight: var(--ds-weight-medium); cursor: pointer; transition: background 160ms, border-color 160ms; }
.ux-btn:hover, .canvas-report .button--primary:hover { background: var(--ds-primary-strong); color: var(--ds-white); transform: none; }
.ux-btn--secondary, .canvas-report .button--secondary { background: var(--ds-surface); color: var(--ds-ink); border-color: var(--ds-line-soft); font-weight: var(--ds-weight-bold); }
.ux-btn--secondary:hover, .ux-btn--outline:hover, .canvas-report .button--secondary:hover { background: var(--ds-tint); color: var(--ds-ink); border-color: var(--ds-primary-border); }
.ux-btn--outline { background: var(--ds-white); color: var(--ds-ink); border-color: var(--ds-input-line); font-weight: var(--ds-weight-bold); }
.ux-btn--small, .canvas-report .button--small { min-height: 44px; padding-inline: var(--ds-space-20); border-radius: var(--ds-radius); font-size: var(--ds-type-sm); font-weight: var(--ds-weight-bold); }
.ux-btn--block { width: 100%; font-size: var(--ds-type-sm); font-weight: var(--ds-weight-bold); }
.ux-brand { display: inline-flex; gap: var(--ds-space-10); align-items: center; color: var(--ds-ink); font-size: var(--ds-type-base); line-height: var(--ds-leading-1-41); font-weight: var(--ds-weight-bold); }
.ux-brand img { display: block; width: 32px; height: 32px; }
.ux-chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-8); }
.ux-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--ds-space-14); border: var(--ds-border-1) solid var(--ds-line); border-radius: var(--ds-radius-9); background: var(--ds-white); color: var(--ds-body); font-size: var(--ds-type-sm); line-height: var(--ds-leading-1-71); font-weight: var(--ds-weight-bold); }
.ux-chip--eyebrow { min-height: 30px; padding-inline: var(--ds-space-12); border: 0; border-radius: var(--ds-radius-999); background: var(--ds-chip); color: var(--ds-primary); font-size: var(--ds-type-xs); font-weight: var(--ds-weight-medium); }
.ux-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--ds-space-9); border-radius: var(--ds-radius-6); background: var(--ds-tint); color: var(--ds-primary); font-size: var(--ds-type-xs); line-height: var(--ds-leading-2); font-weight: var(--ds-weight-bold); }
.ux-badge--neutral { background: var(--ds-neutral); color: var(--ds-muted); }
.ux-badge--critical { background: var(--ds-danger); color: var(--ds-white); }
.ux-badge--high { background: var(--ds-warning); color: var(--ds-white); }
.ux-card { min-width: 0; padding: var(--ds-space-30); border: var(--ds-border-1) solid var(--ds-line-soft); border-radius: var(--ds-card-radius); background: var(--ds-white); }
.ux-card h3 { margin: 0; font-size: var(--ds-type-lg); line-height: var(--ds-leading-1-26); font-weight: var(--ds-weight-bold); }
.ux-card p { margin: var(--ds-space-10) 0 0; color: var(--ds-muted); font-size: var(--ds-type-sm); line-height: var(--ds-leading-1-65); }
.ux-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-12); align-items: center; }
.ux-muted { color: var(--ds-muted); }
.ux-page .site-footer { background: var(--ds-ink); border-color: var(--ds-dark-panel); color: var(--ds-subtle); font-size: var(--ds-type-xs); }
.ux-page .site-footer__links { color: var(--ds-dark-text); font-size: var(--ds-type-sm); }
.ux-page .site-footer__links strong { font-weight: var(--ds-weight-display); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 820px) {
  .ux-section { padding-block: 64px; }
  .ux-title { font-size: var(--ds-type-4xl); line-height: 1.28; }
  .ux-lead { font-size: var(--ds-type-base); }
}
@media (max-width: 520px) {
  .ux-container { width: calc(100% - 40px); }
  .ux-btn { padding-inline: var(--ds-space-20); }
}