/* Feature dialogs reuse CSO colours, fonts and cards without changing the homepage layout. */
.cso-feature-dialog {
  width: min(760px, calc(100% - 2rem)); max-height: 88vh; overflow: auto;
  border: 1px solid #dce6e1; border-radius: 20px; padding: clamp(18px, 4vw, 28px);
  background: #fffdf8; color: #18344d; font: inherit; box-shadow: 0 20px 70px #0004;
}
.cso-feature-dialog::backdrop { background: rgba(12, 28, 44, .62); }
.cso-feature-dialog h2 { margin: 0 40px 18px 0; color: #10365a; }
.cso-feature-dialog h3 { color: #10365a; }
.cso-feature-dialog .cso-dialog-close { float: right; background: transparent; border: 0; color: #18344d; font-size: 26px; cursor: pointer; }
.cso-feature-dialog label { display: grid; gap: 6px; margin: 12px 0; font-weight: 600; }
.cso-feature-dialog input, .cso-feature-dialog textarea, .cso-feature-dialog select {
  width: 100%; padding: 10px; border: 1px solid #cbd8d3; border-radius: 8px; font: inherit; color: #18344d; background: white;
}
.cso-feature-dialog textarea { min-height: 120px; resize: vertical; }
.cso-feature-dialog button { margin: 4px 6px 4px 0; }
.cso-feature-dialog a { color: #0865c9; text-decoration: underline; overflow-wrap: anywhere; }
.cso-feature-dialog article { padding: 14px; margin: 12px 0; background: #f3f6f0; border: 1px solid #e3e8df; border-radius: 10px; }
.cso-feature-dialog .cso-prose { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.cso-feature-dialog [role="status"] { white-space: pre-wrap; overflow-wrap: anywhere; }
.cso-feature-dialog .cso-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.cso-feature-dialog .cso-inline input { flex: 1; min-width: 160px; }
.cso-feature-dialog [hidden] { display: none !important; }

.cso-article-page { max-width: 960px; margin: 2rem auto; padding: 1.75rem; background: #fffdf8; color: #18344d; border: 1px solid #dce6e1; border-radius: 16px; }
.cso-article-page .cso-prose { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }