/* /love (URL-841 §3): the full testimonial wall. Card look follows the homepage proof wall:
   white card, #e1e1eb border, Geist, brand mark first, one highlight per quote. */

/* Same heading weight as /why (section-motion.css drops main headings to 400 site-wide). */
.cro-love h1, .cro-love h2, .cro-love h3 { font-weight: 600; }

.love-hero { display: grid; justify-items: center; gap: 18px; padding: 56px 0 40px; text-align: center; }
.love-eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.love-hero h1 { margin: 0; font-size: clamp(40px, 7vw, 72px); line-height: 1.1; letter-spacing: -.045em; text-wrap: balance; }
.love-hero h1 .cro-h1-accent { color: var(--accent); background: #eaefff; padding: 0 .1em .02em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.love-lead { margin: 0; max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--muted); text-wrap: balance; }
.love-hero .brand-action { margin-top: 8px; }

/* Masonry by columns: uneven quote lengths sit naturally, nothing is stretched to match. */
.love-wall { padding: 16px 0 24px; }
.love-grid { columns: 3 300px; column-gap: 20px; }
.love-card { break-inside: avoid; display: grid; gap: 16px; margin: 0 0 20px; padding: 24px; background: #fff; border: 1px solid #e1e1eb; border-radius: 8px; }
.love-card--featured { background: var(--accent-soft); border-color: #d6dafa; }
.love-logo { display: block; width: auto; max-width: 130px; height: 28px; object-fit: contain; object-position: left center; }
.love-card blockquote { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); }
.love-card--featured blockquote { font-size: 20px; line-height: 1.5; letter-spacing: -.01em; }
.love-card mark { background: #e2e6ff; color: inherit; padding: 0 .12em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.love-card figcaption { font-size: 14px; font-weight: 600; color: var(--ink); }
.love-card figcaption span { font-weight: 400; color: var(--muted); }

.love-note { margin: 20px 0 0; text-align: center; font-size: 16px; color: var(--muted); }
.love-note a { color: var(--accent); font-weight: 600; text-decoration: none; }
.love-note a:hover { text-decoration: underline; }

@media (max-width: 599px) {
  .love-hero { padding: 32px 0 28px; gap: 14px; }
  .love-lead { font-size: 16px; }
  .love-hero .brand-action { width: 100%; justify-content: center; }
  .love-card { padding: 20px; gap: 14px; margin-bottom: 14px; }
  .love-card blockquote { font-size: 16px; }
  .love-card--featured blockquote { font-size: 18px; }
}