/* Buttons and their hover, selected and focus states in the OC logo's style: a lavender face
   over hairline coral and cobalt layers, offset left and right as subtly as on the mark. Loaded
   last, so it replaces the mulberry porcelain states. */
:root {
  --logo-face: #7d82ff;
  --logo-face-hover: #959aff;
  --logo-coral: #ff6268;
  --logo-cobalt: #164bff;
  --logo-ink: #0c0d2a;
  --logo-layers: -1px 0 0 var(--logo-coral), 1px 0 0 var(--logo-cobalt);
  --logo-layers-wide: -2px 0 0 var(--logo-coral), 2px 0 0 var(--logo-cobalt);
  --logo-layers-pressed: none;
}

/* Primary buttons: Try free, Copy prompt in the setup dialog, and the pricing calls to action. */
.hero-ctas .primary-button,
.price-action .primary-button,
.header-nav .header-try,
.dialog-actions .copy-button {
  color: var(--logo-ink);
  background: var(--logo-face);
  border: 1px solid var(--logo-face);
  box-shadow: var(--logo-layers);
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.hero-ctas .primary-button:hover,
.price-action .primary-button:hover,
.header-nav .header-try:hover,
.dialog-actions .copy-button:hover {
  color: var(--logo-ink);
  background: var(--logo-face-hover);
  border-color: var(--logo-face-hover);
  box-shadow: var(--logo-layers-wide);
  text-decoration: none;
}

/* Hero, closing and pricing calls to action: Try free copies the setup prompt, Book Call opens
   the calendar. The secondary button is a muted Try free that turns black on hover. */
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 32px auto 0;
}
.hero-ctas :is(.primary-button, .secondary-button),
.price-action :is(.primary-button, .secondary-button) {
  min-width: 200px;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: 6px;
  font-size: 14px;
}
.hero-ctas .secondary-button,
.price-action .secondary-button {
  color: #e4e5ff;
  background: color-mix(in srgb, var(--logo-face) 30%, #050510);
  border-color: color-mix(in srgb, var(--logo-face) 55%, #000);
  box-shadow: -1px 0 0 color-mix(in srgb, var(--logo-coral) 60%, transparent), 1px 0 0 color-mix(in srgb, var(--logo-cobalt) 60%, transparent);
  transition: background .16s, border-color .16s, color .16s;
}
.hero-ctas .secondary-button:hover,
.price-action .secondary-button:hover {
  color: #fff;
  background: #000;
  border-color: color-mix(in srgb, var(--logo-face) 70%, #000);
  text-decoration: none;
}
.price-action :is(.primary-button, .secondary-button) { width: 100%; padding-inline: 16px; }
@media (min-width: 1001px) and (max-width: 1240px) {
  .price-action .primary-button svg { display: none; }
}
@media (min-width: 1001px) and (max-width: 1100px) {
  .price-action .primary-button { font-size: 13px; padding-inline: 12px; }
}
/* Copy setup prompt: the label leads, a small copy icon follows. On phones the buttons say Copy prompt. */
:is(.hero-ctas, .header-nav) .primary-button svg { width: 16px; height: 16px; }
.header-nav .header-try { gap: 8px; }
:is(.hero-ctas, .header-nav) .label-short { display: none; }
.header-nav > * { white-space: nowrap; }
@media (max-width: 540px) {
  :is(.hero-ctas, .header-nav) .label-full { display: none; }
  :is(.hero-ctas, .header-nav) .label-short { display: inline; }
  .header-nav { gap: 12px; }
  .header-nav .header-try svg { display: none; }
  .header-nav .header-try.primary-button { padding-inline: 12px; }
}
@media (max-width: 360px) {
  .hero-ctas .primary-button svg { display: none; }
}
.cta-hint {
  max-width: 520px;
  margin: 16px auto 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
  text-wrap: balance;
}
.header-nav .header-try {
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
}
:is(.hero-ctas .primary-button, .price-action .primary-button, .header-nav .header-try, .dialog-actions .copy-button):active {
  box-shadow: var(--logo-layers-pressed);
}
@media (max-width: 540px) {
  .hero-ctas { gap: 12px; margin-top: 27px; }
  .hero-ctas :is(.primary-button, .secondary-button) { flex: 1 1 0; min-width: 0; padding-inline: 14px; }
  .price-action :is(.primary-button, .secondary-button) { width: 100%; padding-inline: 14px; }
}
@media (max-width: 360px) {
  .price-action .primary-button { font-size: 12px; }
  .price-action .primary-button svg { display: none; }
}

/* The "Setup prompt copied" toast and the dialogs stay black inside the logo's lavender ring. */
:root { --logo-ring: 0 0 0 3px var(--logo-face), -1px 0 0 3px var(--logo-coral), 1px 0 0 3px var(--logo-cobalt); }
.toast {
  color: var(--text, #f7f5f6);
  background: #000;
  border-color: #000;
  box-shadow: var(--logo-ring), 0 5px 25px #0004;
}
.setup-dialog, .dataset-dialog {
  border-color: #000;
  box-shadow: var(--logo-ring), 0 35px 120px #0009;
}
.dialog-top {
  color: var(--muted);
  background: #000;
  border-bottom-color: var(--line);
  box-shadow: none;
}
.dialog-close {
  color: var(--text, #f7f5f6);
  background: transparent;
  border-color: color-mix(in srgb, var(--logo-face) 45%, #000);
}
.dialog-close:hover { background: color-mix(in srgb, var(--logo-face) 14%, #000); }
.dialog-body textarea {
  color: var(--text, #f7f5f6);
  background: #0b0b14;
  border-color: color-mix(in srgb, var(--logo-face) 40%, #000);
  box-shadow: none;
}

/* Source orbit: the selected filter wears the logo, hovered and highlighted sources get a lavender ring. */
.ss-filters button:hover,
.ss-filters button:focus-visible {
  color: var(--text, #f8f8f8);
  background: color-mix(in srgb, var(--logo-face) 14%, #000);
  border-color: color-mix(in srgb, var(--logo-face) 45%, #000);
}
.ss-filters button[aria-pressed=true] {
  color: var(--logo-ink);
  background: var(--logo-face);
  border-color: var(--logo-face);
  box-shadow: var(--logo-layers);
}
.ss-satellite:hover .ss-token,
.source-swarm[data-active]:not([data-active=all]) .ss-satellite[data-match=true] .ss-token { box-shadow: 0 0 0 2px var(--logo-face); }

/* Keyboard focus. */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline-color: var(--logo-face); }

@media (prefers-reduced-motion: reduce) {
  .hero-ctas :is(.primary-button, .secondary-button), .price-action :is(.primary-button, .secondary-button),
  .header-nav .header-try, .dialog-actions .copy-button { transition: none; }
}
@media (forced-colors: active) {
  .hero-ctas :is(.primary-button, .secondary-button), .price-action :is(.primary-button, .secondary-button),
  .header-nav .header-try, .dialog-actions .copy-button, .toast, .setup-dialog, .dataset-dialog { box-shadow: none; }
}