/* Two sides of one conversation. Framed artifacts and restrained surfaces draw on
   Clay Playbook and Watermelon Hero 22; see THIRD-PARTY-NOTICES.md. */
.conversation-figure{width:100%;max-width:580px;min-width:0;margin:0;justify-self:center}
.conversation-composition{position:relative;aspect-ratio:560/530;isolation:isolate}
.conversation-gesture{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.conversation-route{fill:none;stroke:var(--paper);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.route-out,.route-in{stroke-dasharray:1;stroke-dashoffset:0;stroke-opacity:.75}
.conversation-decision{fill:var(--paper);stroke:var(--paper);stroke-width:1.5;vector-effect:non-scaling-stroke}
.conversation-card{position:absolute;border-radius:18px;padding:clamp(21px,2.1vw,29px);backface-visibility:hidden}
.outreach-plate{left:3%;top:5%;width:66%;height:49%;background:#222d26;border:1px solid #f7f5ef38;box-shadow:0 16px 36px #00000015;transform:rotate(-4deg);z-index:1}
.buyer-plate{left:27%;top:47%;width:68%;height:46%;background:var(--paper);color:var(--ink);border:1px solid #fff9;box-shadow:0 13px 35px #0002;transform:rotate(2deg);z-index:2}
.conversation-card-heading{display:flex;align-items:center;gap:11px}
.conversation-card-heading>.icon{width:24px;height:24px;flex:none}
.conversation-card-title{font-size:clamp(18px,1.65vw,23px);font-weight:500;letter-spacing:-.025em;line-height:1.2;margin:0;text-wrap:nowrap}
.conversation-card>p{font-size:clamp(13px,1.1vw,15px);line-height:1.45;margin:13px 0 20px;max-width:255px}
.outreach-plate>p{color:#c2cbbf}
.buyer-plate>p{color:#5d6857}
.conversation-lines{display:flex;flex-direction:column;gap:10px;max-width:215px;opacity:.23}
.conversation-lines i{height:5px;border-radius:4px;background:currentColor;display:block;width:100%}
.conversation-lines i:last-child{width:64%}
.conversation-signature{position:absolute;left:clamp(21px,2.1vw,29px);bottom:23px;opacity:.65}
.conversation-signature img{width:26px;height:26px}
.conversation-pair{width:49px;height:33px;position:absolute;right:25px;bottom:22px;stroke:var(--ink);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.conversation-figure>figcaption{font-size:15px;line-height:1.65;max-width:460px;margin:8px auto 0;text-wrap:balance;text-align:center;color:#bfc8bb}
.conversation-figure[data-ready=true] .outreach-plate{transform:translateY(var(--out-y,0px)) rotate(var(--out-angle,-4deg))}
.conversation-figure[data-ready=true] .buyer-plate{opacity:var(--reply-opacity,0);transform:translate(var(--reply-x,55px),var(--reply-y,30px)) rotate(var(--reply-angle,7deg)) scale(var(--reply-scale,.96))}
.conversation-figure[data-ready=true] .route-out{stroke-dashoffset:var(--out-stroke,1);opacity:var(--trace-opacity,1)}
.conversation-figure[data-ready=true] .route-in{stroke-dashoffset:var(--in-stroke,1);opacity:var(--trace-opacity,1)}
.conversation-figure[data-ready=true] .conversation-decision{fill:var(--decision-fill,var(--ink));opacity:var(--trace-opacity,1)}
.conversation-figure[data-ready=true] .buyer-plate .conversation-card-heading,.conversation-figure[data-ready=true] .buyer-plate>p{opacity:var(--reply-copy,0);transform:translateY(var(--reply-copy-y,5px))}
.outreach-comparison{background:var(--paper);border-block:1px solid #19201c15}
.outreach-comparison .comparison-section{margin-top:0}
.comparison-problem{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center;margin-bottom:38px}
.comparison-problem h2{font-size:clamp(34px,4vw,52px);font-weight:500;line-height:1.1;letter-spacing:-.04em;max-width:13ch;margin:0;text-wrap:balance}
.comparison-problem>p{font-size:17px;line-height:1.65;color:#4d584e;margin:0;max-width:540px}
.outreach-comparison .comparison-section>h3{font-size:20px;line-height:1.4;font-weight:500;letter-spacing:-.015em;max-width:none;margin:0 0 18px}
@media(max-width:850px){.comparison-problem{grid-template-columns:1fr;gap:19px;margin-bottom:28px}.comparison-problem>p{max-width:640px}}
@media(max-width:600px){.comparison-problem>p{font-size:16px}.outreach-comparison .comparison-section>h3{font-size:18px;margin-bottom:16px}}
@media(min-width:851px){.buyer-hero-grid{align-items:center}.conversation-figure{max-width:555px}.buyer-hero-grid>div:first-child{padding-block:10px}}
@media(max-width:1100px) and (min-width:851px){.conversation-card{padding:19px}.conversation-card-title{font-size:17px}.conversation-card-heading{gap:8px}.conversation-card-heading>.icon{width:19px;height:19px}.conversation-card>p{font-size:12px;margin:10px 0 15px}.conversation-lines{gap:8px}.conversation-lines i{height:4px}.conversation-signature{left:19px;bottom:16px}.conversation-signature img{width:22px;height:22px}.conversation-pair{width:35px;height:25px;right:19px;bottom:14px}}
@media(max-width:850px){.conversation-figure{max-width:570px;margin-top:20px}.conversation-card-title{font-size:23px}.conversation-card>p{font-size:15px}.conversation-card{padding:27px}.conversation-signature{left:27px}}
@media(max-width:600px){.conversation-composition{aspect-ratio:1/1.18}.conversation-card{padding:22px}.outreach-plate{left:3%;top:5%;width:78%;height:48%;transform:rotate(-3deg)}.buyer-plate{left:15%;top:48%;width:81%;height:46%}.conversation-card-title{font-size:20px}.conversation-card-heading{gap:9px}.conversation-card-heading>.icon{width:22px;height:22px}.conversation-card>p{font-size:14px;margin:11px 0 19px}.conversation-lines{gap:9px;max-width:200px}.conversation-lines i{height:4px}.conversation-signature{left:22px;bottom:19px}.conversation-signature img{width:24px;height:24px}.conversation-pair{width:39px;height:28px;right:21px;bottom:18px}.conversation-figure>figcaption{font-size:14px;max-width:350px;margin-top:15px}.outreach-comparison h2{font-size:36px;margin-bottom:0}}
@media(max-width:360px){.conversation-composition{aspect-ratio:1/1.35}.conversation-card{padding:18px}.conversation-card-title{font-size:17px}.conversation-card-heading{gap:7px}.conversation-card-heading>.icon{width:19px;height:19px}.conversation-card>p{font-size:13px;margin:11px 0 16px}.conversation-signature{left:18px;bottom:17px}.conversation-lines{gap:8px}.conversation-pair{right:18px;bottom:16px}}
@media(prefers-reduced-motion:reduce){.conversation-figure *, .conversation-figure *:before,.conversation-figure *:after{animation:none!important;transition:none!important}}

/* Both sides remain legible before the reply. The arrival fills the buyer side
   with ivory instead of leaving half the composition empty for each cycle. */
.conversation-figure[data-ready=true] .buyer-plate{background:var(--ink);color:var(--reply-ink);border-color:#f7f5ef38;box-shadow:none;isolation:isolate}
.conversation-figure[data-ready=true] .buyer-plate:before{content:'';position:absolute;inset:0;background:var(--paper);border-radius:inherit;opacity:var(--reply-paper);z-index:-1;box-shadow:0 13px 35px #0002}
.conversation-figure[data-ready=true] .buyer-plate>p{color:var(--reply-muted)}
.conversation-figure[data-ready=true] .buyer-plate .conversation-pair{stroke:currentColor}

.conversation-figure[data-ready=true] .conversation-composition{animation:conversation-enter .7s cubic-bezier(.22,1,.36,1) both}
@keyframes conversation-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.conversation-figure[data-ready=true] .conversation-composition{animation:none}}
@media(max-width:850px){.conversation-figure[data-ready=true] .conversation-composition{animation:none}}