/* ════════════════════════════════════════════════════
   pain.css — "Does this sound familiar?" section
════════════════════════════════════════════════════ */

/* 2-column grid of pain points */
.pain-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  margin-top:    58px;
  border:        1px solid var(--border);
  border-radius: var(--r);
  overflow:      hidden;
  background:    var(--surface);
  box-shadow:    var(--shadow-sm);
}

.pain-item {
  display:     flex;
  gap:         20px;
  align-items: flex-start;
  padding:     28px 32px;
  border-right:  1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition:    background 0.3s;
}
/* Even items have no right border (end of row) */
.pain-item:nth-child(even)       { border-right: none; }
/* Last row has no bottom border */
.pain-item:nth-last-child(-n+2)  { border-bottom: none; }
.pain-item:hover                 { background: var(--bg-sage); }

.pain-n {
  font-size:      10px;
  color:          var(--sage);
  font-family:    'DM Mono', monospace;
  flex-shrink:    0;
  margin-top:     4px;
  letter-spacing: 0.08em;
}

.pain-t {
  font-size:   16px;
  color:       var(--text-muted);
  line-height: 1.55;
  font-weight: 300;
}

/* Pull quote block below the grid */
.pain-pull {
  margin-top:    56px;
  padding:       38px 48px;
  background:    var(--surface);
  border-left:   3px solid var(--sage);
  border-radius: 0 var(--r) var(--r) 0;
  box-shadow:    var(--shadow-sm);
}

.pain-pull-q {
  font-family: 'Fraunces', serif;
  font-size:   clamp(18px, 2.5vw, 23px);
  font-style:  italic;
  font-weight: 300;
  color:       var(--text);
  line-height: 1.7;
}