/* Three buyer situations give the outreach route a reason to exist. */
.buyer-attention-story { width:100%; max-width:600px; margin:0; justify-self:center; min-width:0; --story-cycle:14s; }
.attention-branches { position:relative; width:100%; aspect-ratio:600/580; }
.attention-branch-lines { width:100%; height:100%; display:block; overflow:visible; position:relative; }
.attention-dot-sphere { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.branch-guide { fill:none; stroke:#f7f5ef25; stroke-width:1.2; }
.branch-center-ring { fill:none; stroke:#f7f5ef80; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:0 .014; }
.branch-route { fill:none; stroke:#f7f5ef; stroke-width:1.8; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.route-excluded { stroke-dasharray:.045 .065; stroke-dashoffset:0; opacity:.35; }
.route-pending { stroke-dasharray:.025 .055; stroke-dashoffset:0; opacity:.4; }
.route-relevant { animation:route-opens var(--story-cycle) infinite; }
.route-return { stroke:#e1e4da; stroke-width:1.3; animation:return-opens var(--story-cycle) infinite; }
.route-return-reveal { fill:none; stroke:white; stroke-width:6; stroke-dasharray:1; stroke-dashoffset:1; animation:return-opens var(--story-cycle) infinite; }
.conditional-return-route { fill:none; stroke:#e1e4da; stroke-width:1.3; stroke-dasharray:.025 .025; opacity:.75; }
.route-break { fill:var(--ink); stroke:#acb4a5; stroke-width:1.2; animation:route-closes var(--story-cycle) infinite; }
.route-pending-marker { fill:var(--ink); stroke:#d2d9cb; stroke-width:1.2; animation:route-waits var(--story-cycle) infinite; }
.route-pending-marker path { fill:none; stroke:#d2d9cb; }
.offer-center { position:absolute; left:50%; top:46.2%; width:21%; aspect-ratio:1; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--paper); border:0; border-radius:50%; background:radial-gradient(circle,#19201c 42%,#19201cf5 61%,#19201c00 72%); }
.offer-center>img { width:51%; height:auto; filter:drop-shadow(0 2px 1px #0005); }
.offer-center>span { font-size:14px; line-height:1.2; white-space:nowrap; }
.attention-branch { position:absolute; width:33%; transform:translateX(-50%); text-align:center; display:flex; flex-direction:column; align-items:center; }
.attention-branch.branch-outside { left:50%; top:5.6%; }
.attention-branch.branch-later { left:18.3%; top:68.4%; }
.attention-branch.branch-now { left:81.7%; top:68.4%; }
.branch-buyer { width:49px; height:49px; display:grid; place-items:center; border-radius:50%; background:#242e26; border:1px solid #f7f5ef50; margin-bottom:12px; position:relative; }
.branch-buyer>.icon { width:23px; height:23px; }
.attention-branch strong { display:block; font-size:15px; line-height:1.25; font-weight:500; color:var(--paper); }
.attention-branch p { font-size:12px; line-height:1.5; color:#b7c0b0; margin-top:7px; max-width:170px; }
.branch-outside .branch-buyer { animation:buyer-excluded var(--story-cycle) infinite; }
.branch-later .branch-buyer { border-style:dashed; }
.branch-now .branch-buyer { animation:buyer-noticed var(--story-cycle) infinite; }
.outreach-packet { position:absolute; left:50%; top:46.2%; width:31px; height:27px; margin:-13px 0 0 -15px; border:1px solid #e7eadf; background:var(--paper); color:var(--ink); display:grid; place-items:center; border-radius:7px; opacity:0; animation:outreach-travels var(--story-cycle) infinite; pointer-events:none; }
.outreach-packet .icon { width:17px; height:17px; }
.outreach-packet-svg { opacity:0; animation:outreach-route-message var(--story-cycle) infinite; }
.outreach-packet-svg rect { fill:var(--paper); stroke:#f7f5ef; }
.outreach-packet-svg path { fill:none; stroke:var(--ink); stroke-width:1.3; stroke-linejoin:round; }
@keyframes outreach-route-message { 0%,17% { opacity:0; transform:translate(357px,315px); } 20% { opacity:1; transform:translate(365px,322px); } 37% { opacity:1; transform:translate(490px,422px); } 41%,100% { opacity:0; transform:translate(490px,422px); } }
.conditional-path-label { font-size:11px; line-height:1.3; text-align:center; color:#aebba4; }
.conversation-destination { position:absolute; left:50%; top:90%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:max-content; max-width:100%; font-size:13px; color:#d8dece; }
.conversation-destination>div { display:flex; align-items:center; gap:8px; }
.conversation-destination .icon { width:19px; height:19px; }
.buyer-hero .buyer-attention-caption { margin:12px auto 0; max-width:460px; font-size:15px; line-height:1.65; text-align:center; color:#c1cab9; text-wrap:balance; }
@keyframes route-closes { 0% { opacity:0; transform:translateY(-7px); } 9%,94% { opacity:1; transform:none; } 100% { opacity:0; } }
@keyframes route-waits { 0%,8% { opacity:.25; } 15%,94% { opacity:1; } 100% { opacity:.25; } }
@keyframes route-opens { 0%,13% { stroke-dashoffset:1; opacity:.2; } 30%,90% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:1; opacity:.2; } }
@keyframes buyer-excluded { 0% { opacity:1; } 12%,92% { opacity:.5; } 100% { opacity:1; } }
@keyframes buyer-noticed { 0%,27%,100% { background:#242e26; color:var(--paper); border-color:#f7f5ef50; box-shadow:none; } 40%,89% { background:var(--paper); color:var(--ink); border-color:var(--paper); box-shadow:0 0 0 6px #f7f5ef0b; } }
@keyframes outreach-travels { 0%,17% { opacity:0; transform:translate(0,0); } 20% { opacity:1; transform:translate(35%,27%); } 37% { opacity:1; transform:translate(calc(var(--branch-x)*1px),calc(var(--branch-y)*1px)); } 41%,100% { opacity:0; transform:translate(calc(var(--branch-x)*1px),calc(var(--branch-y)*1px)); } }
@keyframes return-opens { 0%,41% { stroke-dashoffset:1; opacity:0; } 47% { opacity:.65; } 63%,90% { stroke-dashoffset:.12; opacity:.65; } 100% { stroke-dashoffset:1; opacity:0; } }
@keyframes conditional-appears { 0%,39%,100% { opacity:0; } 46%,90% { opacity:1; } }
[data-motion-scene][data-motion=paused] *,[data-motion-scene][data-motion=paused] *:before,[data-motion-scene][data-motion=paused] *:after { animation-play-state:paused!important; }
@media(max-width:1100px) { .branch-buyer { width:43px; height:43px; margin-bottom:10px; }.attention-branch strong { font-size:13px; }.attention-branch p { font-size:11px; margin-top:5px; }.offer-center { gap:11px; }.offer-center>span { font-size:12px; }.conversation-destination { font-size:12px; }.conditional-path-label { font-size:10px; }.buyer-hero .buyer-attention-caption { font-size:14px; } }
@media(max-width:850px) { .buyer-attention-story { max-width:550px; margin-top:15px; }.branch-buyer { width:47px; height:47px; }.attention-branch strong { font-size:15px; }.attention-branch p { font-size:13px; }.offer-center>span { font-size:14px; }.conversation-destination { font-size:14px; }.conditional-path-label { font-size:12px; }.buyer-hero .buyer-attention-caption { font-size:15px; } }
@media(max-width:600px) { .attention-branches { aspect-ratio:600/660; }.attention-branch-lines { height:87.88%; }.offer-center { top:40.6%; gap:9px; width:26%; }.offer-center>span { font-size:11px; }.attention-branch.branch-outside { top:4.9%; }.attention-branch.branch-later,.attention-branch.branch-now { top:60%; }.branch-buyer { width:31px; height:31px; margin-bottom:8px; }.branch-buyer>.icon { width:17px; height:17px; }.attention-branch strong { font-size:12px; }.attention-branch p { font-size:11px; line-height:1.4; margin-top:5px; }.conditional-path-label { left:54%; top:51.7%; width:35%; font-size:10px; }.outreach-packet { top:40.6%; width:25px; height:22px; margin:-11px 0 0 -12px; }.outreach-packet .icon { width:15px; height:15px; }.conversation-destination { top:88%; font-size:12px; }.buyer-hero .buyer-attention-caption { font-size:14px; margin-top:17px; } }
@media(max-width:360px) { .attention-branches { aspect-ratio:600/740; }.attention-branch-lines { height:78.38%; }.offer-center { top:36.2%; }.attention-branch.branch-outside { top:4.4%; }.attention-branch.branch-later,.attention-branch.branch-now { top:53.5%; }.attention-branch strong { font-size:12px; }.attention-branch p { font-size:11px; }.branch-buyer { width:28px; height:28px; }.offer-center>span { font-size:10px; }.offer-center { gap:7px; }.conditional-path-label { top:46%; font-size:10px; }.outreach-packet { top:36.2%; }.conversation-destination { top:86%; } }
@media(prefers-reduced-motion:reduce) { .buyer-attention-story * { animation:none!important; }.route-relevant { stroke-dashoffset:0; }.route-return { stroke-dashoffset:.12; opacity:.65; }.route-return-reveal { stroke-dashoffset:.12; opacity:1; }.branch-now .branch-buyer { background:var(--paper); color:var(--ink); }.branch-outside .branch-buyer { opacity:.5; }.conditional-path-label,.route-break,.route-pending-marker { opacity:1; }.outreach-packet { display:none; } }

/* Compare what a buyer can judge, instead of repeating three process steps. */
.relevance-section { background:var(--ink); color:var(--paper); }
.relevance-intro { display:grid; grid-template-columns:1.15fr 1fr; gap:9%; align-items:end; margin-bottom:60px; }
.relevance-intro h2 { max-width:560px; }
.relevance-intro>p { font-size:18px; line-height:1.7; color:#bdc6b7; }
.relevance-comparison { display:grid; grid-template-columns:1fr 1fr; gap:55px; --relevance-cycle:12s; }
.relevance-message { position:relative; padding-top:24px; height:calc(100% - 130px); min-height:390px; }
.context-paper { position:relative; z-index:2; border-radius:13px; border:1px solid #ffffff40; background:#222c24; padding:25px 28px 15px; min-height:100%; }
.context-paper-header { display:flex; align-items:center; gap:13px; margin-bottom:20px; }
.context-paper-header>.icon { width:22px; height:22px; }
.context-paper-header>img { width:27px; height:27px; padding:4px; border-radius:4px; background:var(--ink); }
.context-paper-header strong { font-size:21px; font-weight:500; line-height:1.2; }
.buyer-context-field { display:grid; grid-template-columns:1fr 1.2fr; gap:20px; border-top:1px solid #ffffff20; padding:17px 0; position:relative; }
.buyer-context-field dt { font-size:12px; line-height:1.5; color:#aab69f; }
.buyer-context-field dd { font-size:14px; line-height:1.5; color:#e5e8df; margin:0; }
.relevance-column>p { color:#bac4b2; font-size:15px; line-height:1.7; margin:25px 0 0; }
.relevance-after .context-paper { background:var(--paper); color:var(--ink); border-color:var(--paper); box-shadow:0 14px 32px #0002; }
.relevance-after .buyer-context-field { border-color:#19201c22; }
.relevance-after .buyer-context-field dt { color:#65705e; }
.relevance-after .buyer-context-field dd { color:var(--ink); position:relative; z-index:1; }
.relevance-after .buyer-context-field:after { content:''; position:absolute; inset:8px -10px; border-radius:4px; background:#19201c09; transform:scaleX(0); transform-origin:left; animation:context-is-visible var(--relevance-cycle) infinite; animation-delay:calc(var(--field)*.55s); }
.volume-copy { position:absolute; top:0; left:15px; right:15px; height:100%; border:1px solid #ffffff30; border-radius:12px; background:#202921; color:#a8b49e; padding:15px; opacity:.7; }
.volume-copy>.icon { width:19px; height:19px; }
.copy-back { top:0; left:26px; right:26px; animation:more-same-paper var(--relevance-cycle) infinite; }
.copy-front { top:12px; animation:more-same-paper var(--relevance-cycle) .5s infinite; }
.relevance-caption { margin-top:38px; padding-top:24px; border-top:1px solid #ffffff25; font-size:16px; color:#e5e9df; line-height:1.6; }
@keyframes more-same-paper { 0% { transform:translateY(18px); opacity:.25; } 22%,75% { transform:translateY(0); opacity:.7; } 100% { transform:translateY(18px); opacity:.25; } }
@keyframes context-is-visible { 0%,15% { transform:scaleX(0); opacity:0; } 35%,72% { transform:scaleX(1); opacity:1; } 92%,100% { transform:scaleX(1); opacity:0; } }
@media(max-width:1100px) { .relevance-comparison { gap:28px; }.context-paper { padding:22px 23px 12px; }.buyer-context-field { gap:15px; }.context-paper-header strong { font-size:19px; } }
@media(max-width:850px) { .relevance-intro { grid-template-columns:1fr; gap:24px; margin-bottom:40px; }.relevance-intro>p { max-width:640px; }.relevance-comparison { gap:25px; }.context-paper { padding:22px 20px 12px; }.buyer-context-field { grid-template-columns:1fr; gap:5px; padding:13px 0; }.relevance-message { min-height:440px; } }
@media(max-width:600px) { .relevance-comparison { grid-template-columns:1fr; gap:35px; }.relevance-message { height:auto; min-height:0; }.context-paper { min-height:0; padding:23px 22px 13px; }.buyer-context-field { grid-template-columns:1fr 1.2fr; gap:16px; padding:15px 0; }.context-paper-header strong { font-size:20px; }.relevance-intro>p { font-size:16px; }.relevance-column>p { font-size:14px; margin-top:21px; }.relevance-caption { font-size:15px; margin-top:32px; }.buyer-context-field dd { font-size:13px; }.buyer-context-field dt { font-size:11px; } }
@media(max-width:360px) { .context-paper { padding-inline:17px; }.buyer-context-field { gap:12px; grid-template-columns:.85fr 1.2fr; }.buyer-context-field dd { font-size:12px; }.context-paper-header strong { font-size:18px; } }
@media(prefers-reduced-motion:reduce) { .outreach-packet-svg { display:none; }.relevance-comparison *,.relevance-comparison *:after { animation:none!important; }.relevance-after .buyer-context-field:after { transform:scaleX(1); opacity:1; } }

@media(max-width:600px) { .attention-dot-sphere { height:87.88%; }.offer-center { width:23%; }.attention-branch.branch-outside { top:-1%; } }
@media(max-width:360px) { .attention-dot-sphere { height:78.38%; }.attention-branch.branch-outside { top:-2%; } }