/* SideQuest landing page: success package styles. Loads after style.css. Prefixed classes only. */

/* The parts this package hides carry their own display rules, and a plain
   hidden attribute loses to them. This rule is scoped to those elements so the
   card can stay attribute driven and never touch inline styles. */
[data-waitlist] [hidden],
.hero-perk[hidden],
.cta-fine-print[hidden],
.sc-link[hidden] {
  display: none;
}

.sc-card {
  position: relative;
  margin-top: var(--space-md, 16px);
  padding: var(--space-lg, 24px);
  background: #FFFFFF;
  border: 1px solid var(--sage-200, #C7D5C7);
  border-radius: var(--radius-card, 24px);
  text-align: left;
  font-family: 'Lexend', sans-serif;
}

.sc-title {
  margin: 0 0 var(--space-sm, 8px);
  font-family: 'Lexend', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--deep-charcoal, #2C3E50);
}

.sc-lede {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sage-700, #465B46);
}

.sc-row {
  margin-top: var(--space-lg, 24px);
}

.sc-row-label {
  margin: 0 0 var(--space-sm, 8px);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sage-700, #465B46);
}

/* Share button. 44px tall so it clears the touch target floor on its own. */
.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-lg, 24px);
  border: 1px solid transparent;
  border-radius: var(--radius-pill, 999px);
  background: var(--orange-cta, #CC6E1D);
  color: #FFFFFF;
  font-family: 'Lexend', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.sc-btn.is-copied {
  background: var(--sage-50, #F4F7F4);
  border-color: var(--sage-200, #C7D5C7);
  color: var(--sage-700, #465B46);
}

/* Clipboard fallback: a selectable field, revealed only when copying fails. */
.sc-link {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: var(--space-sm, 8px);
  padding: 0 var(--space-md, 16px);
  border: 1px solid var(--sage-200, #C7D5C7);
  border-radius: var(--radius-badge, 8px);
  background: var(--sage-50, #F4F7F4);
  color: var(--sage-700, #465B46);
  font-family: 'Lexend', sans-serif;
  font-size: 14px;
}

.sc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 8px);
}

/* Same look as .chip in style.css, restated here so this file stands alone. */
.sc-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-md, 16px);
  border: 1px solid var(--sage-200, #C7D5C7);
  border-radius: var(--radius-pill, 999px);
  background: var(--sage-50, #F4F7F4);
  color: var(--deep-charcoal, #2C3E50);
  font-family: 'Lexend', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.sc-chip:hover {
  background: var(--sage-100, #E3EAE3);
}

.sc-chip.is-active {
  background: var(--orange-400, #E67E22);
  border-color: var(--orange-400, #E67E22);
  color: #FFFFFF;
}

.sc-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--sage-700, #465B46);
}

.sc-follow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 8px);
}

.sc-follow-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-md, 16px);
  border: 1px solid var(--sage-200, #C7D5C7);
  border-radius: var(--radius-pill, 999px);
  color: var(--sage-700, #465B46);
  font-family: 'Lexend', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.sc-follow-link:hover {
  background: var(--sage-50, #F4F7F4);
}

/* Only rendered on localhost, so nobody mistakes a mocked signup for a real one. */
.sc-mock {
  position: absolute;
  top: var(--space-sm, 8px);
  right: var(--space-md, 16px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sage-600, #5A735A);
}

/* Confetti overlay. Positioned over the submitting form from JS, then removed. */
.sc-confetti {
  position: fixed;
  z-index: 60;
  pointer-events: none;
}