@import url('../design-system.css');

/* -----------------------------------------------
   LANDING — HERO PRODUCT PREVIEW PANEL
----------------------------------------------- */

.product-preview {
  margin-top: 14px;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.product-preview-header {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-preview-header-label {
  opacity: 0.65;
  font-size: 13px;
}

.product-preview-body {
  padding: 14px;
  display: grid;
  gap: 12px;
}

/* -----------------------------------------------
   LANDING — CTA BANNER
----------------------------------------------- */

.cta-banner {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 18px;
}