.conv-sec { --conv-blue: #2b4a78; --conv-rust: #a8481c; }
.conv-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.conv-copy .sec-head { margin-bottom: clamp(24px, 3vw, 36px); }
.conv-points { display: grid; gap: 0; }
.conv-points li { padding: 18px 0; border-top: 1px solid var(--vc-border-strong); }
.conv-points h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.01em; }
.conv-points p { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--vc-text-2); }
.conv-note { margin-top: 20px; font-size: 14.5px; line-height: 1.55; color: var(--vc-text-3); max-width: 38em; }

.conv-fig { margin: 0; display: grid; justify-items: center; gap: 14px; }
.conv-scene { display: grid; justify-items: center; gap: 12px; width: 100%; }
.conv-who { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.3; color: var(--vc-text-3); }
.conv-head { width: 22px; height: 22px; border-radius: 50%; background: var(--vc-border-strong); }
.conv-phone { display: grid; width: min(100%, 340px); padding: 9px; border-radius: 38px; background: var(--vc-text); box-shadow: var(--shadow-pop); gap: 2px; }
.conv-pane { display: flex; flex-direction: column; gap: 10px; min-height: 236px; padding: 18px 16px; background: var(--vc-surface); }
.conv-pane--far { transform: rotate(180deg); border-radius: 6px 6px 29px 29px; }
.conv-pane--near { border-radius: 6px 6px 29px 29px; }
.cl { position: relative; padding-left: 10px; border-left: 3px solid var(--conv-rule); font-size: 16px; line-height: 1.35; color: var(--vc-text-3); }
.cl--me { --conv-rule: var(--conv-blue); }
.cl--them { --conv-rule: var(--conv-rust); }
.cl--other { margin-left: 22px; color: var(--vc-text); font-weight: 560; }
.tx { display: block; }
.cl::before { content: "…" / ""; position: absolute; left: 10px; top: 0; opacity: 0; font-weight: 800; color: var(--vc-text-3); }
.conv-fig figcaption { max-width: 340px; font-size: 13.5px; line-height: 1.5; color: var(--vc-text-3); text-align: center; }

@media (max-width: 900px) {
  .conv-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .conv-copy { display: contents; }
  .conv-copy .sec-head { order: 1; }
  .conv-fig { order: 2; margin-bottom: 28px; }
  .conv-points { order: 3; }
  .conv-note { order: 4; }
}

@media (prefers-reduced-motion: no-preference) {
  html.js .conv-fig:not(.is-on) .tx { clip-path: inset(0 100% 0 0); }
  html.js .conv-fig:not(.is-on) .cl { border-left-color: transparent; }
  html.js .conv-fig.is-on .tx { animation: conv-wipe 1.2s cubic-bezier(.4, 0, .6, 1) calc(var(--d) + .9s) both; }
  html.js .conv-fig.is-on .cl { animation: conv-rule .3s linear calc(var(--d) + .9s) both; }
  html.js .conv-fig.is-on .cl::before { animation: conv-dots 1s linear var(--d) both; }
  @keyframes conv-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes conv-rule { from { border-left-color: transparent; } }
  @keyframes conv-dots { 0% { opacity: 0; } 12%, 88% { opacity: 1; } 100% { opacity: 0; } }
}