/* lc-interest modal styles. Linked from canonical + every variant.
   Extracted from marketing/styles.css 2026-05-10. */

/* =========================================================================
   Interest-signal modal (research form, no email capture).
   Appears when [data-open-interest] is clicked.
   ========================================================================= */
.lc-interest {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 180ms ease;
}
.lc-interest.is-open { opacity: 1; }
.lc-interest[hidden] { display: none; }
.lc-interest-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 9, 11, 0.72);
  backdrop-filter: blur(4px);
}
.lc-interest-card {
  position: relative;
  width: 100%; max-width: 580px; max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: oklch(18% 0.01 240);
  border: 1px solid oklch(34% 0.04 110);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.7);
}
.lc-interest-head { margin-bottom: 18px; }
.lc-interest-eye {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #beef44;
  text-transform: uppercase;
}
.lc-interest-head h2 {
  margin: 6px 0 4px;
  color: oklch(95% 0.005 240);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lc-interest-sub {
  margin: 0;
  color: oklch(64% 0.005 240);
  font-size: 13px;
  line-height: 1.5;
}
.lc-interest-form { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }
.lc-interest-form fieldset {
  border: 1px solid oklch(34% 0.01 240);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
}
.lc-interest-form legend {
  padding: 0 6px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(82% 0.005 240);
}
.lc-interest-form fieldset > label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 10px 4px 0;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid oklch(34% 0.01 240);
  border-radius: 99px;
  font-size: 13px;
  color: oklch(82% 0.005 240);
  cursor: pointer;
  transition: all 120ms ease;
}
.lc-interest-form fieldset > label:hover { border-color: oklch(44% 0.01 240); color: oklch(95% 0.005 240); }
.lc-interest-form input[type="radio"] { accent-color: #beef44; }
.lc-interest-text { display: flex; flex-direction: column; gap: 6px; }
.lc-interest-text > span {
  font-size: 12px;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.04em;
  color: oklch(82% 0.005 240);
}
.lc-interest-text em {
  font-style: normal;
  color: oklch(64% 0.005 240);
}
.lc-interest-text textarea {
  background: oklch(14% 0.01 240);
  border: 1px solid oklch(34% 0.01 240);
  border-radius: 8px;
  padding: 10px 12px;
  color: oklch(95% 0.005 240);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  min-height: 80px;
}
.lc-interest-text textarea:focus {
  outline: none;
  border-color: #beef44;
  box-shadow: 0 0 0 2px rgba(190, 239, 68, 0.12);
}
.lc-interest-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.lc-interest-status {
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
}
.lc-interest-status.ok {
  background: rgba(91, 227, 164, 0.12);
  color: #5be3a4;
}
.lc-interest-status.err {
  background: rgba(255, 85, 114, 0.12);
  color: #ff5572;
}
@media (max-width: 540px) {
  .lc-interest-card { padding: 22px; max-width: 100%; }
  .lc-interest-form fieldset > label { font-size: 12px; }
}

/* Waitlist modal: email field + assorted polish above the existing radio fieldsets */
.lc-interest-email { display: flex; flex-direction: column; gap: 6px; }
.lc-interest-email > span {
  font-size: 12px;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.04em;
  color: oklch(82% 0.005 240);
}
.lc-interest-email input[type="email"] {
  background: oklch(14% 0.01 240);
  border: 1px solid oklch(34% 0.01 240);
  border-radius: 8px;
  padding: 10px 12px;
  color: oklch(95% 0.005 240);
  font-family: inherit;
  font-size: 15px;
}
.lc-interest-email input[type="email"]:focus {
  outline: none;
  border-color: #beef44;
  box-shadow: 0 0 0 2px rgba(190, 239, 68, 0.12);
}

/* Private-beta marker on variant /2 + /3 top nav (replaces the concept-switcher pill) */
.topnav-beta {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 99px;
}

/* Two-column row for name + company on the waitlist form */
.lc-interest-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lc-interest-row > label { display: flex; flex-direction: column; gap: 6px; }
.lc-interest-row input[type="text"] {
  background: oklch(14% 0.01 240);
  border: 1px solid oklch(34% 0.01 240);
  border-radius: 8px;
  padding: 10px 12px;
  color: oklch(95% 0.005 240);
  font-family: inherit;
  font-size: 15px;
}
.lc-interest-row input[type="text"]:focus {
  outline: none;
  border-color: #beef44;
  box-shadow: 0 0 0 2px rgba(190, 239, 68, 0.12);
}
@media (max-width: 540px) {
  .lc-interest-row { grid-template-columns: 1fr; }
}