/* Width and height both shape the scene; content can grow on short screens. */
.conversation-section { --conversation-art: clamp(300px, calc(100svh - 430px), 520px); min-height: calc(100svh - var(--nav-height)); display: grid; align-items: center; padding: var(--scene-space) 32px; color: #f5f5f7; background: #000; }
.conversation-inner { width: 100%; max-width: 1280px; margin: auto; }
.conversation-section h2 { max-width: 960px; margin: 0 auto; font-size: clamp(40px, min(4.3vw, 6svh), 64px); line-height: 1.08; letter-spacing: -.045em; text-align: center; }
.conversation-lead { max-width: 720px; margin: 18px auto 0; color: #a1a1a6; font-size: clamp(18px, 2.2svh, 21px); line-height: 1.45; letter-spacing: -.02em; text-align: center; text-wrap: pretty; }
.warm-scene { display: grid; grid-template-columns: minmax(0, var(--conversation-art)) minmax(0, 580px); justify-content: center; gap: clamp(32px, 4vw, 64px); align-items: center; margin-top: clamp(24px, 3.5svh, 40px); }
.conversation-people { margin: 0; }
.conversation-people img { display: block; width: 100%; height: auto; }
.conversation-people figcaption { display: flex; justify-content: space-around; gap: 16px; margin-top: 4px; color: #cbd0d7; font-size: clamp(13px, 1.65svh, 16px); line-height: 1.4; }
.conversation-people figcaption span:first-child { color: #e7a375; }
/* The same light/blue message palette as the opening film. */
.warm-dialogue { margin: 0; padding: 0 7px; list-style: none; display: flex; flex-direction: column; gap: clamp(20px, 2.6svh, 26px); }
.warm-turn { position: relative; width: fit-content; max-width: 86%; margin: 0; padding: 10px 17px; border-radius: 21px; font-size: clamp(16px, min(1.2vw, 2.1svh), 18px); font-weight: 400; line-height: 1.3; letter-spacing: -.025em; }
.warm-speaker { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.warm-question { align-self: flex-start; color: #242520; background: linear-gradient(#fbfbf8, #eeefea); border-bottom-left-radius: 7px; box-shadow: inset 0 1px 0 #fff9; }
.warm-reply { align-self: flex-end; color: #fff; background: linear-gradient(#2894fc, #087aef); border-bottom-right-radius: 7px; box-shadow: inset 0 1px 0 #a4d9ff66; }
.warm-turn::after { content: ""; position: absolute; bottom: 0; width: 15px; height: 17px; clip-path: path("M7 0H15V17C12 17 10 16 8 14C6 17 2 17 0 16C5 13 7 8 7 0Z"); }
.warm-question::after { left: -6px; background: #eeefea; }
.warm-reply::after { right: -6px; background: #087aef; transform: scaleX(-1); }
@media (max-width: 1100px) {
 .conversation-section { padding-inline: 28px; }
 .warm-scene { gap: 28px; }
 .warm-turn { padding: 10px 16px; }
 .conversation-people figcaption { font-size: 13px; gap: 12px; }
}
@media (max-width: 800px) {
 .conversation-section { min-height: 0; padding: 64px 22px 72px; }
 .conversation-section h2 { font-size: clamp(32px, 7vw, 48px); }
 .conversation-lead { max-width: 540px; font-size: 18px; }
 .warm-scene { display: flex; flex-direction: column; gap: 36px; margin-top: 32px; }
 .conversation-people { width: min(380px, 100%); }
 .warm-dialogue { width: min(560px, 100%); gap: 22px; }
 .warm-turn { max-width: 89%; padding: 10px 16px; font-size: 16px; }
}
@media (max-width: 380px) {
 .warm-turn { max-width: 92%; padding: 10px 14px; font-size: 16px; }
}