/* ─────────────────────────────────────────────
   Convert Card — the canonical surface: cream, subtle stroke, lift on hover.
   Use with tokens.css. Variants: --watermark, --visual.
   ───────────────────────────────────────────── */

.card {
  background: var(--color-surface-cream);
  border: 1px solid var(--color-border-cream);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover {
  background: var(--color-surface-cream-hover);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.card__body { padding: 28px 28px 32px; }

/* Variant: watermark — oversized low-opacity Phosphor glyph bleeding off the corner */
.card--watermark { position: relative; }
.card--watermark .card__watermark {
  position: absolute; right: -12px; bottom: -16px;
  font-size: 160px; line-height: 1;
  color: var(--color-violet-700);
  opacity: var(--icon-watermark-opacity);
  pointer-events: none;
}
.card--watermark .card__body { position: relative; z-index: 1; }

/* Variant: visual-header — a viz panel above the body */
.card--visual .card__visual {
  display: flex; align-items: center; justify-content: center;
  min-height: 160px; padding: 24px;
  background: var(--color-surface-cream-hover);
  border-bottom: 1px solid var(--color-border-cream);
}

/* ── Back-compat aliases (existing LPs reference .bento-card*) ── */
.bento-card {
  background: var(--color-surface-cream);
  border: 1px solid var(--color-border-cream);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-card:hover {
  background: var(--color-surface-cream-hover);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.bento-content { padding: 28px 28px 32px; }

/* ── Feature bento card — REUSABLE pattern for cards that pair text with an embedded
   product-UI mock that bleeds off the bottom edge (e.g. personas, "what teams accomplish").
   Always build feature cards this way — never invent a custom card shell/padding/border.
   Structure:
     <article class="bento-card bento-card--feature">
       <div class="bento-content">
         <span class="bento-card-eyebrow">…</span>          (optional)
         <h3 class="bento-card-title">…</h3>
         <p class="bento-card-body">…</p>
       </div>
       <div class="bento-visual">…product mock…</div>        (optional; bleeds to bottom edge)
     </article>
   ───────────────────────────────────────────── */
.bento-card--feature {
  background: var(--color-surface-cream);
  border-color: var(--color-border-cream);
  display: flex;
  flex-direction: column;
}
.bento-card-eyebrow {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-violet-700);
  margin-bottom: 11px;
}
.bento-card-title {
  font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin: 0 0 12px;
}
.bento-card-body {
  font-size: 15px; line-height: 1.7; color: var(--color-text-secondary);
  margin: 0;
}
.bento-visual { margin-top: auto; }