/* nimble-demo.js's sign-up cards. The page's own tokens win; the fallbacks are the demos' brand values. */
.nd-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 24px; border: 1px solid var(--hairline, #E8E8EA); border-radius: 8px;
  background: var(--yellow-wash, #FFFBD1); color: var(--ink, #2A2F3A);
  font-family: var(--sans, 'DM Sans', ui-sans-serif, system-ui, sans-serif);
}
.nd-inline { background: var(--surface, #F6F7F9); }
.nd-title { margin: 0; font-family: var(--display, Roobert, ui-sans-serif, system-ui, sans-serif); font-size: 20px; font-weight: 600; color: var(--black, #0B0B0B); }
.nd-body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--body, #4A4F55); max-width: 56ch; }
.nd-btn {
  display: inline-flex; align-items: center; height: 40px; padding: 0 20px; margin-top: 4px;
  border-radius: 999px; background: var(--black, #0B0B0B); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none;
}
.nd-btn:hover { background: var(--ink, #2A2F3A); }
.nd-btn:focus-visible, .nd-close:focus-visible { outline: 2px solid var(--purple, #6665EC); outline-offset: 2px; }
.nd-dialog { padding: 0; border: 0; border-radius: 8px; max-width: min(480px, calc(100vw - 32px)); }
.nd-dialog::backdrop { background: rgba(11, 11, 11, .4); }
.nd-modal { border: 0; }
.nd-close { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted, #8A9099); cursor: pointer; }