/* ============================================================
   Signling · Design System · SHARED COMPONENTS — Buttons
   The ONE definition of the button, consumed by every surface
   (marketing landing today; the React app adopts these classes
   in the visual-unification round). Token-driven — no raw colors.
   Synced into the landing as /components.css via `npm run sync:brand`.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.85em 1.5em;
  border-radius: 100px;
  border: 0;
  cursor: pointer;
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
  line-height: 1;
  white-space: nowrap;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--shadow-sticker) var(--btn-shadow-ink); }
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 0 var(--btn-shadow-ink); }
.btn-primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 3px 0 var(--btn-shadow-ink); }
.btn-accent { background: var(--yellow); color: var(--on-accent); box-shadow: var(--shadow-sticker) var(--yellow-deep); }
.btn-accent:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 0 var(--yellow-deep); }
.btn-accent:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 3px 0 var(--yellow-deep); }
.btn-ghost { background: transparent; color: var(--blue-800); padding: 0.7em 1em; }
.btn-ghost:hover:not(:disabled) { color: var(--blue-700); }
.btn-lg { font-size: 1.2rem; padding: 1em 1.9em; }

/* Full-width block button — the app's default footer/CTA shape. */
.btn-block { width: 100%; justify-content: center; }

/* Disabled — explicit theme-aware tokens, never opacity. The landing's anchors
   never disable, so this only affects the app's <button> controls. */
.btn:disabled { cursor: default; }
.btn-primary:disabled,
.btn-accent:disabled { background: var(--btn-disabled-bg); color: var(--btn-disabled-fg); box-shadow: none; }
.btn-ghost:disabled { color: var(--btn-disabled-fg); }
/* ============================================================
   Signling · Design System · SHARED COMPONENTS — small elements
   Reusable atoms shared across surfaces (pill, kicker/eyebrow).
   Token-driven; synced into the landing via `npm run sync:brand`.
   ============================================================ */

/* Status pill (e.g. "Free to start · no credit card") */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 2px solid var(--blue-100);
  color: var(--blue-700);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.45em 0.9em;
  border-radius: 100px;
  box-shadow: 0 4px 14px rgba(30, 79, 214, 0.08);
}
.pill .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(55, 214, 168, 0.25);
}

/* Section eyebrow / kicker */
.kicker {
  display: inline-block;
  font-family: 'Poppins';
  font-weight: 600;
  color: var(--blue-700);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  margin-bottom: 0.5em;
}